@fonixtree/magic-design 0.0.93 → 0.0.96

package/es/composite-comp/bol/components/Banner/pc/index.js

@@ -184,20 +184,7 @@ function (_super) {
 
   BannerPc.prototype.componentWillUnmount = function () {
     this.destroy();
-  }; // getBgStyle = item => {
-  //   const { data } = this.props;
-  //   const bgStyle = {
-  //     justifyContent: alignItemMap[item.customize.layout],
-  //   };
-  //   if (item.background.bgType === 'color') {
-  //     bgStyle.backgroundColor = getColorRgba(item.background.color || '#fff', item.background.opacity / 100 || 1);
-  //   } else {
-  //     bgStyle.backgroundImage = `url(${item.background.image})`;
-  //   }
-  //   if (data.setting.pcHeight) bgStyle.height = data.setting.pcHeight;
-  //   return bgStyle;
-  // }
-
+  };
 
   BannerPc.prototype.render = function () {
     var _this = this;

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

@@ -13,14 +13,10 @@ var _reactSlick = _interopRequireDefault(require("react-slick"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _components = require("../../../../../meta-comp/components");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
-
 require("slick-carousel/slick/slick.css");
 
 require("slick-carousel/slick/slick-theme.css");
@@ -99,19 +95,11 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      sliderIndex: 0,
-      contentWidth: 0
+      sliderIndex: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
 
-    _this.listenWidth = function () {
-      var renderContainer = document.querySelector('.composite_wrap');
-      if (renderContainer) _this.setState({
-        contentWidth: renderContainer.offsetWidth
-      });
-    };
-
     _this.sliderGoTo = function (groupSource) {
       var nextIndex = groupSource.findIndex(function (item) {
         return item.id === _mobx.store.clickedGroup;
@@ -173,8 +161,6 @@ function (_super) {
         _this.sliderRef.slickPause();
       }
     });
-    this.listenWidth();
-    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
   };
 
   CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
@@ -195,24 +181,9 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
-    var _a = this.state,
-        sliderIndex = _a.sliderIndex,
-        contentWidth = _a.contentWidth;
+    var sliderIndex = this.state.sliderIndex;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.rowNum, data.groupSource.length);
-    var bgStyle = {};
-
-    if (data.background.bgType === 'color') {
-      bgStyle = {
-        backgroundColor: (0, _commonUtil.getColorRgba)(data.background.color || '#fff', data.background.opacity / 100 || 1)
-      };
-    } else {
-      bgStyle = {
-        background: "url(" + data.background.image + ") no-repeat center",
-        backgroundSize: '100%'
-      };
-    }
-
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -236,14 +207,13 @@ function (_super) {
         });
       }
     };
-    var spacing = data.spacing[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-carousel-mobile",
-      style: bgStyle
+      className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content",
+      className: (0, _classnames["default"])('content', {
+        isHorizontal: colNum === 1
+      }),
       style: {
-        width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
         paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({

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

@@ -5,6 +5,12 @@
   .content {
     display: flex;
     margin: 0 auto;
+
+    &.isHorizontal {
+      .slick-track {
+        gap: 0;
+      }
+    }
   }
 
   .slider-wrap {
@@ -12,6 +18,12 @@
     margin: 0 auto;
     line-height: 1;
 
+    .slick-track {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
     .img-wrap {
       .img {
         width: fit-content;
@@ -49,11 +61,6 @@
         }
       }
     }
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
   }
 
   .swiper-ban {

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

@@ -13,16 +13,12 @@ var _reactSlick = _interopRequireDefault(require("react-slick"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _mobx = require("../../../../../mobx");
 
 var _components = require("../../../../../meta-comp/components");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
-
 var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
 
 require("slick-carousel/slick/slick.css");
@@ -100,19 +96,11 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      sliderIndex: 0,
-      contentWidth: 0
+      sliderIndex: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
 
-    _this.listenWidth = function () {
-      var renderContainer = document.querySelector('.composite_wrap');
-      if (renderContainer) _this.setState({
-        contentWidth: renderContainer.offsetWidth
-      });
-    };
-
     _this.sliderGoTo = function (groupSource) {
       var nextIndex = groupSource.findIndex(function (item) {
         return item.id === _mobx.store.clickedGroup;
@@ -166,8 +154,6 @@ function (_super) {
         _this.sliderRef.slickPause();
       }
     });
-    this.listenWidth();
-    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
   };
 
   CarouselPc.prototype.componentWillReceiveProps = function (nextProps) {
@@ -188,24 +174,9 @@ function (_super) {
     var _this = this;
 
     var data = this.props.data;
-    var _a = this.state,
-        sliderIndex = _a.sliderIndex,
-        contentWidth = _a.contentWidth;
+    var sliderIndex = this.state.sliderIndex;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
-    var bgStyle = {};
-
-    if (data.background.bgType === 'color') {
-      bgStyle = {
-        backgroundColor: (0, _commonUtil.getColorRgba)(data.background.color || '#fff', data.background.opacity / 100 || 1)
-      };
-    } else {
-      bgStyle = {
-        background: "url(" + data.background.image + ") no-repeat center",
-        backgroundSize: '100%'
-      };
-    }
-
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -233,14 +204,13 @@ 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
+      className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content",
+      className: (0, _classnames["default"])('content', {
+        isHorizontal: colNum === 1
+      }),
       style: {
-        width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
         paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {

package/es/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/es/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/es/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/es/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/es/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/es/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/es/composite-comp/common/components/ProductItem/index.less

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

package/es/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/es/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/es/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", {