@fonixtree/magic-design 0.0.93 → 0.0.94

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

@@ -41,6 +41,20 @@ 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,
@@ -85,26 +99,36 @@ function (_super) {
     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"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: MOBILE_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: MOBILE_IMG_SIZE[colNum].maxW
+          gap: MOBILE_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
-        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }, 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: MOBILE_IMG_SIZE[colNum].maxW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,25 @@
 .m-image-gallery-mobile {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 345px;
+    max-width: 345px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .line {
+      margin-bottom: 12px;
+
+      &.isHorizontal {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-    .img-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -41,6 +41,20 @@ 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 PC_IMG_SIZE = {
   1: {
     minW: 150,
@@ -102,26 +116,38 @@ function (_super) {
     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: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: PC_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: PC_IMG_SIZE[colNum].maxW
+          gap: PC_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: PC_IMG_SIZE[colNum].maxH,
-        maxWidth: PC_IMG_SIZE[colNum].maxW
+      }, 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: PC_IMG_SIZE[colNum].maxH,
+          maxWidth: PC_IMG_SIZE[colNum].maxW,
+          minHeight: PC_IMG_SIZE[colNum].minH,
+          minWidth: PC_IMG_SIZE[colNum].minW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,26 @@
 .m-image-gallery-pc {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 1280px;
+    max-width: 1280px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .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;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -185,9 +185,15 @@ function (_super) {
   }
 
   CustomizeConfig.prototype.componentDidMount = function () {
-    var _a;
+    var _a = this.props,
+        selectedLayoutFun = _a.selectedLayoutFun,
+        data = _a.data;
 
-    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
+    if (selectedLayoutFun) {
+      this.onInit((0, _coreUtil.isPc)() ? data.layout.pcLayout : data.layout.h5Layout);
+    } else {
+      this.onInit(data.layout);
+    }
   };
 
   CustomizeConfig.prototype.render = function () {

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

@@ -164,6 +164,8 @@ function (_super) {
       style: {
         background: window.magicDesign.pageBackground
       }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "device_content"
     }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
@@ -179,7 +181,7 @@ function (_super) {
         key: nodeData.id,
         id: "view" + nodeData.id
       }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-    }))));
+    })))));
   };
 
   return ViewArea;

package/es/core/Designer/ViewArea/index.less

@@ -8,19 +8,22 @@
   transition-property: all;
   transition-duration: .3s;
   transition-timing-function: ease;
+
   .appointment_wrap {
     height: 44px;
     background-color: #FFF8F0;
     display: flex;
     align-items: center;
     justify-content: center;
-    .appointment_tip{
+
+    .appointment_tip {
       font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 13px;
-      color:#FF8541;
+      color: #FF8541;
     }
+
     .cancel_btn {
       font-family: 'Open Sans';
       font-style: normal;
@@ -37,21 +40,24 @@
       cursor: pointer;
     }
   }
+
   &.phone-edit {
     margin-left: 355px;
   }
+
   .phone_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px 0;
+
     .device_border {
       width: 375px;
       max-height: 691px;
       height: calc(100vh - 150px);
       overflow: scroll;
-      overflow-x:hidden;
+      overflow-x: hidden;
       border: 10px solid #FFF;
       background-color: #F2F2F2;
       border-radius: 12px;
@@ -59,12 +65,14 @@
 
     }
   }
+
   .pc_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
+
     .device_border {
       padding: 1px;
       max-width: 1240px;
@@ -77,6 +85,9 @@
       overflow: scroll;
       box-sizing: content-box;
 
+      .device_content {
+        min-width: 1200px;
+      }
     }
   }
 }

package/es/meta-comp/components/Image/index.js

@@ -11,7 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _defaultImg = _interopRequireDefault(require("./image/default-img.png"));
+var _h5DefImg = _interopRequireDefault(require("./image/h5DefImg.png"));
+
+var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -175,9 +177,10 @@ function (_super) {
     }
 
     if (!srcImg) {
-      srcImg = _defaultImg["default"];
+      srcImg = (0, _coreUtil.isPc)() ? _pcDefImg["default"] : _h5DefImg["default"];
     }
 
+    var areas = data.content.openHotArea && ((0, _coreUtil.isPc)() ? data.content.pcAreas : data.content.h5Areas);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
         backgroundImg: isBackground
@@ -198,7 +201,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }), data.content.areas && data.content.areas.length > 0 && data.content.areas.map(function (v, i) {
+    }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
         top: parseInt(v.y * _this.state.scale),

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

@@ -41,6 +41,20 @@ 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,
@@ -85,26 +99,36 @@ function (_super) {
     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"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: MOBILE_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: MOBILE_IMG_SIZE[colNum].maxW
+          gap: MOBILE_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: MOBILE_IMG_SIZE[colNum].maxH,
-        maxWidth: MOBILE_IMG_SIZE[colNum].maxW
+      }, 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: MOBILE_IMG_SIZE[colNum].maxW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,25 @@
 .m-image-gallery-mobile {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 345px;
+    max-width: 345px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .line {
+      margin-bottom: 12px;
+
+      &.isHorizontal {
+        display: flex;
+        justify-content: flex-start;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-    .img-wrap {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -41,6 +41,20 @@ 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 PC_IMG_SIZE = {
   1: {
     minW: 150,
@@ -102,26 +116,38 @@ function (_super) {
     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: (0, _classnames["default"])('content', {
-        horizontal: isHorizontal
-      }),
-      style: {
-        gap: PC_IMG_SIZE[colNum].gap
-      }
-    }, data.groupSource.map(function (m) {
+      className: "content"
+    }, newData.map(function (arr, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
-        key: m.id,
-        className: "img-wrap",
+        key: index,
+        className: (0, _classnames["default"])('line', {
+          isHorizontal: isHorizontal
+        }),
         style: {
-          width: PC_IMG_SIZE[colNum].maxW
+          gap: PC_IMG_SIZE[colNum].gap
         }
-      }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-        data: m.image,
-        maxHeight: PC_IMG_SIZE[colNum].maxH,
-        maxWidth: PC_IMG_SIZE[colNum].maxW
+      }, 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: PC_IMG_SIZE[colNum].maxH,
+          maxWidth: PC_IMG_SIZE[colNum].maxW,
+          minHeight: PC_IMG_SIZE[colNum].minH,
+          minWidth: PC_IMG_SIZE[colNum].minW
+        }));
       }));
     })));
   };

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

@@ -1,21 +1,26 @@
 .m-image-gallery-pc {
-  overflow-x: auto;
-
   .content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 1280px;
+    max-width: 1280px;
     margin: 0 auto;
 
-    &.horizontal {
-      flex-direction: row;
-    }
+    .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;
+      .img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

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

@@ -185,9 +185,15 @@ function (_super) {
   }
 
   CustomizeConfig.prototype.componentDidMount = function () {
-    var _a;
+    var _a = this.props,
+        selectedLayoutFun = _a.selectedLayoutFun,
+        data = _a.data;
 
-    this.onInit((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout);
+    if (selectedLayoutFun) {
+      this.onInit((0, _coreUtil.isPc)() ? data.layout.pcLayout : data.layout.h5Layout);
+    } else {
+      this.onInit(data.layout);
+    }
   };
 
   CustomizeConfig.prototype.render = function () {

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

@@ -164,6 +164,8 @@ function (_super) {
       style: {
         background: window.magicDesign.pageBackground
       }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "device_content"
     }, this.filterCompFloor(pageData).map(function (nodeData) {
       var Clazz = _componentTypes.componentMap[nodeData.type];
 
@@ -179,7 +181,7 @@ function (_super) {
         key: nodeData.id,
         id: "view" + nodeData.id
       }, /*#__PURE__*/_react["default"].createElement(Clazz, __assign({}, newInstanceProps), null));
-    }))));
+    })))));
   };
 
   return ViewArea;

package/lib/core/Designer/ViewArea/index.less

@@ -8,19 +8,22 @@
   transition-property: all;
   transition-duration: .3s;
   transition-timing-function: ease;
+
   .appointment_wrap {
     height: 44px;
     background-color: #FFF8F0;
     display: flex;
     align-items: center;
     justify-content: center;
-    .appointment_tip{
+
+    .appointment_tip {
       font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 13px;
-      color:#FF8541;
+      color: #FF8541;
     }
+
     .cancel_btn {
       font-family: 'Open Sans';
       font-style: normal;
@@ -37,21 +40,24 @@
       cursor: pointer;
     }
   }
+
   &.phone-edit {
     margin-left: 355px;
   }
+
   .phone_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px 0;
+
     .device_border {
       width: 375px;
       max-height: 691px;
       height: calc(100vh - 150px);
       overflow: scroll;
-      overflow-x:hidden;
+      overflow-x: hidden;
       border: 10px solid #FFF;
       background-color: #F2F2F2;
       border-radius: 12px;
@@ -59,12 +65,14 @@
 
     }
   }
+
   .pc_view_area {
     flex-grow: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
+
     .device_border {
       padding: 1px;
       max-width: 1240px;
@@ -77,6 +85,9 @@
       overflow: scroll;
       box-sizing: content-box;
 
+      .device_content {
+        min-width: 1200px;
+      }
     }
   }
 }

package/lib/meta-comp/components/Image/index.js

@@ -11,7 +11,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _defaultImg = _interopRequireDefault(require("./image/default-img.png"));
+var _h5DefImg = _interopRequireDefault(require("./image/h5DefImg.png"));
+
+var _pcDefImg = _interopRequireDefault(require("./image/pcDefImg.png"));
 
 var _coreUtil = require("../../../utils/coreUtil");
 
@@ -175,9 +177,10 @@ function (_super) {
     }
 
     if (!srcImg) {
-      srcImg = _defaultImg["default"];
+      srcImg = (0, _coreUtil.isPc)() ? _pcDefImg["default"] : _h5DefImg["default"];
     }
 
+    var areas = data.content.openHotArea && ((0, _coreUtil.isPc)() ? data.content.pcAreas : data.content.h5Areas);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-image', {
         backgroundImg: isBackground
@@ -198,7 +201,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }), data.content.areas && data.content.areas.length > 0 && data.content.areas.map(function (v, i) {
+    }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
         top: parseInt(v.y * _this.state.scale),

package/package.json

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