@fonixtree/magic-design 0.0.78 → 0.0.80

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,7 +25,8 @@
     .tabTitle {
       display: flex;
       align-items: center;
-      padding: 0 24px;
+      // padding: 0 24px;
+      min-width: 100px;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -49,16 +50,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 +98,14 @@
       padding-left: 100px;
     }
 
-    .productCard {
-      margin-right: 12px;
+    .scrollProductList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      .productCard {
+        margin-right: 20px;
+      }
     }
   }
 
@@ -75,6 +113,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

@@ -17,28 +17,54 @@ 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: _ditoLogo["default"],
+          pcImgSrc: _ditoLogo["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: '#D92929'
+        }
+      },
+      icon: {
+        id: (0, _uuid.v4)(),
+        open: true,
+        color: {
+          pc: '#D92929',
+          mobile: '#D92929'
+        }
       }
     },
-    icon: {
-      open: true,
-      color: '#2F54EB'
+    spacing: {
+      pc: {
+        paddingTop: 20,
+        paddingBottom: 30,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 8,
+        paddingBottom: 8,
+        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
     }));
   };

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

@@ -233,50 +233,53 @@ function (_super) {
 
   SearchMobile.prototype.render = function () {
     var data = this.props.data;
-    var messageNum = this.state.messageNum;
-    var styleWrap = {};
-
-    if (data.background.bgType === 'color') {
-      styleWrap = {
-        backgroundColor: data.background.color,
-        opacity: data.background.opacity
-      };
-    } else {
-      styleWrap = {
-        backgroundImage: "url(" + data.background.image + ")",
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100%'
-      };
-    }
+    console.log('----search ', data);
+    var messageNum = this.state.messageNum; // let styleWrap = {};
+    // if (data.content.background.bgType === 'color') {
+    //   styleWrap = {
+    //     backgroundColor: data.content.background.color,
+    //     opacity: data.content.background.opacity,
+    //   };
+    // } else {
+    //   styleWrap = {
+    //     backgroundImage: `url(${data.content.background.image})`,
+    //     backgroundPosition: 'center',
+    //     backgroundRepeat: 'no-repeat',
+    //     backgroundSize: '100%',
+    //   };
+    // }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-search-bar",
-      style: styleWrap
+      className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: "#2C2C2C",
+    }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
+      style: {
+        borderColor: data.content.box.color.mobile
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: data.content.box.color.mobile,
       size: 24,
       type: "icon-search2"
-    }), /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: "#2C2C2C",
+      color: data.content.icon.color.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
       size: 24,
-      type: "icon-message"
+      type: "icon-ChatDots"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
-      data: data.logo,
+    }, messageNum))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      data: data.content.logo,
       style: {
-        height: 20
+        height: 30
       }
     }));
   };

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

@@ -1,6 +1,6 @@
 .m-search-bar {
-  height: 44px;
-  padding: 10px 16px;
+  height: 48px;
+  padding: 8px 16px;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
@@ -8,13 +8,23 @@
   width: 100%;
 
   .right {
-    width: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
+    .search-input-wrap {
+      width: 195px;
+      background: #fff;
+      border-radius: 4px;
+      border: 1px solid #D2D9E5;
+      padding: 4px 12px;
+      height: 32px;
+      text-align: right;
+    }
+
     .message-wrap {
       position: relative;
+      margin-left: 16px;
 
       .num {
         position: absolute;

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

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+var _antd = require("antd");
+
+var _locale = require("../../../../../locale");
+
+var _components = require("../../../../../meta-comp/components");
+
+var _common = require("../../../../../common");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var SearchPc =
+/** @class */
+function (_super) {
+  __extends(SearchPc, _super);
+
+  function SearchPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      // messageNum: '',
+      inputVal: ''
+    };
+
+    _this.onChangeVal = function (val) {
+      // console.log('--onChangeVal', val);
+      _this.setState({
+        inputVal: val
+      });
+    };
+
+    _this.searchProduct = function () {
+      console.log('--input', _this.state.inputVal);
+      (0, _coreUtil.clickUrl)({
+        pathname: "/product/list?q=" + _this.state.inputVal
+      });
+    };
+
+    _this.keyUp = function (e) {
+      if (e.keyCode === 13) {
+        _this.searchProduct();
+      }
+    };
+
+    return _this;
+  }
+
+  SearchPc.prototype.componentDidMount = function () {};
+
+  SearchPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var inputVal = this.state.inputVal;
+    console.log('--pc data', data);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pc-search-bar"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right"
+    }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-input-wrap",
+      style: {
+        borderColor: data.content.box.color.pc
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+      className: "search-input",
+      onChange: function onChange(e) {
+        return _this.onChangeVal(e.target.value);
+      },
+      onKeyUp: this.keyUp,
+      placeholder: (0, _locale.i18n)('PLEASE_INPUT_KEYWORDS'),
+      value: inputVal
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-icon",
+      onClick: this.searchProduct,
+      style: {
+        background: data.content.box.color.pc
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#fff",
+      size: 24,
+      type: "icon-search2"
+    }))), data.content && data.content.icon.open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "shopping-wrap",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)('/cart');
+      },
+      style: {
+        borderColor: data.content.icon.color.pc,
+        color: data.content.icon.color.pc
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: data.content.icon.color.pc,
+      size: 16,
+      type: "icon-ShoppingCartSimple"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "shopping-txt"
+    }, (0, _locale.i18n)('SHOPPING_CART')))), data.content && data.content.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      data: data.content.logo,
+      style: {
+        height: 40
+      }
+    }));
+  };
+
+  SearchPc.defaultProps = {
+    data: {}
+  };
+  return SearchPc;
+}(_react["default"].Component);
+
+var _default = SearchPc;
+exports["default"] = _default;

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

@@ -0,0 +1,59 @@
+.pc-search-bar {
+  // height: 48px;
+  // padding: 20px 100px 30px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+
+  .right {
+    display: flex;
+    flex: 1;
+    margin-left: 90px;
+    align-items: center;
+    justify-content: space-between;
+
+    .search-input-wrap {
+      border: 1px solid #2F54EB;
+      border-radius: 6px;
+      height: 40px;
+      display: flex;
+      flex: 1;
+      .search-input {
+        border: none;
+        height: 38px;
+        box-shadow: none;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .search-icon {
+        cursor: pointer;
+        height: 100%;
+        // width: 40px;
+        text-align: center;
+        padding: 8px;
+      }
+    }
+
+    .shopping-wrap {
+      border-radius: 4px;
+      margin-left: 16px;
+      padding: 8px 16px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border: 1px solid #2F54EB;
+      .shopping-txt {
+        margin-left: 6px;
+      }
+    }
+  }
+}

package/lib/composite-comp/dito/config-panels/FlashDealConfig/FlashDealConfigContent/index.js

@@ -19,6 +19,8 @@ var _common = require("../../../../../common");
 
 var _locale = require("../../../../../locale");
 
+require("./index.less");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -116,14 +118,22 @@ function (_super) {
           data: panelProps.salesPrice
         }),
         metaOption: panelProps.salesPrice
-      }, {
-        key: '5',
-        name: (0, _locale.i18n)('SALES_PROGRESS'),
-        value: null,
-        metaOption: panelProps.salesProgressVisible
       }],
       type: "switch"
-    }));
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sales_progress_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "label"
+    }, (0, _locale.i18n)('SALES_PROGRESS')), /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
+      checked: panelProps.salesProgressVisible.open,
+      onChange: function onChange(v) {
+        panelProps.salesProgressVisible = {
+          open: v
+        };
+
+        _this.reRender();
+      }
+    })));
   };
 
   AComponent.defaultProps = {

package/lib/composite-comp/dito/config-panels/FlashDealConfig/FlashDealConfigContent/index.less

@@ -0,0 +1,20 @@
+.flash_sale_content {
+
+  .sales_progress_wrap {
+    border-top: 1px solid #EDF0F4;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .label {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      height: 24px !important;
+      font-weight: 600 !important;
+      color: #232F46;
+      font-family: 'Open Sans';
+      font-style: normal;
+    }
+  }
+}

package/lib/composite-comp/dito/config-panels/FlashDealConfig/index.js

@@ -13,6 +13,8 @@ var _FlashDealConfigContent = _interopRequireDefault(require("./FlashDealConfigC
 
 var _layout = _interopRequireDefault(require("./imgs/layout1.png"));
 
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
+
 var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
@@ -42,18 +44,26 @@ function FlashDealConfig(props) {
       })
     }, {
       key: '3',
+      name: (0, _locale.i18n)('SPACING'),
+      value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+        configCompSpace: true,
+        configPaddingLR: false,
+        data: data.spacing
+      })
+    }, {
+      key: '4',
       name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
         data: data.customize,
         isHideAlign: true,
         layoutSource: [{
           id: 'layout1',
-          name: 'left',
+          name: 'layout1',
           image: _layout["default"]
         }]
       })
     }, {
-      key: '4',
+      key: '5',
       name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background

package/lib/composite-comp/dito/config-panels/MobileNavigationConfig/MobileNavigationConfigGroup/index.js

@@ -19,6 +19,8 @@ var _defaultJSON = require("../../../components/MobileNavigation/defaultJSON");
 
 var _locale = require("../../../../../locale");
 
+var _decorator = require("../../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -118,7 +120,7 @@ function (_super) {
   ImageTextConfigGroup.defaultProps = {
     source: []
   };
-  ImageTextConfigGroup = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer], ImageTextConfigGroup);
+  ImageTextConfigGroup = __decorate([(0, _mobxReact.inject)('store'), _mobxReact.observer, _decorator.updateConfigDecorator], ImageTextConfigGroup);
   return ImageTextConfigGroup;
 }(_react["default"].Component);