@fonixtree/magic-design 1.0.4 → 1.0.6

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

@@ -1,80 +1,54 @@
 .m-banner-mobile {
   position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
-
-  .cylon-carousel {
-    .slick-track {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .carouselItem {
-    // height: 386px;
-    position: relative;
-    display: flex;
-
-    .carouseContent {
-      padding: 0 28px;
-      position: absolute;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
-    }
-
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-
-      .btn {
-        margin-right: 12px;
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 16px;
-      width: 1.5em;
-      height: 0.3em;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 0.3em;
-      transition: all .5s;
-
-      &.active {
-        width: 1.5em;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.m-banner-mobile .cylon-carousel .slick-track {
+  display: flex;
+  align-items: center;
+}
+.m-banner-mobile .carouselItem {
+  position: relative;
+  display: flex;
+}
+.m-banner-mobile .carouselItem .carouseContent {
+  padding: 0 0.56rem;
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: auto;
+}
+.m-banner-mobile .carouselItem .title {
+  margin-bottom: 0.16rem;
+}
+.m-banner-mobile .carouselItem .sub-title {
+  margin-bottom: 0.4rem;
+}
+.m-banner-mobile .carouselItem .btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.m-banner-mobile .carouselItem .btn-wrap .btn {
+  margin-right: 0.24rem;
+}
+.m-banner-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-banner-mobile .swiper-ban .ban {
+  font-size: 0.32rem;
+  width: 1.5em;
+  height: 0.3em;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 0.3em;
+  transition: all 0.5s;
+}
+.m-banner-mobile .swiper-ban .ban.active {
+  width: 1.5em;
+  opacity: 1;
+}

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

@@ -227,10 +227,7 @@ function (_super) {
       autoplay = false;
     }
 
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-banner-pc"
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {

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

@@ -17,6 +17,8 @@ var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/
 
 var _ConfigPanel = require("../../../../core/Designer/ConfigPanel");
 
+var _commonUtil = require("../../../../utils/commonUtil");
+
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,10 +94,7 @@ function (_super) {
     var _a;
 
     var nodeData = this.props.nodeData;
-    var GAData = {
-      moduleId: nodeData.id,
-      moduleName: nodeData.moduleIndex + '.' + nodeData.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(nodeData);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('button-comp-wrap', (_a = {}, _a[nodeData.customize.layout] = true, _a[nodeData.customize.align] = true, _a)),
       onClick: this.onComponentClick

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

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 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); }
@@ -65,21 +67,43 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      lazyShow: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {};
+
+  Carousel.prototype.componentWillUnmount = function () {};
+
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var lazyShow = this.state.lazyShow;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

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

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {
@@ -199,10 +188,7 @@ function (_super) {
     }
 
     var floorColNum = Math.floor(colNum);
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -250,7 +236,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -275,7 +262,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

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

@@ -1,103 +1,84 @@
 .m-carousel-mobile {
   position: relative;
   width: 100%;
-
-  .content {
-    display: flex;
-    margin: 0 auto;
-  }
-
-  .slider-wrap {
-    width: 100%;
-    margin: 0 auto;
-    line-height: 1;
-
-    .slick-list {
-      // margin-left: -11px;
-      // margin-right: -11px;
-      padding: 0;
-
-      &:hover {
-        padding-top: 100px;
-        margin-top: -100px;
-        padding-bottom: 100px;
-        margin-bottom: -100px;
-      }
-
-      .slick-track {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-    }
-
-    .img-wrap {
-      .img {
-        width: fit-content;
-        height: fit-content;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .title {
-        display: flex;
-        justify-content: center;
-        margin-top: 12px;
-      }
-
-      .text {
-        display: flex;
-        justify-content: center;
-        margin-top: 6px;
-      }
-
-      .tags {
-        margin-top: 8px;
-        margin-bottom: 12px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-
-        >div {
-          margin-right: 8px;
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .swiper-ban {
-    position: absolute;
-    width: 100%;
-    bottom: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .ban {
-      font-size: 8px;
-      width: 1em;
-      height: 1em;
-      border-radius: 50%;
-      background: #FFF;
-      cursor: inherit;
-      margin-right: 10px;
-      transition: all .5s;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.active {
-        width: 2em;
-        height: 1em;
-        border-radius: 100px;
-        opacity: 1;
-      }
-    }
-  }
-}
+}
+.m-carousel-mobile .content {
+  display: flex;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap {
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1;
+}
+.m-carousel-mobile .slider-wrap .slick-list {
+  padding: 0;
+}
+.m-carousel-mobile .slider-wrap .slick-list:hover {
+  padding-top: 2rem;
+  margin-top: -2rem;
+  padding-bottom: 2rem;
+  margin-bottom: -2rem;
+}
+.m-carousel-mobile .slider-wrap .slick-list .slick-track {
+  display: flex;
+  align-items: center;
+  gap: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .img {
+  width: fit-content;
+  height: fit-content;
+  display: block;
+  margin: 0 auto;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .title {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.24rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .text {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.12rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags {
+  margin-top: 0.16rem;
+  margin-bottom: 0.24rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div {
+  margin-right: 0.16rem;
+}
+.m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban {
+  position: absolute;
+  width: 100%;
+  bottom: 0.12rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.m-carousel-mobile .swiper-ban .ban {
+  font-size: 0.16rem;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  background: #FFF;
+  cursor: inherit;
+  margin-right: 0.2rem;
+  transition: all 0.5s;
+}
+.m-carousel-mobile .swiper-ban .ban:last-child {
+  margin-right: 0;
+}
+.m-carousel-mobile .swiper-ban .ban.active {
+  width: 2em;
+  height: 1em;
+  border-radius: 2rem;
+  opacity: 1;
+}

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

@@ -209,10 +209,7 @@ function (_super) {
     }
 
     var floorColNum = Math.floor(colNum);
-    var GAData = {
-      moduleId: data.id,
-      moduleName: data.moduleIndex + '.' + data.type
-    };
+    var GAData = (0, _commonUtil.getGAData)(data);
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
@@ -283,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -308,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var getDefaultJSON = function getDefaultJSON() {
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'CUSTOM_CODE',
+    content: {
+      pcHtml: '',
+      h5Html: ''
+    },
+    spacing: {
+      pc: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 10,
+        paddingBottom: 10,
+        marginBottom: 0
+      }
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;