@fonixtree/magic-design 0.0.52 → 0.0.53

package/es/common/LinkModal/ProductDetailPage/index.js

@@ -232,7 +232,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
 
   var _j = (0, _react.useState)({
     pageSize: 20,
-    current: 1
+    pageIndex: 1
   }),
       paginationParams = _j[0],
       setPaginationParams = _j[1];
@@ -399,7 +399,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     onClick: function onClick() {
       setLoading(true);
-      paginationParams.current = 1;
+      paginationParams.pageIndex = 1;
 
       var total = paginationParams.total,
           params = __rest(paginationParams, ["total"]);
@@ -468,7 +468,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
     pagination: __assign(__assign({}, paginationParams), {
       onChange: function onChange(page) {
         setLoading(true);
-        paginationParams.current = page;
+        paginationParams.pageIndex = page;
 
         var total = paginationParams.total,
             params = __rest(paginationParams, ["total"]);

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

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +27,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 () {
@@ -231,13 +235,21 @@ var LAYOUT_IMAGE_SIZE = {
     w: '100%',
     h: 180
   },
-  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
   }
 };
 
@@ -254,14 +266,27 @@ function (_super) {
     _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({
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _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;
@@ -462,6 +487,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["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,6 +536,17 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
@@ -528,6 +592,17 @@ function (_super) {
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
@@ -542,7 +617,9 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
@@ -553,10 +630,10 @@ function (_super) {
     }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].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);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
@@ -598,8 +675,22 @@ 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",
+      ref: this.scrollRef,
       className: "macyContainer"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
@@ -621,6 +712,7 @@ function (_super) {
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
@@ -642,7 +734,16 @@ function (_super) {
     }), _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/es/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;
@@ -49,16 +49,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;
 
@@ -67,7 +98,7 @@
     }
 
     .productCard {
-      margin-right: 12px;
+      margin-right: 20px;
     }
   }
 

package/es/utils/coreUtil.js

@@ -87,7 +87,9 @@ var clickUrl = function clickUrl(url) {
     if (url.startsWith('/')) {
       (0, _commonUtil.navigateTo)(url);
     } else {
-      location.href = url;
+      // location.href = url;
+      var newUrl = isPc() ? pcLink : h5Link;
+      (0, _commonUtil.navigateTo)(newUrl);
     }
 
     return;

package/lib/common/LinkModal/ProductDetailPage/index.js

@@ -232,7 +232,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
 
   var _j = (0, _react.useState)({
     pageSize: 20,
-    current: 1
+    pageIndex: 1
   }),
       paginationParams = _j[0],
       setPaginationParams = _j[1];
@@ -399,7 +399,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
   }, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
     onClick: function onClick() {
       setLoading(true);
-      paginationParams.current = 1;
+      paginationParams.pageIndex = 1;
 
       var total = paginationParams.total,
           params = __rest(paginationParams, ["total"]);
@@ -468,7 +468,7 @@ var ProductDetailPage = function ProductDetailPage(props) {
     pagination: __assign(__assign({}, paginationParams), {
       onChange: function onChange(page) {
         setLoading(true);
-        paginationParams.current = page;
+        paginationParams.pageIndex = page;
 
         var total = paginationParams.total,
             params = __rest(paginationParams, ["total"]);

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

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _mobx = require("../../../../../mobx");
 
 var _ProductItem = _interopRequireDefault(require("../../../../common/components/ProductItem"));
@@ -25,6 +27,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 () {
@@ -231,13 +235,21 @@ var LAYOUT_IMAGE_SIZE = {
     w: '100%',
     h: 180
   },
-  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
   }
 };
 
@@ -254,14 +266,27 @@ function (_super) {
     _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({
       tabIndex: 0,
       tabLeft: 0,
       tabWidth: 0,
       groupSource: [],
-      hideTabs: false
+      hideTabs: false,
+      scrollToLeftDisabled: true,
+      scrollToRightDisabled: true
     }, _this._cache);
 
+    _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;
@@ -462,6 +487,34 @@ function (_super) {
       });
 
       _this.getProductList(index);
+
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["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,6 +536,17 @@ function (_super) {
 
       _this.getProductList(0);
     });
+    setTimeout(function () {
+      var scrollDom = _this.scrollRef.current;
+
+      if (scrollDom) {
+        _this.setScrollDisabled(scrollDom);
+
+        scrollDom.onscroll = (0, _lodash["default"])(function () {
+          _this.setScrollDisabled(scrollDom);
+        }, 500);
+      }
+    }, 0);
   };
 
   RecommendMobile.prototype.componentWillReceiveProps = function () {
@@ -528,6 +592,17 @@ function (_super) {
 
     if (curLayout !== this.preLayout) {
       this.resetLayout();
+      setTimeout(function () {
+        var scrollDom = _this.scrollRef.current;
+
+        if (scrollDom) {
+          _this.setScrollDisabled(scrollDom);
+
+          scrollDom.onscroll = (0, _lodash["default"])(function () {
+            _this.setScrollDisabled(scrollDom);
+          }, 500);
+        }
+      }, 0);
     }
 
     this.preLayout = curLayout;
@@ -542,7 +617,9 @@ function (_super) {
         tabLeft = _a.tabLeft,
         tabWidth = _a.tabWidth,
         groupSource = _a.groupSource,
-        hideTabs = _a.hideTabs;
+        hideTabs = _a.hideTabs,
+        scrollToLeftDisabled = _a.scrollToLeftDisabled,
+        scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
     var isDivide = groupSource.length <= 3;
@@ -553,10 +630,10 @@ function (_super) {
     }, '');
 
     var imgHeight = (0, _commonUtil.ensure)(function () {
-      return LAYOUT_IMAGE_SIZE[layout].h;
+      return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].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);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-recommend-pc",
@@ -598,8 +675,22 @@ 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",
+      ref: this.scrollRef,
       className: "macyContainer"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
@@ -621,6 +712,7 @@ function (_super) {
       data: _seeAll
     })) : /*#__PURE__*/_react["default"].createElement("div", {
       key: "scrollContainer",
+      ref: this.scrollRef,
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
@@ -642,7 +734,16 @@ function (_super) {
     }), _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;
@@ -49,16 +49,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;
 
@@ -67,7 +98,7 @@
     }
 
     .productCard {
-      margin-right: 12px;
+      margin-right: 20px;
     }
   }
 

package/lib/utils/coreUtil.js

@@ -87,7 +87,9 @@ var clickUrl = function clickUrl(url) {
     if (url.startsWith('/')) {
       (0, _commonUtil.navigateTo)(url);
     } else {
-      location.href = url;
+      // location.href = url;
+      var newUrl = isPc() ? pcLink : h5Link;
+      (0, _commonUtil.navigateTo)(newUrl);
     }
 
     return;

package/package.json

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