@fonixtree/magic-design 0.0.55 → 0.0.58

package/es/composite-comp/dito/second-config-panels/PcNavigationSecondConfig/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
+
+var _TextConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/TextConfig"));
+
+var _coreUtil = require("../../../../utils/coreUtil");
+
+var _locale = require("../../../../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var PcNavigationSecondConfig =
+/** @class */
+function (_super) {
+  __extends(PcNavigationSecondConfig, _super);
+
+  function PcNavigationSecondConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.getContentPanel = function (data) {
+      var source = [// { key: 'pcNavSecondContent1', name: i18n('IMAGE'), value: <ImageConfig data={data.image} needHover={needHover} />, metaOption: data.image },
+      {
+        key: 'pcNavSecondContent2',
+        name: (0, _locale.i18n)('NAVIGATION_NAME'),
+        value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
+          data: data.title
+        }),
+        metaOption: data.title
+      }];
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+        headerSize: "middle",
+        onRefresh: function onRefresh() {
+          return (0, _coreUtil.renderPreview)();
+        },
+        showActiveColor: true,
+        source: source,
+        type: "switch"
+      }));
+    };
+
+    return _this;
+  }
+
+  PcNavigationSecondConfig.prototype.render = function () {
+    var panelProps = this.props.panelProps;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "banner_second_conf_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      divider: "bold",
+      headerSize: "large",
+      source: [{
+        key: 'mobileNavSecondConfig1',
+        name: (0, _locale.i18n)('CONTENT'),
+        value: this.getContentPanel(panelProps)
+      }]
+    }));
+  };
+
+  PcNavigationSecondConfig.defaultProps = {
+    panelProps: {}
+  };
+  return PcNavigationSecondConfig;
+}(_react["default"].Component);
+
+var _default = PcNavigationSecondConfig;
+exports["default"] = _default;

package/es/constants/component-types.js

@@ -31,6 +31,8 @@ var _Recommend = _interopRequireDefault(require("../composite-comp/dito/componen
 
 var _MobileNavigation = _interopRequireDefault(require("../composite-comp/dito/components/MobileNavigation"));
 
+var _PcNavigation = _interopRequireDefault(require("../composite-comp/dito/components/PcNavigation"));
+
 var _BannerConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/BannerConfig"));
 
 var _DividerConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/DividerConfig"));
@@ -57,6 +59,8 @@ var _RecommendConfig = _interopRequireDefault(require("../composite-comp/dito/co
 
 var _MobileNavigationConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/MobileNavigationConfig"));
 
+var _PcNavigationConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/PcNavigationConfig"));
+
 var _BannerSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/BannerSecondConfig"));
 
 var _TextSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/TextSecondConfig"));
@@ -69,6 +73,12 @@ var _RecommendSecondConfig = _interopRequireDefault(require("../composite-comp/d
 
 var _MobileNavigationSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/MobileNavigationSecondConfig"));
 
+var _TagSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/TagSecondConfig"));
+
+var _ButtonSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/ButtonSecondConfig"));
+
+var _PcNavigationSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/PcNavigationSecondConfig"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _a, _b, _c; // 组件
@@ -77,17 +87,17 @@ var _a, _b, _c; // 组件
 /**
  * 渲染组件索引
  */
-var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a);
+var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a);
 /**
  * 一级配置面板索引
  */
 
 exports.componentMap = componentMap;
-var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b);
+var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b);
 /**
  * 二级配置面板索引
  */
 
 exports.configPanelMap = configPanelMap;
-var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c);
+var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_PcNavigation["default"].type] = _PcNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c[_Tag["default"].type] = _TagSecondConfig["default"], _c[_Button["default"].type] = _ButtonSecondConfig["default"], _c);
 exports.secondConfigPanelMap = secondConfigPanelMap;

package/es/constants/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = exports.STORAGE_KEY = void 0;
+exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.eventType = exports.deviceTypeWidthMap = exports.deviceTypeMap = exports.compInfoMap = exports.STORAGE_KEY = void 0;
 var STORAGE_KEY = {
   LOCALE: 'magicLocale'
 };
@@ -27,6 +27,11 @@ var deviceTypeMap = {
   PHONE: 'mobile'
 };
 exports.deviceTypeMap = deviceTypeMap;
+var deviceTypeWidthMap = {
+  pc: 1240,
+  mobile: 375
+};
+exports.deviceTypeWidthMap = deviceTypeWidthMap;
 var magicMode = {
   DESIGNER: 'designer',
   RENDERER: 'renderer'
@@ -94,6 +99,10 @@ var compInfoMap = {
   MOBILE_NAVIGATION: {
     name: 'Mobile Navigation',
     icon: 'icon-navigation'
+  },
+  PC_NAVIGATION: {
+    name: 'PC Navigation',
+    icon: 'icon-navigation'
   }
 };
 /**
@@ -149,4 +158,13 @@ var metaInst = {
     type: metaType.BUTTON
   }
 };
-exports.metaInst = metaInst;
+/**
+ * 全局事件类型
+ */
+
+exports.metaInst = metaInst;
+var eventType = {
+  // 二级配置面板返回时，更新一级面板事件
+  UPDATE_FIRST_CONFIG: 'update-first-config'
+};
+exports.eventType = eventType;

package/es/constants/layout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.newsletterLayout = exports.mobileNavigationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = void 0;
+exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.pcNavigationLayout = exports.newsletterLayout = exports.mobileNavigationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = void 0;
 
 var _dividerLayout = _interopRequireDefault(require("../assets/images/layout-icon/dividerLayout.svg"));
 
@@ -51,6 +51,8 @@ var _layoutNavigationNewline = _interopRequireDefault(require("../assets/images/
 
 var _layoutNavigationTile = _interopRequireDefault(require("../assets/images/layout-icon/layout-navigation-tile.png"));
 
+var _layoutNavigationNormal = _interopRequireDefault(require("../assets/images/layout-icon/layout-navigation-normal.png"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // import p3 from '../assets/images/layout-icon/layout-imagetext-p3.png';
@@ -177,4 +179,10 @@ var mobileNavigationLayout = [{
   name: 'tile',
   image: _layoutNavigationTile["default"]
 }];
-exports.mobileNavigationLayout = mobileNavigationLayout;
+exports.mobileNavigationLayout = mobileNavigationLayout;
+var pcNavigationLayout = [{
+  id: 'normal',
+  name: 'normal',
+  image: _layoutNavigationNormal["default"]
+}];
+exports.pcNavigationLayout = pcNavigationLayout;

package/es/core/Designer/ConfigPanel/index.js

@@ -72,6 +72,34 @@ function (_super) {
       selectedNode: {}
     };
 
+    _this.resetState = function (propsData) {
+      var pageData = propsData.pageData;
+      var selectedNode = pageData.find(function (floor) {
+        return floor.id === _mobx.store.clickedFloor;
+      });
+
+      _this.setState({
+        clickedGroup: _mobx.store.clickedGroup,
+        selectedNode: selectedNode
+      }); // 展开以及面板
+
+
+      if (selectedNode) {
+        _this.openConfig();
+      } else {
+        _this.closeConfig();
+      } // 展开首期二级面板
+
+
+      if (!_mobx.store.clickedGroup) {
+        _this.closeSecConfig();
+      } else if (_mobx.store.clickedGroup !== _this.preClickedGroup) {
+        _this.openSecConfig();
+      }
+
+      _this.preClickedGroup = _mobx.store.clickedGroup;
+    };
+
     _this.animation = function (type) {
       document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:" + type + ";animation-duration: 0.3s;animation-fill-mode:both");
     };
@@ -157,6 +185,13 @@ function (_super) {
         device: device
       };
       var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
+
+      if (!instance) {
+        _mobx.store.setState({
+          clickedFloor: null
+        });
+      }
+
       return instance;
     };
 
@@ -209,11 +244,15 @@ function (_super) {
           break;
 
         case 'MOBILE_NAVIGATION':
+        case 'PC_NAVIGATION':
           groupName = ((_f = panelProps.groupName) === null || _f === void 0 ? void 0 : _f.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
+
+        case 'TAG':
+          groupName = panelProps.button.text;
       }
 
       return groupName || 'Group Name';
@@ -223,6 +262,10 @@ function (_super) {
       _mobx.store.setState({
         clickedGroup: null
       });
+
+      window.document.dispatchEvent(new Event(_constants.eventType.UPDATE_FIRST_CONFIG, {
+        bubbles: false
+      }));
     };
 
     return _this;
@@ -232,31 +275,14 @@ function (_super) {
     var _this = this;
 
     this.distroy = (0, _mobx.autorun)(function () {
-      var selectedNode = _mobx.store.getFloorInfo();
-
-      _this.setState({
-        clickedGroup: _mobx.store.clickedGroup,
-        selectedNode: selectedNode
-      }); // 展开以及面板
-
-
-      if (selectedNode) {
-        _this.openConfig();
-      } else {
-        _this.closeConfig();
-      } // 展开首期二级面板
-
-
-      if (!_mobx.store.clickedGroup) {
-        _this.closeSecConfig();
-      } else if (_mobx.store.clickedGroup !== _this.preClickedGroup) {
-        _this.openSecConfig();
-      }
-
-      _this.preClickedGroup = _mobx.store.clickedGroup;
+      _this.resetState(_this.props);
     });
   };
 
+  ConfigPanel.prototype.componentWillReceiveProps = function (nextProps) {
+    this.resetState(nextProps);
+  };
+
   ConfigPanel.prototype.componentWillUnmount = function () {
     this.distroy();
   };

package/es/core/Designer/History/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _lodash = require("lodash");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 /**
@@ -14,24 +16,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * 有新的操作时存入数组的0位置，游标设置为0
  *
  */
-var debug = require('debug')('worker:History');
-
 var History =
 /** @class */
 function () {
   function History(hist) {
     var _this = this;
     /**
-     * 游标位置
-     */
+      * 游标位置
+      */
 
 
     this.cursor = 0;
     /**
-     * 历史数据
-     */
+      * 历史数据
+      */
 
     this.list = [];
+    /** 前进或者后退步数 */
+
+    this.step = 0;
 
     this.redoAble = function () {
       return _this.cursor !== 0;
@@ -41,47 +44,52 @@ function () {
       return _this.cursor !== _this.list.length - 1;
     };
     /**
-     * 清空0～cursor之间的数据，将data插入 位置0
-     */
+      * 清空0～cursor之间的数据，将data插入 位置0
+      */
 
 
     this.push = function (data) {
-      debug('push data', data);
       var cloneData = (0, _cloneDeep["default"])(data);
 
       _this.list.splice(0, _this.cursor, cloneData);
 
+      _this.cursor = 0;
+      console.log('list', _this.list);
       return data;
     };
     /**
-     * redu操作只修改当前游标-1
-     * 并且返回后一步的json对象
-     */
+      * redu操作只修改当前游标-1
+      * 并且返回后一步的json对象
+      */
 
 
-    this.redo = function () {
-      debug('redo click');
-      var newCursor = _this.cursor - 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
+    this.redo = function (callback) {
+      _this.step -= 1;
+
+      _this.doAction(callback);
     };
     /**
-     * undo操作只修改当前的游标+1
-     * 并且返回前一步的json对象
-     */
+      * undo操作只修改当前的游标+1
+      * 并且返回前一步的json对象
+      */
 
 
-    this.undo = function () {
-      debug('undo click');
-      var newCursor = _this.cursor + 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
+    this.undo = function (callback) {
+      _this.step += 1;
+
+      _this.doAction(callback);
     };
 
+    this.doAction = (0, _lodash.debounce)(function (callback) {
+      console.log(_this.step);
+      var newCursor = _this.cursor + _this.step;
+      _this.cursor = newCursor;
+      var newData = (0, _cloneDeep["default"])(_this.list[newCursor]);
+      _this.step = 0;
+      callback(newData);
+    }, 300);
     this.cursor = 0;
-    this.list = [hist];
+    this.list = [(0, _cloneDeep["default"])(hist)];
   }
 
   return History;

package/es/core/Designer/index.js

@@ -169,12 +169,14 @@ function (_super) {
       _this.configRef.current.closeMobileConfig();
     };
 
-    _this.reRenderViewArea = function () {
+    _this.reRenderViewArea = function (e) {
       if (!_this.viewAreaRef || !_this.viewAreaRef.current) {
         return;
       }
 
-      _this.history.push(_this.state.MPageData);
+      if (e.changeHistory) {
+        _this.history.push(_this.state.MPageData);
+      }
 
       _this.viewAreaRef.current.renderView();
     };
@@ -298,18 +300,24 @@ function (_super) {
         device: device
       };
 
+      var callback = function callback(newPageData) {
+        _mobx.store.setState({
+          MPageData: newPageData
+        });
+
+        _this.setState({
+          MPageData: newPageData
+        });
+      };
+
       switch (code) {
         case _constants.quickMenuCode.UNDO:
-          _this.setState({
-            MPageData: _this.history.undo()
-          });
+          _this.history.undo(callback);
 
           break;
 
         case _constants.quickMenuCode.REDO:
-          _this.setState({
-            MPageData: _this.history.redo()
-          });
+          _this.history.redo(callback);
 
           break;
 
@@ -437,6 +445,7 @@ function (_super) {
         pagesManager = _b.pagesManager,
         compSource = _b.compSource,
         pageName = _b.pageName;
+    console.log('MPageData', MPageData);
     return /*#__PURE__*/_react["default"].createElement(_mobxReact.Provider, {
       store: _mobx.store
     }, /*#__PURE__*/_react["default"].createElement(_antd.ConfigProvider, {

package/es/decorator/compositeDecorator.js

@@ -126,6 +126,7 @@ function compositeDecorator(WrappedComponent) {
           }
         }
 
+        console.log('---wrapStyle', wrapStyle);
         return wrapStyle;
       };
 

package/es/decorator/index.js

@@ -15,9 +15,17 @@ Object.defineProperty(exports, "metaDecorator", {
     return _metaDecorator["default"];
   }
 });
+Object.defineProperty(exports, "updateConfigDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _updateConfigDecorator["default"];
+  }
+});
 
 var _compositeDecorator = _interopRequireDefault(require("./compositeDecorator"));
 
 var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
+var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/decorator/updateConfigDecorator.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = metaDecorator;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+/**
+ *  更新组件一级配置面板的装修器
+ */
+
+
+function metaDecorator(WrappedComponent) {
+  var Wrapper =
+  /** @class */
+  function (_super) {
+    __extends(Wrapper, _super);
+
+    function Wrapper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.update = function () {
+        _this.setState({});
+      };
+
+      return _this;
+    }
+
+    Wrapper.prototype.componentDidMount = function () {
+      window.document.addEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.componentWillUnmount = function () {
+      window.document.removeEventListener(_constants.eventType.UPDATE_FIRST_CONFIG, this.update);
+    };
+
+    Wrapper.prototype.render = function () {
+      return /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props);
+    };
+
+    return Wrapper;
+  }(_react["default"].Component);
+
+  return Wrapper;
+}

package/es/locale/en/en.json

@@ -1,4 +1,12 @@
 {
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Button Tag",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
@@ -87,7 +95,6 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
-  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

package/es/locale/es/es.json

@@ -1,4 +1,12 @@
 {
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Etiqueta de botón",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
@@ -87,7 +95,6 @@
   "INPUT_FIELD": "Campo de entrada",
   "CONFIRMATION": "Confirmación",
   "IMAGE_TAG": "Etiqueta de imagen",
-  "BUTTON_TAG": "Etiqueta de botón",
   "SECONDARY_BUTTON_TAG": "Etiqueta de botón secundario",
   "TITLE": "Título",
   "HOVER": "Hover",