@fonixtree/magic-design 2.0.97 → 2.0.98

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

@@ -36,13 +36,26 @@ var getDefaultJSON = function getDefaultJSON() {
         open: true,
         color: {
           pc: '#D92929',
-          mobile: '#8493AF'
+          mobile: '#D2D9E5'
         },
         backgroundColor: {
           pc: '#fff',
           mobile: '#fff'
         }
       },
+      keyword: {
+        open: true,
+        type: 'InputField',
+        placeholder: 'Tshirt Woman',
+        content: {
+          sizeType: 'Customize font styles',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 12,
+          pcFontSize: 14,
+          color: '#CE1126'
+        }
+      },
       icon: {
         id: (0, _uuid.v4)(),
         open: true,

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _antd = require("antd");
+
 require("./index.less");
 
 var _components = require("../../../../../meta-comp/components");
@@ -15,6 +17,8 @@ var _common = require("../../../../../common");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _Text = require("../../../../../meta-comp/components/Text");
+
 var _commonUtil = require("../../../../../utils/commonUtil");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -45,6 +49,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -198,7 +218,8 @@ function (_super) {
 
     _this.state = {
       messageNum: '',
-      cartNum: ''
+      cartNum: '',
+      editing: false
     };
 
     _this.getCartNum = function () {
@@ -265,60 +286,103 @@ function (_super) {
       });
     };
 
+    _this.onChange = function (e) {
+      _this.setState({
+        value: e.target.value,
+        editing: true
+      });
+    };
+
+    _this.onFocus = function () {
+      var _a;
+
+      var value = _this.state.value;
+
+      if (value === ((_a = _this.props.data.content.keyword) === null || _a === void 0 ? void 0 : _a.placeholder)) {
+        _this.setState({
+          value: '',
+          editing: true
+        });
+      }
+    };
+
+    _this.onBlur = function () {
+      var _a, _b, _c;
+
+      var value = _this.state.value;
+
+      if (!value) {
+        _this.setState({
+          value: (_c = (_b = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder,
+          editing: false
+        });
+      }
+    };
+
     return _this;
   }
 
   SearchMobile.prototype.componentDidMount = function () {
-    // const { data } = this.props;
-    // console.log('---mobile ', data);
+    var _a, _b, _c;
+
     this.getMessageNum();
     this.getCartNum();
+    this.setState({
+      value: (_c = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder
+    });
+  };
+
+  SearchMobile.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a, _b, _c;
+
+    if (!this.state.editing) {
+      this.setState({
+        value: (_c = (_b = (_a = nextProps.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder
+      });
+    }
   };
 
   SearchMobile.prototype.render = function () {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
 
     var data = this.props.data;
-    var _q = this.state,
-        messageNum = _q.messageNum,
-        cartNum = _q.cartNum; // 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%',
-    //   };
-    // }
+    var _t = this.state,
+        messageNum = _t.messageNum,
+        cartNum = _t.cartNum,
+        value = _t.value;
+
+    var style = __assign({}, (0, _Text.contentStyle)((_a = data.content.keyword) === null || _a === void 0 ? void 0 : _a.content));
 
+    Reflect.deleteProperty(style, 'width');
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, data.content && ((_a = data.content.box) === null || _a === void 0 ? void 0 : _a.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, data.content && ((_b = data.content.box) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
       },
       style: {
-        borderColor: (_c = (_b = data.content.box) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.mobile
+        borderColor: (_d = (_c = data.content.box) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d.mobile,
+        backgroundColor: (_f = (_e = data.content.box) === null || _e === void 0 ? void 0 : _e.backgroundColor) === null || _f === void 0 ? void 0 : _f.mobile
       }
-    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: (_e = (_d = data.content.box) === null || _d === void 0 ? void 0 : _d.color) === null || _e === void 0 ? void 0 : _e.mobile,
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+      className: "search-input",
+      onBlur: this.onBlur,
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      style: (0, _commonUtil.pxToRem)(style),
+      type: "text",
+      value: value
+    }), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: (_h = (_g = data.content.box) === null || _g === void 0 ? void 0 : _g.color) === null || _h === void 0 ? void 0 : _h.mobile,
       size: (0, _commonUtil.convertToRem)(24),
-      style: {
-        display: 'flex'
-      },
       type: "icon-search2"
-    })), data.content && ((_g = (_f = data.content.icon) === null || _f === void 0 ? void 0 : _f.cartIcon) === null || _g === void 0 ? void 0 : _g.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.content && ((_k = (_j = data.content.icon) === null || _j === void 0 ? void 0 : _j.cartIcon) === null || _k === void 0 ? void 0 : _k.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: (_j = (_h = data.content.icon) === null || _h === void 0 ? void 0 : _h.color) === null || _j === void 0 ? void 0 : _j.mobile,
+      color: (_m = (_l = data.content.icon) === null || _l === void 0 ? void 0 : _l.color) === null || _m === void 0 ? void 0 : _m.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/main/cart');
       },
@@ -329,10 +393,10 @@ function (_super) {
       type: "icon-ShoppingCartSimple1"
     }), !!cartNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, cartNum)), data.content && ((_l = (_k = data.content.icon) === null || _k === void 0 ? void 0 : _k.messageIcon) === null || _l === void 0 ? void 0 : _l.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, cartNum)), data.content && ((_p = (_o = data.content.icon) === null || _o === void 0 ? void 0 : _o.messageIcon) === null || _p === void 0 ? void 0 : _p.mobile) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: (_o = (_m = data.content.icon) === null || _m === void 0 ? void 0 : _m.color) === null || _o === void 0 ? void 0 : _o.mobile,
+      color: (_r = (_q = data.content.icon) === null || _q === void 0 ? void 0 : _q.color) === null || _r === void 0 ? void 0 : _r.mobile,
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
@@ -343,7 +407,7 @@ function (_super) {
       type: "icon-message"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
-    }, messageNum))), data.content && ((_p = data.content.logo) === null || _p === void 0 ? void 0 : _p.open) && /*#__PURE__*/_react["default"].createElement("div", {
+    }, messageNum))), data.content && ((_s = data.content.logo) === null || _s === void 0 ? void 0 : _s.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "logo",
       onClick: function onClick() {
         var _a, _b;
@@ -366,7 +430,8 @@ function (_super) {
   };
 
   SearchMobile.defaultProps = {
-    data: {}
+    data: {},
+    value: ''
   };
   return SearchMobile;
 }(_react["default"].Component);

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

@@ -23,7 +23,17 @@
   height: 0.64rem;
   text-align: right;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+}
+.m-search-bar .right .search-input-wrap .search-input {
+  background-color: transparent;
+  border: none;
+  height: 100%;
+  box-shadow: none;
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.28rem;
 }
 .m-search-bar .right .message-wrap {
   position: relative;

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

@@ -19,6 +19,10 @@ var _common = require("../../../../../common");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
+var _Text = require("../../../../../meta-comp/components/Text");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -47,6 +51,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 var SearchPc =
 /** @class */
 function (_super) {
@@ -56,17 +76,43 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      // messageNum: '',
-      inputVal: ''
+      inputVal: '',
+      editing: false
     };
 
     _this.onChangeVal = function (val) {
-      // console.log('--onChangeVal', val);
       _this.setState({
-        inputVal: val
+        inputVal: val,
+        editing: true
       });
     };
 
+    _this.onFocus = function () {
+      var _a;
+
+      var inputVal = _this.state.inputVal;
+
+      if (inputVal === ((_a = _this.props.data.content.keyword) === null || _a === void 0 ? void 0 : _a.placeholder)) {
+        _this.setState({
+          inputVal: '',
+          editing: true
+        });
+      }
+    };
+
+    _this.onBlur = function () {
+      var _a, _b, _c;
+
+      var inputVal = _this.state.inputVal;
+
+      if (!inputVal) {
+        _this.setState({
+          inputVal: (_c = (_b = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder,
+          editing: false
+        });
+      }
+    };
+
     _this.searchProduct = function () {
       (0, _coreUtil.clickUrl)("/product/list?q=" + _this.state.inputVal);
     };
@@ -80,13 +126,35 @@ function (_super) {
     return _this;
   }
 
-  SearchPc.prototype.componentDidMount = function () {};
+  SearchPc.prototype.componentDidMount = function () {
+    var _a, _b, _c;
+
+    this.setState({
+      inputVal: (_c = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder
+    });
+  };
+
+  SearchPc.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a, _b, _c;
+
+    if (!this.state.editing) {
+      this.setState({
+        inputVal: (_c = (_b = (_a = nextProps.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.keyword) === null || _c === void 0 ? void 0 : _c.placeholder
+      });
+    }
+  };
 
   SearchPc.prototype.render = function () {
     var _this = this;
 
+    var _a, _b, _c;
+
     var data = this.props.data;
     var inputVal = this.state.inputVal;
+
+    var style = __assign({}, (0, _Text.contentStyle)((_a = data.content.keyword) === null || _a === void 0 ? void 0 : _a.content));
+
+    Reflect.deleteProperty(style, 'width');
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "pc-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -94,15 +162,19 @@ function (_super) {
     }, data.content && data.content.box.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-input-wrap",
       style: {
-        borderColor: data.content.box.color.pc
+        borderColor: data.content.box.color.pc,
+        backgroundColor: (_c = (_b = data.content.box) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.pc
       }
     }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
       className: "search-input",
+      onBlur: this.onBlur,
       onChange: function onChange(e) {
         return _this.onChangeVal(e.target.value);
       },
+      onFocus: this.onFocus,
       onKeyUp: this.keyUp,
       placeholder: (0, _locale.i18n)('PLEASE_INPUT_KEYWORDS'),
+      style: (0, _commonUtil.pxToRem)(style),
       value: inputVal
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "search-icon",

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

@@ -23,6 +23,7 @@
       flex: 1;
 
       .search-input {
+        background-color: transparent;
         border: none;
         height: 38px;
         box-shadow: none;

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

@@ -13,8 +13,6 @@ var _antd = require("antd");
 
 var _common = require("../../../../../common");
 
-var _coreUtil = require("../../../../../utils/coreUtil");
-
 var _star = _interopRequireDefault(require("../imgs/star.svg"));
 
 var _commonUtil = require("../../../../../utils/commonUtil");
@@ -241,7 +239,10 @@ function (_super) {
 
     _this.searchProduct = function () {
       var storeId = window.magicDesign.storeId;
-      (0, _coreUtil.clickUrl)("/product/list?q=" + _this.state.inputVal + "&storeId=" + storeId);
+      (0, _commonUtil.navigateTo)('/product/list', {
+        q: _this.state.inputVal,
+        storeId: storeId
+      }); // clickUrl(`/product/list?q=${this.state.inputVal}&storeId=${storeId}`);
     };
 
     _this.clickCollect = function () {

package/es/composite-comp/dito/config-panels/GroupBuyConfig/GroupBuyConfigContent/index.js

@@ -71,7 +71,7 @@ function (_super) {
   AComponent.prototype.render = function () {
     var _this = this;
 
-    var _a, _b;
+    var _a, _b, _c;
 
     var panelProps = this.props.panelProps;
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -131,26 +131,22 @@ function (_super) {
     }, (0, _locale.i18n)('SALES_PROGRESS')), /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
       checked: (_a = panelProps.salesProgress) === null || _a === void 0 ? void 0 : _a.open,
       onChange: function onChange(v) {
-        panelProps.salesProgress = {
-          open: v
-        };
+        panelProps.salesProgress.open = v;
 
         _this.reRender();
       }
-    })), /*#__PURE__*/_react["default"].createElement("div", {
+    })), ((_b = panelProps.salesProgress) === null || _b === void 0 ? void 0 : _b.open) && /*#__PURE__*/_react["default"].createElement("div", {
       className: "content"
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: "name"
     }, (0, _locale.i18n)('PROGRESS_BAR_COLOR')), /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
       colorType: "rgba",
       onChange: function onChange(v) {
-        panelProps.salesProgress = {
-          color: v
-        };
+        panelProps.salesProgress.color = v;
 
         _this.reRender();
       },
-      value: (_b = panelProps.salesProgress) === null || _b === void 0 ? void 0 : _b.color
+      value: (_c = panelProps.salesProgress) === null || _c === void 0 ? void 0 : _c.color
     }))));
   };
 

package/es/composite-comp/dito/config-panels/GroupBuyConfig/GroupBuyConfigContent/index.less

@@ -22,6 +22,8 @@
 
     .content {
       position: relative;
+      background-color: #F5F6F7;
+      padding: 12px;
 
       .name {
         font-size: 14px;

package/es/composite-comp/dito/config-panels/SearchBarConfig/SearchBarConfigContent/index.js

@@ -19,6 +19,10 @@ var _coreUtil = require("../../../../../utils/coreUtil");
 
 var _locale = require("../../../../../locale");
 
+var _InputField = _interopRequireDefault(require("../../../../common/config-panels/InputField"));
+
+require("./index.less");
+
 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); }
@@ -71,6 +75,8 @@ function (_super) {
   SearchBarConfigContent.prototype.render = function () {
     var _this = this;
 
+    var _a, _b, _c, _d;
+
     var panelProps = this.props.panelProps;
     var source = [{
       key: 'search1',
@@ -83,10 +89,9 @@ function (_super) {
     }, {
       key: 'search2',
       name: (0, _locale.i18n)('SEARCH_BOX'),
-      value: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
-        style: {
-          marginTop: 20
-        },
+      value: /*#__PURE__*/_react["default"].createElement("div", {
+        className: "search_bar_config_box"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('BOX_COLOR')
       }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
         colorType: "rgba",
@@ -102,12 +107,37 @@ function (_super) {
         value: (0, _coreUtil.isPc)() ? panelProps.box.color.pc : panelProps.box.color.mobile
       })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         style: {
-          marginTop: 20
+          marginTop: 16
         },
         title: (0, _locale.i18n)('BOX_BACKGROUND')
-      })),
+      }, /*#__PURE__*/_react["default"].createElement(_common.ColorPickerInput, {
+        colorType: "rgba",
+        onChange: function onChange(v) {
+          if ((0, _coreUtil.isPc)()) {
+            panelProps.box.backgroundColor.pc = v;
+          } else {
+            panelProps.box.backgroundColor.mobile = v;
+          }
+
+          _this.selfRender();
+        },
+        value: (0, _coreUtil.isPc)() ? (_b = (_a = panelProps.box) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.pc : (_d = (_c = panelProps.box) === null || _c === void 0 ? void 0 : _c.backgroundColor) === null || _d === void 0 ? void 0 : _d.mobile
+      }))),
       metaOption: panelProps.box,
       toggleType: 'switch'
+    }, {
+      key: panelProps.keyword.id,
+      name: (0, _locale.i18n)('SEARCH_BAR_KEYWORD'),
+      toggleType: 'switch',
+      value: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          marginTop: 10
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
+        data: panelProps.keyword,
+        inputLabel: "Input Keyword"
+      })),
+      metaOption: panelProps.keyword
     }, {
       key: panelProps.icon.id,
       name: (0, _locale.i18n)('ICON'),

package/es/composite-comp/dito/config-panels/SearchBarConfig/SearchBarConfigContent/index.less

@@ -0,0 +1,7 @@
+.search_bar_config_box {
+  padding: 12px;
+  background-color: #F5F6F7;
+  margin-top: 16px;
+  padding-bottom: 1px;
+  border-radius: 6px;
+}