@fonixtree/magic-design 0.0.93 → 0.0.96

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

@@ -5,6 +5,12 @@
   .content {
     display: flex;
     margin: 0 auto;
+
+    &.isHorizontal {
+      .slick-track {
+        gap: 0;
+      }
+    }
   }
 
   .carousel-icon-left {
@@ -22,13 +28,15 @@
     margin: 0 auto;
     line-height: 1;
 
-    .img-wrap {
-      overflow-x: auto;
+    .slick-track {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
 
+    .img-wrap {
       .img {
         width: fit-content;
-        height: fit-content;
-        display: block;
         margin: 0 auto;
       }
 
@@ -61,11 +69,6 @@
         }
       }
     }
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
   }
 
   .swiper-ban {

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

@@ -41,6 +41,20 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
 var MOBILE_IMG_SIZE = {
   1: {
     maxW: 343,
@@ -85,26 +99,36 @@ function (_super) {
     var data = this.props.data;
     var isHorizontal = data.customize.layout.h5Layout === 'layout2';
     var colNum = isHorizontal ? data.customize.rowNum : 1;
+    var newData = data.groupSource.reduce(function (prev, curr, index) {
+      var i = Math.floor(index / colNum);
+      prev[i] = __spreadArrays(prev[i] || [], [curr]);
+      return prev;
+    }, []);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: MOBILE_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: MOBILE_IMG_SIZE[colNum].maxW
+          gap: MOBILE_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
-        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }, arr.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: item.id,
+          className: "img-wrap",
+          style: {
+            width: "calc((100% - " + MOBILE_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          data: item.image,
+          maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
+          maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,25 @@
 .m-image-gallery-mobile {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 345px;
+    max-width: 345px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .line {
+      margin-bottom: 12px;
+
+      &.isHorizontal {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-    .img-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -41,10 +41,24 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
 var PC_IMG_SIZE = {
   1: {
     minW: 150,
-    maxW: '100%',
+    maxW: 1280,
     minH: 150,
     maxH: 960,
     gap: 20
@@ -102,26 +116,38 @@ function (_super) {
     var data = this.props.data;
     var isHorizontal = data.customize.layout.pcLayout === 'layout2';
     var colNum = isHorizontal ? data.customize.pcRowNum : 1;
+    var newData = data.groupSource.reduce(function (prev, curr, index) {
+      var i = Math.floor(index / colNum);
+      prev[i] = __spreadArrays(prev[i] || [], [curr]);
+      return prev;
+    }, []);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: PC_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: PC_IMG_SIZE[colNum].maxW
+          gap: PC_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: PC_IMG_SIZE[colNum].maxH,
-        maxWidth: PC_IMG_SIZE[colNum].maxW
+      }, arr.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: item.id,
+          className: "img-wrap",
+          style: {
+            width: "calc((100% - " + PC_IMG_SIZE[colNum].gap * (colNum - 1) + "px) / " + colNum + ")"
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+          data: item.image,
+          maxHeight: PC_IMG_SIZE[colNum].maxH,
+          maxWidth: PC_IMG_SIZE[colNum].maxW,
+          minHeight: PC_IMG_SIZE[colNum].minH,
+          minWidth: PC_IMG_SIZE[colNum].minW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,26 @@
 .m-image-gallery-pc {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 1280px;
+    max-width: 1280px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .line {
+      margin-bottom: 20px;
+
+      &.isHorizontal {
+        margin-bottom: 24px;
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-    .img-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -167,7 +167,7 @@ function (_super) {
       className: "content-wrap"
     }, panelProps.label.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "promotions-wrap"
-    }, promotions.map(function (promot, index) {
+    }, ['promotion', 'recommend', 'helloworld'].map(function (promot, index) {
       return /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         key: index,
         className: "promotion-item",

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

@@ -132,6 +132,8 @@
   &.fixHeight {
     .promotions-wrap {
       height: 30px;
+      flex-wrap: nowrap;
+      overflow: hidden;
     }
 
     .product-name {

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

@@ -185,9 +185,15 @@ function (_super) {
   }
 
   CustomizeConfig.prototype.componentDidMount = function () {
-    var _a;
+    var _a = this.props,
+        selectedLayoutFun = _a.selectedLayoutFun,
+        data = _a.data;
 
-    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
+    if (selectedLayoutFun) {
+      this.onInit((0, _coreUtil.isPc)() ? data.layout.pcLayout : data.layout.h5Layout);
+    } else {
+      this.onInit(data.layout);
+    }
   };
 
   CustomizeConfig.prototype.render = function () {

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

@@ -383,22 +383,8 @@ function (_super) {
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
-    var bgStyle = {};
-
-    if (panelProps.background.bgType === 'color') {
-      bgStyle = {
-        backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
-      };
-    } else {
-      bgStyle = {
-        background: "url(" + panelProps.background.image + ") no-repeat center",
-        backgroundSize: '100%'
-      };
-    }
-
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-flash-deal-mobile",
-      style: bgStyle
+      className: "m-flash-deal-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "flash-deal-title"
     }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -484,24 +484,10 @@ function (_super) {
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
-    var bgStyle = {};
-
-    if (panelProps.background.bgType === 'color') {
-      bgStyle = {
-        backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
-      };
-    } else {
-      bgStyle = {
-        background: "url(" + panelProps.background.image + ") no-repeat center",
-        backgroundSize: '100%'
-      };
-    }
-
     var imgHeight = panelProps.customize.pcRowNum === 6 ? 153 : 193;
     var imgWidth = panelProps.customize.pcRowNum === 6 ? 153 : 193;
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-flash-deal-pc",
-      style: bgStyle
+      className: "m-flash-deal-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "flash-deal-title"
     }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -343,8 +343,11 @@ function (_super) {
               _k.label = 1;
 
             case 1:
-              _k.trys.push([1, 7,, 8]);
+              _k.trys.push([1, 9,, 10]);
 
+              if (!(groupSource.length > 0)) return [3
+              /*break*/
+              , 7];
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
@@ -401,13 +404,22 @@ function (_super) {
               , 8];
 
             case 7:
+              newData = [];
+              _k.label = 8;
+
+            case 8:
+              return [3
+              /*break*/
+              , 10];
+
+            case 9:
               e_1 = _k.sent();
               newData = [];
               return [3
               /*break*/
-              , 8];
+              , 10];
 
-            case 8:
+            case 10:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + recommendId);
                 (0, _storeUtil.setMagicStore)("recommend_" + recommendId, __assign(__assign({}, _cache), (_h = {}, _h["products" + index] = newData, _h.endTime = Date.now() + 3 * 60 * 1000, _h)));
@@ -456,24 +468,6 @@ function (_super) {
       }, true);
     };
 
-    _this.getBackgroundStyle = function () {
-      var panelProps = _this.props.panelProps;
-      var bgStyle = {};
-
-      if (panelProps.background.bgType === 'color') {
-        bgStyle = {
-          backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
-        };
-      } else {
-        bgStyle = {
-          background: "url(" + panelProps.background.image + ") no-repeat center",
-          backgroundSize: '100%'
-        };
-      }
-
-      return bgStyle;
-    };
-
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
       if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
@@ -511,11 +505,11 @@ function (_super) {
     this.listenWidth();
   };
 
-  RecommendMobile.prototype.componentWillReceiveProps = function () {
+  RecommendMobile.prototype.componentWillReceiveProps = function (nextProps) {
     var _this = this;
 
     var tabIndex = this.state.tabIndex;
-    var panelProps = this.props.panelProps;
+    var panelProps = nextProps.panelProps;
     var source = [];
     var hideTabs = false;
     panelProps.groupSource.map(function (m) {
@@ -523,8 +517,8 @@ function (_super) {
       if (show) source.push(m);
     });
 
-    if (source.length === 0 && panelProps.groupSource.length > 0) {
-      source.push(panelProps.groupSource[0]);
+    if (source.length === 0) {
+      if (panelProps.groupSource.length > 0) source.push(panelProps.groupSource[0]);
       hideTabs = true;
     }
 
@@ -578,7 +572,6 @@ function (_super) {
         groupSource = _a.groupSource,
         hideTabs = _a.hideTabs,
         contentWidth = _a.contentWidth;
-    var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
     var layout = panelProps.customize.layout.h5Layout;
@@ -596,8 +589,7 @@ function (_super) {
     if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12) / 2;
     if (layout === 'layout3' && contentWidth) imgHeight = (contentWidth - 12 * 2) / 3;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-recommend-mobile",
-      style: bgStyle
+      className: "m-recommend-mobile"
     }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-select-wrap"
     }, groupSource.map(function (tab, index) {
@@ -628,7 +620,7 @@ function (_super) {
           tab.groupName.text = text;
         }
       }));
-    }), /*#__PURE__*/_react["default"].createElement("div", {
+    }), groupSource.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
       className: "active-line",
       style: {
         width: tabWidth,

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

@@ -25,6 +25,7 @@
     .tabTitle {
       display: flex;
       align-items: center;
+      text-align: center;
       padding: 0 24px;
       width: fit-content;
       height: 100%;

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

@@ -13,7 +13,9 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _lodash = require("lodash");
+
+var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 
 var _mobx = require("../../../../../mobx");
 
@@ -359,8 +361,11 @@ function (_super) {
               _k.label = 1;
 
             case 1:
-              _k.trys.push([1, 7,, 8]);
+              _k.trys.push([1, 9,, 10]);
 
+              if (!(groupSource.length > 0)) return [3
+              /*break*/
+              , 7];
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
@@ -417,13 +422,22 @@ function (_super) {
               , 8];
 
             case 7:
+              newData = [];
+              _k.label = 8;
+
+            case 8:
+              return [3
+              /*break*/
+              , 10];
+
+            case 9:
               e_1 = _k.sent();
               newData = [];
               return [3
               /*break*/
-              , 8];
+              , 10];
 
-            case 8:
+            case 10:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + recommendId);
                 (0, _storeUtil.setMagicStore)("recommend_" + recommendId, __assign(__assign({}, _cache), (_h = {}, _h["products" + index] = newData, _h.endTime = Date.now() + 3 * 60 * 1000, _h)));
@@ -467,24 +481,6 @@ function (_super) {
       }, true);
     };
 
-    _this.getBackgroundStyle = function () {
-      var panelProps = _this.props.panelProps;
-      var bgStyle = {};
-
-      if (panelProps.background.bgType === 'color') {
-        bgStyle = {
-          backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
-        };
-      } else {
-        bgStyle = {
-          background: "url(" + panelProps.background.image + ") no-repeat center",
-          backgroundSize: '100%'
-        };
-      }
-
-      return bgStyle;
-    };
-
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
       if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
@@ -505,7 +501,7 @@ function (_super) {
         if (scrollDom) {
           _this.setScrollDisabled(scrollDom);
 
-          scrollDom.onscroll = (0, _lodash["default"])(function () {
+          scrollDom.onscroll = (0, _lodash2["default"])(function () {
             _this.setScrollDisabled(scrollDom);
           }, 500);
         }
@@ -553,19 +549,24 @@ function (_super) {
       if (scrollDom) {
         _this.setScrollDisabled(scrollDom);
 
-        scrollDom.onscroll = (0, _lodash["default"])(function () {
+        scrollDom.onscroll = (0, _lodash2["default"])(function () {
           _this.setScrollDisabled(scrollDom);
         }, 500);
       }
     }, 0);
     this.listenWidth();
+    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
+  };
+
+  RecommendMobile.prototype.componentWillUnmount = function () {
+    window.removeEventListener('resize', this.listenWidth);
   };
 
-  RecommendMobile.prototype.componentWillReceiveProps = function () {
+  RecommendMobile.prototype.componentWillReceiveProps = function (nextProps) {
     var _this = this;
 
     var tabIndex = this.state.tabIndex;
-    var panelProps = this.props.panelProps;
+    var panelProps = nextProps.panelProps;
     var source = [];
     var hideTabs = false;
     panelProps.groupSource.map(function (m) {
@@ -573,8 +574,8 @@ function (_super) {
       if (show) source.push(m);
     });
 
-    if (source.length === 0 && panelProps.groupSource.length > 0) {
-      source.push(panelProps.groupSource[0]);
+    if (source.length === 0) {
+      if (panelProps.groupSource.length > 0) source.push(panelProps.groupSource[0]);
       hideTabs = true;
     }
 
@@ -610,7 +611,7 @@ function (_super) {
         if (scrollDom) {
           _this.setScrollDisabled(scrollDom);
 
-          scrollDom.onscroll = (0, _lodash["default"])(function () {
+          scrollDom.onscroll = (0, _lodash2["default"])(function () {
             _this.setScrollDisabled(scrollDom);
           }, 500);
         }
@@ -646,7 +647,6 @@ function (_super) {
         scrollToLeftDisabled = _a.scrollToLeftDisabled,
         scrollToRightDisabled = _a.scrollToRightDisabled,
         contentWidth = _a.contentWidth;
-    var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 10;
     var layout = panelProps.customize.layout.pcLayout;
@@ -663,8 +663,7 @@ function (_super) {
     }, 140);
     if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12 * (panelProps.customize.pcRowNum - 1)) / panelProps.customize.pcRowNum;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-recommend-pc",
-      style: bgStyle
+      className: "m-recommend-pc"
     }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-select-wrap"
     }, groupSource.map(function (tab, index) {

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

@@ -25,6 +25,7 @@
     .tabTitle {
       display: flex;
       align-items: center;
+      text-align: center;
       // padding: 0 24px;
       min-width: 100px;
       height: 100%;