@micromag/core 0.3.418 → 0.3.423

package/es/components.js

@@ -15,6 +15,7 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserve
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
+import queryString from 'query-string';
 import ReactDOM from 'react-dom';
 import isArray from 'lodash/isArray';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -1554,8 +1555,12 @@ var messages = defineMessages({
 });
 var propTypes$x = {
   page: PropTypes$1.number,
+  lastPage: PropTypes$1.number,
+  maxPages: PropTypes$1.number,
   total: PropTypes$1.number,
   url: PropTypes$1.string,
+  query: PropTypes$1.object,
+  // eslint-disable-line react/forbid-prop-types
   withPreviousNext: PropTypes$1.bool,
   className: PropTypes$1.string,
   paginationClassName: PropTypes$1.string,
@@ -1565,8 +1570,11 @@ var propTypes$x = {
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1575,9 +1583,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1585,11 +1596,38 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray(Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString.stringify(_objectSpread(_objectSpread({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray(selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray(selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {
@@ -3827,7 +3865,7 @@ var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
 var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
-var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "hidden"];
 var propTypes$7 = {
   screen: PropTypes.component.isRequired,
   screenState: PropTypes$1.string,
@@ -3836,7 +3874,8 @@ var propTypes$7 = {
   screenWidth: PropTypes$1.number,
   screenHeight: PropTypes$1.number,
   className: PropTypes$1.string,
-  withSize: PropTypes$1.bool
+  withSize: PropTypes$1.bool,
+  hidden: PropTypes$1.bool
 };
 var defaultProps$7 = {
   screenState: null,
@@ -3845,7 +3884,8 @@ var defaultProps$7 = {
   screenWidth: undefined,
   screenHeight: undefined,
   className: null,
-  withSize: false
+  withSize: false,
+  hidden: false
 };
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
@@ -3856,6 +3896,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     screenHeight = _ref.screenHeight,
     className = _ref.className,
     withSize = _ref.withSize,
+    hidden = _ref.hidden,
     props = _objectWithoutProperties(_ref, _excluded);
   var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
@@ -3865,13 +3906,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
   }, props));
+  var element = !hidden ? screenElement : /*#__PURE__*/React.createElement("div", null);
   var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
-  }, screenElement) : screenElement;
+  }, element) : element;
   return screenWithSize;
 };
 ScreenPreview.propTypes = propTypes$7;

package/es/index.js

@@ -1156,7 +1156,8 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$4 = ["medias"];
+var _excluded$4 = ["medias"],
+  _excluded2$2 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1165,8 +1166,23 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
+    this.parsedThemesCache = {};
   }
   _createClass(MediasParser, [{
+    key: "getParsedStoryTheme",
+    value: function getParsedStoryTheme(storyId, theme) {
+      if (typeof this.parsedThemesCache[storyId] === 'undefined') {
+        var _this$toPath = this.toPath(theme),
+          themeMedias = _this$toPath.medias,
+          newTheme = _objectWithoutProperties(_this$toPath, _excluded$4);
+        this.parsedThemesCache[storyId] = {
+          themeMedias: themeMedias,
+          newTheme: newTheme
+        };
+      }
+      return this.parsedThemesCache[storyId];
+    }
+  }, {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1187,6 +1203,8 @@ var MediasParser = /*#__PURE__*/function () {
         return story;
       }
       var _ref3 = story || {},
+        _ref3$id = _ref3.id,
+        storyId = _ref3$id === void 0 ? null : _ref3$id,
         _ref3$theme = _ref3.theme,
         theme = _ref3$theme === void 0 ? null : _ref3$theme,
         _ref3$components = _ref3.components,
@@ -1210,9 +1228,9 @@ var MediasParser = /*#__PURE__*/function () {
         newComponents = _components$reduce.components,
         medias = _components$reduce.medias;
       if (theme !== null) {
-        var _this$toPath = this.toPath(theme),
-          themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties(_this$toPath, _excluded$4);
+        var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
+          themeMedias = _this$getParsedStoryT.medias,
+          newTheme = _objectWithoutProperties(_this$getParsedStoryT, _excluded2$2);
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1641,6 +1659,7 @@ var ThemeParser = /*#__PURE__*/function () {
     _classCallCheck(this, ThemeParser);
     this.screensManager = screensManager;
     this.definitionCache = {};
+    this.fieldsCache = {};
   }
   _createClass(ThemeParser, [{
     key: "getDefinitionByScreen",
@@ -1657,6 +1676,54 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return this.definitionCache[type];
     }
+  }, {
+    key: "getFieldsForDefinition",
+    value: function getFieldsForDefinition(definition) {
+      var _ref2 = definition || {},
+        _ref2$id = _ref2.id,
+        definitionId = _ref2$id === void 0 ? null : _ref2$id,
+        _ref2$fields = _ref2.fields,
+        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+        _ref2$states = _ref2.states,
+        states = _ref2$states === void 0 ? [] : _ref2$states;
+      if (typeof this.fieldsCache[definitionId] === 'undefined') {
+        if (states === null || states.length === 0) {
+          this.fieldsCache[definitionId] = {
+            fields: fields
+          };
+        } else {
+          // TODO: test this
+          var finalFields = fields;
+          var repetableStates = [];
+          if (states !== null && states.length > 0) {
+            var nonRepetableStates = states.filter(function (_ref3) {
+              var _ref3$repeatable = _ref3.repeatable,
+                repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable;
+              return repeatable === false;
+            });
+            repetableStates = states.filter(function (_ref4) {
+              var _ref4$repeatable = _ref4.repeatable,
+                repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
+              return repeatable === true;
+            });
+            finalFields = nonRepetableStates.reduce(function (acc, it) {
+              var _ref5 = it || {},
+                _ref5$fields = _ref5.fields,
+                itemFields = _ref5$fields === void 0 ? [] : _ref5$fields;
+              if (itemFields !== null && itemFields.length > 0) {
+                return acc.concat(itemFields);
+              }
+              return acc;
+            }, finalFields);
+          }
+          this.fieldsCache[definitionId] = {
+            fields: finalFields,
+            repetableStates: repetableStates
+          };
+        }
+      }
+      return this.fieldsCache[definitionId];
+    }
   }, {
     key: "parse",
     value: function parse(story) {
@@ -1664,11 +1731,11 @@ var ThemeParser = /*#__PURE__*/function () {
       if (story === null) {
         return story;
       }
-      var _ref2 = story || {},
-        _ref2$theme = _ref2.theme,
-        theme = _ref2$theme === void 0 ? null : _ref2$theme,
-        _ref2$components = _ref2.components,
-        components = _ref2$components === void 0 ? null : _ref2$components;
+      var _ref6 = story || {},
+        _ref6$theme = _ref6.theme,
+        theme = _ref6$theme === void 0 ? null : _ref6$theme,
+        _ref6$components = _ref6.components,
+        components = _ref6$components === void 0 ? null : _ref6$components;
       if (theme === null || components === null) {
         return story;
       }
@@ -1682,6 +1749,33 @@ var ThemeParser = /*#__PURE__*/function () {
         themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
         _theme$boxStyles = theme.boxStyles,
         themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
+
+      // Speed test
+      // const newComponents = [...components];
+      // for (let index = 0; index < components.length; index += 1) {
+      //     const screen = components[index] || {};
+      //     const { type } = screen;
+      //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
+      //     const newScreen = this.parseScreen(
+      //         definition,
+      //         screen,
+      //         themeScreen,
+      //         themeBackground,
+      //         themeColors,
+      //         themeTextStyles,
+      //         themeBoxStyles,
+      //     );
+
+      //     if (newScreen !== screen || themeScreen !== null) {
+      //         newComponents[index] = {
+      //             ...themeScreen,
+      //             ...newScreen,
+      //         };
+      //     }
+      // }
+      // story.components = newComponents;
+      // return story;
+
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
         var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
@@ -1700,36 +1794,11 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _ref3 = definition || {},
-        _ref3$fields = _ref3.fields,
-        fields = _ref3$fields === void 0 ? [] : _ref3$fields,
-        _ref3$states = _ref3.states,
-        states = _ref3$states === void 0 ? [] : _ref3$states;
-
-      // TODO: test this
-      var finalFields = fields;
-      var repetableStates = [];
-      if (states !== null && states.length > 0) {
-        var nonRepetableStates = states.filter(function (_ref4) {
-          var _ref4$repeatable = _ref4.repeatable,
-            repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
-          return repeatable === false;
-        });
-        repetableStates = states.filter(function (_ref5) {
-          var _ref5$repeatable = _ref5.repeatable,
-            repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable;
-          return repeatable === true;
-        });
-        finalFields = nonRepetableStates.reduce(function (acc, it) {
-          var _ref6 = it || {},
-            _ref6$fields = _ref6.fields,
-            itemFields = _ref6$fields === void 0 ? [] : _ref6$fields;
-          if (itemFields !== null && itemFields.length > 0) {
-            return acc.concat(itemFields);
-          }
-          return acc;
-        }, finalFields);
-      }
+      var _this$getFieldsForDef = this.getFieldsForDefinition(definition),
+        _this$getFieldsForDef2 = _this$getFieldsForDef.fields,
+        fields = _this$getFieldsForDef2 === void 0 ? null : _this$getFieldsForDef2,
+        _this$getFieldsForDef3 = _this$getFieldsForDef.repetableStates,
+        repetableStates = _this$getFieldsForDef3 === void 0 ? null : _this$getFieldsForDef3;
       var newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread(_objectSpread({}, themeBackground), newThemeValue.background);
@@ -1738,23 +1807,33 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
         var repetableState = null;
-        if (repetableStates.length > 0) {
+        if (repetableStates !== null && repetableStates.length > 0) {
           repetableState = repetableStates.find(function (_ref7) {
             var _ref7$id = _ref7.id,
               stateId = _ref7$id === void 0 ? null : _ref7$id;
             return stateId !== null && stateId === key;
           }) || null;
         }
-        var fieldDefinition = finalFields.find(function (it) {
+        var fieldDefinition = (fields || null).find(function (it) {
           return it.name === key;
         }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
 
+        // Try for early return
+        var _ref8 = fieldDefinition || {},
+          _ref8$theme = _ref8.theme,
+          theme = _ref8$theme === void 0 ? null : _ref8$theme;
+        if ((theme === null || !isObject(theme)) && fields === null) {
+          return _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, fieldValue));
+        }
+
         // console.log('start', key, fieldValue);
         var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
         // console.log('result', newFieldValue);
 
+        // const newFieldValue = fieldValue;
+
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
       }, value);
@@ -1764,12 +1843,14 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(value, definition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    value: function parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _this3 = this;
-      var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme,
-        _definition$fields = definition.fields,
-        definitionFields = _definition$fields === void 0 ? null : _definition$fields;
+      var _fieldDefinition$them = fieldDefinition.theme,
+        fieldTheme = _fieldDefinition$them === void 0 ? null : _fieldDefinition$them,
+        _fieldDefinition$fiel = fieldDefinition.fields,
+        definitionFields = _fieldDefinition$fiel === void 0 ? null : _fieldDefinition$fiel;
+
+      // There are sub-fields in this definition
       if (definitionFields !== null && value !== null) {
         return isArray(value) ? value.map(function (innerFieldValue) {
           if (innerFieldValue === null) {
@@ -1792,13 +1873,13 @@ var ThemeParser = /*#__PURE__*/function () {
             if (!isObject(innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref8 = fieldTheme[innerFieldName] || {},
-              _ref8$textStyle = _ref8.textStyle,
-              innerFieldTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle,
-              _ref8$color = _ref8.color,
-              innerFieldColor = _ref8$color === void 0 ? null : _ref8$color,
-              _ref8$boxStyle = _ref8.boxStyle,
-              innerFieldBoxStyle = _ref8$boxStyle === void 0 ? null : _ref8$boxStyle;
+            var _ref9 = fieldTheme[innerFieldName] || {},
+              _ref9$textStyle = _ref9.textStyle,
+              innerFieldTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
+              _ref9$color = _ref9.color,
+              innerFieldColor = _ref9$color === void 0 ? null : _ref9$color,
+              _ref9$boxStyle = _ref9.boxStyle,
+              innerFieldBoxStyle = _ref9$boxStyle === void 0 ? null : _ref9$boxStyle;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
@@ -1838,9 +1919,9 @@ var ThemeParser = /*#__PURE__*/function () {
         var innerDefinition = isArray(fieldsOrDefinition) ? fieldsOrDefinition.find(function (it) {
           return it.name === innerFieldName;
         }) || null : fieldsOrDefinition;
-        var _ref9 = innerDefinition || {},
-          _ref9$theme = _ref9.theme,
-          idfTheme = _ref9$theme === void 0 ? null : _ref9$theme;
+        var _ref10 = innerDefinition || {},
+          _ref10$theme = _ref10.theme,
+          idfTheme = _ref10$theme === void 0 ? null : _ref10$theme;
         var innerValue = value[innerFieldName];
 
         // For items fields
@@ -1871,14 +1952,14 @@ var ThemeParser = /*#__PURE__*/function () {
       var _this5 = this;
       if (isObject(initialValue) || isObject(fieldTheme)) {
         var value = initialValue || null;
-        var _ref10 = fieldTheme || {},
-          _ref10$textStyle = _ref10.textStyle,
-          fieldTextStyleName = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
-          _ref10$color = _ref10.color,
-          fieldColorName = _ref10$color === void 0 ? null : _ref10$color,
-          _ref10$boxStyle = _ref10.boxStyle,
-          fieldBoxStyleName = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
-          otherProps = _objectWithoutProperties(_ref10, _excluded$1);
+        var _ref11 = fieldTheme || {},
+          _ref11$textStyle = _ref11.textStyle,
+          fieldTextStyleName = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
+          _ref11$color = _ref11.color,
+          fieldColorName = _ref11$color === void 0 ? null : _ref11$color,
+          _ref11$boxStyle = _ref11.boxStyle,
+          fieldBoxStyleName = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
+          otherProps = _objectWithoutProperties(_ref11, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
           return value;
         }
@@ -1890,11 +1971,11 @@ var ThemeParser = /*#__PURE__*/function () {
             return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
           }, {});
         }
-        var _ref12 = value || {},
-          _ref12$textStyle = _ref12.textStyle,
-          valueTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
-          _ref12$boxStyle = _ref12.boxStyle,
-          valueBoxStyle = _ref12$boxStyle === void 0 ? null : _ref12$boxStyle;
+        var _ref13 = value || {},
+          _ref13$textStyle = _ref13.textStyle,
+          valueTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
+          _ref13$boxStyle = _ref13.boxStyle,
+          valueBoxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/lib/components.js

@@ -19,6 +19,7 @@ var hooks = require('@micromag/core/hooks');
 var contexts = require('@micromag/core/contexts');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
+var queryString = require('query-string');
 var ReactDOM = require('react-dom');
 var isArray = require('lodash/isArray');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
@@ -76,6 +77,7 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumab
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var queryString__default = /*#__PURE__*/_interopDefaultLegacy(queryString);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
@@ -1595,8 +1597,12 @@ var messages = reactIntl.defineMessages({
 });
 var propTypes$x = {
   page: PropTypes__default["default"].number,
+  lastPage: PropTypes__default["default"].number,
+  maxPages: PropTypes__default["default"].number,
   total: PropTypes__default["default"].number,
   url: PropTypes__default["default"].string,
+  query: PropTypes__default["default"].object,
+  // eslint-disable-line react/forbid-prop-types
   withPreviousNext: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   paginationClassName: PropTypes__default["default"].string,
@@ -1606,8 +1612,11 @@ var propTypes$x = {
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1616,9 +1625,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1626,11 +1638,38 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = React.useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray__default["default"](Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString__default["default"].stringify(_objectSpread__default["default"](_objectSpread__default["default"]({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray__default["default"](selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray__default["default"](selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -3868,7 +3907,7 @@ var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder)
 
 var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
-var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "hidden"];
 var propTypes$7 = {
   screen: core.PropTypes.component.isRequired,
   screenState: PropTypes__default["default"].string,
@@ -3877,7 +3916,8 @@ var propTypes$7 = {
   screenWidth: PropTypes__default["default"].number,
   screenHeight: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,
-  withSize: PropTypes__default["default"].bool
+  withSize: PropTypes__default["default"].bool,
+  hidden: PropTypes__default["default"].bool
 };
 var defaultProps$7 = {
   screenState: null,
@@ -3886,7 +3926,8 @@ var defaultProps$7 = {
   screenWidth: undefined,
   screenHeight: undefined,
   className: null,
-  withSize: false
+  withSize: false,
+  hidden: false
 };
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
@@ -3897,6 +3938,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     screenHeight = _ref.screenHeight,
     className = _ref.className,
     withSize = _ref.withSize,
+    hidden = _ref.hidden,
     props = _objectWithoutProperties__default["default"](_ref, _excluded);
   var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
@@ -3906,13 +3948,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
+  var element = !hidden ? screenElement : /*#__PURE__*/React__default["default"].createElement("div", null);
   var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
-  }, screenElement) : screenElement;
+  }, element) : element;
   return screenWithSize;
 };
 ScreenPreview.propTypes = propTypes$7;

package/lib/index.js

@@ -1183,7 +1183,8 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$4 = ["medias"];
+var _excluded$4 = ["medias"],
+  _excluded2$2 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1192,8 +1193,23 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
+    this.parsedThemesCache = {};
   }
   _createClass__default["default"](MediasParser, [{
+    key: "getParsedStoryTheme",
+    value: function getParsedStoryTheme(storyId, theme) {
+      if (typeof this.parsedThemesCache[storyId] === 'undefined') {
+        var _this$toPath = this.toPath(theme),
+          themeMedias = _this$toPath.medias,
+          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$4);
+        this.parsedThemesCache[storyId] = {
+          themeMedias: themeMedias,
+          newTheme: newTheme
+        };
+      }
+      return this.parsedThemesCache[storyId];
+    }
+  }, {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1214,6 +1230,8 @@ var MediasParser = /*#__PURE__*/function () {
         return story;
       }
       var _ref3 = story || {},
+        _ref3$id = _ref3.id,
+        storyId = _ref3$id === void 0 ? null : _ref3$id,
         _ref3$theme = _ref3.theme,
         theme = _ref3$theme === void 0 ? null : _ref3$theme,
         _ref3$components = _ref3.components,
@@ -1237,9 +1255,9 @@ var MediasParser = /*#__PURE__*/function () {
         newComponents = _components$reduce.components,
         medias = _components$reduce.medias;
       if (theme !== null) {
-        var _this$toPath = this.toPath(theme),
-          themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$4);
+        var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
+          themeMedias = _this$getParsedStoryT.medias,
+          newTheme = _objectWithoutProperties__default["default"](_this$getParsedStoryT, _excluded2$2);
         return medias !== null || themeMedias !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1668,6 +1686,7 @@ var ThemeParser = /*#__PURE__*/function () {
     _classCallCheck__default["default"](this, ThemeParser);
     this.screensManager = screensManager;
     this.definitionCache = {};
+    this.fieldsCache = {};
   }
   _createClass__default["default"](ThemeParser, [{
     key: "getDefinitionByScreen",
@@ -1684,6 +1703,54 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return this.definitionCache[type];
     }
+  }, {
+    key: "getFieldsForDefinition",
+    value: function getFieldsForDefinition(definition) {
+      var _ref2 = definition || {},
+        _ref2$id = _ref2.id,
+        definitionId = _ref2$id === void 0 ? null : _ref2$id,
+        _ref2$fields = _ref2.fields,
+        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+        _ref2$states = _ref2.states,
+        states = _ref2$states === void 0 ? [] : _ref2$states;
+      if (typeof this.fieldsCache[definitionId] === 'undefined') {
+        if (states === null || states.length === 0) {
+          this.fieldsCache[definitionId] = {
+            fields: fields
+          };
+        } else {
+          // TODO: test this
+          var finalFields = fields;
+          var repetableStates = [];
+          if (states !== null && states.length > 0) {
+            var nonRepetableStates = states.filter(function (_ref3) {
+              var _ref3$repeatable = _ref3.repeatable,
+                repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable;
+              return repeatable === false;
+            });
+            repetableStates = states.filter(function (_ref4) {
+              var _ref4$repeatable = _ref4.repeatable,
+                repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
+              return repeatable === true;
+            });
+            finalFields = nonRepetableStates.reduce(function (acc, it) {
+              var _ref5 = it || {},
+                _ref5$fields = _ref5.fields,
+                itemFields = _ref5$fields === void 0 ? [] : _ref5$fields;
+              if (itemFields !== null && itemFields.length > 0) {
+                return acc.concat(itemFields);
+              }
+              return acc;
+            }, finalFields);
+          }
+          this.fieldsCache[definitionId] = {
+            fields: finalFields,
+            repetableStates: repetableStates
+          };
+        }
+      }
+      return this.fieldsCache[definitionId];
+    }
   }, {
     key: "parse",
     value: function parse(story) {
@@ -1691,11 +1758,11 @@ var ThemeParser = /*#__PURE__*/function () {
       if (story === null) {
         return story;
       }
-      var _ref2 = story || {},
-        _ref2$theme = _ref2.theme,
-        theme = _ref2$theme === void 0 ? null : _ref2$theme,
-        _ref2$components = _ref2.components,
-        components = _ref2$components === void 0 ? null : _ref2$components;
+      var _ref6 = story || {},
+        _ref6$theme = _ref6.theme,
+        theme = _ref6$theme === void 0 ? null : _ref6$theme,
+        _ref6$components = _ref6.components,
+        components = _ref6$components === void 0 ? null : _ref6$components;
       if (theme === null || components === null) {
         return story;
       }
@@ -1709,6 +1776,33 @@ var ThemeParser = /*#__PURE__*/function () {
         themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
         _theme$boxStyles = theme.boxStyles,
         themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
+
+      // Speed test
+      // const newComponents = [...components];
+      // for (let index = 0; index < components.length; index += 1) {
+      //     const screen = components[index] || {};
+      //     const { type } = screen;
+      //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
+      //     const newScreen = this.parseScreen(
+      //         definition,
+      //         screen,
+      //         themeScreen,
+      //         themeBackground,
+      //         themeColors,
+      //         themeTextStyles,
+      //         themeBoxStyles,
+      //     );
+
+      //     if (newScreen !== screen || themeScreen !== null) {
+      //         newComponents[index] = {
+      //             ...themeScreen,
+      //             ...newScreen,
+      //         };
+      //     }
+      // }
+      // story.components = newComponents;
+      // return story;
+
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
         var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
@@ -1727,36 +1821,11 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _ref3 = definition || {},
-        _ref3$fields = _ref3.fields,
-        fields = _ref3$fields === void 0 ? [] : _ref3$fields,
-        _ref3$states = _ref3.states,
-        states = _ref3$states === void 0 ? [] : _ref3$states;
-
-      // TODO: test this
-      var finalFields = fields;
-      var repetableStates = [];
-      if (states !== null && states.length > 0) {
-        var nonRepetableStates = states.filter(function (_ref4) {
-          var _ref4$repeatable = _ref4.repeatable,
-            repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
-          return repeatable === false;
-        });
-        repetableStates = states.filter(function (_ref5) {
-          var _ref5$repeatable = _ref5.repeatable,
-            repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable;
-          return repeatable === true;
-        });
-        finalFields = nonRepetableStates.reduce(function (acc, it) {
-          var _ref6 = it || {},
-            _ref6$fields = _ref6.fields,
-            itemFields = _ref6$fields === void 0 ? [] : _ref6$fields;
-          if (itemFields !== null && itemFields.length > 0) {
-            return acc.concat(itemFields);
-          }
-          return acc;
-        }, finalFields);
-      }
+      var _this$getFieldsForDef = this.getFieldsForDefinition(definition),
+        _this$getFieldsForDef2 = _this$getFieldsForDef.fields,
+        fields = _this$getFieldsForDef2 === void 0 ? null : _this$getFieldsForDef2,
+        _this$getFieldsForDef3 = _this$getFieldsForDef.repetableStates,
+        repetableStates = _this$getFieldsForDef3 === void 0 ? null : _this$getFieldsForDef3;
       var newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread__default["default"](_objectSpread__default["default"]({}, themeBackground), newThemeValue.background);
@@ -1765,23 +1834,33 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
         var repetableState = null;
-        if (repetableStates.length > 0) {
+        if (repetableStates !== null && repetableStates.length > 0) {
           repetableState = repetableStates.find(function (_ref7) {
             var _ref7$id = _ref7.id,
               stateId = _ref7$id === void 0 ? null : _ref7$id;
             return stateId !== null && stateId === key;
           }) || null;
         }
-        var fieldDefinition = finalFields.find(function (it) {
+        var fieldDefinition = (fields || null).find(function (it) {
           return it.name === key;
         }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
 
+        // Try for early return
+        var _ref8 = fieldDefinition || {},
+          _ref8$theme = _ref8.theme,
+          theme = _ref8$theme === void 0 ? null : _ref8$theme;
+        if ((theme === null || !isObject__default["default"](theme)) && fields === null) {
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, fieldValue));
+        }
+
         // console.log('start', key, fieldValue);
         var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
         // console.log('result', newFieldValue);
 
+        // const newFieldValue = fieldValue;
+
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, newFieldValue)) : currentValue;
       }, value);
@@ -1791,12 +1870,14 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(value, definition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    value: function parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _this3 = this;
-      var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme,
-        _definition$fields = definition.fields,
-        definitionFields = _definition$fields === void 0 ? null : _definition$fields;
+      var _fieldDefinition$them = fieldDefinition.theme,
+        fieldTheme = _fieldDefinition$them === void 0 ? null : _fieldDefinition$them,
+        _fieldDefinition$fiel = fieldDefinition.fields,
+        definitionFields = _fieldDefinition$fiel === void 0 ? null : _fieldDefinition$fiel;
+
+      // There are sub-fields in this definition
       if (definitionFields !== null && value !== null) {
         return isArray__default["default"](value) ? value.map(function (innerFieldValue) {
           if (innerFieldValue === null) {
@@ -1819,13 +1900,13 @@ var ThemeParser = /*#__PURE__*/function () {
             if (!isObject__default["default"](innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref8 = fieldTheme[innerFieldName] || {},
-              _ref8$textStyle = _ref8.textStyle,
-              innerFieldTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle,
-              _ref8$color = _ref8.color,
-              innerFieldColor = _ref8$color === void 0 ? null : _ref8$color,
-              _ref8$boxStyle = _ref8.boxStyle,
-              innerFieldBoxStyle = _ref8$boxStyle === void 0 ? null : _ref8$boxStyle;
+            var _ref9 = fieldTheme[innerFieldName] || {},
+              _ref9$textStyle = _ref9.textStyle,
+              innerFieldTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
+              _ref9$color = _ref9.color,
+              innerFieldColor = _ref9$color === void 0 ? null : _ref9$color,
+              _ref9$boxStyle = _ref9.boxStyle,
+              innerFieldBoxStyle = _ref9$boxStyle === void 0 ? null : _ref9$boxStyle;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
@@ -1865,9 +1946,9 @@ var ThemeParser = /*#__PURE__*/function () {
         var innerDefinition = isArray__default["default"](fieldsOrDefinition) ? fieldsOrDefinition.find(function (it) {
           return it.name === innerFieldName;
         }) || null : fieldsOrDefinition;
-        var _ref9 = innerDefinition || {},
-          _ref9$theme = _ref9.theme,
-          idfTheme = _ref9$theme === void 0 ? null : _ref9$theme;
+        var _ref10 = innerDefinition || {},
+          _ref10$theme = _ref10.theme,
+          idfTheme = _ref10$theme === void 0 ? null : _ref10$theme;
         var innerValue = value[innerFieldName];
 
         // For items fields
@@ -1898,14 +1979,14 @@ var ThemeParser = /*#__PURE__*/function () {
       var _this5 = this;
       if (isObject__default["default"](initialValue) || isObject__default["default"](fieldTheme)) {
         var value = initialValue || null;
-        var _ref10 = fieldTheme || {},
-          _ref10$textStyle = _ref10.textStyle,
-          fieldTextStyleName = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
-          _ref10$color = _ref10.color,
-          fieldColorName = _ref10$color === void 0 ? null : _ref10$color,
-          _ref10$boxStyle = _ref10.boxStyle,
-          fieldBoxStyleName = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
-          otherProps = _objectWithoutProperties__default["default"](_ref10, _excluded$1);
+        var _ref11 = fieldTheme || {},
+          _ref11$textStyle = _ref11.textStyle,
+          fieldTextStyleName = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
+          _ref11$color = _ref11.color,
+          fieldColorName = _ref11$color === void 0 ? null : _ref11$color,
+          _ref11$boxStyle = _ref11.boxStyle,
+          fieldBoxStyleName = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
+          otherProps = _objectWithoutProperties__default["default"](_ref11, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
           return value;
         }
@@ -1917,11 +1998,11 @@ var ThemeParser = /*#__PURE__*/function () {
             return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
           }, {});
         }
-        var _ref12 = value || {},
-          _ref12$textStyle = _ref12.textStyle,
-          valueTextStyle = _ref12$textStyle === void 0 ? null : _ref12$textStyle,
-          _ref12$boxStyle = _ref12.boxStyle,
-          valueBoxStyle = _ref12$boxStyle === void 0 ? null : _ref12$boxStyle;
+        var _ref13 = value || {},
+          _ref13$textStyle = _ref13.textStyle,
+          valueTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
+          _ref13$boxStyle = _ref13.boxStyle,
+          valueBoxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.418",
+    "version": "0.3.423",
     "private": false,
     "description": "",
     "keywords": [
@@ -119,6 +119,7 @@
         "lodash": "^4.17.21",
         "param-case": "^3.0.4",
         "prop-types": "^15.7.2",
+        "query-string": "^6.13.7",
         "raf": "^3.4.1",
         "react-helmet": "^6.1.0",
         "react-intl": "^5.12.1",
@@ -136,5 +137,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b88d067aa5c016ffdbc031902e1c387160d51f9b"
+    "gitHead": "c02e69c23fd099d5684bc0b69e02f19825cecfd2"
 }