@fonixtree/magic-design 0.0.71 → 0.0.72

package/lib/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/lib/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/lib/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%;
     }
   }
 }

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

@@ -7,16 +7,13 @@ exports.recommendGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo, text) {
+var recommendGroupSourceJSON = function recommendGroupSourceJSON(logo, text) {
   var groupId = (0, _uuid.v4)();
-  var imageId = (0, _uuid.v4)();
-  var groupNameId = (0, _uuid.v4)();
   return {
     id: groupId,
-    parentId: parentId,
     image: {
       parentId: groupId,
-      id: imageId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'IMAGE',
       content: {
@@ -36,13 +33,12 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
     },
     groupName: {
       parentId: groupId,
-      id: groupNameId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'TEXT',
       specialContent: [],
       text: text,
       content: {
-        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -56,7 +52,6 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
       vertical: {}
     },
     seeAll: {
-      parentId: groupId,
       id: (0, _uuid.v4)(),
       open: true,
       type: 'BUTTON',
@@ -66,7 +61,6 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
         backgroundColor: '#fff'
       },
       buttonText: {
-        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 12,
@@ -104,10 +98,10 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
     intelligentValue: [],
     maxProdNum: 10,
     hover: {
-      open: false,
+      open: true,
       image: {
         parentId: groupId,
-        id: imageId,
+        id: (0, _uuid.v4)(),
         open: false,
         type: 'IMAGE',
         content: {
@@ -127,13 +121,12 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
       },
       groupName: {
         parentId: groupId,
-        id: groupNameId,
+        id: (0, _uuid.v4)(),
         open: false,
         type: 'TEXT',
         specialContent: [],
         text: text,
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -153,11 +146,10 @@ var recommendGroupSourceJSON = function recommendGroupSourceJSON(parentId, logo,
 exports.recommendGroupSourceJSON = recommendGroupSourceJSON;
 
 var getDefaultJSON = function getDefaultJSON() {
-  var groupId = (0, _uuid.v4)();
   return {
-    id: groupId,
+    id: (0, _uuid.v4)(),
     type: 'RECOMMEND',
-    groupSource: [recommendGroupSourceJSON(groupId, '', 'Tab1'), recommendGroupSourceJSON(groupId, '', 'Tab2')],
+    groupSource: [recommendGroupSourceJSON('', 'Tab1'), recommendGroupSourceJSON('', 'Tab2')],
     content: {
       label: {
         id: (0, _uuid.v4)(),
@@ -169,7 +161,6 @@ var getDefaultJSON = function getDefaultJSON() {
           backgroundColor: '#CE1126'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 8,
@@ -208,7 +199,6 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -231,7 +221,6 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 700,
           fontSize: 14,
@@ -254,7 +243,6 @@ var getDefaultJSON = function getDefaultJSON() {
         specialContent: [],
         text: 'Flash Deal',
         content: {
-          sizeType: 'Customize font styles',
           fontFamily: 'Open Sans',
           fontWeight: 500,
           fontSize: 10,
@@ -280,25 +268,19 @@ var getDefaultJSON = function getDefaultJSON() {
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: window.magicDesign.compSpacing * 1.5
+        marginBottom: 0
       },
       mobile: {
         paddingTop: 0,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: window.magicDesign.compSpacing
+        marginBottom: 0
       }
     },
     customize: {
-      layout: {
-        pcLayout: 'layout1',
-        h5Layout: 'layout1'
-      },
-      align: 'left',
-      pcRowNum: 6,
-      pcMaxRowNum: 6,
-      pcMinRowNum: 5
+      layout: 'left',
+      align: 'left'
     },
     background: {
       opacity: 100,

package/lib/composite-comp/dito/components/Recommend/index.js

@@ -9,14 +9,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobile = _interopRequireDefault(require("./mobile"));
 
-var _pc = _interopRequireDefault(require("./pc"));
-
 var _defaultJSON = require("./defaultJSON");
 
 var _coreUtil = require("../../../../utils/coreUtil");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _businessUtil = require("../../../../utils/businessUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -72,9 +72,10 @@ function (_super) {
 
   Recommend.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"], {
+    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: wrapStyle
+    }, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       panelProps: nodeData
     }));
   };

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

@@ -227,6 +227,10 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 };
 
 var LAYOUT_IMAGE_SIZE = {
+  left: {
+    w: '100%',
+    h: 165
+  },
   layout1: {
     w: '100%',
     h: 164
@@ -288,10 +292,9 @@ function (_super) {
 
     _this.getTabBarActiveColor = function (_panelProps) {
       var tabIndex = _this.state.tabIndex;
-      var activeHoverGroupName = _panelProps.groupSource[tabIndex].hover;
-      return activeHoverGroupName.open ? (0, _commonUtil.ensure)(function () {
-        return activeHoverGroupName.groupName.content.color;
-      }, '#CE1126') : '#CE1126';
+      return (0, _commonUtil.ensure)(function () {
+        return _panelProps.groupSource[tabIndex].hover.groupName.content.color;
+      }, '#1890ff');
     };
 
     _this.getProductList = function (index) {
@@ -413,8 +416,10 @@ function (_super) {
     };
 
     _this.resetLayout = function () {
-      var layout = _this.props.panelProps.customize.layout.h5Layout;
+      var layout = _this.props.panelProps.customize.layout.h5Layout || _this.props.panelProps.customize.layout; // 后面删除
+
       var LAYOUT_COLUMN = {
+        left: 2,
         layout1: 2,
         layout2: 1,
         layout3: 3
@@ -464,7 +469,8 @@ function (_super) {
 
     _this.onTabClick = function (e, index) {
       var tabIndex = _this.state.tabIndex;
-      if (tabIndex === index) return; // e.currentTarget.scrollIntoView(false);
+      if (tabIndex === index) return;
+      e.currentTarget.scrollIntoView(false);
 
       _this.setState({
         tabIndex: index
@@ -537,7 +543,7 @@ function (_super) {
         hideTabs: hideTabs
       });
     });
-    var curLayout = panelProps.customize.layout.h5Layout;
+    var curLayout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
@@ -558,12 +564,9 @@ function (_super) {
         hideTabs = _a.hideTabs;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 4;
-    var layout = panelProps.customize.layout.h5Layout;
-
-    var _seeAll = (0, _commonUtil.ensure)(function () {
-      return groupSource[tabIndex].seeAll;
-    }, '');
+    var isDivide = groupSource.length <= 3;
+    var layout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
+    // const _seeAll = ensure(() => groupSource[tabIndex].seeAll, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
       return LAYOUT_IMAGE_SIZE[layout].h;
@@ -611,33 +614,11 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-      key: "macyContainer",
-      className: "macyContainer"
-    }, products.map(function (item) {
-      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
-        key: item.productId,
-        data: item,
-        fixHeight: layout === 'layout3',
-        imgHeight: imgHeight,
-        imgWidth: imgWidth,
-        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
-        onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
-        },
-        panelProps: panelProps.content,
-        showProgress: false
-      });
-    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-      className: "btnSeeAll",
-      data: _seeAll
-    })) : /*#__PURE__*/_react["default"].createElement("div", {
+    })), ['layout4', 'layout5'].includes(layout) ? /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout5'
       })
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "productList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -653,10 +634,24 @@ function (_super) {
         panelProps: panelProps.content,
         showProgress: false
       }));
-    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-      className: "btnSeeAll",
-      data: _seeAll
-    })));
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      key: "macyContainer",
+      className: "macyContainer"
+    }, products.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
+        key: item.productId,
+        data: item,
+        fixHeight: layout === 'layout3',
+        imgHeight: imgHeight,
+        imgWidth: imgWidth,
+        layout: layout === 'layout2' ? 'horizontal' : 'vertical',
+        onItemClick: function onItemClick() {
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+        },
+        panelProps: panelProps.content,
+        showProgress: false
+      });
+    }))));
   };
 
   RecommendMobile.defaultProps = {

package/lib/composite-comp/dito/components/Recommend/mobile/index.less

@@ -25,8 +25,7 @@
     .tabTitle {
       display: flex;
       align-items: center;
-      // padding: 0 24px;
-      min-width: 80px;
+      padding: 0 24px;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -67,14 +66,8 @@
       padding-left: 100px;
     }
 
-    .productList {
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-
-      .productCard {
-        margin-right: 12px;
-      }
+    .productCard {
+      margin-right: 12px;
     }
   }