@fonixtree/magic-design 0.0.109 → 0.0.111

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

@@ -13,6 +13,10 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = require("lodash");
+
+var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +29,8 @@ var _commonUtil = require("../../../../../utils/commonUtil");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _Iconfont = _interopRequireDefault(require("../../../../../common/Iconfont"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -228,16 +234,24 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
 
 var LAYOUT_IMAGE_SIZE = {
   layout1: {
-    w: 180,
-    h: 180
+    w: '100%',
+    h: ''
   },
-  layout2: {
+  layout2_col6: {
     w: 160,
     h: 160
   },
-  layout3: {
-    w: 180,
-    h: 180
+  layout2_col5: {
+    w: 200,
+    h: 200
+  },
+  layout3_col6: {
+    w: 160,
+    h: 160
+  },
+  layout3_col5: {
+    w: 200,
+    h: 200
   }
 };
 
@@ -251,17 +265,42 @@ function (_super) {
 
     _this.preData = {};
     _this.preLayout = '';
+    _this.preContent = '';
+    _this.preSpacing = '';
     _this._cache = (0, _coreUtil.isDesignMode)() ? {} : (0, _commonUtil.ensure)(function () {
       return (0, _storeUtil.getMagicStore)("recommend_" + _this.props.panelProps.id);
     }, {});
+    _this.scrollRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = __assign({
+      contentWidth: 0,
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _this.listenWidth = function () {
+      setTimeout(function () {
+        var renderContainer = document.querySelector(".macyContainer_" + _this.props.panelProps.id);
+        if (renderContainer) _this.setState({
+          contentWidth: renderContainer.offsetWidth
+        });
+      });
+    };
+
+    _this.setScrollDisabled = function (scrollDom) {
+      var scrollToLeftDisabled = scrollDom.scrollLeft === 0;
+      var scrollToRightDisabled = scrollDom.clientWidth + scrollDom.scrollLeft >= scrollDom.scrollWidth;
+
+      _this.setState({
+        scrollToLeftDisabled: scrollToLeftDisabled,
+        scrollToRightDisabled: scrollToRightDisabled
+      });
+    };
+
     _this.initTab = function (index, hideTabs) {
       var selectedTabDom = document.querySelector(".tab-select-wrap .tabTitle:nth-child(" + (index + 1) + ")");
       var tabLeft = 0;
@@ -322,8 +361,11 @@ function (_super) {
               _k.label = 1;
 
             case 1:
-              _k.trys.push([1, 7,, 8]);
+              _k.trys.push([1, 9,, 10]);
 
+              if (!(groupSource.length > 0)) return [3
+              /*break*/
+              , 7];
               if (!(sourceType === 'select')) return [3
               /*break*/
               , 3];
@@ -380,13 +422,22 @@ function (_super) {
               , 8];
 
             case 7:
+              newData = [];
+              _k.label = 8;
+
+            case 8:
+              return [3
+              /*break*/
+              , 10];
+
+            case 9:
               e_1 = _k.sent();
               newData = [];
               return [3
               /*break*/
-              , 8];
+              , 10];
 
-            case 8:
+            case 10:
               if (!(0, _coreUtil.isDesignMode)()) {
                 _cache = (0, _storeUtil.getMagicStore)("recommend_" + recommendId);
                 (0, _storeUtil.setMagicStore)("recommend_" + recommendId, __assign(__assign({}, _cache), (_h = {}, _h["products" + index] = newData, _h.endTime = Date.now() + 3 * 60 * 1000, _h)));
@@ -407,8 +458,8 @@ function (_super) {
       var customize = _this.props.panelProps.customize;
       if (customize.layout.pcLayout !== 'layout1') return;
       setTimeout(function () {
-        if (document.querySelector('.macyContainer')) {
-          _this.getMacy('.macyContainer', customize.pcRowNum);
+        if (document.querySelector(".macyContainer_" + _this.props.panelProps.id)) {
+          _this.getMacy(".macyContainer_" + _this.props.panelProps.id, customize.pcRowNum);
         }
       });
     };
@@ -430,28 +481,9 @@ function (_super) {
       }, true);
     };
 
-    _this.getBackgroundStyle = function () {
-      var panelProps = _this.props.panelProps;
-      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 bgStyle;
-    };
-
     _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
@@ -462,6 +494,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash2["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
+    };
+
+    _this.scrollToRight = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.clientWidth + scrollDom.scrollLeft < scrollDom.scrollWidth) {
+        scrollDom.scrollTo(scrollDom.scrollLeft + scrollDom.clientWidth, 0);
+      }
+    };
+
+    _this.scrollToLeft = function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom.scrollLeft > 0) {
+        scrollDom.scrollTo(scrollDom.scrollLeft - scrollDom.clientWidth, 0);
+      }
     };
 
     return _this;
@@ -483,13 +543,30 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash2["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
+    this.listenWidth();
+    window.addEventListener('resize', (0, _lodash.debounce)(this.listenWidth));
+  };
+
+  RecommendMobile.prototype.componentWillUnmount = function () {
+    window.removeEventListener('resize', this.listenWidth);
   };
 
-  RecommendMobile.prototype.componentWillReceiveProps = function () {
+  RecommendMobile.prototype.componentWillReceiveProps = function (nextProps) {
     var _this = this;
 
     var tabIndex = this.state.tabIndex;
-    var panelProps = this.props.panelProps;
+    var panelProps = nextProps.panelProps;
     var source = [];
     var hideTabs = false;
     panelProps.groupSource.map(function (m) {
@@ -497,8 +574,8 @@ function (_super) {
       if (show) source.push(m);
     });
 
-    if (source.length === 0 && panelProps.groupSource.length > 0) {
-      source.push(panelProps.groupSource[0]);
+    if (source.length === 0) {
+      if (panelProps.groupSource.length > 0) source.push(panelProps.groupSource[0]);
       hideTabs = true;
     }
 
@@ -524,13 +601,37 @@ function (_super) {
         hideTabs: hideTabs
       });
     });
-    var curLayout = panelProps.customize.layout.pcLayout;
+    var curLayout = JSON.stringify(panelProps.customize);
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash2["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
+    var curContent = JSON.stringify(panelProps.content);
+    var curSpacing = JSON.stringify(panelProps.spacing);
+
+    if (curSpacing !== this.preSpacing) {
+      this.listenWidth();
+    }
+
+    if (curContent !== this.preContent || curSpacing !== this.preSpacing) {
+      this.resetLayout();
+    }
+
+    this.preContent = curContent;
+    this.preSpacing = curSpacing;
   };
 
   RecommendMobile.prototype.render = function () {
@@ -542,25 +643,27 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
-    var bgStyle = this.getBackgroundStyle();
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled,
+        contentWidth = _a.contentWidth;
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 3;
+    var isDivide = groupSource.length <= 10;
     var layout = panelProps.customize.layout.pcLayout;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
       return groupSource[tabIndex].seeAll;
     }, '');
 
-    var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
-    }, 140);
     var imgWidth = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].w;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
+    }, 140);
+    var imgHeight = (0, _commonUtil.ensure)(function () {
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
     }, 140);
+    if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12 * (panelProps.customize.pcRowNum - 1)) / panelProps.customize.pcRowNum;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-recommend-pc",
-      style: bgStyle
+      className: "m-recommend-pc"
     }, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
       className: "tab-select-wrap"
     }, groupSource.map(function (tab, index) {
@@ -598,9 +701,23 @@ function (_super) {
         transform: "translateX(" + tabLeft + "px)",
         background: this.getTabBarActiveColor(panelProps)
       }
-    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-content"
+    }, layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon left",
+      onClick: function onClick() {
+        return _this.scrollToLeft();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToLeftDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-left"
+    })), layout === 'layout1' ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tab-list"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       key: "macyContainer",
-      className: "macyContainer"
+      ref: this.scrollRef,
+      className: "macyContainer macyContainer_" + panelProps.id
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
         key: item.productId,
@@ -609,19 +726,24 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false
       });
     })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
-      className: "btnSeeAll",
+      className: (0, _classnames["default"])('btnSeeAll', {
+        line: layout === 'layout1'
+      }),
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "scrollProductList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -632,15 +754,24 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false
       }));
-    }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
-    })));
+    })), layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "arrow-icon right",
+      onClick: function onClick() {
+        return _this.scrollToRight();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: scrollToRightDisabled ? '#BDC1C8' : '#232F46',
+      size: 20,
+      type: "icon-outlined-right"
+    }))));
   };
 
   RecommendMobile.defaultProps = {

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

@@ -1,17 +1,17 @@
 .m-recommend-pc {
   display: flex;
   flex-direction: column;
+  position: relative;
 
   .ant-tabs-nav-operations {
     display: none !important;
   }
 
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-
+  // ::-webkit-scrollbar {
+  //   width: 0;
+  //   height: 0;
+  //   display: none;
+  // }
 
   .tab-select-wrap {
     display: flex;
@@ -25,11 +25,14 @@
     .tabTitle {
       display: flex;
       align-items: center;
-      padding: 0 24px;
+      text-align: center;
+      // padding: 0 24px;
+      min-width: 100px;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
       flex-direction: column;
+      cursor: pointer;
 
       img {
         height: 16px;
@@ -49,16 +52,47 @@
     }
   }
 
+  .tab-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .tab-list {
+      width: 100%;
+    }
+  }
+
+  .arrow-icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    line-height: 42px;
+    text-align: center;
+    background: #FFFFFF;
+    box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+    border-radius: 100px;
+    cursor: pointer;
+
+    &.left {
+      margin-right: 40px;
+    }
+
+    &.right {
+      margin-left: 40px;
+    }
+  }
+
   .macyContainer {
     display: flex;
-    margin: 0 16px;
+    margin: 0;
   }
 
   .scrollContainer {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 0 16px;
+    flex: 1;
+    margin: 0;
     overflow-x: auto;
     padding-bottom: 15px;
 
@@ -66,8 +100,14 @@
       padding-left: 100px;
     }
 
-    .productCard {
-      margin-right: 12px;
+    .scrollProductList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      .productCard {
+        margin-right: 20px;
+      }
     }
   }
 
@@ -75,6 +115,10 @@
     display: block;
     width: fit-content;
     min-width: 80px;
-    margin: 0 auto;
+    flex: none;
+
+    &.line {
+      margin: 0 auto 10px auto;
+    }
   }
 }

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

@@ -7,7 +7,7 @@ exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _ditoLogo = _interopRequireDefault(require("./imgs/dito-logo.svg"));
+var _xtLogo = _interopRequireDefault(require("./imgs/xt-logo.png"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,28 +17,57 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: (0, _uuid.v4)(),
     type: 'SEARCH',
-    logo: {
-      id: (0, _uuid.v4)(),
-      open: true,
-      type: 'IMAGE',
-      content: {
-        h5Name: 'name2',
-        pcName: 'name2',
-        h5ImgSrc: _ditoLogo["default"],
-        pcImgSrc: 'https://online.iwhalecloud.com/static/banner3.d4d11f4b.webp',
-        clickUrl: ''
+    content: {
+      logo: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: 'name2',
+          pcName: 'name2',
+          h5ImgSrc: _xtLogo["default"],
+          pcImgSrc: _xtLogo["default"],
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
       },
-      hover: {
-        open: false,
-        backgroundType: 'enlarge',
-        magnification: 1.5,
-        pcImgHoverUrl: '',
-        h5ImgHoverUrl: ''
+      box: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        color: {
+          pc: '#D92929',
+          mobile: '#8493AF'
+        }
+      },
+      icon: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        color: {
+          pc: '#D92929',
+          mobile: '#232F46'
+        }
       }
     },
-    icon: {
-      open: true,
-      color: '#2F54EB'
+    spacing: {
+      pc: {
+        paddingTop: 20,
+        paddingBottom: 30,
+        marginBottom: 0,
+        fillUp: false
+      },
+      mobile: {
+        paddingTop: 8,
+        paddingBottom: 8,
+        paddingLeft: 15,
+        paddingRight: 15,
+        marginBottom: 0
+      }
     },
     customize: {
       layout: 'left',

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

@@ -11,6 +11,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _index = _interopRequireDefault(require("./mobile/index"));
 
+var _index2 = _interopRequireDefault(require("./pc/index"));
+
 var _coreUtil = require("../../../../utils/coreUtil");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
@@ -69,8 +71,11 @@ function (_super) {
   }
 
   SearchBar.prototype.render = function () {
-    var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    var nodeData = this.props.nodeData; // console.log('search nodeData', nodeData);
+
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_index2["default"], {
+      data: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_index["default"], {
       data: nodeData
     }));
   };