@fonixtree/magic-design 0.0.100 → 0.0.102

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

@@ -91,12 +91,21 @@ function (_super) {
       showRowNum: true
     };
 
-    _this.onInit = function (v) {
+    _this.layoutChange = function (v) {
       var _a;
 
       var _b = _this.props,
+          selectedLayoutFun = _b.selectedLayoutFun,
+          data = _b.data,
           component = _b.component,
-          id = _b.id; // 轮播组件特殊处理
+          id = _b.id;
+
+      if (selectedLayoutFun) {
+        selectedLayoutFun(v);
+      } else {
+        data.layout = v;
+      } // 轮播组件特殊处理
+
 
       if (component === 'carousel') {
         if (v === 'layout2') {
@@ -112,59 +121,21 @@ function (_super) {
         _this.props.store.setState({
           CarouselStore: __assign(__assign({}, _mobx.store.CarouselStore), (_a = {}, _a[id] = v, _a))
         });
-      } // 图文组件，移动端，只有第3个组件可选列数
-
-
-      if (component === 'imageText') {
-        if (!(0, _coreUtil.isPc)()) {
-          if (v === 'normal3') {
-            _this.setState({
-              showRowNum: true
-            });
-          } else {
-            _this.setState({
-              showRowNum: false
-            });
-          }
-        }
-      } // imageGallery 第二种布局可选列数
+      } // 移动端导航特殊处理
 
 
-      if (component === 'imageGallery') {
-        if (v === 'layout2') {
+      if (component == 'mobileNavigation') {
+        if (v === 'tile') {
           _this.setState({
-            showRowNum: true
+            showRowNum: false
           });
         } else {
           _this.setState({
-            showRowNum: false
+            showRowNum: true
           });
         }
-      } // 移动端导航特殊处理
-      // 更改需求，两个布局都需 可选行数
-      // if (component == 'mobileNavigation') {
-      //   if (v === 'tile') {
-      //     this.setState({ showRowNum: false });
-      //   } else {
-      //     this.setState({ showRowNum: true });
-      //   }
-      // }
-
-    };
-
-    _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({});
 
     };
@@ -185,14 +156,16 @@ function (_super) {
   }
 
   CustomizeConfig.prototype.componentDidMount = function () {
-    var _a = this.props,
-        selectedLayoutFun = _a.selectedLayoutFun,
-        data = _a.data;
+    var _a;
 
-    if (selectedLayoutFun) {
-      this.onInit((0, _coreUtil.isPc)() ? data.layout.pcLayout : data.layout.h5Layout);
+    if (((_a = this.props.data) === null || _a === void 0 ? void 0 : _a.layout) === 'layout2') {
+      this.setState({
+        showRowNum: false
+      });
     } else {
-      this.onInit(data.layout);
+      this.setState({
+        showRowNum: true
+      });
     }
   };
 
@@ -219,7 +192,7 @@ function (_super) {
       rowNumArr.push(i);
     }
 
-    var _showRowNum = showRowNum && ((0, _coreUtil.isPc)() && data.pcRowNum || !(0, _coreUtil.isPc)() && data.rowNum);
+    var _showRowNum = showRowNum && ((0, _coreUtil.isPc)() && this.props.data.pcRowNum || !(0, _coreUtil.isPc)() && this.props.data.rowNum);
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-customize-config"

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

@@ -62,17 +62,17 @@ function (_super) {
 
     var _a = this.props,
         data = _a.data,
+        configPaddingLR = _a.configPaddingLR,
         configCompSpace = _a.configCompSpace,
-        configWidth = _a.configWidth,
-        fillUpWidth = _a.fillUpWidth;
-    var obj = data[window.magicDesign.device] || {};
+        configWidth = _a.configWidth;
+    var obj = data[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "spacing-config-container"
     }, configWidth && /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: "Width"
     }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
       maxVal: window.magicDesign.device === 'pc' ? 1240 : 375,
-      minVal: window.magicDesign.device === 'pc' ? 806 : 348,
+      minVal: window.magicDesign.device === 'pc' ? 1010 : 348,
       onChange: function onChange(value) {
         obj.contentWidth = value.count;
 
@@ -81,17 +81,6 @@ function (_super) {
       value: {
         count: obj.contentWidth
       }
-    })), fillUpWidth && window.magicDesign.device === 'pc' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
-      layout: "horizontal",
-      title: "Fill the page"
-    }, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
-      checked: obj.fillUp,
-      onChange: function onChange(e) {
-        console.log('ddd fill up', e.target.checked);
-        obj.fillUp = e.target.checked;
-
-        _this.selfRender();
-      }
     })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('PADDING')
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -100,47 +89,47 @@ function (_super) {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-top"
-    }), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
       onChange: function onChange(e) {
-        obj.paddingTop = e;
+        obj.paddingTop = e.target.value;
 
         _this.selfRender();
       },
-      value: obj.paddingTop || 0
+      value: obj.paddingTop
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-bottom"
-    }), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
       onChange: function onChange(e) {
-        obj.paddingBottom = e;
+        obj.paddingBottom = e.target.value;
 
         _this.selfRender();
       },
-      value: obj.paddingBottom || 0
-    })), /*#__PURE__*/_react["default"].createElement("div", {
+      value: obj.paddingBottom
+    })), configPaddingLR && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-left"
-    }), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
       onChange: function onChange(e) {
-        obj.paddingLeft = e;
+        obj.paddingLeft = e.target.value;
 
         _this.selfRender();
       },
-      value: obj.paddingLeft || 0
+      value: obj.paddingLeft
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-right"
-    }), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
       onChange: function onChange(e) {
-        obj.paddingRight = e;
+        obj.paddingRight = e.target.value;
 
         _this.selfRender();
       },
-      value: obj.paddingRight || 0
-    })))), configCompSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      value: obj.paddingRight
+    }))))), configCompSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('COMPONENT_SPACING')
     }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
       maxVal: 100,
@@ -157,23 +146,23 @@ function (_super) {
   };
 
   SpacingConfig.defaultProps = {
+    configPaddingLR: false,
     configCompSpace: true,
     configWidth: false,
-    fillUpWidth: false,
     data: {
       pc: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        marginBottom: 0
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        marginBottom: 10
       },
       mobile: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        marginBottom: 0
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        marginBottom: 10
       }
     }
   };

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

@@ -8,24 +8,21 @@ exports.getDefaultJSON = void 0;
 var _uuid = require("uuid");
 
 var getDefaultJSON = function getDefaultJSON() {
-  var contentId = (0, _uuid.v4)();
   return {
     id: (0, _uuid.v4)(),
     type: 'FLASH_DEAL',
     title: {
       icon: {
-        id: (0, _uuid.v4)(),
         open: true,
         url: '/get/resource/platform/conf/20220722/picture/组633391550411058986147840.png'
       },
       headline: {
         id: (0, _uuid.v4)(),
         open: true,
-        type: 'TEXT',
+        type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -51,7 +48,6 @@ var getDefaultJSON = function getDefaultJSON() {
           backgroundColor: ''
         },
         buttonText: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 12,
@@ -64,20 +60,6 @@ var getDefaultJSON = function getDefaultJSON() {
           borderColor: '',
           borderRadius: 6
         },
-        spacing: {
-          pc: {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 5,
-            paddingRight: 5
-          },
-          mobile: {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 5,
-            paddingRight: 5
-          }
-        },
         buttonIcon: {
           iconUrl: '/get/resource/platform/conf/20220719/picture/icon-arrow-right-s1549371733179686912.png',
           layout: 'right'
@@ -86,11 +68,9 @@ var getDefaultJSON = function getDefaultJSON() {
       }
     },
     content: {
-      id: contentId,
       sortType: '1',
       label: {
         id: (0, _uuid.v4)(),
-        contentId: contentId,
         open: true,
         type: 'BUTTON',
         text: 'Button',
@@ -99,32 +79,18 @@ var getDefaultJSON = function getDefaultJSON() {
           backgroundColor: '#CC1D20'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 8,
           fontStyle: 'normal',
-          color: '#fff'
+          color: '#fff',
+          padding: '0 5px'
         },
         buttonBorder: {
           open: true,
           borderColor: '',
           borderRadius: 7
         },
-        spacing: {
-          pc: {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: 4,
-            paddingRight: 4
-          },
-          mobile: {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: 4,
-            paddingRight: 4
-          }
-        },
         buttonIcon: {
           iconUrl: '',
           layout: 'right'
@@ -133,13 +99,11 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       productName: {
         id: (0, _uuid.v4)(),
-        contentId: contentId,
         open: true,
-        type: 'TEXT',
+        type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 14,
@@ -157,13 +121,11 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       activityPrice: {
         id: (0, _uuid.v4)(),
-        contentId: contentId,
         open: true,
-        type: 'TEXT',
+        type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -181,13 +143,11 @@ var getDefaultJSON = function getDefaultJSON() {
       },
       salesPrice: {
         id: (0, _uuid.v4)(),
-        contentId: contentId,
         open: true,
-        type: 'TEXT',
+        type: 'Text',
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 10,
@@ -207,28 +167,9 @@ var getDefaultJSON = function getDefaultJSON() {
         open: true
       }
     },
-    spacing: {
-      pc: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        marginBottom: window.magicDesign.compSpacing * 1.5
-      },
-      mobile: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        marginBottom: window.magicDesign.compSpacing
-      }
-    },
     customize: {
-      layout: 'layout1',
-      align: 'left',
-      pcRowNum: 6,
-      pcMaxRowNum: 6,
-      pcMinRowNum: 5
+      layout: 'left',
+      align: 'left'
     },
     background: {
       opacity: 100,

package/es/composite-comp/dito/components/FlashDeal/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobile = _interopRequireDefault(require("./mobile"));
 
-var _pc = _interopRequireDefault(require("./pc"));
-
 var _defaultJSON = require("./defaultJSON");
 
 var _coreUtil = require("../../../../utils/coreUtil");
@@ -72,9 +70,7 @@ function (_super) {
 
   FlashDeal.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
-      panelProps: nodeData
-    }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       panelProps: nodeData
     }));
   };

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

@@ -9,7 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./index.less");
 
-var _defImg = _interopRequireDefault(require("./imgs/defImg.png"));
+var _defImg = _interopRequireDefault(require("./imgs/defImg1.png"));
+
+var _defImg2 = _interopRequireDefault(require("./imgs/defImg2.png"));
+
+var _defImg3 = _interopRequireDefault(require("./imgs/defImg3.png"));
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
 
@@ -218,34 +222,31 @@ var defaultData = [{
   imgUrlContent: {
     url: _defImg["default"]
   },
-  offerName: 'Product Name',
-  salesPrice: 18000000,
-  specialPrice: 18000000,
-  marketPrice: 19000000,
-  discountPercent: 10,
-  salePercent: 500,
+  offerName: 'DITO STARTER PACK + 3GB Data',
+  salesPrice: 49,
+  marketPrice: 100,
+  discountPercent: 51,
+  salePercent: 5000,
   sppType: '2'
 }, {
   imgUrlContent: {
-    url: _defImg["default"]
+    url: _defImg2["default"]
   },
-  offerName: 'Product Name',
-  salesPrice: 18000000,
-  specialPrice: 18000000,
-  marketPrice: 19000000,
-  discountPercent: 10,
-  salePercent: 500,
+  offerName: 'DITO Level Up 99 x 365 days',
+  salesPrice: 594,
+  marketPrice: 1188,
+  discountPercent: 50,
+  salePercent: 5000,
   sppType: '2'
 }, {
   imgUrlContent: {
-    url: _defImg["default"]
+    url: _defImg3["default"]
   },
-  offerName: 'Product Name',
-  salesPrice: 18000000,
-  specialPrice: 18000000,
-  marketPrice: 19000000,
-  discountPercent: 10,
-  salePercent: 500,
+  offerName: 'DITO Level-Up Pack 99 7GB',
+  salesPrice: 99,
+  marketPrice: 138,
+  discountPercent: 28,
+  salePercent: 5000,
   sppType: '2'
 }];
 
@@ -383,8 +384,22 @@ function (_super) {
 
     var _list = list.length === 0 && (0, _coreUtil.isDesignMode)() ? defaultData : list;
 
+    var bgStyle = {};
+
+    if (panelProps.background.bgType === 'color') {
+      bgStyle = {
+        backgroundColor: (0, _commonUtil.getColorRgba)(panelProps.background.color || '#fff', panelProps.background.opacity / 100 || 1)
+      };
+    } else {
+      bgStyle = {
+        background: "url(" + panelProps.background.image + ") no-repeat center",
+        backgroundSize: '100%'
+      };
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-flash-deal-mobile"
+      className: "m-flash-deal-mobile",
+      style: bgStyle
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "flash-deal-title"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -424,8 +439,7 @@ function (_super) {
 
           return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + ((_a = item.sppProductId) !== null && _a !== void 0 ? _a : ''));
         },
-        panelProps: panelProps.content,
-        unknownPrice: isWill
+        panelProps: panelProps.content
       });
     }))));
   };

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

@@ -64,9 +64,9 @@
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
+    border-radius: 9px;
     display: flex;
     align-items: flex-start;
-    justify-content: flex-start;
     position: relative;
 
     .loading-wrap {

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

@@ -39,7 +39,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
       specialContent: [],
       text: 'name',
       content: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
@@ -66,19 +66,18 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing * 1.5
+        marginBottom: 0
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing
+        marginBottom: 0
       }
     },
     customize: {
       layout: 'newline',
       rowNum: 4,
-      mobileMaxRowNum: 5,
-      mobileMinRowNum: 3
+      mobileMaxRowNum: 5
     },
     background: {
       opacity: 100,

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

@@ -50,27 +50,17 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.calcWidth = function (num) {
-      return (100 - (num - 1) * 3) / num + "%";
-    };
-
-    _this.tileCalcWidth = function (num) {
-      return (100 - (num - 1) * 3) / (num + 0.5) + "%";
+      return (100 - (num - 1) * 2) / num + "%";
     };
 
     _this.getCardStyle = function (source, i) {
       var data = _this.props.data;
       var cardStyle = {};
+      cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
 
       if (data.customize.layout === 'newline') {
-        if (i > data.customize.rowNum - 1) {
-          cardStyle.marginTop = 12;
-        }
-
-        cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '3%' : 0;
+        cardStyle.marginBottom = 12;
         cardStyle.width = _this.calcWidth(data.customize.rowNum);
-      } else {
-        cardStyle.marginRight = '3%';
-        cardStyle.width = _this.tileCalcWidth(data.customize.rowNum);
       }
 
       return cardStyle;

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

@@ -1,7 +1,7 @@
 .mobile-navigation-mobile {
   // display: flex;
   // flex-direction: column;
-  padding-top: 18px;
+  padding: 18px 0;
   .group-wrap {
     padding: 0 20px;
     display: flex;
@@ -29,10 +29,9 @@
     overflow-x: auto;
     flex-wrap: nowrap;
     scroll-snap-type: x;
-    padding: 0 15px;
     .one-card {
-      flex-shrink: 0;
       scroll-snap-align: end;
+      min-width: 30%;
     }
   }
 }