@fonixtree/magic-design 0.0.83 → 0.0.84

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

@@ -19,6 +19,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -171,7 +173,9 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-banner-mobile",
       style: {
-        marginBottom: data.spacing.mobile.marginBottom || 0
+        marginBottom: (0, _commonUtil.ensure)(function () {
+          return data.spacing.mobile.marginBottom;
+        }, 0)
       }
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,

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

@@ -238,7 +238,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

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

@@ -231,7 +231,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '30px' : '0'
+        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",

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: ''
@@ -60,7 +60,13 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     customize: {
       layout: 'layout1',
-      align: 'left'
+      align: 'left',
+      pcRowNum: 2,
+      rowNum: 2,
+      mobileMinRowNum: 2,
+      mobileMaxRowNum: 5,
+      pcMinRowNum: 2,
+      pcMaxRowNum: 6
     },
     background: {
       opacity: 100,

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,34 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+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 +78,35 @@ 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 === 'layout2';
+    var colNum = isHorizontal ? data.customize.rowNum : 1;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-mobile"
-    }, "image gallery");
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('content', {
+        horizontal: isHorizontal
+      }),
+      style: {
+        gap: MOBILE_IMG_SIZE[colNum].gap
+      }
+    }, data.groupSource.map(function (m) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: m.id,
+        className: "img-wrap",
+        style: {
+          width: MOBILE_IMG_SIZE[colNum].maxW
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        data: m.image,
+        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
+        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }));
+    })));
   };
 
   ImageGalleryMobile.defaultProps = {

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

@@ -1,73 +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;
-  // }
+.m-image-gallery-mobile {
+  overflow-x: auto;
 
-  .carouselItem {
-    height: 386px;
-    position: relative;
+  .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 345px;
+    margin: 0 auto;
 
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
+    &.horizontal {
+      flex-direction: row;
     }
 
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
+    .img-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;
-      }
+      justify-content: center;
     }
   }
 }

package/es/composite-comp/bol/config-panels/ImageGalleryConfig/ImageGalleryConfigImageGroup/index.js

@@ -21,6 +21,8 @@ var _defaultImg = _interopRequireDefault(require("../imgs/defaultImg.png"));
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -110,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, src.groupName.text));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -138,7 +140,7 @@ function (_super) {
   AComponent.defaultProps = {
     source: []
   };
-  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], AComponent);
+  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], AComponent);
   return AComponent;
 }(_react["default"].Component);
 

package/es/composite-comp/bol/config-panels/ImageGalleryConfig/index.js

@@ -30,7 +30,7 @@ function ImageGalleryConfig(props) {
     headerSize: "large",
     source: [{
       key: '1',
-      name: (0, _locale.i18n)('IMAGE'),
+      name: (0, _locale.i18n)('IMAGES'),
       value: /*#__PURE__*/_react["default"].createElement(_ImageGalleryConfigImageGroup["default"], {
         source: data.groupSource
       })
@@ -41,14 +41,15 @@ function ImageGalleryConfig(props) {
         data: data.spacing
       })
     }, {
-      key: '5',
+      key: '3',
       name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
+        component: "imageGallery",
         data: data.customize,
         layoutSource: _layout.imageGalleryLayout
       })
     }, {
-      key: '6',
+      key: '4',
       name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background

package/es/composite-comp/bol/second-config-panels/ImageGallerySecondConfig/index.js

@@ -7,10 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _locale = require("../../../../locale");
-
-var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
-
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -55,20 +51,13 @@ function (_super) {
 
   ImageGallerySecondConfig.prototype.render = function () {
     var panelProps = this.props.panelProps;
-    console.log('panelProps...', panelProps);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "image_gallery_second_conf_wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-      divider: "bold",
-      headerSize: "large",
-      source: [{
-        key: '1',
-        name: (0, _locale.i18n)('IMAGE'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image
-        }),
-        metaOption: panelProps.image
-      }]
+      className: "image_gallery_second_conf_wrap",
+      style: {
+        marginTop: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+      data: panelProps.image
     }));
   };
 

package/es/composite-comp/common/config-panels/CustomizeConfig/index.js

@@ -91,21 +91,12 @@ function (_super) {
       showRowNum: true
     };
 
-    _this.layoutChange = function (v) {
+    _this.onInit = function (v) {
       var _a;
 
       var _b = _this.props,
-          selectedLayoutFun = _b.selectedLayoutFun,
-          data = _b.data,
           component = _b.component,
-          id = _b.id;
-
-      if (selectedLayoutFun) {
-        selectedLayoutFun(v);
-      } else {
-        data.layout = v;
-      } // 轮播组件特殊处理
-
+          id = _b.id; // 轮播组件特殊处理
 
       if (component === 'carousel') {
         if (v === 'layout2') {
@@ -136,6 +127,19 @@ function (_super) {
             });
           }
         }
+      } // imageGallery 第二种布局可选列数
+
+
+      if (component === 'imageGallery') {
+        if (v === 'layout2') {
+          _this.setState({
+            showRowNum: true
+          });
+        } else {
+          _this.setState({
+            showRowNum: false
+          });
+        }
       } // 移动端导航特殊处理
       // 更改需求，两个布局都需 可选行数
       // if (component == 'mobileNavigation') {
@@ -146,6 +150,20 @@ function (_super) {
       //   }
       // }
 
+    };
+
+    _this.layoutChange = function (v) {
+      var _a = _this.props,
+          selectedLayoutFun = _a.selectedLayoutFun,
+          data = _a.data;
+
+      if (selectedLayoutFun) {
+        selectedLayoutFun(v);
+      } else {
+        data.layout = v;
+      }
+
+      _this.onInit(v);
 
       _this.selfRender(); // this.setState({});
 
@@ -169,15 +187,7 @@ function (_super) {
   CustomizeConfig.prototype.componentDidMount = function () {
     var _a;
 
-    if (((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2') {
-      this.setState({
-        showRowNum: false
-      });
-    } else {
-      this.setState({
-        showRowNum: true
-      });
-    }
+    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
   };
 
   CustomizeConfig.prototype.render = function () {

package/es/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -232,6 +232,8 @@ function (_super) {
   };
 
   SearchMobile.prototype.render = function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
     var data = this.props.data;
     console.log('----search ', data);
     var messageNum = this.state.messageNum; // let styleWrap = {};
@@ -253,22 +255,22 @@ function (_super) {
       className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.content && ((_a = data.content.box) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
       style: {
-        borderColor: data.content.box.color.mobile
+        borderColor: (_c = (_b = data.content.box) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.mobile
       }
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.box.color.mobile,
+      color: (_e = (_d = data.content.box) === null || _d === void 0 ? void 0 : _d.color) === null || _e === void 0 ? void 0 : _e.mobile,
       size: 24,
       type: "icon-search2"
-    })), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && ((_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.icon.color.mobile,
+      color: (_h = (_g = data.content.icon) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
@@ -276,7 +278,7 @@ function (_super) {
       type: "icon-ChatDots"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+    }, messageNum))), data.content && ((_j = data.content.logo) === null || _j === void 0 ? void 0 : _j.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       data: data.content.logo,
       style: {
         height: 30

package/es/constants/component-types.js

@@ -69,6 +69,8 @@ var _ImageTextSecondConfig = _interopRequireDefault(require("../composite-comp/b
 
 var _CarouselSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/CarouselSecondConfig"));
 
+var _ImageGallerySecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/ImageGallerySecondConfig"));
+
 var _RecommendSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/RecommendSecondConfig"));
 
 var _MobileNavigationSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/MobileNavigationSecondConfig"));
@@ -99,5 +101,5 @@ var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["defa
  */
 
 exports.configPanelMap = configPanelMap;
-var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_PcNavigation["default"].type] = _PcNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c[_Tag["default"].type] = _TagSecondConfig["default"], _c[_Button["default"].type] = _ButtonSecondConfig["default"], _c);
+var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_PcNavigation["default"].type] = _PcNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c[_ImageGallery["default"].type] = _ImageGallerySecondConfig["default"], _c[_Tag["default"].type] = _TagSecondConfig["default"], _c[_Button["default"].type] = _ButtonSecondConfig["default"], _c);
 exports.secondConfigPanelMap = secondConfigPanelMap;

package/es/constants/layout.js

@@ -13,8 +13,6 @@ var _imageGalleryLayout = _interopRequireDefault(require("../assets/images/layou
 
 var _imageGalleryLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout2.png"));
 
-var _imageGalleryLayout3 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout3.png"));
-
 var _layoutImagetextM = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-1.png"));
 
 var _layoutImagetextM2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-2.png"));
@@ -55,6 +53,7 @@ var _layoutNavigationNormal = _interopRequireDefault(require("../assets/images/l
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// import imageGalleryLayout3 from '../assets/images/layout-icon/imageGalleryLayout3.png';
 // import p3 from '../assets/images/layout-icon/layout-imagetext-p3.png';
 var dividerLayout = [{
   id: 'layout1',
@@ -76,10 +75,6 @@ var imageGalleryLayout = [{
   id: 'layout2',
   name: 'layout2',
   image: _imageGalleryLayout2["default"]
-}, {
-  id: 'layout3',
-  name: 'layout3',
-  image: _imageGalleryLayout3["default"]
 }];
 exports.imageGalleryLayout = imageGalleryLayout;
 var carouselLayout = [{

package/es/core/Designer/ConfigPanel/index.js

@@ -236,6 +236,7 @@ function (_super) {
       var groupName = '';
 
       switch (selectedNode.type) {
+        case 'IMAGE_GALLERY':
         case 'BANNER':
           groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
 

package/es/locale/en/en.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/es/locale/es/es.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/es/locale/id/id.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

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

@@ -19,6 +19,8 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _AlignSelector = require("../../../../../common/AlignSelector");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 var _components = require("../../../../../meta-comp/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -171,7 +173,9 @@ function (_super) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-banner-mobile",
       style: {
-        marginBottom: data.spacing.mobile.marginBottom || 0
+        marginBottom: (0, _commonUtil.ensure)(function () {
+          return data.spacing.mobile.marginBottom;
+        }, 0)
       }
     }, /*#__PURE__*/_react["default"].createElement(_antd.Carousel, {
       ref: this.carouselRef,

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

@@ -238,7 +238,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

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

@@ -231,7 +231,7 @@ function (_super) {
       className: "content",
       style: {
         width: contentWidth - spacing.paddingLeft - spacing.paddingRight,
-        paddingBottom: data.setting.dots.open ? '30px' : '0'
+        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",

package/lib/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: ''
@@ -60,7 +60,13 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     customize: {
       layout: 'layout1',
-      align: 'left'
+      align: 'left',
+      pcRowNum: 2,
+      rowNum: 2,
+      mobileMinRowNum: 2,
+      mobileMaxRowNum: 5,
+      pcMinRowNum: 2,
+      pcMaxRowNum: 6
     },
     background: {
       opacity: 100,

package/lib/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,34 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+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 +78,35 @@ 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 === 'layout2';
+    var colNum = isHorizontal ? data.customize.rowNum : 1;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-image-gallery-mobile"
-    }, "image gallery");
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('content', {
+        horizontal: isHorizontal
+      }),
+      style: {
+        gap: MOBILE_IMG_SIZE[colNum].gap
+      }
+    }, data.groupSource.map(function (m) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: m.id,
+        className: "img-wrap",
+        style: {
+          width: MOBILE_IMG_SIZE[colNum].maxW
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+        data: m.image,
+        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
+        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }));
+    })));
   };
 
   ImageGalleryMobile.defaultProps = {

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

@@ -1,73 +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;
-  // }
+.m-image-gallery-mobile {
+  overflow-x: auto;
 
-  .carouselItem {
-    height: 386px;
-    position: relative;
+  .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 345px;
+    margin: 0 auto;
 
-    .carouseContent {
-      padding: 80px 28px 0;
-      position: relative;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: auto;
-    }
-
-    .title {
-      margin-bottom: 8px;
+    &.horizontal {
+      flex-direction: row;
     }
 
-    .sub-title {
-      margin-bottom: 20px;
-    }
-
-    .btn-wrap {
+    .img-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;
-      }
+      justify-content: center;
     }
   }
 }

package/lib/composite-comp/bol/config-panels/ImageGalleryConfig/ImageGalleryConfigImageGroup/index.js

@@ -21,6 +21,8 @@ var _defaultImg = _interopRequireDefault(require("../imgs/defaultImg.png"));
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -110,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, src.groupName.text));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -138,7 +140,7 @@ function (_super) {
   AComponent.defaultProps = {
     source: []
   };
-  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], AComponent);
+  AComponent = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], AComponent);
   return AComponent;
 }(_react["default"].Component);
 

package/lib/composite-comp/bol/config-panels/ImageGalleryConfig/index.js

@@ -30,7 +30,7 @@ function ImageGalleryConfig(props) {
     headerSize: "large",
     source: [{
       key: '1',
-      name: (0, _locale.i18n)('IMAGE'),
+      name: (0, _locale.i18n)('IMAGES'),
       value: /*#__PURE__*/_react["default"].createElement(_ImageGalleryConfigImageGroup["default"], {
         source: data.groupSource
       })
@@ -41,14 +41,15 @@ function ImageGalleryConfig(props) {
         data: data.spacing
       })
     }, {
-      key: '5',
+      key: '3',
       name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
+        component: "imageGallery",
         data: data.customize,
         layoutSource: _layout.imageGalleryLayout
       })
     }, {
-      key: '6',
+      key: '4',
       name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background

package/lib/composite-comp/bol/second-config-panels/ImageGallerySecondConfig/index.js

@@ -7,10 +7,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _locale = require("../../../../locale");
-
-var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
-
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -55,20 +51,13 @@ function (_super) {
 
   ImageGallerySecondConfig.prototype.render = function () {
     var panelProps = this.props.panelProps;
-    console.log('panelProps...', panelProps);
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "image_gallery_second_conf_wrap"
-    }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-      divider: "bold",
-      headerSize: "large",
-      source: [{
-        key: '1',
-        name: (0, _locale.i18n)('IMAGE'),
-        value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
-          data: panelProps.image
-        }),
-        metaOption: panelProps.image
-      }]
+      className: "image_gallery_second_conf_wrap",
+      style: {
+        marginTop: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
+      data: panelProps.image
     }));
   };
 

package/lib/composite-comp/common/config-panels/CustomizeConfig/index.js

@@ -91,21 +91,12 @@ function (_super) {
       showRowNum: true
     };
 
-    _this.layoutChange = function (v) {
+    _this.onInit = function (v) {
       var _a;
 
       var _b = _this.props,
-          selectedLayoutFun = _b.selectedLayoutFun,
-          data = _b.data,
           component = _b.component,
-          id = _b.id;
-
-      if (selectedLayoutFun) {
-        selectedLayoutFun(v);
-      } else {
-        data.layout = v;
-      } // 轮播组件特殊处理
-
+          id = _b.id; // 轮播组件特殊处理
 
       if (component === 'carousel') {
         if (v === 'layout2') {
@@ -136,6 +127,19 @@ function (_super) {
             });
           }
         }
+      } // imageGallery 第二种布局可选列数
+
+
+      if (component === 'imageGallery') {
+        if (v === 'layout2') {
+          _this.setState({
+            showRowNum: true
+          });
+        } else {
+          _this.setState({
+            showRowNum: false
+          });
+        }
       } // 移动端导航特殊处理
       // 更改需求，两个布局都需 可选行数
       // if (component == 'mobileNavigation') {
@@ -146,6 +150,20 @@ function (_super) {
       //   }
       // }
 
+    };
+
+    _this.layoutChange = function (v) {
+      var _a = _this.props,
+          selectedLayoutFun = _a.selectedLayoutFun,
+          data = _a.data;
+
+      if (selectedLayoutFun) {
+        selectedLayoutFun(v);
+      } else {
+        data.layout = v;
+      }
+
+      _this.onInit(v);
 
       _this.selfRender(); // this.setState({});
 
@@ -169,15 +187,7 @@ function (_super) {
   CustomizeConfig.prototype.componentDidMount = function () {
     var _a;
 
-    if (((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2') {
-      this.setState({
-        showRowNum: false
-      });
-    } else {
-      this.setState({
-        showRowNum: true
-      });
-    }
+    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
   };
 
   CustomizeConfig.prototype.render = function () {

package/lib/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -232,6 +232,8 @@ function (_super) {
   };
 
   SearchMobile.prototype.render = function () {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
     var data = this.props.data;
     console.log('----search ', data);
     var messageNum = this.state.messageNum; // let styleWrap = {};
@@ -253,22 +255,22 @@ function (_super) {
       className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.content && ((_a = data.content.box) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
       style: {
-        borderColor: data.content.box.color.mobile
+        borderColor: (_c = (_b = data.content.box) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.mobile
       }
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.box.color.mobile,
+      color: (_e = (_d = data.content.box) === null || _d === void 0 ? void 0 : _d.color) === null || _e === void 0 ? void 0 : _e.mobile,
       size: 24,
       type: "icon-search2"
-    })), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && ((_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: data.content.icon.color.mobile,
+      color: (_h = (_g = data.content.icon) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
@@ -276,7 +278,7 @@ function (_super) {
       type: "icon-ChatDots"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+    }, messageNum))), data.content && ((_j = data.content.logo) === null || _j === void 0 ? void 0 : _j.open) && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
       data: data.content.logo,
       style: {
         height: 30

package/lib/constants/component-types.js

@@ -69,6 +69,8 @@ var _ImageTextSecondConfig = _interopRequireDefault(require("../composite-comp/b
 
 var _CarouselSecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/CarouselSecondConfig"));
 
+var _ImageGallerySecondConfig = _interopRequireDefault(require("../composite-comp/bol/second-config-panels/ImageGallerySecondConfig"));
+
 var _RecommendSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/RecommendSecondConfig"));
 
 var _MobileNavigationSecondConfig = _interopRequireDefault(require("../composite-comp/dito/second-config-panels/MobileNavigationSecondConfig"));
@@ -99,5 +101,5 @@ var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["defa
  */
 
 exports.configPanelMap = configPanelMap;
-var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_PcNavigation["default"].type] = _PcNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c[_Tag["default"].type] = _TagSecondConfig["default"], _c[_Button["default"].type] = _ButtonSecondConfig["default"], _c);
+var secondConfigPanelMap = (_c = {}, _c[_Banner["default"].type] = _BannerSecondConfig["default"], _c[_Text["default"].type] = _TextSecondConfig["default"], _c[_ImageText["default"].type] = _ImageTextSecondConfig["default"], _c[_Recommend["default"].type] = _RecommendSecondConfig["default"], _c[_MobileNavigation["default"].type] = _MobileNavigationSecondConfig["default"], _c[_PcNavigation["default"].type] = _PcNavigationSecondConfig["default"], _c[_Carousel["default"].type] = _CarouselSecondConfig["default"], _c[_ImageGallery["default"].type] = _ImageGallerySecondConfig["default"], _c[_Tag["default"].type] = _TagSecondConfig["default"], _c[_Button["default"].type] = _ButtonSecondConfig["default"], _c);
 exports.secondConfigPanelMap = secondConfigPanelMap;

package/lib/constants/layout.js

@@ -13,8 +13,6 @@ var _imageGalleryLayout = _interopRequireDefault(require("../assets/images/layou
 
 var _imageGalleryLayout2 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout2.png"));
 
-var _imageGalleryLayout3 = _interopRequireDefault(require("../assets/images/layout-icon/imageGalleryLayout3.png"));
-
 var _layoutImagetextM = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-1.png"));
 
 var _layoutImagetextM2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-m1-2.png"));
@@ -55,6 +53,7 @@ var _layoutNavigationNormal = _interopRequireDefault(require("../assets/images/l
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// import imageGalleryLayout3 from '../assets/images/layout-icon/imageGalleryLayout3.png';
 // import p3 from '../assets/images/layout-icon/layout-imagetext-p3.png';
 var dividerLayout = [{
   id: 'layout1',
@@ -76,10 +75,6 @@ var imageGalleryLayout = [{
   id: 'layout2',
   name: 'layout2',
   image: _imageGalleryLayout2["default"]
-}, {
-  id: 'layout3',
-  name: 'layout3',
-  image: _imageGalleryLayout3["default"]
 }];
 exports.imageGalleryLayout = imageGalleryLayout;
 var carouselLayout = [{

package/lib/core/Designer/ConfigPanel/index.js

@@ -236,6 +236,7 @@ function (_super) {
       var groupName = '';
 
       switch (selectedNode.type) {
+        case 'IMAGE_GALLERY':
         case 'BANNER':
           groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
 

package/lib/locale/en/en.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/lib/locale/es/es.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/lib/locale/id/id.json

@@ -1,4 +1,5 @@
 {
+  "IMAGES": "Images",
   "SEARCH_BOX": "Search Box",
   "PLEASE_INPUT_KEYWORDS": "Please input keywords",
   "SHOPPING_CART": "Shopping Cart",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",