@fonixtree/magic-design 0.0.103 → 0.0.104

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

@@ -1,28 +1,43 @@
 .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-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 +55,7 @@
 
       .tags {
         margin-top: 8px;
+        margin-bottom: 12px;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -54,17 +70,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;

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

@@ -22,8 +22,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON() {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'name2',
-        pcName: 'name2',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''
@@ -48,19 +48,28 @@ var getDefaultJSON = function getDefaultJSON() {
     groupSource: [imagesGroupSourceJSON()],
     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: {
-      layout: 'layout1',
-      align: 'left'
+      layout: {
+        h5Layout: 'layout1',
+        pcLayout: 'layout1'
+      },
+      align: 'left',
+      pcRowNum: 2,
+      rowNum: 2,
+      mobileMinRowNum: 2,
+      mobileMaxRowNum: 5,
+      pcMinRowNum: 2,
+      pcMaxRowNum: 6
     },
     background: {
       opacity: 100,

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _pc = _interopRequireDefault(require("./pc"));
+
 var _mobile = _interopRequireDefault(require("./mobile"));
 
 var _defaultJSON = require("./defaultJSON");
@@ -68,7 +70,9 @@ function (_super) {
 
   ImageGallery.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? null : /*#__PURE__*/_react["default"].createElement(_mobile["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/ImageGallery/mobile/index.js

@@ -7,9 +7,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("./index.less");
 
-var _mobx = require("../../../../../mobx");
+var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,6 +41,48 @@ 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,
+    maxH: 258,
+    gap: 12
+  },
+  2: {
+    maxW: 165,
+    maxH: 124,
+    gap: 12
+  },
+  3: {
+    maxW: 106,
+    maxH: 80,
+    gap: 12
+  },
+  4: {
+    maxW: 77,
+    maxH: 56,
+    gap: 12
+  },
+  5: {
+    maxW: 62,
+    maxH: 45,
+    gap: 8
+  }
+};
+
 var ImageGalleryMobile =
 /** @class */
 function (_super) {
@@ -48,27 +92,45 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
-    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
-    _this.destroy = null;
     return _this;
   }
 
-  ImageGalleryMobile.prototype.componentDidMount = function () {
-    this.destroy = (0, _mobx.autorun)(function () {// this.init(this.props.data.groupSource);
-    });
-  };
-
-  ImageGalleryMobile.prototype.componentWillReceiveProps = function (nextProps) {// this.init(nextProps.data.groupSource);
-  };
-
-  ImageGalleryMobile.prototype.componentWillUnmount = function () {// this.destroy();
-  };
-
   ImageGalleryMobile.prototype.render = function () {
     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"
-    }, "image gallery");
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "content"
+    }, newData.map(function (arr, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
+        style: isHorizontal ? {
+          gap: MOBILE_IMG_SIZE[colNum].gap
+        } : {}
+      }, 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: "100%"
+        }));
+      }));
+    })));
   };
 
   ImageGalleryMobile.defaultProps = {

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

@@ -1,72 +1,21 @@
-.m-banner-mobile {
-  position: relative;
-  // .turnPage {
-  //   position: absolute;
-  //   top: 50%;
-  //   transform: translateY(-50%);
-  //   z-index: 3;
-  //   cursor: pointer;
-  // }
-  // .leftBtn {
-  //   left: 20px;
-  // }
-  // .rightBtn {
-  //   right: 20px;
-  // }
-
-  .carouselItem {
-    height: 386px;
-    position: relative;
-    display: flex;
-
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      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;
+.m-image-gallery-mobile {
+  .content {
+    .line {
+      margin-bottom: 12px;
+
+      &.isHorizontal {
+        display: flex;
+        justify-content: flex-start;
       }
-    }
-  }
-
-  .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;
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-      &.active {
-        width: 1.5em;
-        opacity: 1;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
     }
   }

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

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _components = require("../../../../../meta-comp/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+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: 1280,
+    minH: 150,
+    maxH: 960,
+    defW: 1072,
+    defH: 400,
+    gap: 20
+  },
+  2: {
+    minW: 150,
+    maxW: 628,
+    minH: 150,
+    maxH: 471,
+    gap: 24
+  },
+  3: {
+    minW: 100,
+    maxW: 410,
+    minH: 100,
+    maxH: 308,
+    gap: 24
+  },
+  4: {
+    minW: 100,
+    maxW: 302,
+    minH: 100,
+    maxH: 227,
+    gap: 24
+  },
+  5: {
+    minW: 100,
+    maxW: 236,
+    minH: 100,
+    maxH: 177,
+    gap: 24
+  },
+  6: {
+    minW: 100,
+    maxW: 193,
+    minH: 100,
+    maxH: 145,
+    gap: 24
+  }
+};
+
+var ImageGalleryPc =
+/** @class */
+function (_super) {
+  __extends(ImageGalleryPc, _super);
+
+  function ImageGalleryPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    return _this;
+  }
+
+  ImageGalleryPc.prototype.render = function () {
+    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: "content"
+    }, newData.map(function (arr, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
+        style: isHorizontal ? {
+          gap: PC_IMG_SIZE[colNum].gap
+        } : {}
+      }, 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: item.image.content.pcImgSrc ? PC_IMG_SIZE[colNum].maxH : PC_IMG_SIZE[colNum].defH,
+          maxWidth: item.image.content.pcImgSrc ? '100%' : PC_IMG_SIZE[colNum].defW,
+          minHeight: PC_IMG_SIZE[colNum].minH,
+          minWidth: PC_IMG_SIZE[colNum].minW
+        }));
+      }));
+    })));
+  };
+
+  ImageGalleryPc.defaultProps = {
+    data: {
+      groupSource: []
+    }
+  };
+  return ImageGalleryPc;
+}(_react["default"].Component);
+
+var _default = ImageGalleryPc;
+exports["default"] = _default;

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

@@ -0,0 +1,23 @@
+.m-image-gallery-pc {
+  .content {
+    .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;
+      }
+    }
+  }
+}