@fonixtree/magic-design 2.0.98 → 2.0.100

package/lib/common/ProductFilterModal/index.js

@@ -0,0 +1,366 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _locale = require("../../locale");
+
+require("./index.less");
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _PopUpModal = _interopRequireDefault(require("../PopUpModal"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FilterSearchModal = _interopRequireDefault(require("./components/FilterSearchModal"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+function ProductFilterModal(props) {
+  var _a;
+
+  var visible = props.visible,
+      filterObj = props.filterObj,
+      onClose = props.onClose,
+      onChange = props.onChange,
+      _b = props.value,
+      value = _b === void 0 ? {} : _b;
+
+  var _c = (0, _react.useState)({}),
+      condValue = _c[0],
+      setCondValue = _c[1];
+
+  var _d = (0, _react.useState)(''),
+      detailKey = _d[0],
+      setDetailKey = _d[1];
+
+  var _e = (0, _react.useState)(false),
+      searchVisible = _e[0],
+      setSearchVisible = _e[1];
+
+  var serviceIds = condValue.serviceIds,
+      brandIds = condValue.brandIds,
+      catgIds = condValue.catgIds,
+      startPrice = condValue.startPrice,
+      endPrice = condValue.endPrice,
+      evaluationAvgs = condValue.evaluationAvgs,
+      offerAttrValues = condValue.offerAttrValues;
+  (0, _react.useEffect)(function () {
+    setCondValue(value);
+  }, [value]);
+  var keyInfo = {
+    serviceIds: {
+      title: (0, _locale.i18n)('SERVICE'),
+      callbackKey: 'serviceList',
+      idKey: 'serviceId',
+      showKey: 'serviceName',
+      selectedList: (serviceIds === null || serviceIds === void 0 ? void 0 : serviceIds.split(',')) || [],
+      multi: true
+    },
+    catgIds: {
+      title: (0, _locale.i18n)('CATEGORY'),
+      callbackKey: 'catgList',
+      idKey: 'catgId',
+      showKey: 'catgName',
+      selectedList: (catgIds === null || catgIds === void 0 ? void 0 : catgIds.split(',')) || [],
+      multi: false
+    },
+    brandIds: {
+      title: (0, _locale.i18n)('BRANDS'),
+      callbackKey: 'brandList',
+      idKey: 'brandId',
+      showKey: 'brandName',
+      selectedList: (brandIds === null || brandIds === void 0 ? void 0 : brandIds.split(',')) || [],
+      multi: true
+    }
+  };
+
+  var tagSelect = function tagSelect(key, tagValue, selected, multi) {
+    var _a;
+
+    if (!multi) {
+      // 单选
+      if (selected) {
+        condValue[key] = String(tagValue);
+      } else {
+        condValue[key] = '';
+      }
+
+      setCondValue(__assign({}, condValue));
+    } else {
+      // 多选
+      var temp = ((_a = condValue[key]) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+
+      if (selected) {
+        temp.push(tagValue);
+      } else {
+        temp = temp.filter(function (val) {
+          return val !== String(tagValue);
+        });
+      }
+
+      condValue[key] = temp.join(',');
+    }
+
+    setCondValue(__assign({}, condValue));
+  };
+
+  var isAttrValueActive = function isAttrValueActive(attrId, attrValue) {
+    var _a;
+
+    var find = offerAttrValues === null || offerAttrValues === void 0 ? void 0 : offerAttrValues.find(function (attr) {
+      return attr.attrId === attrId;
+    });
+
+    if (find && ((_a = find.attrValue) === null || _a === void 0 ? void 0 : _a.includes(attrValue))) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var onAttrChange = function onAttrChange(attrId, item, selected) {
+    var newOfferAttrValues = offerAttrValues ? __spreadArrays(offerAttrValues) : [];
+
+    if (selected) {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+
+      if (find) {
+        var split = find.attrValue.split(',');
+        split.push(item);
+        find.attrValue = split.join(',');
+      } else {
+        newOfferAttrValues.push({
+          attrId: attrId,
+          attrValue: item
+        });
+      }
+    } else {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+      find.attrValue = find.attrValue.split(',').filter(function (val) {
+        return val !== item;
+      }).join(',');
+    }
+
+    setCondValue(__assign(__assign({}, condValue), {
+      offerAttrValues: newOfferAttrValues
+    }));
+  };
+
+  var onApply = function onApply() {
+    var _a;
+
+    var params = __assign({}, condValue);
+
+    var filterAttr = (_a = condValue.offerAttrValues) === null || _a === void 0 ? void 0 : _a.filter(function (attr) {
+      return !!attr.attrValue;
+    });
+    params.offerAttrValues = (filterAttr === null || filterAttr === void 0 ? void 0 : filterAttr.length) ? filterAttr : null;
+    Object.keys(params).forEach(function (key) {
+      if (!params[key]) {
+        Reflect.deleteProperty(params, key);
+      }
+    });
+    onChange(params);
+  };
+
+  var onReset = function onReset() {
+    onChange({});
+  };
+
+  var onShowMore = function onShowMore(key) {
+    setDetailKey(key);
+    setSearchVisible(true);
+  };
+
+  var onFilterSearchOk = function onFilterSearchOk(val) {
+    var _a;
+
+    var newParams = __assign(__assign({}, condValue), (_a = {}, _a[detailKey] = val, _a));
+
+    setCondValue(newParams);
+    setSearchVisible(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_PopUpModal["default"], {
+    bodyStyle: {
+      height: '80vh'
+    },
+    hideCloseBtn: true,
+    onClose: onClose,
+    visible: visible
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "productFilterWrap"
+  }, ['serviceIds', 'catgIds', 'brandIds'].map(function (key) {
+    var _a;
+
+    var _b = keyInfo[key],
+        title = _b.title,
+        idKey = _b.idKey,
+        showKey = _b.showKey,
+        selectedList = _b.selectedList,
+        multi = _b.multi;
+    return filterObj[key] && ((_a = filterObj[key]) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, filterObj[key].slice(0, 10).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: selectedList.indexOf(String(item[idKey])) > -1,
+        name: item[showKey],
+        onChange: function onChange(selected) {
+          tagSelect(key, item[idKey], selected, multi);
+        }
+      });
+    }), filterObj[key].length > 10 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btnMore",
+      onClick: function onClick() {
+        onShowMore(key);
+      }
+    }, "Show More")));
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('PRICE')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inputWrap"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        startPrice: e.target.value
+      }));
+    },
+    placeholder: "Min",
+    type: "number",
+    value: startPrice || ''
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "divider"
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        endPrice: e.target.value
+      }));
+    },
+    placeholder: "Max",
+    type: "number",
+    value: endPrice || ''
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('RATINGS')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "accordionContentWrap"
+  }, ['1', '2', '3', '4', '5'].map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: evaluationAvgs === item,
+      name: item + " " + (0, _locale.i18n)('STAR'),
+      onChange: function onChange(selected) {
+        setCondValue(__assign(__assign({}, condValue), {
+          evaluationAvgs: selected ? item : ''
+        }));
+      }
+    });
+  }))), filterObj.offerAttrValues && ((_a = filterObj.offerAttrValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && filterObj.offerAttrValues.map(function (attr) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item",
+      header: attr.attrName
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, attr.attrName), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, attr.attrValues && attr.attrValues.split(',').map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: isAttrValueActive(attr.attrId, item),
+        name: item,
+        onChange: function onChange(selected) {
+          onAttrChange(attr.attrId, item, selected);
+        }
+      }, item);
+    })));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bottomWrap"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onReset,
+    plain: true
+  }, (0, _locale.i18n)('RESET')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onApply,
+    style: {
+      marginLeft: '20px'
+    }
+  }, (0, _locale.i18n)('APPLY'))), /*#__PURE__*/_react["default"].createElement(_FilterSearchModal["default"], {
+    filterInfo: keyInfo[detailKey],
+    onClose: function onClose() {
+      return setSearchVisible(false);
+    },
+    onOk: onFilterSearchOk,
+    source: filterObj[detailKey],
+    value: condValue[detailKey],
+    visible: searchVisible
+  }));
+}
+
+ProductFilterModal.propTypes = {
+  visible: _propTypes["default"].bool,
+  filterObj: _propTypes["default"].object,
+  onClose: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].object
+};
+ProductFilterModal.defaultProps = {
+  visible: false,
+  filterObj: {},
+  onClose: function onClose() {},
+  onChange: function onChange() {},
+  value: {}
+};
+var _default = ProductFilterModal;
+exports["default"] = _default;

package/lib/common/ProductFilterModal/index.less

@@ -0,0 +1,72 @@
+.productFilterWrap {
+  background: #ffffff;
+  height: calc(80vh - 40px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding: 0 20px 78px 20px;
+  box-sizing: border-box;
+
+  .item {
+    margin-top: 20px;
+
+    .inputWrap {
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .divider {
+        padding: 0 10px;
+        flex-shrink: 0;
+        height: 2px;
+        width: 11px;
+        background-color: #000;
+      }
+
+      input {
+        width: 45%;
+        height: 48px;
+        border: 1px solid #E4E4E4;
+        box-shadow: none;
+        padding: 12px;
+        border-radius: 4px;
+        outline: none;
+      }
+    }
+
+    .title {
+      line-height: 24px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #000;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .accordionContentWrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding-bottom: 1px;
+
+      .btnMore {
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--theme-color);
+        margin-top: 6px;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+.bottomWrap {
+  position: fixed;
+  bottom: 0;
+  background: #fff;
+  width: 100%;
+  height: 78px;
+  padding: 12px 24px;
+  display: flex;
+}

package/lib/common/Tag/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Tag(props) {
+  var name = props.name,
+      onChange = props.onChange,
+      active = props.active;
+
+  var onClick = function onClick() {
+    onChange(!active);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('m-tagWrap', {
+      active: active
+    }),
+    onClick: onClick
+  }, name);
+}
+
+Tag.propTypes = {
+  name: _propTypes["default"].string,
+  active: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func
+};
+Tag.defaultProps = {
+  name: 'tag',
+  active: false,
+  onChange: function onChange() {}
+};
+var _default = Tag;
+exports["default"] = _default;

package/lib/common/Tag/index.less

@@ -0,0 +1,16 @@
+.m-tagWrap {
+  padding: 6px 12px;
+  border: 1px solid #E4E4E4;
+  color: #545454;
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  margin-right: 15px;
+  margin-top: 8px;
+
+  &.active {
+    color: var(--theme-color);
+    border-color: var(--theme-color);
+  }
+}

package/lib/common/index.js

@@ -105,6 +105,18 @@ Object.defineProperty(exports, "NewImg", {
     return _NewImg["default"];
   }
 });
+Object.defineProperty(exports, "PopUpModal", {
+  enumerable: true,
+  get: function get() {
+    return _PopUpModal["default"];
+  }
+});
+Object.defineProperty(exports, "ProductFilterModal", {
+  enumerable: true,
+  get: function get() {
+    return _ProductFilterModal["default"];
+  }
+});
 Object.defineProperty(exports, "ProductSource", {
   enumerable: true,
   get: function get() {
@@ -208,8 +220,12 @@ var _CardCarousel = _interopRequireDefault(require("./CardCarousel"));
 
 var _MyModal = _interopRequireDefault(require("./MyModal"));
 
+var _PopUpModal = _interopRequireDefault(require("./PopUpModal"));
+
 var _CropperModal = _interopRequireDefault(require("./CropperModal"));
 
 var _NewImg = _interopRequireDefault(require("./NewImg"));
 
+var _ProductFilterModal = _interopRequireDefault(require("./ProductFilterModal"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/composite-comp/common/components/MonpayProductItem/index.js

@@ -250,7 +250,7 @@ function (_super) {
       className: "sold"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       data: __assign(__assign({}, panelProps.sold), {
-        text: "Sold " + soldNumber + "+"
+        text: "Sold " + (soldNumber || 0) + "+"
       }),
       readonly: true
     }))), showProgress && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/monpay/components/Bundle/defaultJSON.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultJSON = void 0;
+
+var _uuid = require("uuid");
+
+var _headerImage = _interopRequireDefault(require("./mobile/img/headerImage.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var getDefaultJSON = function getDefaultJSON() {
+  var contentId = (0, _uuid.v4)();
+  return {
+    id: (0, _uuid.v4)(),
+    type: 'BUNDLE',
+    title: {
+      headerImage: {
+        id: contentId,
+        open: true,
+        type: 'IMAGE',
+        content: {
+          h5Name: '',
+          pcName: '',
+          h5ImgSrc: _headerImage["default"],
+          pcImgSrc: '',
+          clickUrl: ''
+        },
+        hover: {
+          open: false,
+          backgroundType: 'enlarge',
+          magnification: 1.5,
+          pcImgHoverUrl: '',
+          h5ImgHoverUrl: ''
+        }
+      }
+    },
+    content: {
+      id: contentId,
+      sourceType: '1',
+      maxProdNum: 1
+    },
+    spacing: {
+      pc: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: window.magicDesign.compSpacing * 1.5
+      },
+      mobile: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        marginBottom: window.magicDesign.compSpacing
+      }
+    },
+    customize: {
+      layout: 'layout1',
+      align: 'left',
+      pcRowNum: 6,
+      pcMaxRowNum: 6,
+      pcMinRowNum: 5
+    },
+    background: {
+      opacity: 100,
+      color: '#fff',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+
+exports.getDefaultJSON = getDefaultJSON;