@fonixtree/magic-design 0.0.16 → 0.0.19

package/src/components/common/ProductModal/index.js

@@ -0,0 +1,556 @@
+import { __assign, __spreadArray, __awaiter, __generator } from '../../../../my_node_modules/tslib/tslib.es6.js';
+import { Select, Input, Modal, Form, Button, Table, message } from 'antd';
+import React__default, { useState, useEffect } from 'react';
+import { commonFetch } from '../../utils/commonUtil.js';
+import Iconfont from '../Iconfont/index.js';
+import { getPrecision, formatCurrencyWithSymbol } from '../../utils/currencyUtil.js';
+import './index.less.js';
+
+var precision = getPrecision();
+
+var formatData = function (list) {
+  list.map(function (item) {
+    item.preSalesPrice = formatCurrencyWithSymbol(item.salesPrice);
+    item.preMarketPrice = formatCurrencyWithSymbol(item.marketPrice);
+  });
+  return list;
+};
+
+var promType = {
+  FLASH_SALE: '2',
+  GROUP_BUY: '4'
+};
+var Option = Select.Option,
+    OptGroup = Select.OptGroup;
+var InputGroup = Input.Group;
+
+var ProductModal = function (props) {
+  var handleModalSave = props.handleModalSave,
+      closeModal = props.closeModal,
+      visible = props.visible,
+      _a = props.defaultList,
+      defaultList = _a === void 0 ? [] : _a,
+      _b = props.maxSelect,
+      maxSelect = _b === void 0 ? 20 : _b;
+
+  var _c = useState(defaultList),
+      selectedList = _c[0],
+      setSelectedList = _c[1];
+
+  var _d = useState([]),
+      catgsList = _d[0],
+      setCatgsList = _d[1];
+
+  var _e = useState([]),
+      brandsList = _e[0],
+      setBrandsList = _e[1];
+
+  var _f = useState([]),
+      labelData = _f[0],
+      setLabelData = _f[1];
+
+  var _g = useState([]),
+      selBrandsList = _g[0],
+      setSelBrandsList = _g[1];
+
+  var _h = useState([]),
+      selCatgsList = _h[0],
+      setSelCatgsList = _h[1];
+
+  var _j = useState({}),
+      selLabelData = _j[0],
+      setSelLabelData = _j[1];
+
+  var _k = useState(''),
+      productName = _k[0],
+      setProductName = _k[1];
+
+  var _l = useState(''),
+      productCode = _l[0],
+      setProductCode = _l[1];
+
+  var _m = useState(''),
+      minPrice = _m[0],
+      setMinPrice = _m[1];
+
+  var _o = useState(''),
+      maxPrice = _o[0],
+      setMaxPrice = _o[1];
+
+  var _p = useState([]),
+      promotions = _p[0],
+      setPromotions = _p[1];
+
+  var _q = useState([]),
+      goodsList = _q[0],
+      setGoodsList = _q[1];
+
+  var _r = useState(false),
+      loading = _r[0],
+      setLoading = _r[1];
+
+  var _s = useState(defaultList.map(function (v) {
+    return v.productId;
+  })),
+      selectedRowKeys = _s[0],
+      setSelectedRowKeys = _s[1];
+
+  var rowSelection = {
+    selectedRowKeys: selectedRowKeys,
+    onSelect: function (record, selected, selectedRows) {
+      if (selected) {
+        if (selectedList.length === maxSelect) {
+          message.warning("Max ".concat(maxSelect));
+          return;
+        }
+
+        if (selectedList.length < maxSelect) {
+          setSelectedList(__spreadArray(__spreadArray([], selectedList, true), formatData([record]), true));
+        }
+      } else {
+        setSelectedList(selectedList.filter(function (v) {
+          return v.productId !== record.productId;
+        }));
+      }
+
+      setSelectedRowKeys(selectedRows.map(function (v) {
+        return v === null || v === void 0 ? void 0 : v.productId;
+      }));
+    },
+    getCheckboxProps: function (record) {
+      return {
+        name: record.name
+      };
+    }
+  };
+
+  var _t = useState({
+    pageSize: 20,
+    current: 1,
+    total: 0
+  }),
+      paginationParams = _t[0],
+      setPaginationParams = _t[1];
+
+  var delSelectedItem = function (index) {
+    console.log(selectedRowKeys, index, 2223);
+    var rowKeys = JSON.parse(JSON.stringify(selectedRowKeys));
+    rowKeys.splice(index, 1);
+    setSelectedRowKeys(rowKeys);
+    var rows = JSON.parse(JSON.stringify(selectedList));
+    rows.splice(index, 1);
+    setSelectedList(rows);
+  }; // 请求商品列表
+
+
+  var queryGoods = function (data) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var res;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/products"), data, 'GET')];
+
+          case 1:
+            res = _a.sent();
+            setLoading(false);
+            paginationParams.total = res.total;
+            setPaginationParams(paginationParams);
+            setGoodsList(res.list || []);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  }; // 请求类目
+
+
+  var queryOfferCatgs = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var res, arr;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/h5/offers/catgs"), {}, 'GET')];
+
+          case 1:
+            res = _a.sent();
+            arr = [];
+            res.forEach(function (f) {
+              if (f.children) arr.push.apply(arr, f.children);
+            });
+            setCatgsList(arr);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  }; // 请求品牌
+
+
+  var queryBrands = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var res;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/offerdiscatgs/brands"), {}, 'GET')];
+
+          case 1:
+            res = _a.sent();
+            setBrandsList(res);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  }; // 请求标签
+
+
+  var queryLabel = function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var res;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/labels/list"), {}, 'GET')];
+
+          case 1:
+            res = _a.sent();
+            setLabelData(res);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  useEffect(function () {
+    queryOfferCatgs();
+    queryBrands();
+    queryLabel();
+  }, []);
+  useEffect(function () {
+    setSelectedList(defaultList);
+    setSelectedRowKeys(defaultList.map(function (v) {
+      return v.productId;
+    }));
+
+    if (props.type === 'groupBuy') {
+      setPromotions(promType.GROUP_BUY);
+    }
+  }, [visible]);
+
+  var reset = function () {
+    setSelBrandsList([]);
+    setSelCatgsList([]);
+    setSelLabelData([]);
+    setProductName('');
+    setProductCode('');
+    setMinPrice('');
+    setMaxPrice('');
+    setPromotions(props.type === 'groupBuy' ? promType.GROUP_BUY : null);
+  };
+
+  var columns = [{
+    title: 'Image',
+    dataIndex: 'productImageUrl',
+    key: 'productImageUrl',
+    render: function (productImageUrl) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: "proImg",
+        style: {
+          backgroundImage: "url(".concat(productImageUrl, ")")
+        }
+      });
+    },
+    width: 90
+  }, {
+    title: 'Product Name',
+    dataIndex: 'productName',
+    key: 'productName',
+    render: function (text, record) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+        className: "proName"
+      }, record.productName), /*#__PURE__*/React__default.createElement("span", {
+        className: "proCode"
+      }, record.productCode));
+    },
+    width: 130
+  }, {
+    title: 'SKU',
+    dataIndex: 'attrValues',
+    key: 'attrValues',
+    ellipsis: true
+  }, {
+    title: 'Price',
+    dataIndex: 'salesPrice',
+    key: 'salesPrice',
+    render: function (text, record) {
+      return /*#__PURE__*/React__default.createElement("span", null, formatCurrencyWithSymbol(record.specialPriceProd ? record.specialPriceProd.specialPrice : record.salesPrice));
+    }
+  }, {
+    title: 'Brand',
+    dataIndex: 'brandName',
+    key: 'brandName',
+    ellipsis: true
+  }, {
+    title: 'Store',
+    dataIndex: 'storeName',
+    key: 'storeName',
+    ellipsis: true
+  }];
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    cancelText: "Cancel",
+    draggable: false,
+    footer: null,
+    okText: "OK",
+    onCancel: closeModal,
+    onOk: handleModalSave,
+    title: "Product Select",
+    visible: visible,
+    width: "auto",
+    wrapClassName: "modalCot"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "proModalWrap"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "content"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "leftCot"
+  }, /*#__PURE__*/React__default.createElement(Form, {
+    layout: "vertical"
+  }, /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Category"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "inputStyle",
+    mode: "multiple",
+    onChange: function (value, option) {
+      setSelCatgsList(value);
+    },
+    placeholder: "Please select",
+    value: selCatgsList
+  }, catgsList.map(function (item) {
+    return /*#__PURE__*/React__default.createElement(OptGroup, {
+      key: item.model.catgId,
+      label: item.model.catgName
+    }, (item.children || []).map(function (i) {
+      return /*#__PURE__*/React__default.createElement(Option, {
+        key: i.model.catgId,
+        value: i.model.catgId
+      }, i.model.catgName);
+    }));
+  }))), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Brand"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "inputStyle",
+    mode: "multiple",
+    onChange: function (value, option) {
+      setSelBrandsList(value);
+    },
+    placeholder: "Please select",
+    value: selBrandsList
+  }, brandsList.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement(Option, {
+      key: item.catgId,
+      value: item.brandId
+    }, item.brandName);
+  }))), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Lable"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "inputStyle",
+    defaultValue: selLabelData.children || null,
+    onChange: function (v, o) {
+      console.log(v, o, 33);
+      setSelLabelData(o);
+    },
+    placeholder: "Please Select",
+    value: selLabelData.children
+  }, labelData && labelData.length > 0 && labelData.map(function (v) {
+    return /*#__PURE__*/React__default.createElement(Option, {
+      key: v.labelId,
+      value: v.labelId
+    }, v.labelName);
+  }))), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Price"
+  }, /*#__PURE__*/React__default.createElement(InputGroup, {
+    compact: true
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    onChange: function (e) {
+      setMinPrice(e.target.value);
+    },
+    placeholder: "Minimum",
+    style: {
+      width: '38%',
+      textAlign: 'center'
+    },
+    value: minPrice
+  }), /*#__PURE__*/React__default.createElement(Input, {
+    disabled: true,
+    placeholder: "~",
+    style: {
+      width: '20%',
+      borderLeft: 0,
+      pointerEvents: 'none',
+      backgroundColor: '#fff',
+      borderTop: '1px solid #d4d4d4',
+      borderBottom: '1px solid #d4d4d4'
+    }
+  }), /*#__PURE__*/React__default.createElement(Input, {
+    onChange: function (e) {
+      setMaxPrice(e.target.value);
+    },
+    placeholder: "Maximum",
+    style: {
+      width: '38%',
+      textAlign: 'center',
+      borderLeft: 0
+    },
+    value: maxPrice
+  }))), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Product Name"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "inputStyle",
+    onChange: function (e) {
+      setProductName(e.target.value);
+    },
+    placeholder: "Please Input",
+    value: productName
+  })), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "SKU Code"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "inputStyle",
+    onChange: function (e) {
+      setProductCode(e.target.value);
+    },
+    placeholder: "Please Input",
+    value: productCode
+  })), /*#__PURE__*/React__default.createElement(Form.Item, {
+    label: "Promotions"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "inputStyle",
+    defaultValue: promotions,
+    onChange: function (value) {
+      setPromotions(value);
+    },
+    placeholder: "Please select",
+    value: promotions
+  }, props.type !== 'groupBuy' && /*#__PURE__*/React__default.createElement(Option, {
+    value: promType.FLASH_SALE
+  }, "Flash Sale"), /*#__PURE__*/React__default.createElement(Option, {
+    value: promType.GROUP_BUY
+  }, "Group Buy"))), /*#__PURE__*/React__default.createElement("div", {
+    className: "buttonStyle"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: function () {
+      reset();
+    }
+  }, "Reset"), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: function () {
+      setLoading(true);
+      paginationParams.current = 1;
+      queryGoods({
+        productName: productName,
+        productCode: productCode,
+        cmpTypeId: promotions || '',
+        minPrice: minPrice === '' ? '' : minPrice * Math.pow(10, precision),
+        maxPrice: maxPrice === '' ? '' : maxPrice * Math.pow(10, precision),
+        catgIds: selCatgsList.join(','),
+        brandIds: selBrandsList.join(','),
+        labelIds: selLabelData.value || '',
+        pageSize: paginationParams.pageSize,
+        pageIndex: paginationParams.current,
+        state: 'A'
+      });
+    },
+    style: {
+      marginRight: 8
+    },
+    type: "primary"
+  }, "Query")))), /*#__PURE__*/React__default.createElement("div", {
+    className: "rightCot"
+  }, /*#__PURE__*/React__default.createElement(Table, {
+    columns: columns,
+    dataSource: goodsList,
+    loading: loading,
+    pagination: __assign(__assign({}, paginationParams), {
+      onChange: function (page) {
+        console.log(page);
+        setLoading(true);
+        paginationParams.current = page;
+        setPaginationParams(paginationParams);
+        queryGoods({
+          productName: productName,
+          productCode: productCode,
+          cmpTypeId: promotions || '',
+          minPrice: minPrice === '' ? '' : minPrice * Math.pow(10, precision),
+          maxPrice: maxPrice === '' ? '' : maxPrice * Math.pow(10, precision),
+          catgIds: selCatgsList.join(','),
+          brandIds: selBrandsList.join(','),
+          labelIds: selLabelData.value || '',
+          pageSize: paginationParams.pageSize,
+          pageIndex: paginationParams.current,
+          state: 'A'
+        });
+      }
+    }),
+    rowKey: "productId",
+    rowSelection: rowSelection,
+    scroll: {
+      y: 300
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "selectedCot"
+  }, selectedList.map(function (item, index) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: "selectedItem"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      alt: "",
+      className: "selectedItemImg ".concat(item.state !== 'A' ? 'invalid' : ''),
+      src: item.productImageUrl,
+      title: item.productName
+    }), /*#__PURE__*/React__default.createElement(Iconfont, {
+      className: "selectedItemClose",
+      color: "#000",
+      onClick: function () {
+        return delSelectedItem(index);
+      },
+      size: 12,
+      type: "icon-close"
+    }));
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "footer"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "total"
+  }, "Selected", ' ', /*#__PURE__*/React__default.createElement("span", {
+    className: "totalNum"
+  }, selectedList.length, "/", maxSelect)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: function () {
+      handleModalSave && handleModalSave(selectedList);
+      closeModal && closeModal();
+    },
+    style: {
+      marginRight: 10
+    },
+    type: "primary"
+  }, "OK"), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: function () {
+      return closeModal && closeModal();
+    }
+  }, "Cancel")))));
+};
+
+export { ProductModal as default };

package/src/components/common/ProductModal/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".modalCot {\n  width: 1200px;\n  right: unset !important;\n  left: unset !important;\n}\n.modalCot .proModalWrap thead .ant-checkbox {\n  visibility: hidden;\n}\n.modalCot .proModalWrap .content {\n  display: flex;\n  margin-bottom: 8px;\n}\n.modalCot .proModalWrap .content .ant-form .ant-form-item-label {\n  line-height: 1.5 !important;\n}\n.modalCot .proModalWrap .content .ant-form-item-label > label {\n  height: unset !important;\n}\n.modalCot .proModalWrap .content .ant-form .ant-cascader-picker-disabled,\n.modalCot .proModalWrap .content .ant-form .ant-input-disabled,\n.modalCot .proModalWrap .content .ant-form .ant-input[disabled] {\n  border-width: 1px;\n}\n.modalCot .proModalWrap .content .rightCot {\n  width: calc(100% - 260px);\n  margin-left: 16px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.modalCot .proModalWrap .content .rightCot .ant-table .ant-table-thead > tr > th {\n  padding: 16px !important;\n}\n.modalCot .proModalWrap .content .rightCot .ant-table-wrapper {\n  flex: 1;\n  overflow: hidden;\n}\n.modalCot .proModalWrap .content .rightCot .ant-table-wrapper .ant-table-body {\n  max-height: 260px !important;\n}\n.modalCot .proModalWrap .content .rightCot .proImg {\n  display: inline-block;\n  width: 52px;\n  height: 52px;\n  background-size: cover;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n}\n.modalCot .proModalWrap .content .rightCot .proName {\n  display: block;\n  width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  word-break: break-all;\n}\n.modalCot .proModalWrap .content .rightCot .proCode {\n  display: block;\n  width: 100%;\n  text-overflow: -o-ellipsis-lastline;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot {\n  margin-left: 4px;\n  height: 148px;\n  background: #f8f8f8;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow-y: auto;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem {\n  box-sizing: border-box;\n  margin-top: 12px;\n  margin-left: 18px;\n  height: 52px;\n  position: relative;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem:hover .selectedItemImg {\n  width: 52px;\n  height: 52px;\n  border: 1px solid #4477ee !important;\n  box-shadow: 0 0 0 2px rgba(68, 119, 238, 0.15);\n  border-radius: 2px;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem:hover .selectedItemClose {\n  display: flex;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemClose {\n  display: none;\n  border: 1px solid #000;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  padding: 2px;\n  position: absolute;\n  top: -9px;\n  right: -8px;\n  z-index: 400;\n  cursor: pointer;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem:nth-child(n + 11) {\n  margin-top: 5px !important;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemImg {\n  height: 52px;\n  width: 52px;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n}\n.modalCot .proModalWrap .content .rightCot .selectedCot .selectedItem .selectedItemImg.invalid {\n  border: 1px solid red;\n}\n.modalCot .proModalWrap .content .leftCot {\n  width: 260px;\n  box-sizing: border-box;\n  border-right: 1px solid #e0e0e0;\n}\n.modalCot .proModalWrap .content .leftCot .price {\n  display: flex;\n  width: calc(100% - 16px);\n}\n.modalCot .proModalWrap .content .leftCot .price .icon {\n  width: 100px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n}\n.modalCot .proModalWrap .content .leftCot .inputStyle {\n  width: calc(100% - 16px);\n  height: 28px;\n}\n.modalCot .proModalWrap .content .leftCot .inputStyle .ant-select-selector {\n  max-height: 40px;\n  overflow: hidden;\n}\n.modalCot .proModalWrap .content .leftCot .buttonStyle {\n  width: calc(100% - 16px);\n  margin-top: 10px;\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.modalCot .proModalWrap .footer {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid #e0e0e0;\n}\n.modalCot .proModalWrap .total {\n  font-size: 16px;\n  color: #2d3040;\n  letter-spacing: 0;\n}\n.modalCot .proModalWrap .total .totalNum {\n  color: #4477ee;\n}\n.modalCot .ant-modal-body {\n  padding: 8px 16px 0 16px !important;\n}\n.modalCot .ant-form-item {\n  margin-bottom: 4px !important;\n}\n.modalCot .ant-modal {\n  top: 25px !important;\n}\n.modalCot .ant-modal .ant-modal-content .ant-modal-body {\n  max-height: 590px;\n  overflow: auto;\n}\n[magic_design] .ant-modal-root {\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };

package/src/components/common/ProductSource/index.js

@@ -0,0 +1,91 @@
+import { __awaiter, __generator } from '../../../../my_node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { commonFetch } from '../../utils/commonUtil.js';
+import Button from '../Button/index.js';
+import ProductModal from '../ProductModal/index.js';
+import './index.less.js';
+
+function ProductSource(_a) {
+  var _this = this;
+
+  var value = _a.value,
+      onChange = _a.onChange;
+
+  var _b = useState([]),
+      selectedProds = _b[0],
+      setSelectedProds = _b[1];
+
+  var _c = useState(false),
+      visible = _c[0],
+      setVisbile = _c[1];
+
+  var onSelectProduct = function () {
+    return __awaiter(_this, void 0, void 0, function () {
+      var list;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(value && value.length > 0)) return [3
+            /*break*/
+            , 2];
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/products"), {
+              products: value
+            }, 'GET')];
+
+          case 1:
+            list = _a.sent().list;
+            setSelectedProds(list || []);
+            return [3
+            /*break*/
+            , 3];
+
+          case 2:
+            setSelectedProds([]);
+            _a.label = 3;
+
+          case 3:
+            setVisbile(true);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  var handleModalSave = function (list) {
+    var ids = list.map(function (prod) {
+      return prod.productId;
+    }).join(',');
+    onChange(ids);
+  };
+
+  var getLength = function () {
+    if (!value) {
+      return 0;
+    }
+
+    return value.split(',').length;
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "productSourceWrap"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onSelectProduct,
+    type: "primary"
+  }, "Select Product"), /*#__PURE__*/React__default.createElement("div", {
+    className: "total"
+  }, "Total: ", getLength(), " products"), visible && /*#__PURE__*/React__default.createElement(ProductModal, {
+    closeModal: function () {
+      return setVisbile(false);
+    },
+    defaultList: selectedProds,
+    handleModalSave: handleModalSave,
+    maxSelect: 100,
+    visible: visible
+  }));
+}
+
+export { ProductSource as default };

package/src/components/common/ProductSource/index.less.js

@@ -0,0 +1,6 @@
+import styleInject from '../../../../my_node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".productSourceWrap .total {\n  margin-top: 10px;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  text-align: center;\n  color: #8493AF;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };