@fonixtree/magic-design 0.0.94 → 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/pc/index.js

@@ -58,7 +58,7 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 var PC_IMG_SIZE = {
   1: {
     minW: 150,
-    maxW: '100%',
+    maxW: 1280,
     minH: 150,
     maxH: 960,
     gap: 20

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

package/es/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/es/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/es/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/es/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%;

package/es/decorator/compositeDecorator.js

@@ -123,8 +123,9 @@ function compositeDecorator(WrappedComponent) {
               wrapStyle.opacity = background.opacity ? background.opacity : 1;
             } else {
               wrapStyle.backgroundImage = "url(" + background.image + ")";
-              wrapStyle.backgroundPosition = 'center';
-              wrapStyle.backgroundSize = 'cover';
+              wrapStyle.backgroundPosition = '0px 0px';
+              wrapStyle.backgroundSize = 'auto 100%';
+              wrapStyle.backgroundRepeat = 'no-repeat';
             }
           }
         }

package/lib/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;