@micromag/viewer 0.3.113 → 0.3.114

package/es/index.js

@@ -865,6 +865,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var onScrolledNotBottom = useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
+  var finalItems = useMemo(function () {
+    return !focusable ? items.slice(0, 3) : items;
+  }, [items, focusable]);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
     style: _objectSpread(_objectSpread(_objectSpread({}, backgroundColorStyle), brandImageStyle), {}, {
@@ -947,8 +950,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$4.nav
   }, /*#__PURE__*/React.createElement("ul", {
     className: styles$4.items
-  }, items.map(function (item, index) {
-    var _item$current = item.current,
+  }, finalItems.map(function (item, index) {
+    var screenId = item.screenId,
+        _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
         screen = item.screen;
         item.count;
@@ -972,7 +976,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     })) : '');
     return /*#__PURE__*/React.createElement("li", {
       className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current)]),
-      key: "item-".concat(index),
+      key: "item-".concat(screenId),
       style: {
         width: "".concat(100 / thumbsPerLine, "%")
       }
@@ -1427,6 +1431,7 @@ var propTypes$2 = {
   onScreenChange: PropTypes.func,
   tapNextScreenWidthPercent: PropTypes.number,
   neighborScreensActive: PropTypes.number,
+  neighborScreensMounted: PropTypes.number,
   storyIsParsed: PropTypes.bool,
   landscapeScreenMargin: PropTypes.number,
   withMetadata: PropTypes.bool,
@@ -1463,7 +1468,8 @@ var defaultProps$2 = {
   renderContext: 'view',
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
-  neighborScreensActive: 2,
+  neighborScreensActive: 1,
+  neighborScreensMounted: 2,
   storyIsParsed: false,
   landscapeScreenMargin: 20,
   withMetadata: false,
@@ -1500,6 +1506,7 @@ var Viewer = function Viewer(_ref) {
       onScreenChange = _ref.onScreenChange,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
       neighborScreensActive = _ref.neighborScreensActive,
+      neighborScreensMounted = _ref.neighborScreensMounted,
       storyIsParsed = _ref.storyIsParsed,
       landscapeScreenMargin = _ref.landscapeScreenMargin,
       withMetadata = _ref.withMetadata,
@@ -1799,6 +1806,21 @@ var Viewer = function Viewer(_ref) {
       _ref11$height = _ref11.height,
       menuDotsContainerHeight = _ref11$height === void 0 ? 0 : _ref11$height;
 
+  var _useMemo = useMemo(function () {
+    return neighborScreensMounted !== null ? {
+      startIndex: Math.max(screenIndex - (neighborScreensActive + neighborScreensMounted), 0),
+      endIndex: Math.min(screenIndex + (neighborScreensActive + neighborScreensMounted), screensCount - 1)
+    } : {
+      startIndex: 0,
+      endIndex: screensCount - 1
+    };
+  }, [screenIndex, neighborScreensActive, neighborScreensMounted, screensCount]),
+      mountedScreenStartIndex = _useMemo.startIndex,
+      mountedScreenEndIndex = _useMemo.endIndex;
+
+  var mountedScreens = useMemo(function () {
+    return neighborScreensMounted != null ? screens.slice(mountedScreenStartIndex, mountedScreenEndIndex) : screens;
+  }, [screens, mountedScreenStartIndex, mountedScreenEndIndex, neighborScreensActive, neighborScreensMounted]);
   return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ViewerProvider, {
@@ -1845,11 +1867,12 @@ var Viewer = function Viewer(_ref) {
     ref: contentRef,
     className: styles$8.content,
     onClick: onClickContent
-  }, screens.map(function (scr, i) {
+  }, mountedScreens.map(function (scr, mountedIndex) {
     var _ref13;
 
+    var i = mountedScreenStartIndex + mountedIndex;
     var current = i === parseInt(screenIndex, 10);
-    var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
+    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
     var viewerScreen = /*#__PURE__*/React.createElement(ViewerScreen, {
       screen: scr,
       screenState: current ? screenState : null,

package/lib/index.js

@@ -883,6 +883,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
   var onScrolledNotBottom = React.useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
+  var finalItems = React.useMemo(function () {
+    return !focusable ? items.slice(0, 3) : items;
+  }, [items, focusable]);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className !== null)]),
     style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, backgroundColorStyle), brandImageStyle), {}, {
@@ -965,8 +968,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$4.nav
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: styles$4.items
-  }, items.map(function (item, index) {
-    var _item$current = item.current,
+  }, finalItems.map(function (item, index) {
+    var screenId = item.screenId,
+        _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
         screen = item.screen;
         item.count;
@@ -990,7 +994,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     })) : '');
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current)]),
-      key: "item-".concat(index),
+      key: "item-".concat(screenId),
       style: {
         width: "".concat(100 / thumbsPerLine, "%")
       }
@@ -1445,6 +1449,7 @@ var propTypes$2 = {
   onScreenChange: PropTypes__default["default"].func,
   tapNextScreenWidthPercent: PropTypes__default["default"].number,
   neighborScreensActive: PropTypes__default["default"].number,
+  neighborScreensMounted: PropTypes__default["default"].number,
   storyIsParsed: PropTypes__default["default"].bool,
   landscapeScreenMargin: PropTypes__default["default"].number,
   withMetadata: PropTypes__default["default"].bool,
@@ -1481,7 +1486,8 @@ var defaultProps$2 = {
   renderContext: 'view',
   onScreenChange: null,
   tapNextScreenWidthPercent: 0.8,
-  neighborScreensActive: 2,
+  neighborScreensActive: 1,
+  neighborScreensMounted: 2,
   storyIsParsed: false,
   landscapeScreenMargin: 20,
   withMetadata: false,
@@ -1518,6 +1524,7 @@ var Viewer = function Viewer(_ref) {
       onScreenChange = _ref.onScreenChange,
       tapNextScreenWidthPercent = _ref.tapNextScreenWidthPercent,
       neighborScreensActive = _ref.neighborScreensActive,
+      neighborScreensMounted = _ref.neighborScreensMounted,
       storyIsParsed = _ref.storyIsParsed,
       landscapeScreenMargin = _ref.landscapeScreenMargin,
       withMetadata = _ref.withMetadata,
@@ -1817,6 +1824,21 @@ var Viewer = function Viewer(_ref) {
       _ref11$height = _ref11.height,
       menuDotsContainerHeight = _ref11$height === void 0 ? 0 : _ref11$height;
 
+  var _useMemo = React.useMemo(function () {
+    return neighborScreensMounted !== null ? {
+      startIndex: Math.max(screenIndex - (neighborScreensActive + neighborScreensMounted), 0),
+      endIndex: Math.min(screenIndex + (neighborScreensActive + neighborScreensMounted), screensCount - 1)
+    } : {
+      startIndex: 0,
+      endIndex: screensCount - 1
+    };
+  }, [screenIndex, neighborScreensActive, neighborScreensMounted, screensCount]),
+      mountedScreenStartIndex = _useMemo.startIndex,
+      mountedScreenEndIndex = _useMemo.endIndex;
+
+  var mountedScreens = React.useMemo(function () {
+    return neighborScreensMounted != null ? screens.slice(mountedScreenStartIndex, mountedScreenEndIndex) : screens;
+  }, [screens, mountedScreenStartIndex, mountedScreenEndIndex, neighborScreensActive, neighborScreensMounted]);
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
@@ -1863,11 +1885,12 @@ var Viewer = function Viewer(_ref) {
     ref: contentRef,
     className: styles$8.content,
     onClick: onClickContent
-  }, screens.map(function (scr, i) {
+  }, mountedScreens.map(function (scr, mountedIndex) {
     var _ref13;
 
+    var i = mountedScreenStartIndex + mountedIndex;
     var current = i === parseInt(screenIndex, 10);
-    var active = i > screenIndex - neighborScreensActive && i < screenIndex + neighborScreensActive;
+    var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
     var viewerScreen = /*#__PURE__*/React__default["default"].createElement(ViewerScreen, {
       screen: scr,
       screenState: current ? screenState : null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.113",
+    "version": "0.3.114",
     "description": "",
     "keywords": [
         "javascript"
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4c6a28244ace23a23cfe3a61429c79afb04750ca"
+    "gitHead": "53869315306f72521b9e5c8e68570e4991564f61"
 }