@micromag/core 0.3.60 → 0.3.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/es/components.js +4 -0
  2. package/es/index.js +97 -26
  3. package/lib/components.js +4 -0
  4. package/lib/index.js +98 -26
  5. package/package.json +2 -2
package/es/components.js CHANGED
@@ -2574,6 +2574,10 @@ PropTypes$1.shape({
2574
2574
  withSeekBar: PropTypes$1.bool,
2575
2575
  withPlayPause: PropTypes$1.bool
2576
2576
  });
2577
+ var visualElement = PropTypes$1.shape({
2578
+ media: imageMedia
2579
+ });
2580
+ PropTypes$1.arrayOf(visualElement);
2577
2581
  PropTypes$1.shape({
2578
2582
  media: audioMedia,
2579
2583
  autoPlay: PropTypes$1.bool,
package/es/index.js CHANGED
@@ -23,6 +23,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
23
23
  import 'slugify';
24
24
  import uniqBy from 'lodash/uniqBy';
25
25
  import _typeof from '@babel/runtime/helpers/typeof';
26
+ import isEmpty from 'lodash/isEmpty';
26
27
  import uniq from 'lodash/uniq';
27
28
  import { Tracking as Tracking$1 } from '@folklore/tracking';
28
29
 
@@ -282,6 +283,10 @@ var videoElement = PropTypes$1.shape({
282
283
  withSeekBar: PropTypes$1.bool,
283
284
  withPlayPause: PropTypes$1.bool
284
285
  });
286
+ var visualElement = PropTypes$1.shape({
287
+ media: imageMedia
288
+ });
289
+ var visualElements = PropTypes$1.arrayOf(visualElement);
285
290
  var audioElement = PropTypes$1.shape({
286
291
  media: audioMedia,
287
292
  autoPlay: PropTypes$1.bool,
@@ -645,6 +650,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
645
650
  imageElement: imageElement,
646
651
  imageElements: imageElements,
647
652
  videoElement: videoElement,
653
+ visualElement: visualElement,
654
+ visualElements: visualElements,
648
655
  audioElement: audioElement,
649
656
  closedCaptionsElement: closedCaptionsElement,
650
657
  backgroundElement: backgroundElement,
@@ -1004,8 +1011,9 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
1004
1011
  }, {
1005
1012
  key: "filter",
1006
1013
  value: function filter(_filter) {
1007
- this.definitions = this.definitions.filter(_filter);
1008
- return this; // return new DefinitionsManager(this.definitions.filter(filter));
1014
+ // this.definitions = this.definitions.filter(filter);
1015
+ // return this;
1016
+ return new DefinitionsManager(this.definitions.filter(_filter));
1009
1017
  }
1010
1018
  }, {
1011
1019
  key: "getDefinition",
@@ -1142,16 +1150,15 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
1142
1150
  _createClass(FieldsManager, [{
1143
1151
  key: "filter",
1144
1152
  value: function filter(_filter) {
1145
- // return new FieldsManager(this.definitions.filter(filter));
1146
- this.definitions = this.definitions.filter(_filter);
1147
- return this;
1153
+ return new FieldsManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
1154
+ // return this;
1148
1155
  }
1149
1156
  }]);
1150
1157
 
1151
1158
  return FieldsManager;
1152
1159
  }(DefinitionsManager);
1153
1160
 
1154
- var _excluded$2 = ["medias"];
1161
+ var _excluded$3 = ["medias"];
1155
1162
 
1156
1163
  var MediasParser = /*#__PURE__*/function () {
1157
1164
  function MediasParser(_ref) {
@@ -1219,7 +1226,7 @@ var MediasParser = /*#__PURE__*/function () {
1219
1226
  if (theme !== null) {
1220
1227
  var _this$toPath = this.toPath(theme),
1221
1228
  themeMedias = _this$toPath.medias,
1222
- newTheme = _objectWithoutProperties(_this$toPath, _excluded$2);
1229
+ newTheme = _objectWithoutProperties(_this$toPath, _excluded$3);
1223
1230
 
1224
1231
  return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
1225
1232
  theme: newTheme,
@@ -1460,15 +1467,16 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
1460
1467
  }, {
1461
1468
  key: "filter",
1462
1469
  value: function filter(_filter) {
1463
- // return new ScreensManager(this.definitions.filter(filter));
1464
- this.definitions = this.definitions.filter(_filter);
1465
- return this;
1470
+ return new ScreensManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
1471
+ // return this;
1466
1472
  }
1467
1473
  }]);
1468
1474
 
1469
1475
  return ScreensManager;
1470
1476
  }(DefinitionsManager);
1471
1477
 
1478
+ var _excluded$2 = ["textStyle", "color", "boxStyle"];
1479
+
1472
1480
  var ThemeParser = /*#__PURE__*/function () {
1473
1481
  function ThemeParser(_ref) {
1474
1482
  var screensManager = _ref.screensManager;
@@ -1521,7 +1529,9 @@ var ThemeParser = /*#__PURE__*/function () {
1521
1529
  _theme$colors = theme.colors,
1522
1530
  themeColors = _theme$colors === void 0 ? {} : _theme$colors,
1523
1531
  _theme$textStyles = theme.textStyles,
1524
- themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles;
1532
+ themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
1533
+ _theme$boxStyles = theme.boxStyles,
1534
+ themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
1525
1535
  var newComponents = components.reduce(function (currentComponents, screen, index) {
1526
1536
  var type = screen.type;
1527
1537
 
@@ -1529,7 +1539,7 @@ var ThemeParser = /*#__PURE__*/function () {
1529
1539
  definition = _this$getDefinitionBy.definition,
1530
1540
  themeScreen = _this$getDefinitionBy.themeScreen;
1531
1541
 
1532
- var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles); // Only switch screen if it has changed
1542
+ var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles); // Only switch screen if it has changed
1533
1543
 
1534
1544
 
1535
1545
  return newScreen !== screen || themeScreen !== null ? [].concat(_toConsumableArray(currentComponents.slice(0, index)), [_objectSpread(_objectSpread({}, themeScreen), newScreen)], _toConsumableArray(currentComponents.slice(index + 1))) : currentComponents;
@@ -1540,7 +1550,7 @@ var ThemeParser = /*#__PURE__*/function () {
1540
1550
  }
1541
1551
  }, {
1542
1552
  key: "parseScreen",
1543
- value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextSyle) {
1553
+ value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
1544
1554
  var _this2 = this;
1545
1555
 
1546
1556
  var _definition$fields = definition.fields,
@@ -1560,7 +1570,7 @@ var ThemeParser = /*#__PURE__*/function () {
1560
1570
  var fieldValue = value[key];
1561
1571
  var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
1562
1572
 
1563
- var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextSyle); // Only switch field if it has changed
1573
+ var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles); // Only switch field if it has changed
1564
1574
 
1565
1575
 
1566
1576
  return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
@@ -1570,23 +1580,36 @@ var ThemeParser = /*#__PURE__*/function () {
1570
1580
 
1571
1581
  }, {
1572
1582
  key: "parseField",
1573
- value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles) {
1583
+ value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
1574
1584
  var _definition$theme = definition.theme,
1575
- fieldTheme = _definition$theme === void 0 ? {} : _definition$theme; // @TODO very sloow
1585
+ fieldTheme = _definition$theme === void 0 ? null : _definition$theme; // Early return
1586
+
1587
+ if (fieldTheme === null || !isObject(fieldTheme)) {
1588
+ return value;
1589
+ } // @TODO very sloow
1590
+
1576
1591
 
1577
1592
  if (isArray(value)) {
1578
1593
  var newFieldValue = value.map(function (innerField) {
1579
1594
  return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
1595
+ // Early return
1596
+ if (!isObject(innerField[innerFieldName])) {
1597
+ return newInnerField;
1598
+ }
1599
+
1580
1600
  var _ref3 = fieldTheme[innerFieldName] || {},
1581
1601
  _ref3$textStyle = _ref3.textStyle,
1582
1602
  innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
1583
1603
  _ref3$color = _ref3.color,
1584
- innerFieldColor = _ref3$color === void 0 ? null : _ref3$color; // Early return
1604
+ innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
1605
+ _ref3$boxStyle = _ref3.boxStyle,
1606
+ innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle; // Early return, no theme
1585
1607
 
1586
1608
 
1587
- if (!isObject(innerField[innerFieldName])) {
1609
+ if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
1588
1610
  return newInnerField;
1589
- } // Color
1611
+ } // TODO: replace this with the recursive parseValue...
1612
+ // Color
1590
1613
 
1591
1614
 
1592
1615
  var colorValue = innerFieldColor !== null ? {
@@ -1596,23 +1619,65 @@ var ThemeParser = /*#__PURE__*/function () {
1596
1619
  var textStyleValue = innerFieldTextStyle !== null ? {
1597
1620
  textStyle: _objectSpread(_objectSpread({}, innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null), innerField[innerFieldName].textStyle || null)
1598
1621
  } : null;
1622
+ var boxStyleValue = innerFieldBoxStyle !== null ? {
1623
+ boxStyle: _objectSpread(_objectSpread({}, innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null), innerField[innerFieldName].boxStyle || null)
1624
+ } : null;
1599
1625
 
1600
- if (colorValue === null && textStyleValue === null) {
1626
+ if (colorValue === null && textStyleValue === null && boxStyleValue === null) {
1601
1627
  return newInnerField;
1602
1628
  }
1603
1629
 
1604
- return _objectSpread(_objectSpread({}, newInnerField), {}, _defineProperty({}, innerFieldName, _objectSpread(_objectSpread(_objectSpread({}, colorValue), innerField[innerFieldName]), textStyleValue)));
1630
+ return _objectSpread(_objectSpread({}, newInnerField), {}, _defineProperty({}, innerFieldName, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), innerField[innerFieldName]), textStyleValue), boxStyleValue)));
1605
1631
  }, innerField) : innerField;
1606
1632
  });
1607
1633
  return newFieldValue;
1608
1634
  }
1609
1635
 
1610
- if (isObject(value) && !isArray(value)) {
1636
+ if (isObject(value)) {
1637
+ return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
1638
+ }
1639
+
1640
+ return value;
1641
+ } // eslint-disable-next-line class-methods-use-this
1642
+
1643
+ }, {
1644
+ key: "parseValue",
1645
+ value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
1646
+ var _this3 = this;
1647
+
1648
+ if (isObject(initialValue) || isObject(fieldTheme)) {
1649
+ var value = initialValue || null;
1650
+
1611
1651
  var _ref4 = fieldTheme || {},
1612
1652
  _ref4$textStyle = _ref4.textStyle,
1613
1653
  fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
1614
1654
  _ref4$color = _ref4.color,
1615
- fieldColorName = _ref4$color === void 0 ? null : _ref4$color; // Color
1655
+ fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
1656
+ _ref4$boxStyle = _ref4.boxStyle,
1657
+ fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
1658
+ otherProps = _objectWithoutProperties(_ref4, _excluded$2);
1659
+
1660
+ if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
1661
+ return value;
1662
+ }
1663
+
1664
+ var complexValue = null;
1665
+
1666
+ if (!isEmpty(otherProps)) {
1667
+ complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
1668
+ var innerValue = value !== null ? value[key] || null : null;
1669
+
1670
+ var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
1671
+
1672
+ return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
1673
+ }, {});
1674
+ }
1675
+
1676
+ var _ref6 = value || {},
1677
+ _ref6$textStyle = _ref6.textStyle,
1678
+ valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
1679
+ _ref6$boxStyle = _ref6.boxStyle,
1680
+ valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle; // Color
1616
1681
 
1617
1682
 
1618
1683
  var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
@@ -1623,13 +1688,19 @@ var ThemeParser = /*#__PURE__*/function () {
1623
1688
  var fieldTextStyle = fieldTextStyleName !== null && themeTextStyles !== null ? themeTextStyles[fieldTextStyleName] || null : null;
1624
1689
  var fieldThemeComponentTextStyle = themeValue !== null ? themeValue.textStyle || null : null;
1625
1690
  var textStyleValue = fieldTextStyle !== null || fieldThemeComponentTextStyle !== null ? {
1626
- textStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldTextStyle), fieldThemeComponentTextStyle), value.textStyle || null)
1691
+ textStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldTextStyle), fieldThemeComponentTextStyle), valueTextStyle || null)
1692
+ } : null; // Box style
1693
+
1694
+ var fieldBoxStyle = fieldBoxStyleName !== null && themeBoxStyles !== null ? themeBoxStyles[fieldBoxStyleName] || null : null;
1695
+ var fieldThemeComponentBoxStyle = themeValue !== null ? themeValue.boxStyle || null : null;
1696
+ var boxStyleValue = fieldBoxStyle !== null || fieldThemeComponentBoxStyle !== null ? {
1697
+ boxStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
1627
1698
  } : null; // Only change value if something is overrided
1628
1699
 
1629
- return colorValue !== null || themeValue !== null || textStyleValue !== null ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), themeValue), value), textStyleValue) : value;
1700
+ return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
1630
1701
  }
1631
1702
 
1632
- return value;
1703
+ return initialValue;
1633
1704
  }
1634
1705
  }]);
1635
1706
 
package/lib/components.js CHANGED
@@ -2597,6 +2597,10 @@ PropTypes__default["default"].shape({
2597
2597
  withSeekBar: PropTypes__default["default"].bool,
2598
2598
  withPlayPause: PropTypes__default["default"].bool
2599
2599
  });
2600
+ var visualElement = PropTypes__default["default"].shape({
2601
+ media: imageMedia
2602
+ });
2603
+ PropTypes__default["default"].arrayOf(visualElement);
2600
2604
  PropTypes__default["default"].shape({
2601
2605
  media: audioMedia,
2602
2606
  autoPlay: PropTypes__default["default"].bool,
package/lib/index.js CHANGED
@@ -27,6 +27,7 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
27
27
  require('slugify');
28
28
  var uniqBy = require('lodash/uniqBy');
29
29
  var _typeof = require('@babel/runtime/helpers/typeof');
30
+ var isEmpty = require('lodash/isEmpty');
30
31
  var uniq = require('lodash/uniq');
31
32
  var tracking = require('@folklore/tracking');
32
33
 
@@ -50,6 +51,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
50
51
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
51
52
  var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
52
53
  var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
54
+ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
53
55
  var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
54
56
 
55
57
  /**
@@ -308,6 +310,10 @@ var videoElement = PropTypes__default["default"].shape({
308
310
  withSeekBar: PropTypes__default["default"].bool,
309
311
  withPlayPause: PropTypes__default["default"].bool
310
312
  });
313
+ var visualElement = PropTypes__default["default"].shape({
314
+ media: imageMedia
315
+ });
316
+ var visualElements = PropTypes__default["default"].arrayOf(visualElement);
311
317
  var audioElement = PropTypes__default["default"].shape({
312
318
  media: audioMedia,
313
319
  autoPlay: PropTypes__default["default"].bool,
@@ -671,6 +677,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
671
677
  imageElement: imageElement,
672
678
  imageElements: imageElements,
673
679
  videoElement: videoElement,
680
+ visualElement: visualElement,
681
+ visualElements: visualElements,
674
682
  audioElement: audioElement,
675
683
  closedCaptionsElement: closedCaptionsElement,
676
684
  backgroundElement: backgroundElement,
@@ -1030,8 +1038,9 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
1030
1038
  }, {
1031
1039
  key: "filter",
1032
1040
  value: function filter(_filter) {
1033
- this.definitions = this.definitions.filter(_filter);
1034
- return this; // return new DefinitionsManager(this.definitions.filter(filter));
1041
+ // this.definitions = this.definitions.filter(filter);
1042
+ // return this;
1043
+ return new DefinitionsManager(this.definitions.filter(_filter));
1035
1044
  }
1036
1045
  }, {
1037
1046
  key: "getDefinition",
@@ -1168,16 +1177,15 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
1168
1177
  _createClass__default["default"](FieldsManager, [{
1169
1178
  key: "filter",
1170
1179
  value: function filter(_filter) {
1171
- // return new FieldsManager(this.definitions.filter(filter));
1172
- this.definitions = this.definitions.filter(_filter);
1173
- return this;
1180
+ return new FieldsManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
1181
+ // return this;
1174
1182
  }
1175
1183
  }]);
1176
1184
 
1177
1185
  return FieldsManager;
1178
1186
  }(DefinitionsManager);
1179
1187
 
1180
- var _excluded$2 = ["medias"];
1188
+ var _excluded$3 = ["medias"];
1181
1189
 
1182
1190
  var MediasParser = /*#__PURE__*/function () {
1183
1191
  function MediasParser(_ref) {
@@ -1245,7 +1253,7 @@ var MediasParser = /*#__PURE__*/function () {
1245
1253
  if (theme !== null) {
1246
1254
  var _this$toPath = this.toPath(theme),
1247
1255
  themeMedias = _this$toPath.medias,
1248
- newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$2);
1256
+ newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$3);
1249
1257
 
1250
1258
  return medias !== null || themeMedias !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
1251
1259
  theme: newTheme,
@@ -1486,15 +1494,16 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
1486
1494
  }, {
1487
1495
  key: "filter",
1488
1496
  value: function filter(_filter) {
1489
- // return new ScreensManager(this.definitions.filter(filter));
1490
- this.definitions = this.definitions.filter(_filter);
1491
- return this;
1497
+ return new ScreensManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
1498
+ // return this;
1492
1499
  }
1493
1500
  }]);
1494
1501
 
1495
1502
  return ScreensManager;
1496
1503
  }(DefinitionsManager);
1497
1504
 
1505
+ var _excluded$2 = ["textStyle", "color", "boxStyle"];
1506
+
1498
1507
  var ThemeParser = /*#__PURE__*/function () {
1499
1508
  function ThemeParser(_ref) {
1500
1509
  var screensManager = _ref.screensManager;
@@ -1547,7 +1556,9 @@ var ThemeParser = /*#__PURE__*/function () {
1547
1556
  _theme$colors = theme.colors,
1548
1557
  themeColors = _theme$colors === void 0 ? {} : _theme$colors,
1549
1558
  _theme$textStyles = theme.textStyles,
1550
- themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles;
1559
+ themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
1560
+ _theme$boxStyles = theme.boxStyles,
1561
+ themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
1551
1562
  var newComponents = components.reduce(function (currentComponents, screen, index) {
1552
1563
  var type = screen.type;
1553
1564
 
@@ -1555,7 +1566,7 @@ var ThemeParser = /*#__PURE__*/function () {
1555
1566
  definition = _this$getDefinitionBy.definition,
1556
1567
  themeScreen = _this$getDefinitionBy.themeScreen;
1557
1568
 
1558
- var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles); // Only switch screen if it has changed
1569
+ var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles); // Only switch screen if it has changed
1559
1570
 
1560
1571
 
1561
1572
  return newScreen !== screen || themeScreen !== null ? [].concat(_toConsumableArray__default["default"](currentComponents.slice(0, index)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, themeScreen), newScreen)], _toConsumableArray__default["default"](currentComponents.slice(index + 1))) : currentComponents;
@@ -1566,7 +1577,7 @@ var ThemeParser = /*#__PURE__*/function () {
1566
1577
  }
1567
1578
  }, {
1568
1579
  key: "parseScreen",
1569
- value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextSyle) {
1580
+ value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
1570
1581
  var _this2 = this;
1571
1582
 
1572
1583
  var _definition$fields = definition.fields,
@@ -1586,7 +1597,7 @@ var ThemeParser = /*#__PURE__*/function () {
1586
1597
  var fieldValue = value[key];
1587
1598
  var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
1588
1599
 
1589
- var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextSyle); // Only switch field if it has changed
1600
+ var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles); // Only switch field if it has changed
1590
1601
 
1591
1602
 
1592
1603
  return newFieldValue !== fieldValue ? _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, newFieldValue)) : currentValue;
@@ -1596,23 +1607,36 @@ var ThemeParser = /*#__PURE__*/function () {
1596
1607
 
1597
1608
  }, {
1598
1609
  key: "parseField",
1599
- value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles) {
1610
+ value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
1600
1611
  var _definition$theme = definition.theme,
1601
- fieldTheme = _definition$theme === void 0 ? {} : _definition$theme; // @TODO very sloow
1612
+ fieldTheme = _definition$theme === void 0 ? null : _definition$theme; // Early return
1613
+
1614
+ if (fieldTheme === null || !isObject__default["default"](fieldTheme)) {
1615
+ return value;
1616
+ } // @TODO very sloow
1617
+
1602
1618
 
1603
1619
  if (isArray__default["default"](value)) {
1604
1620
  var newFieldValue = value.map(function (innerField) {
1605
1621
  return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
1622
+ // Early return
1623
+ if (!isObject__default["default"](innerField[innerFieldName])) {
1624
+ return newInnerField;
1625
+ }
1626
+
1606
1627
  var _ref3 = fieldTheme[innerFieldName] || {},
1607
1628
  _ref3$textStyle = _ref3.textStyle,
1608
1629
  innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
1609
1630
  _ref3$color = _ref3.color,
1610
- innerFieldColor = _ref3$color === void 0 ? null : _ref3$color; // Early return
1631
+ innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
1632
+ _ref3$boxStyle = _ref3.boxStyle,
1633
+ innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle; // Early return, no theme
1611
1634
 
1612
1635
 
1613
- if (!isObject__default["default"](innerField[innerFieldName])) {
1636
+ if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
1614
1637
  return newInnerField;
1615
- } // Color
1638
+ } // TODO: replace this with the recursive parseValue...
1639
+ // Color
1616
1640
 
1617
1641
 
1618
1642
  var colorValue = innerFieldColor !== null ? {
@@ -1622,23 +1646,65 @@ var ThemeParser = /*#__PURE__*/function () {
1622
1646
  var textStyleValue = innerFieldTextStyle !== null ? {
1623
1647
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null), innerField[innerFieldName].textStyle || null)
1624
1648
  } : null;
1649
+ var boxStyleValue = innerFieldBoxStyle !== null ? {
1650
+ boxStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null), innerField[innerFieldName].boxStyle || null)
1651
+ } : null;
1625
1652
 
1626
- if (colorValue === null && textStyleValue === null) {
1653
+ if (colorValue === null && textStyleValue === null && boxStyleValue === null) {
1627
1654
  return newInnerField;
1628
1655
  }
1629
1656
 
1630
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, newInnerField), {}, _defineProperty__default["default"]({}, innerFieldName, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), innerField[innerFieldName]), textStyleValue)));
1657
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, newInnerField), {}, _defineProperty__default["default"]({}, innerFieldName, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), innerField[innerFieldName]), textStyleValue), boxStyleValue)));
1631
1658
  }, innerField) : innerField;
1632
1659
  });
1633
1660
  return newFieldValue;
1634
1661
  }
1635
1662
 
1636
- if (isObject__default["default"](value) && !isArray__default["default"](value)) {
1663
+ if (isObject__default["default"](value)) {
1664
+ return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
1665
+ }
1666
+
1667
+ return value;
1668
+ } // eslint-disable-next-line class-methods-use-this
1669
+
1670
+ }, {
1671
+ key: "parseValue",
1672
+ value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
1673
+ var _this3 = this;
1674
+
1675
+ if (isObject__default["default"](initialValue) || isObject__default["default"](fieldTheme)) {
1676
+ var value = initialValue || null;
1677
+
1637
1678
  var _ref4 = fieldTheme || {},
1638
1679
  _ref4$textStyle = _ref4.textStyle,
1639
1680
  fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
1640
1681
  _ref4$color = _ref4.color,
1641
- fieldColorName = _ref4$color === void 0 ? null : _ref4$color; // Color
1682
+ fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
1683
+ _ref4$boxStyle = _ref4.boxStyle,
1684
+ fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
1685
+ otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$2);
1686
+
1687
+ if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
1688
+ return value;
1689
+ }
1690
+
1691
+ var complexValue = null;
1692
+
1693
+ if (!isEmpty__default["default"](otherProps)) {
1694
+ complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
1695
+ var innerValue = value !== null ? value[key] || null : null;
1696
+
1697
+ var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
1698
+
1699
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
1700
+ }, {});
1701
+ }
1702
+
1703
+ var _ref6 = value || {},
1704
+ _ref6$textStyle = _ref6.textStyle,
1705
+ valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
1706
+ _ref6$boxStyle = _ref6.boxStyle,
1707
+ valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle; // Color
1642
1708
 
1643
1709
 
1644
1710
  var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
@@ -1649,13 +1715,19 @@ var ThemeParser = /*#__PURE__*/function () {
1649
1715
  var fieldTextStyle = fieldTextStyleName !== null && themeTextStyles !== null ? themeTextStyles[fieldTextStyleName] || null : null;
1650
1716
  var fieldThemeComponentTextStyle = themeValue !== null ? themeValue.textStyle || null : null;
1651
1717
  var textStyleValue = fieldTextStyle !== null || fieldThemeComponentTextStyle !== null ? {
1652
- textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldTextStyle), fieldThemeComponentTextStyle), value.textStyle || null)
1718
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldTextStyle), fieldThemeComponentTextStyle), valueTextStyle || null)
1719
+ } : null; // Box style
1720
+
1721
+ var fieldBoxStyle = fieldBoxStyleName !== null && themeBoxStyles !== null ? themeBoxStyles[fieldBoxStyleName] || null : null;
1722
+ var fieldThemeComponentBoxStyle = themeValue !== null ? themeValue.boxStyle || null : null;
1723
+ var boxStyleValue = fieldBoxStyle !== null || fieldThemeComponentBoxStyle !== null ? {
1724
+ boxStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
1653
1725
  } : null; // Only change value if something is overrided
1654
1726
 
1655
- return colorValue !== null || themeValue !== null || textStyleValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), themeValue), value), textStyleValue) : value;
1727
+ return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
1656
1728
  }
1657
1729
 
1658
- return value;
1730
+ return initialValue;
1659
1731
  }
1660
1732
  }]);
1661
1733
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/core",
3
- "version": "0.3.60",
3
+ "version": "0.3.63",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -132,5 +132,5 @@
132
132
  "publishConfig": {
133
133
  "access": "public"
134
134
  },
135
- "gitHead": "f79f285d0b402d94f7703782bdd9e6fdc0cdafb0"
135
+ "gitHead": "002ba9d6db19aa37ea77a2465942060661f19dcf"
136
136
  }