linkmore-design 1.0.3

package/lib/CkFilter/components/filterTypes.js

@@ -0,0 +1,530 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+require("antd/es/checkbox/style");
+
+var _checkbox = _interopRequireDefault(require("antd/es/checkbox"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _IconFont = _interopRequireDefault(require("../../IconFont"));
+
+var _VirtualList = _interopRequireDefault(require("../../VirtualList"));
+
+var _utils = require("../utils");
+
+var _excluded = ["item"],
+    _excluded2 = ["item"],
+    _excluded3 = ["item"],
+    _excluded4 = ["item"],
+    _excluded5 = ["type"];
+
+// 输入框过滤器
+var InputFilter = function InputFilter(_ref) {
+  var getFilterValue = _ref.getFilterValue,
+      setFilterValue = _ref.setFilterValue;
+  var inputRef = (0, _react.useRef)(null); // 单选事件
+
+  var onChange = function onChange(val) {
+    return setFilterValue(val);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
+    ref: inputRef,
+    defaultValue: getFilterValue,
+    allowClear: true,
+    size: "small",
+    placeholder: "\u8BF7\u8F93\u5165",
+    onSearch: onChange
+  })));
+}; // 下拉单选过滤器
+
+
+var SelectFilter = function SelectFilter(_ref2) {
+  var filters = _ref2.filters,
+      getFilterValue = _ref2.getFilterValue,
+      setFilterValue = _ref2.setFilterValue;
+  var inputRef = (0, _react.useRef)(null); // 搜索后的筛选项
+
+  var _useState = (0, _react.useState)(filters),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      options = _useState2[0],
+      setOptions = _useState2[1]; // 是否存在搜索, 当数据大于8时存在搜索
+
+
+  var isSearch = (0, _react.useMemo)(function () {
+    return filters.length > 8;
+  }, [filters.length]); // 搜索
+
+  var handleFilter = function handleFilter(val) {
+    setOptions(filters.filter(function (v) {
+      return v.label.indexOf(val) > -1;
+    }));
+  }; // 单选事件
+
+
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    setFilterValue(item.value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
+    ref: inputRef,
+    allowClear: true,
+    size: "small",
+    placeholder: "\u8BF7\u8F93\u5165",
+    onSearch: handleFilter,
+    onChange: (0, _lodash.debounce)(function (e) {
+      return handleFilter(e.target.value);
+    }, 500)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+    options: options,
+    className: "filter_list"
+  }, function (_ref3) {
+    var item = _ref3.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: (0, _classnames.default)('filter_item', {
+        checked: item.value === getFilterValue
+      }),
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item-content"
+    }, item.label));
+  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty"
+  }, "\u6682\u65E0\u6570\u636E")));
+}; // 自定义筛选下拉选过滤器
+
+
+var CustomFilter = function CustomFilter(_ref4) {
+  var filters = _ref4.filters,
+      getFilterValue = _ref4.getFilterValue,
+      setFilterValue = _ref4.setFilterValue;
+
+  // 单选事件
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    setFilterValue(item);
+  };
+
+  var handleAdd = function handleAdd(e) {
+    e.preventDefault();
+    setFilterValue('', 'add');
+  };
+
+  var handleEdit = function handleEdit(e, item) {
+    e.stopPropagation();
+    setFilterValue(item, 'edit');
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+    options: filters,
+    className: "filter_list"
+  }, function (_ref5) {
+    var item = _ref5.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: (0, _classnames.default)('filter_item', {
+        checked: item.value === getFilterValue
+      }),
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item-content"
+    }, item.label), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item_operate"
+    }, item.default ? '默认' : /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-edit",
+      className: "hover_show icon_top",
+      onClick: function onClick(e) {
+        return handleEdit(e, item);
+      }
+    })));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item add_more",
+    onClick: function onClick(e) {
+      return handleAdd(e);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_item-content"
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-plus"
+  }), "\u65B0\u589E\u81EA\u5B9A\u4E49\u67E5\u8BE2")), !filters.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty"
+  }, "\u6682\u65E0\u6570\u636E")));
+}; // 下拉多选过滤器: 要过滤的数据, 当前选中项, 触发过滤, 过滤前的数据
+
+
+var CheckboxFilter = function CheckboxFilter(_ref6) {
+  var filters = _ref6.filters,
+      getFilterValue = _ref6.getFilterValue,
+      setFilterValue = _ref6.setFilterValue;
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(getFilterValue || []),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      checkedValues = _useState4[0],
+      setCheckedValues = _useState4[1]; // 搜索后的筛选项
+
+
+  var _useState5 = (0, _react.useState)(filters),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      options = _useState6[0],
+      setOptions = _useState6[1]; // 是否存在搜索, 当数据大于8时存在搜索
+
+
+  var isSearch = (0, _react.useMemo)(function () {
+    return filters.length > 8;
+  }, [filters.length]); // 是否半选
+
+  var indeterminate = (0, _react.useMemo)(function () {
+    return checkedValues.length && checkedValues.length < filters.length;
+  }, [checkedValues.length, filters.length]); // 是否全选
+
+  var checkAll = (0, _react.useMemo)(function () {
+    return checkedValues.length === filters.length;
+  }, [checkedValues.length, filters.length]); // 全选事件
+
+  var onCheckAllChange = function onCheckAllChange() {
+    var nValue = checkAll ? [] : filters.map(function (v) {
+      return v.value;
+    });
+    setCheckedValues(nValue);
+  }; // 搜索
+
+
+  var handleFilter = function handleFilter(val) {
+    setOptions(filters.filter(function (v) {
+      return v.label.indexOf(val) > -1;
+    }));
+  }; // 确定
+
+
+  var handleSure = function handleSure() {
+    setFilterValue(checkedValues);
+  }; // 清空
+
+
+  var handleReset = function handleReset() {
+    inputRef.current.state.value = '';
+    setFilterValue(undefined);
+  }; // 单选事件
+  // const onChange = (values) => setCheckedValues(values || undefined);
+
+
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    var arr = checkedValues.includes(item.value) ? checkedValues.filter(function (v) {
+      return v !== item.value;
+    }) : [].concat((0, _toConsumableArray2.default)(checkedValues), [item.value]);
+    setCheckedValues(arr || undefined);
+    !isSearch && setFilterValue(arr, 'single');
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
+    ref: inputRef,
+    allowClear: true,
+    size: "small",
+    placeholder: "\u8BF7\u8F93\u5165",
+    onSearch: handleFilter,
+    onChange: (0, _lodash.debounce)(function (e) {
+      return handleFilter(e.target.value);
+    }, 500)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header_operate"
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+    indeterminate: indeterminate,
+    onChange: onCheckAllChange,
+    checked: checkAll,
+    className: "filter_tip"
+  }, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "filter_tip"
+  }, "\u5DF2\u9009: ", checkedValues.length)))), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
+    value: checkedValues,
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+    options: options,
+    className: "filter_list"
+  }, function (_ref7) {
+    var item = _ref7.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded3);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: (0, _classnames.default)('filter_item', {
+        checked: checkedValues.includes(item.value)
+      }),
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+      value: item.value,
+      className: "filter_item-content"
+    }, item.label));
+  }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_empty"
+  }, "\u6682\u65E0\u6570\u636E")), isSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_footer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_save",
+    onClick: handleSure
+  }, "\u786E\u5B9A"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_clear",
+    onClick: handleReset
+  }, "\u6E05\u7A7A")));
+}; // 更多筛选
+
+
+var MoreFilter = function MoreFilter(_ref8) {
+  var filters = _ref8.filters,
+      getFilterValue = _ref8.getFilterValue,
+      setFilterValue = _ref8.setFilterValue;
+  // 选中的数据
+  var checkedValues = (0, _react.useMemo)(function () {
+    return getFilterValue;
+  }, [getFilterValue]); // 排序后的数组
+
+  var options = (0, _react.useMemo)(function () {
+    return filters;
+  }, [filters]); // 是否可置顶, 第一项无置顶操作, 所以这里的index > 0
+
+  var isTop = (0, _react.useCallback)(function (item) {
+    return checkedValues.includes(item.field) && filters.findIndex(function (v) {
+      return v.field === item.field;
+    }) > 0;
+  }, [checkedValues, filters]); // 是否半选
+
+  var indeterminate = (0, _react.useMemo)(function () {
+    return checkedValues.length && checkedValues.length < options.length;
+  }, [checkedValues.length, options.length]); // 是否全选
+
+  var checkAll = (0, _react.useMemo)(function () {
+    return checkedValues.length === options.length;
+  }, [checkedValues.length, options.length]); // 全选事件
+
+  var onCheckAllChange = function onCheckAllChange() {
+    // const nValue = checkAll ? [] : options.map(v => v.field);
+    // setCheckedValues(nValue);
+    setFilterValue(options, checkAll ? 'hidden' : 'show');
+  }; // 重置
+
+
+  var handleReset = function handleReset() {
+    return setFilterValue(null, 'reset');
+  }; // 置顶操作, 防止频繁操作, 建议加上节流
+
+
+  var handleTop = function handleTop(e, item) {
+    e.stopPropagation();
+    setFilterValue(item, 'top');
+  }; // 单选事件
+
+
+  var onChange = function onChange(e, item) {
+    e.preventDefault();
+    setFilterValue(item);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_dropdown"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "filter_header_operate"
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+    indeterminate: indeterminate,
+    onChange: onCheckAllChange,
+    checked: checkAll
+  }, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "filter_reset",
+    onClick: handleReset
+  }, "\u91CD\u7F6E")))), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
+    value: checkedValues,
+    className: "filter_body"
+  }, /*#__PURE__*/_react.default.createElement(_VirtualList.default, {
+    options: options,
+    className: "filter_list"
+  }, function (_ref9) {
+    var item = _ref9.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref9, _excluded4);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
+      className: "filter_item",
+      onClick: function onClick(e) {
+        return onChange(e, item);
+      }
+    }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+      value: item.field,
+      className: "filter_item-content"
+    }, item.title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_item_operate"
+    }, isTop(item) && /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-vertical-align-top",
+      className: "hover_show icon_top",
+      onClick: function onClick(e) {
+        return handleTop(e, item);
+      }
+    })));
+  })));
+}; // 日期范围选择器
+
+
+var DatePickerFilter = function DatePickerFilter(_ref10) {
+  var getFilterValue = _ref10.getFilterValue,
+      setFilterValue = _ref10.setFilterValue,
+      props = _ref10.props;
+  // 对日期格式的转换, 日期组件仅接收moment格式
+  var value = (0, _react.useMemo)(function () {
+    var nValue;
+
+    if (getFilterValue) {
+      nValue = [(0, _moment.default)(getFilterValue[0]), (0, _moment.default)(getFilterValue[1])];
+    }
+
+    return nValue;
+  }, [getFilterValue]); // 最近的时间段, 值为JSON转换后的字符串
+
+  var ranges = (0, _react.useMemo)(function () {
+    return Object.entries((0, _utils.getRanges)()).map(function (item, i) {
+      return {
+        id: i,
+        label: item[0],
+        value: JSON.stringify(item[1])
+      };
+    });
+  }, []); // 选中时间段的触发
+
+  var onChange = function onChange(dates, dateStrings) {
+    setFilterValue((0, _utils.getIsHas)(dateStrings.filter(function (v) {
+      return !!v;
+    })) ? dateStrings : null);
+  }; // 最近的时间触发事件
+
+
+  var handleLastDateOnChange = function handleLastDateOnChange(e) {
+    var nValue = JSON.parse(e.target.value);
+    setFilterValue(nValue);
+  };
+
+  var panelRender = function panelRender(panelNode) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_box"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_main"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header_tip"
+    }, getFilterValue && "".concat(getFilterValue[0], " - ").concat(getFilterValue[1])), /*#__PURE__*/_react.default.createElement("div", {
+      className: "filter_picker_header_operate"
+    }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+      value: JSON.stringify(getFilterValue),
+      onChange: handleLastDateOnChange,
+      size: "small"
+    }, ranges.map(function (v) {
+      return /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+        key: v.label,
+        value: v.value
+      }, v.label);
+    })))), panelNode));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
+    value: value,
+    onChange: onChange,
+    panelRender: panelRender,
+    dropdownClassName: "lm_filter_dropdown_picker",
+    bordered: false,
+    picker: "date",
+    size: "small",
+    separator: "\u81F3",
+    placeholder: ['开始日期', '结束日期'],
+    style: {
+      width: 200
+    }
+  }, props)));
+};
+
+var FilterComp = function FilterComp(props) {
+  var type = props.type,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded5);
+
+  switch (type) {
+    case 'input':
+      return /*#__PURE__*/_react.default.createElement(InputFilter, resetProps);
+
+    case 'select':
+      return /*#__PURE__*/_react.default.createElement(SelectFilter, resetProps);
+
+    case 'checkbox':
+      return /*#__PURE__*/_react.default.createElement(CheckboxFilter, resetProps);
+
+    case 'datePicker':
+      return /*#__PURE__*/_react.default.createElement(DatePickerFilter, resetProps);
+
+    case 'custom':
+      return /*#__PURE__*/_react.default.createElement(CustomFilter, resetProps);
+
+    case 'more':
+      return /*#__PURE__*/_react.default.createElement(MoreFilter, resetProps);
+
+    default:
+      return /*#__PURE__*/_react.default.createElement(CheckboxFilter, resetProps);
+  }
+};
+
+var _default = FilterComp;
+exports.default = _default;