@fonixtree/magic-design 0.0.110 → 0.0.112

package/es/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -7,10 +7,6 @@ exports.imagesGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _defaultImg = _interopRequireDefault(require("./imgs/defaultImg.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
   var groupId = (0, _uuid.v4)();
   return {
@@ -24,8 +20,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: 'h5Name',
         pcName: 'pcName',
-        h5ImgSrc: _defaultImg["default"],
-        pcImgSrc: _defaultImg["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -44,7 +40,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Title of this group',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 16,
@@ -67,7 +63,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Please enter a description',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -86,8 +82,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: '',
         pcName: '',
-        h5ImgSrc: _defaultImg["default"],
-        pcImgSrc: _defaultImg["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -109,7 +105,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -145,7 +141,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -174,7 +170,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        // sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -210,7 +206,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          // sizeType: 'Headline 1',
+          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -264,14 +260,14 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     spacing: {
       pc: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        marginBottom: 0
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        marginBottom: 0
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

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

@@ -15,8 +15,6 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,10 +70,7 @@ function (_super) {
 
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: wrapStyle
-    }, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData

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

@@ -13,9 +13,9 @@ var _reactSlick = _interopRequireDefault(require("react-slick"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _components = require("../../../../../meta-comp/components");
+var _coreUtil = require("../../../../../utils/coreUtil");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
+var _components = require("../../../../../meta-comp/components");
 
 require("slick-carousel/slick/slick.css");
 
@@ -70,20 +70,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 =
@@ -98,6 +98,17 @@ function (_super) {
       sliderIndex: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.destroy = null;
+
+    _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 +144,28 @@ 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);
+      /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+      if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+        _this.sliderRef.slickPause();
+      }
+    });
   };
 
   CarouselMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    this.sliderGoTo(nextProps.data.groupSource);
+
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -148,6 +173,10 @@ function (_super) {
     }
   };
 
+  CarouselMobile.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
   CarouselMobile.prototype.render = function () {
     var _this = this;
 
@@ -155,43 +184,36 @@ function (_super) {
     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 = {};
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-    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%'
-      };
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
     }
 
-    var spacing = data.spacing[window.magicDesign.device];
-    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     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',
       slidesToShow: colNum,
-      slidesToScroll: colNum,
+      slidesToScroll: 1,
       beforeChange: function beforeChange(oldIndex, newIndex) {
         _this.setState({
           sliderIndex: newIndex
         });
       }
-    }; // const navStyle = {
-    //   fontSize: data.setting.navigation.size,
-    //   color: data.setting.navigation.color,
-    // };
-
+    };
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-carousel-mobile",
-      style: bgStyle
+      className: "m-carousel-mobile"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content",
+      style: {
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+      }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
@@ -204,9 +226,7 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
-        isBackground: true,
-        maxHeight: MOBILE_IMG_SIZE[colNum - 1].h,
-        maxWidth: MOBILE_IMG_SIZE[colNum - 1].w
+        maxHeight: MOBILE_IMG_SIZE[colNum - 1].maxH
       })), 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, {
@@ -225,7 +245,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    })), data.setting.dots.open && /*#__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", {
@@ -241,7 +261,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,32 @@
 .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;
+
+    .slick-list {
+      padding-top: 100px;
+      margin-top: -100px;
+      padding-bottom: 100px;
+      margin-bottom: -100px;
+
+      margin-left: -11px;
+      margin-right: -11px;
+
+      .slick-track {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+    }
 
     .img-wrap {
       .img {
@@ -30,6 +50,7 @@
 
       .tags {
         margin-top: 8px;
+        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -44,17 +65,12 @@
         }
       }
     }
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
   }
 
   .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

@@ -15,9 +15,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
-var _components = require("../../../../../meta-comp/components");
+var _mobx = require("../../../../../mobx");
 
-var _commonUtil = require("../../../../../utils/commonUtil");
+var _components = require("../../../../../meta-comp/components");
 
 var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
 
@@ -56,29 +56,35 @@ 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
+  minH: 150,
+  maxH: 524
 }, {
-  minW: 258,
+  minW: 100,
   maxW: 341,
-  maxH: 256
+  minH: 100,
+  maxH: 341
 }, {
-  minW: 184,
+  minW: 100,
   maxW: 251,
-  maxH: 188
+  minH: 100,
+  maxH: 251
 }, {
-  minW: 142,
+  minW: 100,
   maxW: 195,
-  maxH: 147
+  minH: 100,
+  maxH: 195
 }, {
-  minW: 124,
+  minW: 100,
   maxW: 168,
-  maxH: 126
+  minH: 100,
+  maxH: 168
 }];
 
 var CarouselPc =
@@ -93,6 +99,17 @@ function (_super) {
       sliderIndex: 0
     };
     _this.sliderRef = /*#__PURE__*/_react["default"].createRef();
+    _this.destroy = null;
+
+    _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 +142,23 @@ function (_super) {
     return _this;
   }
 
+  CarouselPc.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destroy = (0, _mobx.autorun)(function () {
+      _this.sliderGoTo(_this.props.data.groupSource);
+      /** 设计器模式下 如果选中特定group 自动播放关闭 */
+
+
+      if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+        _this.sliderRef.slickPause();
+      }
+    });
+  };
+
   CarouselPc.prototype.componentWillReceiveProps = function (nextProps) {
+    this.sliderGoTo(nextProps.data.groupSource);
+
     if (nextProps.data.setting.autoplay.open) {
       this.sliderRef.slickPlay();
     } else {
@@ -133,6 +166,10 @@ function (_super) {
     }
   };
 
+  CarouselPc.prototype.componentWillUnmount = function () {
+    this.destroy();
+  };
+
   CarouselPc.prototype.render = function () {
     var _this = this;
 
@@ -140,30 +177,23 @@ function (_super) {
     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 = {};
+    var autoplay = data.setting.autoplay.open;
+    /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-    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%'
-      };
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
+      autoplay = false;
     }
 
-    var spacing = data.spacing[window.magicDesign.device];
-    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     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',
       slidesToShow: colNum,
-      slidesToScroll: colNum,
+      slidesToScroll: 1,
       beforeChange: function beforeChange(oldIndex, newIndex) {
         _this.setState({
           sliderIndex: newIndex
@@ -175,8 +205,12 @@ function (_super) {
       color: data.setting.navigation.color
     };
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-carousel-pc",
-      style: bgStyle
+      className: "m-carousel-pc"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content",
+      style: {
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+      }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
@@ -198,9 +232,8 @@ 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,
+        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"
@@ -220,7 +253,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    })), data.setting.dots.open && /*#__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 +278,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-right"
-    }));
+    })));
   };
 
   CarouselPc.defaultProps = {

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

@@ -1,28 +1,50 @@
 .m-carousel-pc {
-  display: flex;
   position: relative;
-  margin: 0 auto;
+  width: 100%;
+
+  .content {
+    display: flex;
+    margin: 0 auto;
+  }
 
   .carousel-icon-left {
-    float: left;
-    margin-left: 50px;
+    margin-right: 20px;
+    cursor: pointer;
   }
 
   .carousel-icon-right {
-    float: right;
-    margin-right: 50px;
+    margin-left: 20px;
+    cursor: pointer;
   }
 
   .slider-wrap {
-    width: calc(100% - 200px);
-    padding: 30px 0;
+    width: calc(100% - 72px);
     margin: 0 auto;
+    line-height: 1;
+
+    .slick-list {
+      padding-top: 100px;
+      margin-top: -100px;
+      padding-bottom: 100px;
+      margin-bottom: -100px;
+
+      .slick-track {
+        display: flex;
+        align-items: center;
+
+        .slick-slide {
+          margin-right: 24px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
 
     .img-wrap {
       .img {
         width: fit-content;
-        height: fit-content;
-        display: block;
         margin: 0 auto;
       }
 
@@ -40,6 +62,7 @@
 
       .tags {
         margin-top: 8px;
+        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -54,17 +77,14 @@
         }
       }
     }
-
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
   }
 
   .swiper-ban {
     position: absolute;
     width: 100%;
-    bottom: 0;
+    bottom: 10px;
+    left: 0;
+    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;