@fonixtree/magic-design 0.0.26 → 0.0.28

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

@@ -7,10 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _antd = require("antd");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _storeUtil = require("../../../utils/storeUtil");
+
+var _mobx = require("../../../mobx");
+
 var _Button = _interopRequireDefault(require("../../../common/Button"));
 
 var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -52,12 +58,12 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var langBook = {
-  Indonesian: {
+  id: {
     text: 'Indonesian',
     color: '#FF8541',
     backColor: '#FFF8F0'
   },
-  English: {
+  en: {
     text: 'English',
     color: '#00AC5A',
     backColor: '#DFF3EA'
@@ -72,9 +78,19 @@ function (_super) {
   function QuickMenuBar() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.state = {
+      language: _mobx.store.language
+    };
+
     _this.onBtnClick = function (event) {
       var code = event.currentTarget.dataset.code;
 
+      if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
+        _mobx.store.setState({
+          clickedFloor: ''
+        });
+      }
+
       if (_this.props.device === _constants.deviceTypeMap.PC) {}
 
       _this.props.onBtnClick(code);
@@ -83,12 +99,29 @@ function (_super) {
     return _this;
   }
 
+  QuickMenuBar.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destory = (0, _mobx.autorun)(function () {
+      if (_this.state.language != _mobx.store.language) {
+        _this.setState({
+          language: _mobx.store.language
+        });
+      }
+    });
+  };
+
+  QuickMenuBar.prototype.componentWillUnmount = function () {
+    if (this.destory) this.destory();
+  };
+
   QuickMenuBar.prototype.render = function () {
+    var language = this.state.language;
     var _a = this.props,
         device = _a.device,
         undoDisable = _a.undoDisable,
-        redoDisable = _a.redoDisable,
-        language = _a.language;
+        redoDisable = _a.redoDisable;
+    var selectLanguage = langBook[language || 'en'];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "quick_menu_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -96,8 +129,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "language",
       style: {
-        color: langBook[language].color,
-        background: langBook[language].backColor
+        color: selectLanguage.color,
+        background: selectLanguage.backColor
       }
     }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       size: "20px",
@@ -105,7 +138,25 @@ function (_super) {
         marginRight: '8px'
       },
       type: "icon-language"
-    }), langBook[language].text)), /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+      overlay: /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
+        items: Object.keys(langBook).map(function (key) {
+          return {
+            onClick: function onClick() {
+              /** 持久化国际化配置 */
+              (0, _storeUtil.setStore)(_constants.STORAGE_KEY.LANGUAGE, key);
+
+              _mobx.store.setState({
+                language: key
+              });
+            },
+            label: langBook[key].text,
+            key: key
+          };
+        })
+      }),
+      trigger: ['click']
+    }, /*#__PURE__*/_react["default"].createElement("span", null, selectLanguage.text)))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "menu_center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_group"

package/es/core/Designer/QuickMenuBar/index.less

@@ -1,4 +1,4 @@
-.quick_menu_wrap{
+.quick_menu_wrap {
   flex-shrink: 0;
   height: 80px;
   width: 100%;
@@ -8,7 +8,8 @@
   padding-left: 24px;
   padding-right: 28px;
   background-color: #FFF;
-  .menu_left{
+
+  .menu_left {
     .language {
       display: flex;
       align-items: center;
@@ -17,16 +18,20 @@
       border-radius: 8px;
       padding: 12px;
       font-size: 16px;
+      cursor: pointer;
     }
   }
-  .menu_center{
+
+  .menu_center {
     display: flex;
     align-items: center;
     justify-content: center;
+
     .device_group {
       display: flex;
       align-items: center;
       justify-content: center;
+
       .device_pc {
         cursor: pointer;
         height: 48px;
@@ -38,6 +43,7 @@
         border-bottom-left-radius: 8px;
         text-align: center;
       }
+
       .device_phone {
         cursor: pointer;
         height: 48px;
@@ -49,18 +55,21 @@
         border-bottom-right-radius: 8px;
         text-align: center;
       }
+
       .active {
         background: #E9F0FF;
       }
     }
+
     .redo_undo {
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 24px;
-      
+
     }
   }
+
   .menu_right {
     display: flex;
   }

package/es/core/Designer/index.js

@@ -342,7 +342,6 @@ function (_super) {
     _this.renderHeader = function () {
       return /*#__PURE__*/_react["default"].createElement(_QuickMenuBar["default"], {
         device: _this.state.device,
-        language: _this.props.language,
         onBtnClick: _this.onQuickMenuClick,
         redoDisable: !_this.history.redoAble(),
         undoDisable: !_this.history.undoAble()
@@ -350,12 +349,21 @@ function (_super) {
     };
 
     var pageData = props.pageData,
-        config = props.config;
+        config = props.config,
+        defaultLanguage = props.defaultLanguage;
     var MPageData = pageData.childNodes || [];
 
     _mobx.store.setState({
       MPageData: MPageData
     });
+    /** 如果没有配置国际化 则使用默认国际化 */
+
+
+    if (!_mobx.store.language) {
+      _mobx.store.setState({
+        language: defaultLanguage
+      });
+    }
 
     _this.configRef = /*#__PURE__*/_react["default"].createRef();
     _this.viewAreaRef = /*#__PURE__*/_react["default"].createRef();
@@ -370,7 +378,9 @@ function (_super) {
   }
 
   Designer.prototype.componentDidMount = function () {
-    // 复合组件点击事件
+    var _this = this; // 复合组件点击事件
+
+
     window.document.addEventListener('component-click', this.componentClick); // 复合组件重新渲染事件
 
     window.document.addEventListener('render-view', this.reRenderViewArea);
@@ -378,6 +388,14 @@ function (_super) {
     // setTimeout(() => {
     //   this.onQuickMenuClick(quickMenuCode.SAVE);
     // }, 60 * 1000);
+
+    this.destory = (0, _mobx.autorun)(function () {
+      if (_this.state.language != _mobx.store.language) {
+        _this.setState({
+          language: _mobx.store.language
+        });
+      }
+    });
   };
 
   Designer.prototype.componentWillReceiveProps = function (nextProps) {
@@ -396,6 +414,10 @@ function (_super) {
     setDesignConfig(config);
   };
 
+  Designer.prototype.componentWillUnmount = function () {
+    if (this.destory) this.destory();
+  };
+
   Designer.prototype.onComponentClick = function (data) {
     if (_mobx.store.clickedFloor === data.id) return;
 

package/es/locale/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.i18n = i18n;
+
+var _en = _interopRequireDefault(require("./en/en.json"));
+
+var _id = _interopRequireDefault(require("./id/id.json"));
+
+var _mobx = require("../mobx");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var localeMap = {
+  en: _en["default"],
+  id: _id["default"]
+};
+/** 国际化 */
+
+function i18n(key, args) {
+  if (args === void 0) {
+    args = {};
+  }
+
+  var tempString = localeMap[_mobx.store.language || 'en'][key];
+  Object.keys(args).map(function (key) {
+    var reg = new RegExp("{" + key + "}", 'g');
+    tempString.replace(reg, args[key]);
+  });
+  return tempString;
+}

package/es/meta-comp/components/Image/index.js

@@ -74,6 +74,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
       var hoverImgSrc = _this.state.hoverImgSrc;
@@ -92,6 +93,10 @@ function (_super) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minWidth) {
+        obj.minWidth = minWidth;
+      }
+
       if (limitWidthHeight) {
         if ((0, _coreUtil.isPc)()) {
           if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth * scale;

package/es/mobx/Store.js

@@ -7,12 +7,18 @@ exports.Store = void 0;
 
 var _mobx = require("mobx");
 
+var _constants = require("../constants");
+
+var _storeUtil = require("../utils/storeUtil");
+
 var debug = require('debug')('worker:mobx');
 
 var Store =
 /** @class */
 function () {
   function Store() {
+    this.language = (0, _storeUtil.getStore)(_constants.STORAGE_KEY.LANGUAGE); // 国际化语言
+
     this.hoveredMeta = ''; // hover的元组件Id
 
     this.clickedMeta = ''; // 点击的元组件Id
@@ -28,6 +34,7 @@ function () {
     this.CarouselStore = {}; // 轮播组件暂存数据
 
     (0, _mobx.makeObservable)(this, {
+      language: _mobx.observable,
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,

package/lib/assets/less/modal.less

@@ -12,7 +12,7 @@
         border-top-right-radius: 8px !important;
       }
       .ant-modal-body {
-        padding: 16px 16px 12px 16px;
+        padding: 16px 16px 12px 16px !important;
       }
     }
   }

package/lib/composite-comp/bol/components/Carousel/mobile/index.js

@@ -73,11 +73,11 @@ var MOBILE_IMG_SIZE = [{
   w: 282,
   h: 212
 }, {
-  w: 125,
+  w: 135,
   h: 102
 }, {
-  w: 82,
-  h: 64.5
+  w: 86,
+  h: 65
 }, {
   w: 60,
   h: 45
@@ -168,6 +168,8 @@ function (_super) {
       };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -199,7 +201,7 @@ function (_super) {
         key: item.id,
         className: "img-wrap"
       }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image"
+        className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         isBackground: true,

package/lib/composite-comp/bol/components/Carousel/mobile/index.less

@@ -1,23 +1,21 @@
 .m-carousel-mobile {
   display: flex;
   position: relative;
-
-  .carousel-icon-left {
-    float: left;
-    margin-left: 15px;
-  }
-
-  .carousel-icon-right {
-    float: right;
-    margin-right: 15px;
-  }
+  margin: 0 auto;
 
   .slider-wrap {
-    width: calc(100% - 90px);
+    width: 100%;
     padding: 30px 0;
     margin: 0 auto;
 
     .img-wrap {
+      .img {
+        width: fit-content;
+        height: fit-content;
+        display: block;
+        margin: 0 auto;
+      }
+
       .title {
         display: flex;
         justify-content: center;

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -56,23 +56,29 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var PC_IMG_SIZE = [{
-  w: 1072,
-  h: 662
+  minW: 806,
+  maxW: 1072,
+  maxH: 662
 }, {
-  w: 500,
-  h: 393
+  minW: 390,
+  maxW: 524,
+  maxH: 393
 }, {
-  w: 330,
-  h: 256
+  minW: 258,
+  maxW: 341,
+  maxH: 256
 }, {
-  w: 240,
-  h: 188
+  minW: 184,
+  maxW: 251,
+  maxH: 188
 }, {
-  w: 190,
-  h: 147
+  minW: 142,
+  maxW: 195,
+  maxH: 147
 }, {
-  w: 121,
-  h: 121
+  minW: 124,
+  maxW: 168,
+  maxH: 126
 }];
 
 var CarouselPc =
@@ -147,6 +153,8 @@ function (_super) {
       };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -187,12 +195,13 @@ function (_super) {
         key: item.id,
         className: "img-wrap"
       }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image"
+        className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         isBackground: true,
-        maxHeight: PC_IMG_SIZE[colNum - 1].h,
-        maxWidth: PC_IMG_SIZE[colNum - 1].w
+        maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
+        maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
+        minWidth: PC_IMG_SIZE[colNum - 1].minW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {

package/lib/composite-comp/bol/components/Carousel/pc/index.less

@@ -1,6 +1,7 @@
 .m-carousel-pc {
   display: flex;
   position: relative;
+  margin: 0 auto;
 
   .carousel-icon-left {
     float: left;
@@ -18,6 +19,13 @@
     margin: 0 auto;
 
     .img-wrap {
+      .img {
+        width: fit-content;
+        height: fit-content;
+        display: block;
+        margin: 0 auto;
+      }
+
       .title {
         display: flex;
         justify-content: center;

package/lib/composite-comp/bol/config-panels/CarouselConfig/index.js

@@ -44,6 +44,7 @@ function CarouselConfig(props) {
       key: '3',
       name: 'Spacing',
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+        configWidth: true,
         data: data.spacing
       })
     }, {

package/lib/composite-comp/bol/second-config-panels/ImageTextSecondConfig/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _lodash = require("lodash");
+
 var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
@@ -49,6 +51,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var ImageTextSecondConfig =
 /** @class */
 function (_super) {
@@ -112,6 +130,25 @@ function (_super) {
       })));
     };
 
+    _this.resetHover = function () {
+      var panelProps = _this.props.panelProps;
+
+      if (panelProps.hover.open) {
+        var tempObj = {};
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.button, ['buttonBorder', 'buttonIcon', 'buttonText', 'content', 'open', 'text']));
+        panelProps.hover.button = __assign(__assign({}, panelProps.hover.button), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.secondButton, ['buttonBorder', 'buttonIcon', 'buttonText', 'content', 'open', 'text']));
+        panelProps.hover.secondButton = __assign(__assign({}, panelProps.hover.secondButton), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.image, ['content', 'open']));
+        panelProps.hover.image = __assign(__assign({}, panelProps.image.secondButton), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.text, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
+        panelProps.hover.text = __assign(__assign({}, panelProps.hover.text), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.title, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
+        panelProps.hover.title = __assign(__assign({}, panelProps.hover.title), tempObj);
+        panelProps.hover.background = __assign(__assign({}, panelProps.hover.background), panelProps.background); // console.log(buttonTemp.buttonBorder == panelProps.button.buttonBorder);
+      }
+    };
+
     return _this;
   }
 
@@ -122,6 +159,7 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
       divider: "bold",
       headerSize: "large",
+      onRefresh: this.resetHover,
       source: [{
         key: 'imageTextSecondConfig1',
         name: 'Content',

package/lib/composite-comp/common/components/ProductItem/index.js

@@ -110,7 +110,7 @@ function (_super) {
     }
 
     var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
-    var discount = data.discountPercent || 0;
+    var discount = Number(data.discountPercent) || 0;
     var salePercent = Number(data.salePercent) / 100 || 0;
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: "m-product-item-wrap",

package/lib/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -60,11 +60,25 @@ function (_super) {
 
     var _a = this.props,
         data = _a.data,
-        type = _a.type;
+        type = _a.type,
+        configWidth = _a.configWidth;
     var obj = data[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "spacing-config-container"
-    }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+    }, configWidth && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: "Width"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      maxVal: window.magicDesign.device === 'pc' ? 1276 : 375,
+      minVal: window.magicDesign.device === 'pc' ? 1010 : 348,
+      onChange: function onChange(value) {
+        obj.contentWidth = value.count;
+
+        _this.selfRender();
+      },
+      value: {
+        count: obj.contentWidth
+      }
+    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: "Padding"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-wrap"
@@ -130,6 +144,7 @@ function (_super) {
 
   SpacingConfig.defaultProps = {
     type: 'default',
+    configWidth: false,
     data: {
       pc: {
         paddingTop: 10,

package/lib/constants/index.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = void 0;
+exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = exports.STORAGE_KEY = void 0;
+var STORAGE_KEY = {
+  LANGUAGE: 'magicLanuage'
+};
+exports.STORAGE_KEY = STORAGE_KEY;
 var urlType = {
   PRODUCT_DETAIL: 'proDetail',
   CATG_PROD_LIST: 'catg',

package/lib/core/Designer/PageCompList/index.js

@@ -25,6 +25,8 @@ var _constants = require("../../../constants");
 
 var _mobx = require("../../../mobx");
 
+var _locale = require("../../../locale");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -256,7 +258,7 @@ function PageCompList(_a) {
     onClick: onAdd,
     size: "large",
     type: "light"
-  }, "Add Component"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _locale.i18n)('ADD_COMPONENT')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "list mt16"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "inner-list"