@fonixtree/magic-design 0.0.81 → 0.0.83

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

@@ -49,6 +49,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var BannerMobile =
 /** @class */
 function (_super) {
@@ -74,6 +90,31 @@ function (_super) {
       }
     };
 
+    _this.getPaddingAndBackground = function (item) {
+      var spacing = _this.props.data.spacing; // const { spacing, background } = data;
+
+      var device = window.magicDesign.device;
+      var wrapStyle = {}; // 边距
+
+      if (spacing && spacing[device]) {
+        wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+      } // 背景
+
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          wrapStyle.backgroundColor = item.background.color;
+          wrapStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          wrapStyle.backgroundImage = "url(" + item.background.image + ")";
+          wrapStyle.backgroundPosition = 'center';
+          wrapStyle.backgroundSize = 'cover';
+        }
+      }
+
+      return __assign({}, wrapStyle);
+    };
+
     _this.getItemStyle = function (item) {
       var data = _this.props.data;
       return {
@@ -128,7 +169,10 @@ function (_super) {
     }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-banner-mobile"
+      className: "m-banner-mobile",
+      style: {
+        marginBottom: data.spacing.mobile.marginBottom || 0
+      }
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
@@ -142,6 +186,8 @@ function (_super) {
     }, data.groupSource.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: _this.getPaddingAndBackground(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouselItem",
         onMouseEnter: _this.mouseEnterWrap,
@@ -176,7 +222,7 @@ function (_super) {
       }), item.secondButton.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "btn",
         data: item.secondButton
-      })))));
+      }))))));
     })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "swiper-ban"
     }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {

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

@@ -23,8 +23,6 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _common = require("../../../../../common");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -53,6 +51,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 // @inject('store')
 // @observer
 var BannerPc =
@@ -120,20 +134,37 @@ function (_super) {
       }
     };
 
-    _this.getBgStyle = function (item) {
-      var data = _this.props.data;
-      var bgStyle = {
-        justifyContent: _AlignSelector.alignItemMap[item.customize.layout]
-      };
+    _this.getPaddingAndBackground = function (item) {
+      var spacing = _this.props.data.spacing; // const { spacing, background } = data;
+
+      var device = window.magicDesign.device;
+      var wrapStyle = {}; // 边距
 
-      if (item.background.bgType === 'color') {
-        bgStyle.backgroundColor = (0, _commonUtil.getColorRgba)(item.background.color || '#fff', item.background.opacity / 100 || 1);
-      } else {
-        bgStyle.backgroundImage = "url(" + item.background.image + ")";
+      if (spacing && spacing[device]) {
+        wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+      } // 背景
+
+
+      if (item.background) {
+        if (item.background.bgType === 'color') {
+          wrapStyle.backgroundColor = item.background.color;
+          wrapStyle.opacity = item.background.opacity ? item.background.opacity : 1;
+        } else {
+          wrapStyle.backgroundImage = "url(" + item.background.image + ")";
+          wrapStyle.backgroundPosition = 'center';
+          wrapStyle.backgroundSize = 'cover';
+        }
       }
 
-      if (data.setting.pcHeight) bgStyle.height = data.setting.pcHeight;
-      return bgStyle;
+      return __assign({}, wrapStyle);
+    };
+
+    _this.getItemStyle = function (item) {
+      var data = _this.props.data;
+      return {
+        justifyContent: _AlignSelector.alignItemMap[item.customize.layout],
+        height: data.setting.pcHeight
+      };
     };
 
     return _this;
@@ -153,7 +184,20 @@ 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;
@@ -197,11 +241,13 @@ function (_super) {
     }, data.groupSource.map(function (item, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: _this.getPaddingAndBackground(item)
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "carouselItem",
         onMouseEnter: _this.mouseEnterWrap,
         onMouseLeave: _this.mouseLeaveWrap,
-        style: _this.getBgStyle(item)
+        style: _this.getItemStyle(item)
       }, item.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         hoverState: hoverState && carouseIndex === index,
@@ -231,7 +277,7 @@ function (_super) {
       }), item.secondButton.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         className: "btn",
         data: item.secondButton
-      })))));
+      }))))));
     })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "swiper-ban"
     }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {

package/es/composite-comp/bol/components/Button/index.less

@@ -13,36 +13,35 @@
   }
 
   &.layout1 {
-    flex-direction: column;
+    flex-direction: row;
 
     &.left {
-      align-items: flex-start;
+      justify-content: flex-start;
     }
 
     &.center {
-      align-items: center;
+      justify-content: center;
     }
 
     &.right {
-      align-items: flex-end;
+      justify-content: flex-end;
     }
   }
 
   &.layout2 {
-    flex-direction: row;
+    flex-direction: column;
 
     &.left {
-      justify-content: flex-start;
+      align-items: flex-start;
     }
 
     &.center {
-      justify-content: center;
+      align-items: center;
     }
 
     &.right {
-      justify-content: flex-end;
+      align-items: flex-end;
     }
   }
 
-
 }

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

@@ -13,6 +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");
@@ -70,20 +74,20 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 
 var MOBILE_IMG_SIZE = [{
-  w: 282,
-  h: 212
+  maxW: 375,
+  maxH: 160
 }, {
-  w: 135,
-  h: 102
+  maxW: 169,
+  maxH: 126
 }, {
-  w: 86,
-  h: 65
+  maxW: 109,
+  maxH: 82
 }, {
-  w: 60,
-  h: 45
+  maxW: 78,
+  maxH: 58
 }, {
-  w: 50,
-  h: 50
+  maxW: 50,
+  maxH: 50
 }];
 
 var CarouselMobile =
@@ -95,9 +99,28 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      sliderIndex: 0
+      sliderIndex: 0,
+      contentWidth: 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;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
+        _this.sliderRef.slickGoTo(nextIndex);
+      }
+    };
 
     _this.mouseEnterBtn = function (e) {
       var _a, _b;
@@ -133,14 +156,24 @@ function (_super) {
   CarouselMobile.prototype.componentDidMount = function () {
     var _a;
 
+    var _this = this;
+
     var data = this.props.data;
 
     _mobx.store.setState({
       CarouselStore: __assign(__assign({}, _mobx.store.CarouselStore), (_a = {}, _a[data.id] = data.customize.layout, _a))
     });
+
+    this.destroy = (0, _mobx.autorun)(function () {
+      _this.sliderGoTo(_this.props.data.groupSource);
+    });
+    this.listenWidth();
+    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
   };
 
   CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    this.sliderGoTo(nextProps.data.groupSource);
+
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -148,11 +181,17 @@ function (_super) {
     }
   };
 
+  CarouselMobile.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
   CarouselMobile.prototype.render = function () {
     var _this = this;
 
     var data = this.props.data;
-    var sliderIndex = this.state.sliderIndex;
+    var _a = this.state,
+        sliderIndex = _a.sliderIndex,
+        contentWidth = _a.contentWidth;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.rowNum, data.groupSource.length);
     var bgStyle = {};
@@ -168,13 +207,18 @@ function (_super) {
       };
     }
 
-    var spacing = data.spacing[window.magicDesign.device];
-    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
     var settings = {
       className: 'slider-wrap',
       arrows: false,
       dots: false,
-      autoplay: data.setting.autoplay.open,
+      autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
       draggable: window.magicDesign.mode === 'renderer',
@@ -186,9 +230,16 @@ function (_super) {
         });
       }
     };
+    var spacing = data.spacing[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile",
       style: bgStyle
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content",
+      style: {
+        width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
+        paddingBottom: data.setting.dots.open ? '20px' : '0'
+      }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
@@ -201,8 +252,8 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
-        maxHeight: MOBILE_IMG_SIZE[colNum - 1].h,
-        maxWidth: MOBILE_IMG_SIZE[colNum - 1].w
+        maxHeight: MOBILE_IMG_SIZE[colNum - 1].maxH,
+        maxWidth: MOBILE_IMG_SIZE[colNum - 1].maxW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -237,7 +288,7 @@ function (_super) {
           fontSize: i == sliderIndex ? data.setting.dots.hoverSize : data.setting.dots.size
         }
       });
-    })));
+    }))));
   };
 
   CarouselMobile.defaultProps = {

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

@@ -1,12 +1,16 @@
 .m-carousel-mobile {
-  display: flex;
   position: relative;
-  margin: 0 auto;
+  width: 100%;
+
+  .content {
+    display: flex;
+    margin: 0 auto;
+  }
 
   .slider-wrap {
     width: 100%;
-    padding: 30px 0;
     margin: 0 auto;
+    line-height: 1;
 
     .img-wrap {
       .img {
@@ -30,6 +34,7 @@
 
       .tags {
         margin-top: 8px;
+        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -54,7 +59,7 @@
   .swiper-ban {
     position: absolute;
     width: 100%;
-    bottom: 0;
+    bottom: 6px;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -13,8 +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");
@@ -25,10 +29,14 @@ require("slick-carousel/slick/slick.css");
 
 require("slick-carousel/slick/slick-theme.css");
 
+var _ref, _ref2, _ref3, _ref4;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -56,30 +64,28 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var PC_IMG_SIZE = [{
-  minW: 806,
+  minW: 150,
   maxW: 1072,
-  maxH: 662
+  minH: 150,
+  maxH: 400
 }, {
-  minW: 390,
+  minW: 150,
   maxW: 524,
-  maxH: 393
-}, {
-  minW: 258,
-  maxW: 341,
-  maxH: 256
-}, {
-  minW: 184,
-  maxW: 251,
-  maxH: 188
-}, {
-  minW: 142,
-  maxW: 195,
-  maxH: 147
-}, {
-  minW: 124,
-  maxW: 168,
-  maxH: 126
-}];
+  minH: 150,
+  maxH: 524
+}, (_ref = {
+  minW: 100,
+  maxW: 341
+}, _defineProperty(_ref, "minW", 100), _defineProperty(_ref, "maxW", 341), _ref), (_ref2 = {
+  minW: 100,
+  maxW: 251
+}, _defineProperty(_ref2, "minW", 100), _defineProperty(_ref2, "maxW", 251), _ref2), (_ref3 = {
+  minW: 100,
+  maxW: 195
+}, _defineProperty(_ref3, "minW", 100), _defineProperty(_ref3, "maxW", 195), _ref3), (_ref4 = {
+  minW: 100,
+  maxW: 168
+}, _defineProperty(_ref4, "minW", 100), _defineProperty(_ref4, "maxW", 168), _ref4)];
 
 var CarouselPc =
 /** @class */
@@ -90,9 +96,28 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      sliderIndex: 0
+      sliderIndex: 0,
+      contentWidth: 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;
+      });
+
+      if (nextIndex != -1 && nextIndex != _this.state.sliderIndex) {
+        _this.sliderRef.slickGoTo(nextIndex);
+      }
+    };
 
     _this.mouseEnterBtn = function (e) {
       var _a, _b;
@@ -125,7 +150,19 @@ function (_super) {
     return _this;
   }
 
+  CarouselPc.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = (0, _mobx.autorun)(function () {
+      _this.sliderGoTo(_this.props.data.groupSource);
+    });
+    this.listenWidth();
+    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
+  };
+
   CarouselPc.prototype.componentWillReceiveProps = function (nextProps) {
+    this.sliderGoTo(nextProps.data.groupSource);
+
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -133,11 +170,17 @@ function (_super) {
     }
   };
 
+  CarouselPc.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
   CarouselPc.prototype.render = function () {
     var _this = this;
 
     var data = this.props.data;
-    var sliderIndex = this.state.sliderIndex;
+    var _a = this.state,
+        sliderIndex = _a.sliderIndex,
+        contentWidth = _a.contentWidth;
     var showText = data.customize.layout === 'layout2';
     var colNum = showText ? 1 : Math.min(data.customize.pcRowNum, data.groupSource.length);
     var bgStyle = {};
@@ -153,11 +196,18 @@ function (_super) {
       };
     }
 
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
+    }
+
     var settings = {
       className: 'slider-wrap',
       arrows: false,
       dots: false,
-      autoplay: data.setting.autoplay.open,
+      autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
       draggable: window.magicDesign.mode === 'renderer',
@@ -180,7 +230,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        width: spacing.contentWidth ? 'fit-content' : '100%'
+        width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
+        paddingBottom: data.setting.dots.open ? '30px' : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -191,11 +242,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        width: spacing.contentWidth || 'calc(100% - 52px)'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
+    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
@@ -209,6 +256,7 @@ function (_super) {
         data: item.image,
         maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
         maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
+        minHeight: PC_IMG_SIZE[colNum - 1].minH,
         minWidth: PC_IMG_SIZE[colNum - 1].minW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
@@ -228,7 +276,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", {