linkmore-design 1.0.91 → 1.0.95

package/lib/Filter/baseFilter/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _context2 = _interopRequireDefault(require("../context"));
+
+var _Popover = _interopRequireDefault(require("./Popover"));
+
+var _ToggleFilter = _interopRequireDefault(require("./ToggleFilter"));
+
+var BaseFilter = function BaseFilter() {
+  var _useContext = (0, _react.useContext)(_context2.default),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch,
+      data = _useContext.data,
+      getChange = _useContext.getChange;
+
+  var _useState = (0, _react.useState)(data),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useList = _useState2[0],
+      setList = _useState2[1]; // 页面展示的搜索项
+  // 下拉框改变事件
+
+
+  var onChange = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+      var field, value, mapItem, checkValue, checked;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              field = _ref.field, value = _ref.value, mapItem = _ref.mapItem;
+              checkValue = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.checkValue), {}, (0, _defineProperty2.default)({}, field, value)); // 关联筛选
+
+              if (mapItem.relation) {
+                delete checkValue[mapItem.relation];
+              }
+
+              checked = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.checked), {}, (0, _defineProperty2.default)({}, field, mapItem));
+              dispatch({
+                type: 'changeCheckValue',
+                checkValue: checkValue
+              });
+              dispatch({
+                type: 'changeChecked',
+                checked: checked
+              });
+              getChange === null || getChange === void 0 ? void 0 : getChange(checkValue);
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, useList === null || useList === void 0 ? void 0 : useList.filter(function (v) {
+    return !!v.fixed;
+  }).map(function (item) {
+    var obj = data.find(function (o) {
+      return o.field === item.field;
+    });
+    return /*#__PURE__*/_react.default.createElement(_Popover.default, {
+      key: item.field,
+      item: obj,
+      getChange: onChange
+    });
+  }), /*#__PURE__*/_react.default.createElement(_ToggleFilter.default, {
+    useList: useList,
+    setList: setList
+  }));
+};
+
+var _default = BaseFilter;
+exports.default = _default;

package/lib/Filter/complex/ComplexFilter.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/drawer/style");
+
+var _drawer = _interopRequireDefault(require("antd/es/drawer"));
+
+require("antd/es/list/style");
+
+var _list = _interopRequireDefault(require("antd/es/list"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+require("antd/es/space/style");
+
+var _space = _interopRequireDefault(require("antd/es/space"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _ComplexItem = _interopRequireDefault(require("./ComplexItem"));
+
+var Index = function Index(props) {
+  var inputRef = _react.default.useRef();
+
+  var data = props.data,
+      onSearch = props.onSearch;
+
+  var _useState = (0, _react.useState)('complex'),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useKey = _useState2[0],
+      setKey = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useVisible = _useState4[0],
+      setVisible = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(data),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useData = _useState6[0],
+      setData = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      useCheckValue = _useState8[0],
+      setCheckValue = _useState8[1]; // 选中的数据
+
+
+  var onPressEnter = function onPressEnter(e) {
+    var value = e.target.value;
+
+    if (value.trim()) {
+      var nValue = data.map(function (v) {
+        var hidden = v.title.indexOf(value) < 0;
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, v), {}, {
+          hidden: hidden
+        });
+      });
+      setData(nValue);
+    } else {
+      setData(data);
+    }
+  };
+
+  var getChange = function getChange(_ref) {
+    var field = _ref.field,
+        value = _ref.value;
+    var nValue = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, useCheckValue), {}, (0, _defineProperty2.default)({}, field, value));
+    setCheckValue(nValue);
+  };
+
+  var onSearchEvent = function onSearchEvent() {
+    onSearch(useCheckValue);
+    setVisible(false);
+  };
+
+  var resetEvent = function resetEvent() {
+    setKey(Date.now());
+    setCheckValue({});
+    setData(data);
+    onSearch('');
+    inputRef.current.state.value = '';
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "link",
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "\u9AD8\u7EA7\u7B5B\u9009", /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)), /*#__PURE__*/_react.default.createElement(_drawer.default, {
+    title: "\u9AD8\u7EA7\u7B5B\u9009",
+    width: 440,
+    placement: "right",
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    visible: useVisible,
+    extra: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_space.default, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+      onClick: resetEvent
+    }, "\u91CD\u7F6E"), /*#__PURE__*/_react.default.createElement(_button.default, {
+      type: "primary",
+      onClick: onSearchEvent
+    }, "\u67E5\u8BE2"))),
+    className: "complex_filter"
+  }, /*#__PURE__*/_react.default.createElement(_input.default, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
+    placeholder: "\u8BF7\u8F93\u5165",
+    size: "middle",
+    onPressEnter: onPressEnter
+  }), /*#__PURE__*/_react.default.createElement(_list.default, {
+    key: useKey,
+    itemLayout: "horizontal",
+    dataSource: useData,
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/_react.default.createElement(_ComplexItem.default, {
+        key: item.field,
+        data: item,
+        onChange: getChange // style={{ display: item.show ? 'block' : 'none' }}
+
+      });
+    }
+  })));
+};
+
+var _default = Index;
+exports.default = _default;

package/lib/Filter/complex/ComplexItem.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/list/style");
+
+var _list = _interopRequireDefault(require("antd/es/list"));
+
+require("antd/es/tag/style");
+
+var _tag = _interopRequireDefault(require("antd/es/tag"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+// 这里的data是filter数组的单独项
+var Index = function Index(props) {
+  var data = props.data,
+      onChange = props.onChange;
+  var popoverRef = (0, _react.useRef)(data.field);
+
+  var _useState = (0, _react.useState)(data.field),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useKey = _useState2[0],
+      setKey = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useMode = _useState4[0],
+      setMode = _useState4[1]; // 查询关系 and||or
+
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useCheckValue = _useState6[0],
+      setCheckValue = _useState6[1]; // 选中的数据
+
+
+  var getChange = function getChange(_ref, mode) {
+    var field = _ref.field,
+        value = _ref.value,
+        mapItem = _ref.mapItem;
+    var checkValue = mapItem.checkValue;
+    setCheckValue(checkValue);
+    setMode(mode);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      field: field,
+      value: value
+    }, mode);
+  }; // 删除筛选项
+
+
+  var onClose = function onClose() {
+    setCheckValue([]);
+    setKey(Date.now());
+    var field = data.field,
+        type = data.type;
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      field: field,
+      value: type === 'checkbox' ? [] : ''
+    }, useMode);
+  }; // 删除复选单个筛选项
+
+
+  var onTagClose = function onTagClose(value) {
+    var nValue = useCheckValue.filter(function (v) {
+      return v.value !== value;
+    });
+    setCheckValue(nValue);
+    var defaultValue = nValue.map(function (v) {
+      return v.value;
+    });
+    popoverRef.current.clearTag(defaultValue);
+  }; // 显示的标签
+
+
+  var defaultShow = function defaultShow() {
+    if (useCheckValue.length === 0) return null; // 数组查找展示文字
+
+    if (data.type === 'checkbox' && useCheckValue.length > 0) {
+      return useCheckValue.map(function (v) {
+        return /*#__PURE__*/_react.default.createElement(_tag.default, {
+          closable: true,
+          key: v.value,
+          onClose: function onClose() {
+            return onTagClose(v.value);
+          }
+        }, v.label);
+      });
+    }
+
+    var single = useCheckValue[0];
+
+    if (data.type === 'select') {
+      return /*#__PURE__*/_react.default.createElement(_tag.default, null, single.label);
+    }
+
+    if (data.type === 'tree') {
+      return /*#__PURE__*/_react.default.createElement(_tag.default, null, single.title);
+    }
+
+    if (data.type === 'date') {
+      if (useCheckValue.length === 2) {
+        return /*#__PURE__*/_react.default.createElement(_tag.default, null, "".concat(useCheckValue[0], " ~ ").concat(useCheckValue[1]));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_tag.default, null, single);
+    } // 直接返回 value
+    // return <Tag>{useCheckValue}</Tag>;
+
+
+    return /*#__PURE__*/_react.default.createElement(_tag.default, null, "Tag");
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
+    ref: popoverRef,
+    key: useKey,
+    item: data,
+    header: true,
+    config: {
+      overlayStyle: {
+        width: 408,
+        paddingTop: 0
+      }
+    },
+    getChange: getChange
+  }, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    style: {
+      display: data.hidden ? 'none' : 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "item_label"
+  }, data.title, useCheckValue.length > 0 ? useMode === 'and' ? '(且)' : '(或)' : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "item_other"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "tag_roup"
+  }, defaultShow()), /*#__PURE__*/_react.default.createElement("div", {
+    className: "itme_icon"
+  }, useCheckValue.length === 0 ? /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    onClick: onClose
+  })))));
+};
+
+var _default = Index;
+exports.default = _default;

package/lib/Filter/components/Checkbox.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/list/style");
+
+var _list = _interopRequireDefault(require("antd/es/list"));
+
+require("antd/es/checkbox/style");
+
+var _checkbox = _interopRequireDefault(require("antd/es/checkbox"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var Index = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useContext = (0, _react.useContext)(_popContext.default),
+      item = _useContext.item,
+      onChange = _useContext.onChange,
+      header = _useContext.header;
+
+  var dataList = item.data,
+      _renderItem = item.renderItem,
+      _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode,
+      _item$defaultValue = item.defaultValue,
+      defaultValue = _item$defaultValue === void 0 ? [] : _item$defaultValue;
+
+  var _useState = (0, _react.useState)(mode),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useMode = _useState2[0],
+      setMode = _useState2[1]; // 查询关系 or||and
+
+
+  var _useState3 = (0, _react.useState)(defaultValue),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useCheck = _useState4[0],
+      setCheck = _useState4[1]; // 默认选中
+
+
+  var getModeChange = function getModeChange(e) {
+    setMode(e);
+  };
+
+  var getChange = function getChange(v) {
+    setCheck(v);
+    var checkValue = dataList.filter(function (o) {
+      return v.includes(o.value);
+    });
+    var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      checkValue: checkValue
+    });
+    onChange(v, obj, useMode);
+  };
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      clearTag: getChange
+    };
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header ? /*#__PURE__*/_react.default.createElement(_header.default, {
+    getChange: getModeChange
+  }) : null, /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
+    onChange: getChange,
+    value: useCheck,
+    className: "checkbox_roup"
+  }, /*#__PURE__*/_react.default.createElement(_list.default, {
+    itemLayout: "horizontal",
+    dataSource: dataList,
+    renderItem: function renderItem(v) {
+      return /*#__PURE__*/_react.default.createElement(_list.default.Item, null, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+        key: v.value,
+        value: v.value
+      }, _renderItem ? _renderItem(v) : v.label));
+    }
+  })));
+});
+var _default = Index;
+exports.default = _default;

package/lib/Filter/components/Date.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/date-picker/style");
+
+var _datePicker = _interopRequireDefault(require("antd/es/date-picker"));
+
+require("antd/es/time-picker/style");
+
+var _timePicker = _interopRequireDefault(require("antd/es/time-picker"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var Index = function Index() {
+  var _useContext = (0, _react.useContext)(_popContext.default),
+      item = _useContext.item,
+      onChange = _useContext.onChange,
+      header = _useContext.header;
+
+  var _item$dateType = item.dateType,
+      dateType = _item$dateType === void 0 ? 'date' : _item$dateType,
+      config = item.config,
+      _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode;
+
+  var _useState = (0, _react.useState)(mode),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useMode = _useState2[0],
+      setMode = _useState2[1];
+
+  var getChange = function getChange(date, dateStr) {
+    var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      checkValue: [dateStr]
+    });
+    onChange(dateStr, obj, useMode);
+  };
+
+  var getModeChange = function getModeChange(e) {
+    setMode(e);
+  };
+
+  var PickerType = function PickerType() {
+    if (dateType === 'time') return /*#__PURE__*/_react.default.createElement(_timePicker.default, (0, _extends2.default)({}, config, {
+      onChange: getChange
+    }));
+    if (dateType === 'timeRange') return /*#__PURE__*/_react.default.createElement(_timePicker.default.RangePicker, (0, _extends2.default)({}, config, {
+      onChange: getChange
+    }));
+    if (dateType === 'date') return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({}, config, {
+      onChange: getChange
+    }));
+    if (dateType === 'rangePicker') return /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({}, config, {
+      onChange: getChange
+    }));
+    return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({}, config, {
+      picker: dateType,
+      onChange: getChange
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header ? /*#__PURE__*/_react.default.createElement(_header.default, {
+    getChange: getModeChange
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filte_warp"
+  }, /*#__PURE__*/_react.default.createElement(PickerType, null)));
+};
+
+var _default = Index;
+exports.default = _default;

package/lib/Filter/components/Input.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+var Index = function Index() {
+  var _useContext = (0, _react.useContext)(_popContext.default),
+      item = _useContext.item,
+      onChange = _useContext.onChange,
+      header = _useContext.header;
+
+  var _item$mode = item.mode,
+      mode = _item$mode === void 0 ? 'and' : _item$mode;
+
+  var _useState = (0, _react.useState)(mode),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useMode = _useState2[0],
+      setMode = _useState2[1];
+
+  var onPressEnter = function onPressEnter(e) {
+    var value = e.target.value;
+    var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+      checkValue: [value]
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, obj, useMode);
+  };
+
+  var getModeChange = function getModeChange(e) {
+    setMode(e);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header ? /*#__PURE__*/_react.default.createElement(_header.default, {
+    getChange: getModeChange
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filte_warp"
+  }, /*#__PURE__*/_react.default.createElement(_input.default, {
+    placeholder: "\u8BF7\u8F93\u5165",
+    onPressEnter: onPressEnter
+  })));
+};
+
+var _default = Index;
+exports.default = _default;