@fonixtree/magic-design 0.0.92 → 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/bol/components/ImageText/defaultJSON.js

@@ -48,8 +48,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
-        color: '#232F46',
-        width: 0
+        color: '#232F46'
       },
       underline: {
         open: false,
@@ -70,8 +69,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
-        color: '#8493AF',
-        width: 0
+        color: '#8493AF'
       },
       underline: {},
       vertical: {}

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

@@ -30,7 +30,7 @@ var getDefaultMetaTextJson = function getDefaultMetaTextJson() {
   return {
     id: (0, _uuid.v4)(),
     open: true,
-    type: 'Text',
+    type: 'TEXT',
     specialContent: [],
     text: 'Thank you for you subscription',
     content: {

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

@@ -30,7 +30,7 @@ var getDefaultMetaTextJson = function getDefaultMetaTextJson() {
   return {
     id: (0, _uuid.v4)(),
     open: true,
-    type: 'Text',
+    type: 'TEXT',
     specialContent: [],
     text: 'Flash Deal',
     content: {

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/composite-comp/dito/components/FlashDeal/defaultJSON.js

@@ -21,7 +21,7 @@ var getDefaultJSON = function getDefaultJSON() {
       headline: {
         id: (0, _uuid.v4)(),
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {
@@ -135,7 +135,7 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         contentId: contentId,
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {
@@ -159,7 +159,7 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         contentId: contentId,
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {
@@ -183,7 +183,7 @@ var getDefaultJSON = function getDefaultJSON() {
         id: (0, _uuid.v4)(),
         contentId: contentId,
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {

package/es/composite-comp/dito/components/Recommend/defaultJSON.js

@@ -204,7 +204,7 @@ var getDefaultJSON = function getDefaultJSON() {
       productName: {
         id: (0, _uuid.v4)(),
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {
@@ -227,7 +227,7 @@ var getDefaultJSON = function getDefaultJSON() {
       activityPrice: {
         id: (0, _uuid.v4)(),
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {
@@ -250,7 +250,7 @@ var getDefaultJSON = function getDefaultJSON() {
       salesPrice: {
         id: (0, _uuid.v4)(),
         open: true,
-        type: 'Text',
+        type: 'TEXT',
         specialContent: [],
         text: 'Flash Deal',
         content: {

package/es/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -63,6 +63,8 @@ var getDefaultJSON = function getDefaultJSON() {
       mobile: {
         paddingTop: 8,
         paddingBottom: 8,
+        paddingLeft: 15,
+        paddingRight: 15,
         marginBottom: 0
       }
     },

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

@@ -1,6 +1,6 @@
 .m-search-bar {
   height: 48px;
-  padding: 8px 16px;
+  padding: 8px 0;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
@@ -9,11 +9,13 @@
 
   .right {
     display: flex;
+    flex: 1;
+    margin-left: 15px;
     align-items: center;
     justify-content: space-between;
 
     .search-input-wrap {
-      width: 195px;
+      flex: 1;
       background: #fff;
       border-radius: 4px;
       border: 1px solid #D2D9E5;
@@ -24,7 +26,7 @@
 
     .message-wrap {
       position: relative;
-      margin-left: 16px;
+      margin-left: 10px;
 
       .num {
         position: absolute;

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/decorator/metaDecorator.js

@@ -41,6 +41,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -133,7 +149,7 @@ function metaDecorator(WrappedComponent) {
         return false;
       };
 
-      _this.getStyle = function () {
+      _this.getInteractStyle = function () {
         var _a = _this.state,
             hoveredMeta = _a.hoveredMeta,
             clickedMeta = _a.clickedMeta;
@@ -154,6 +170,22 @@ function metaDecorator(WrappedComponent) {
         }
 
         return style;
+      }; // text元组件在选中或悬浮时 需要实时展示其宽度
+
+
+      _this.getStyle = function () {
+        var _a = _this.props,
+            style = _a.style,
+            rest = __rest(_a, ["style"]);
+
+        var newStyle = __assign({}, style);
+
+        if (rest.data.type === 'TEXT') {
+          var width = window.magicDesign.device === 'pc' ? rest.data.content.pcWidth : rest.data.content.width;
+          newStyle.width = (width || 100) + "%";
+        }
+
+        return newStyle;
       };
 
       return _this;
@@ -177,13 +209,13 @@ function metaDecorator(WrappedComponent) {
     Wrapper.prototype.render = function () {
       var _a = this.props,
           className = _a.className,
-          style = _a.style,
-          rest = __rest(_a, ["className", "style"]);
+          rest = __rest(_a, ["className"]);
 
-      var hoverStyle = this.getStyle();
+      var hoverStyle = this.getInteractStyle();
+      console.log(rest);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
-        style: style
+        style: this.getStyle()
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "meta_wrap",
         onClick: this.onMetaClick,

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/es/meta-comp/components/Text/index.js

@@ -94,7 +94,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 };
 
 var contentStyle = function contentStyle(content) {
-  var baseWidth = (window.magicDesign.device == 'pc' ? content.pcWidth : content.width) || 100;
   return {
     fontSize: window.magicDesign.device == 'pc' ? content.pcFontSize : content.fontSize,
     fontFamily: content.fontFamily,
@@ -103,8 +102,7 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    // width: (window.magicDesign.device == 'pc' ? content.pcWidth :  content.width) || 'fit-content',
-    width: Math.min(baseWidth, 100) + "%"
+    width: '100%'
   };
 };
 /** 从父级数组中 分离出 片段数组 */

package/es/meta-comp/components/Text/index.less

@@ -1,6 +1,5 @@
 .m-meta-text {
   display: block;
-  margin: 0 auto;
 
   .select-container {
     position: relative;