@micromag/core 0.3.410 → 0.3.418

package/es/index.js

@@ -1700,8 +1700,36 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _definition$fields = definition.fields,
-        fields = _definition$fields === void 0 ? [] : _definition$fields;
+      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 newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread(_objectSpread({}, themeBackground), newThemeValue.background);
@@ -1709,12 +1737,23 @@ var ThemeParser = /*#__PURE__*/function () {
         newThemeValue.background = themeBackground;
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
-        var fieldDefinition = fields.find(function (it) {
+        var repetableState = null;
+        if (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) {
           return it.name === key;
-        }) || {};
+        }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+        // console.log('start', key, fieldValue);
+        var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+        // console.log('result', newFieldValue);
 
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
@@ -1725,40 +1764,47 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    value: function parseField(value, definition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
       var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
-      // console.log('fieldTheme', id, fieldTheme);
+        fieldTheme = _definition$theme === void 0 ? null : _definition$theme,
+        _definition$fields = definition.fields,
+        definitionFields = _definition$fields === void 0 ? null : _definition$fields;
+      if (definitionFields !== null && value !== null) {
+        return isArray(value) ? value.map(function (innerFieldValue) {
+          if (innerFieldValue === null) {
+            return innerFieldValue;
+          }
+          return _this3.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
 
       // Early return
       if (fieldTheme === null || !isObject(fieldTheme)) {
         return value;
       }
 
-      // @TODO very sloow
+      // @TODO very slooow...
       if (isArray(value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
-            // console.log('innerField', innerField);
             // Early return
             if (!isObject(innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref3 = fieldTheme[innerFieldName] || {},
-              _ref3$textStyle = _ref3.textStyle,
-              innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
-              _ref3$color = _ref3.color,
-              innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
-              _ref3$boxStyle = _ref3.boxStyle,
-              innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle;
+            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;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
             }
 
-            // TODO: replace this with the recursive parseValue...
-
             // Color
             var colorValue = innerFieldColor !== null ? {
               color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
@@ -1784,22 +1830,55 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return value;
     }
+  }, {
+    key: "parseInnerFields",
+    value: function parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this4 = this;
+      var newValue = Object.keys(value).reduce(function (finalValue, innerFieldName) {
+        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 innerValue = value[innerFieldName];
+
+        // For items fields
+        if (innerValue !== null && innerDefinition !== null && isArray(innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // For fields with fields
+        if (innerValue !== null && idfTheme !== null && isObject(idfTheme) && isObject(innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = value[innerFieldName];
+        return finalValue;
+      }, {});
+      return newValue;
+    }
 
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseValue",
     value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this3 = this;
+      var _this5 = this;
       if (isObject(initialValue) || isObject(fieldTheme)) {
         var value = initialValue || null;
-        var _ref4 = fieldTheme || {},
-          _ref4$textStyle = _ref4.textStyle,
-          fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-          _ref4$color = _ref4.color,
-          fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
-          _ref4$boxStyle = _ref4.boxStyle,
-          fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+        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);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
           return value;
         }
@@ -1807,15 +1886,15 @@ var ThemeParser = /*#__PURE__*/function () {
         if (!isEmpty(otherProps)) {
           complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this5.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
           }, {});
         }
-        var _ref6 = value || {},
-          _ref6$textStyle = _ref6.textStyle,
-          valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
-          _ref6$boxStyle = _ref6.boxStyle,
-          valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
+        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;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/lib/index.js

@@ -1727,8 +1727,36 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _definition$fields = definition.fields,
-        fields = _definition$fields === void 0 ? [] : _definition$fields;
+      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 newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread__default["default"](_objectSpread__default["default"]({}, themeBackground), newThemeValue.background);
@@ -1736,12 +1764,23 @@ var ThemeParser = /*#__PURE__*/function () {
         newThemeValue.background = themeBackground;
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
-        var fieldDefinition = fields.find(function (it) {
+        var repetableState = null;
+        if (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) {
           return it.name === key;
-        }) || {};
+        }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+        // console.log('start', key, fieldValue);
+        var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+        // console.log('result', newFieldValue);
 
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, newFieldValue)) : currentValue;
@@ -1752,40 +1791,47 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    value: function parseField(value, definition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
       var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
-      // console.log('fieldTheme', id, fieldTheme);
+        fieldTheme = _definition$theme === void 0 ? null : _definition$theme,
+        _definition$fields = definition.fields,
+        definitionFields = _definition$fields === void 0 ? null : _definition$fields;
+      if (definitionFields !== null && value !== null) {
+        return isArray__default["default"](value) ? value.map(function (innerFieldValue) {
+          if (innerFieldValue === null) {
+            return innerFieldValue;
+          }
+          return _this3.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
 
       // Early return
       if (fieldTheme === null || !isObject__default["default"](fieldTheme)) {
         return value;
       }
 
-      // @TODO very sloow
+      // @TODO very slooow...
       if (isArray__default["default"](value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
-            // console.log('innerField', innerField);
             // Early return
             if (!isObject__default["default"](innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref3 = fieldTheme[innerFieldName] || {},
-              _ref3$textStyle = _ref3.textStyle,
-              innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
-              _ref3$color = _ref3.color,
-              innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
-              _ref3$boxStyle = _ref3.boxStyle,
-              innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle;
+            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;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
             }
 
-            // TODO: replace this with the recursive parseValue...
-
             // Color
             var colorValue = innerFieldColor !== null ? {
               color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
@@ -1811,22 +1857,55 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return value;
     }
+  }, {
+    key: "parseInnerFields",
+    value: function parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this4 = this;
+      var newValue = Object.keys(value).reduce(function (finalValue, innerFieldName) {
+        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 innerValue = value[innerFieldName];
+
+        // For items fields
+        if (innerValue !== null && innerDefinition !== null && isArray__default["default"](innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // For fields with fields
+        if (innerValue !== null && idfTheme !== null && isObject__default["default"](idfTheme) && isObject__default["default"](innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = value[innerFieldName];
+        return finalValue;
+      }, {});
+      return newValue;
+    }
 
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseValue",
     value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this3 = this;
+      var _this5 = this;
       if (isObject__default["default"](initialValue) || isObject__default["default"](fieldTheme)) {
         var value = initialValue || null;
-        var _ref4 = fieldTheme || {},
-          _ref4$textStyle = _ref4.textStyle,
-          fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-          _ref4$color = _ref4.color,
-          fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
-          _ref4$boxStyle = _ref4.boxStyle,
-          fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$1);
+        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);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
           return value;
         }
@@ -1834,15 +1913,15 @@ var ThemeParser = /*#__PURE__*/function () {
         if (!isEmpty__default["default"](otherProps)) {
           complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this5.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
           }, {});
         }
-        var _ref6 = value || {},
-          _ref6$textStyle = _ref6.textStyle,
-          valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
-          _ref6$boxStyle = _ref6.boxStyle,
-          valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
+        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;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.410",
+    "version": "0.3.418",
     "private": false,
     "description": "",
     "keywords": [
@@ -136,5 +136,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
+    "gitHead": "b88d067aa5c016ffdbc031902e1c387160d51f9b"
 }

package/scss/_theme.scss

@@ -7,7 +7,7 @@ $gray-200: #e9e9e9;
 $secondary: $gray-200;
 $green: #0ED88F;
 $gray-100: #f5f5f5;
-$input-bg: rgba($white, 0.07);
+$input-bg: hsla(0,0%,100%,.07);
 $gray-300: #dedede;
 $gray-400: #B3B3B3;
 $gray-500: #adadad;
@@ -96,4 +96,4 @@ $ease-in-ramp: cubic-bezier(.6,0,1,.5);
 $ease-out-ramp: cubic-bezier(0,.6,.5,1);
 $ease-in-kickback: cubic-bezier(.41,1.69,.04,.67);
 $ease-in-yo: cubic-bezier(.21,2.59,0,.9);
-$ease-in-bump: cubic-bezier(.4,1.69,0,1);
+$ease-in-bump: cubic-bezier(.4,1.69,0,1);