@fonixtree/magic-design 0.0.69 → 0.0.71

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

@@ -15,6 +15,8 @@ var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-
 
 var _common = require("../../../../common");
 
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
 var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
@@ -83,11 +85,15 @@ function (_super) {
           title: (0, _locale.i18n)('COLOR')
         }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
           onChange: function onChange(v) {
-            data.box.color = v;
+            if ((0, _coreUtil.isPc)()) {
+              data.box.color.pc = v;
+            } else {
+              data.box.color.mobile = v;
+            }
 
             _this.selfRender();
           },
-          value: data.box.color
+          value: (0, _coreUtil.isPc)() ? data.box.color.pc : data.box.color.mobile
         })),
         metaOption: data.box,
         toggleType: 'switch'
@@ -101,20 +107,23 @@ function (_super) {
           title: (0, _locale.i18n)('COLOR')
         }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
           onChange: function onChange(v) {
-            data.icon.color = v;
+            if ((0, _coreUtil.isPc)()) {
+              data.icon.color.pc = v;
+            } else {
+              data.icon.color.mobile = v;
+            }
 
             _this.selfRender();
           },
-          value: data.icon.color
+          value: (0, _coreUtil.isPc)() ? data.icon.color.pc : data.icon.color.mobile
         })),
         metaOption: data.icon,
         toggleType: 'switch'
       }];
       return /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
         headerSize: "middle",
-        onRefresh: function onRefresh() {
-          return (0, _coreUtil.renderPreview)();
-        },
+        noChange: true,
+        onRefresh: _this.selfRender,
         showActiveColor: true,
         source: source,
         type: "switch"
@@ -133,6 +142,13 @@ function (_super) {
         key: 'searchBar1',
         name: (0, _locale.i18n)('CONTENT'),
         value: this.getContentPanel()
+      }, {
+        key: 'searchBar4',
+        name: (0, _locale.i18n)('SPACING'),
+        value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+          configCompSpace: true,
+          data: data.spacing
+        })
       }, {
         key: 'searchBar2',
         name: (0, _locale.i18n)('CUSTOMIZE'),

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

@@ -121,9 +121,11 @@ function PageCompList(_a) {
     }
   };
 
-  var onMenuClick = function onMenuClick(index, operType) {
+  var onMenuClick = function onMenuClick(activeComp, operType) {
     var newComponents = __spreadArrays(components);
 
+    var index = newComponents.indexOf(activeComp);
+
     if (operType === operTypeMap.MOVE_UP) {
       var temp = newComponents[index - 1];
       newComponents[index - 1] = newComponents[index];
@@ -178,7 +180,7 @@ function PageCompList(_a) {
     var menu = /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
       onClick: function onClick(_a) {
         var item = _a.item;
-        return onMenuClick(index, item.props.value);
+        return onMenuClick(comp, item.props.value);
       }
     }, index !== 0 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",

package/lib/assets/fonts/magic-box-iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "magic-box-iconfont"; /* Project id 3317752 */
-  src: url('magic-box-iconfont.woff2?t=1668396278684') format('woff2'),
-       url('magic-box-iconfont.woff?t=1668396278684') format('woff'),
-       url('magic-box-iconfont.ttf?t=1668396278684') format('truetype');
+  src: url('magic-box-iconfont.woff2?t=1669616689172') format('woff2'),
+       url('magic-box-iconfont.woff?t=1669616689172') format('woff'),
+       url('magic-box-iconfont.ttf?t=1669616689172') format('truetype');
 }
 
 .magic-box-iconfont {

package/lib/assets/fonts/magic-box-iconfont.css.bak

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "magic-box-iconfont"; /* Project id 3317752 */
-  src: url('magic-box-iconfont.woff2?t=1668396278684') format('woff2'),
-       url('magic-box-iconfont.woff?t=1668396278684') format('woff'),
-       url('magic-box-iconfont.ttf?t=1668396278684') format('truetype');
+  src: url('magic-box-iconfont.woff2?t=1669616689172') format('woff2'),
+       url('magic-box-iconfont.woff?t=1669616689172') format('woff'),
+       url('magic-box-iconfont.ttf?t=1669616689172') format('truetype');
 }
 
 .magic-box-iconfont {

package/lib/common/ImageModal/index.js

@@ -723,7 +723,7 @@ function ImageModal(_a) {
     className: "catg_img"
   }, /*#__PURE__*/_react["default"].createElement(_antd.Card, {
     bodyStyle: {
-      height: 380,
+      height: 410,
       overflowX: 'auto'
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
@@ -744,7 +744,7 @@ function ImageModal(_a) {
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       "float": 'right',
-      margin: '16px 0'
+      marginTop: '16px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_antd.Pagination, _extends({
     size: "small"

package/lib/common/LinkModal/FilteredProductModal/index.js

@@ -513,13 +513,13 @@ var FilteredProductModal = function FilteredProductModal(props) {
     queryStore();
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "filteredProductModal"
+    className: "mFilteredProductModal"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "proModalWrap"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "info"
   }, (0, _locale.i18n)('THE_PRODUCT_QUANTITY_WILL_BE_AUTOMATICALLY_UPDATED_WITH_THE_ITEMS_THAT_MEET_THE_CATEGORY_CONDITIONS')), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "filteredProductModalContent"
+    className: "mFilteredProductModalContent"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "leftCot"
   }, /*#__PURE__*/_react["default"].createElement(_antd.Form, {

package/lib/common/LinkModal/FilteredProductModal/index.less

@@ -1,4 +1,4 @@
-.filteredProductModal {
+.mFilteredProductModal {
   .proModalWrap {
     .info {
       background: #ecf1fd;
@@ -7,6 +7,7 @@
       padding: 5px 0 5px 16px;
       margin-bottom: 8px;
     }
+
     .prodImage {
       width: 36px;
       height: 36px;
@@ -15,7 +16,7 @@
       background-size: contain;
     }
 
-    .filteredProductModalContent {
+    .mFilteredProductModalContent {
       display: flex;
 
       .rightCot {
@@ -87,6 +88,7 @@
         box-sizing: border-box;
         border-right: 1px solid #e0e0e0;
         padding-right: 15px;
+
         .price {
           display: flex;
           width: calc(100% - 16px);
@@ -100,9 +102,11 @@
             border-radius: 2px;
           }
         }
+
         .ant-form-item {
           margin-bottom: 4px;
         }
+
         .buttonStyle {
           margin-top: 10px;
           text-align: right;

package/lib/common/ProductModal/index.js

@@ -745,7 +745,7 @@ var ProductModal = function ProductModal(props) {
     rowKey: "productId",
     rowSelection: rowSelection,
     scroll: {
-      y: 300
+      y: 500
     }
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "selectedCot"

package/lib/common/ProductModal/index.less

@@ -11,13 +11,15 @@
     .content {
       display: flex;
       margin-bottom: 8px;
+
       .rightCot {
         width: calc(100% - 260px);
         margin-left: 16px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-         .prodImg {
+
+        .prodImg {
           display: inline-block;
           width: 36px;
           height: 36px;
@@ -25,16 +27,18 @@
           background-position: 50% 50%;
           background-repeat: no-repeat;
         }
+
         .selectedCot {
+          padding-right: 18px;
           margin-left: 4px;
-          height: 148px;
+          height: 78px;
           background: #f8f8f8;
           border: 1px solid #e0e0e0;
           border-radius: 2px;
           display: flex;
           flex-direction: row;
-          flex-wrap: wrap;
-          overflow-y: auto;
+          // flex-wrap: wrap;
+          overflow-x: auto;
 
           .selectedItem {
             box-sizing: border-box;
@@ -71,9 +75,9 @@
               cursor: pointer;
             }
 
-            &:nth-child(n + 11) {
-              margin-top: 5px !important;
-            }
+            // &:nth-child(n + 11) {
+            //   margin-top: 5px !important;
+            // }
 
             .selectedItemImg {
               height: 52px;
@@ -94,6 +98,7 @@
         padding-right: 14px;
         box-sizing: border-box;
         border-right: 1px solid #e0e0e0;
+
         .divider {
           width: 10%;
           display: inline-block;

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

@@ -177,6 +177,7 @@ function (_super) {
       autoplay: data.setting.autoplay.open,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
+      draggable: window.magicDesign.mode === 'renderer',
       slidesToShow: colNum,
       slidesToScroll: 1,
       beforeChange: function beforeChange(oldIndex, newIndex) {

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

@@ -153,8 +153,6 @@ function (_super) {
       };
     }
 
-    var spacing = data.spacing[window.magicDesign.device];
-    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -162,6 +160,7 @@ function (_super) {
       autoplay: data.setting.autoplay.open,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
+      draggable: window.magicDesign.mode === 'renderer',
       slidesToShow: colNum,
       slidesToScroll: 1,
       beforeChange: function beforeChange(oldIndex, newIndex) {
@@ -174,9 +173,12 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var spacing = data.spacing[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc",
       style: bgStyle
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content"
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
@@ -186,7 +188,11 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: spacing.contentWidth || 'calc(100% - 52px)'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
@@ -198,7 +204,6 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
-        isBackground: true,
         maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
         maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
         minWidth: PC_IMG_SIZE[colNum - 1].minW
@@ -220,7 +225,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    })), data.setting.dots.open && Math.ceil(data.groupSource.length / colNum) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+    }))), data.setting.dots.open && Math.ceil(data.groupSource.length / colNum) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "swiper-ban"
     }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -245,7 +250,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-right"
-    }));
+    })));
   };
 
   CarouselPc.defaultProps = {

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

@@ -1,20 +1,26 @@
 .m-carousel-pc {
-  display: flex;
   position: relative;
-  margin: 0 auto;
+  overflow-x: auto;
+  width: 100%;
+
+  .content {
+    display: flex;
+    width: fit-content;
+    margin: 0 auto;
+  }
 
   .carousel-icon-left {
     float: left;
-    margin-left: 50px;
+    margin-left: 10px;
   }
 
   .carousel-icon-right {
     float: right;
-    margin-right: 50px;
+    margin-right: 10px;
   }
 
   .slider-wrap {
-    width: calc(100% - 200px);
+    width: 100%;
     padding: 30px 0;
     margin: 0 auto;
 
@@ -65,6 +71,8 @@
     position: absolute;
     width: 100%;
     bottom: 0;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _NewsletterContentSetting = _interopRequireDefault(require("./NewsletterContentSetting"));
 
+var _locale = require("../../../../locale");
+
 var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
@@ -28,26 +30,26 @@ function NewsletterConfig(props) {
     headerSize: "large",
     source: [{
       key: '1',
-      name: i18n('CONTENT'),
+      name: (0, _locale.i18n)('CONTENT'),
       value: /*#__PURE__*/_react["default"].createElement(_NewsletterContentSetting["default"], {
         panelProps: data.content
       })
     }, {
       key: '2',
-      name: i18n('SPACING'),
+      name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
         data: data.spacing
       })
     }, {
       key: '3',
-      name: i18n('CUSTOMIZE'),
+      name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
         data: data.customize,
         layoutSource: _layout.newsletterLayout
       })
     }, {
       key: '4',
-      name: i18n('BACKGROUND'),
+      name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background
       })

package/lib/composite-comp/dito/components/PcNavigation/defaultJSON.js

@@ -75,7 +75,6 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         iconUrl: '',
         content: {
-          backgroundColor: 'transparent',
           sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 400,
@@ -89,7 +88,6 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         specialContent: [],
         content: {
-          backgroundColor: 'transparent',
           sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 400,
@@ -103,7 +101,6 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         specialContent: [],
         content: {
-          backgroundColor: 'transparent',
           sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 400,
@@ -117,7 +114,6 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         specialContent: [],
         content: {
-          backgroundColor: 'transparent',
           sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 400,

package/lib/composite-comp/dito/components/PcNavigation/pc/index.js

@@ -418,7 +418,12 @@ function (_super) {
 
     _this.mouseLeaveBtn = function () {
       var data = _this.props.data;
+      var categList = _this.state.categList;
       document.querySelector('.all-category .m-meta-text').style.color = data.home.allCategory.content.color;
+
+      _this.setState({
+        list: [categList]
+      });
     };
 
     return _this;
@@ -434,32 +439,21 @@ function (_super) {
     var data = this.props.data; // const { ready } = this.state;
 
     console.log('----nav pc', data);
-    var _a = this.state,
-        list = _a.list,
-        categList = _a.categList;
+    var list = this.state.list;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('pc-navigation')
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "menu-wrap",
-      onMouseLeave: function onMouseLeave() {
-        _this.setState({
-          list: [categList]
-        });
-      }
-    }, /*#__PURE__*/_react["default"].createElement("a", {
-      className: "menu-drop",
-      onClick: function onClick(e) {
-        return e.preventDefault();
-      },
       onMouseEnter: this.mouseEnterBtn,
       onMouseLeave: this.mouseLeaveBtn
+    }, /*#__PURE__*/_react["default"].createElement("a", {
+      className: "menu-drop"
     }, /*#__PURE__*/_react["default"].createElement("img", {
       alt: "icon",
       src: data.home.allCategory.iconUrl || _menuIcon["default"]
     }), /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       className: "all-category",
-      data: data.home.allCategory,
-      readonly: true
+      data: data.home.allCategory
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "category"
     }, list.map(function (arrItem, index) {

package/lib/composite-comp/dito/components/Recommend/mobile/index.js

@@ -464,8 +464,7 @@ function (_super) {
 
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
-      if (tabIndex === index) return;
-      e.currentTarget.scrollIntoView(false);
+      if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
 
       _this.setState({
         tabIndex: index

package/lib/composite-comp/dito/components/Recommend/mobile/index.less

@@ -63,15 +63,15 @@
     overflow-x: auto;
     padding-bottom: 15px;
 
+    &.pl_100 {
+      padding-left: 100px;
+    }
+
     .productList {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
 
-      &.pl_100 {
-        padding-left: 100px;
-      }
-
       .productCard {
         margin-right: 12px;
       }

package/lib/composite-comp/dito/components/Recommend/pc/index.js

@@ -475,8 +475,7 @@ function (_super) {
 
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
-      if (tabIndex === index) return;
-      e.currentTarget.scrollIntoView(false);
+      if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
 
       _this.setState({
         tabIndex: index

package/lib/composite-comp/dito/components/Recommend/pc/index.less

@@ -94,15 +94,15 @@
     overflow-x: auto;
     padding-bottom: 15px;
 
+    &.pl_100 {
+      padding-left: 100px;
+    }
+
     .productList {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
 
-      &.pl_100 {
-        padding-left: 100px;
-      }
-
       .productCard {
         margin-right: 20px;
       }

package/lib/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -39,12 +39,30 @@ var getDefaultJSON = function getDefaultJSON() {
     box: {
       id: (0, _uuid.v4)(),
       open: true,
-      color: '#D92929'
+      color: {
+        pc: '#D92929',
+        mobile: '#D92929'
+      }
     },
     icon: {
       id: (0, _uuid.v4)(),
       open: true,
-      color: '#D92929'
+      color: {
+        pc: '#D92929',
+        mobile: '#D92929'
+      }
+    },
+    spacing: {
+      pc: {
+        paddingTop: 20,
+        paddingBottom: 30,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 8,
+        paddingBottom: 8,
+        marginBottom: 0
+      }
     },
     customize: {
       layout: 'left',

package/lib/composite-comp/dito/components/SearchBar/index.js

@@ -71,7 +71,8 @@ function (_super) {
   }
 
   SearchBar.prototype.render = function () {
-    var nodeData = this.props.nodeData;
+    var nodeData = this.props.nodeData; // console.log('search nodeData', nodeData);
+
     return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_index2["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_index["default"], {

package/lib/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -259,16 +259,16 @@ function (_super) {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
       style: {
-        borderColor: data.box.color
+        borderColor: data.box.color.mobile
       }
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.box.color,
+      color: data.box.color.mobile,
       size: 24,
       type: "icon-search2"
     })), data.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.icon.color,
+      color: data.icon.color.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },