@fonixtree/magic-design 0.0.70 → 0.0.71

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/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/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/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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",