linkmore-design/lib/lm-filter/components/CustomSelectFilter.js

🌈 🚀lm组件库。🚀

"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _virtualList = _interopRequireDefault(require("../../virtual-list"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _InputSearchClose = _interopRequireDefault(require("./InputSearchClose"));
var _hooks = require("../hooks");
// 自定义筛选使用
const CustomSelect = ({
  instance
}) => {
  const {
    filters = [],
    filterValue = '',
    setFilterValue,
    visible,
    onEdit,
    onAdd,
    locale
  } = instance;
  const delayedFn = (0, _hooks.useDelayedFn)();
  const inputRef = (0, _react.useRef)(null);
  // 搜索后的筛选项
  const [options, setOptions] = (0, _react.useState)(filters);
  // 是否存在搜索, 当数据大于8时存在搜索
  const isSearch = (0, _react.useMemo)(() => filters.length > 8, [filters.length]);
  const handleFilter = (val = '') => {
    const serachValues = filters.filter(v => v.label.indexOf(val) > -1);
    setOptions(serachValues);
  };

  // 单选事件
  const onChange = (e, obj) => {
    e.preventDefault();
    setFilterValue?.(obj.value, obj);
  };
  const handleAdd = () => {
    onAdd();
  };
  const handleEdit = (e, obj) => {
    e.stopPropagation();
    onEdit(obj);
  };

  // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
  (0, _react.useEffect)(() => {
    if (visible) {
      delayedFn(() => inputRef.current && inputRef.current?.focus?.({
        cursor: 'all'
      }));
    }
  }, [visible]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, isSearch && /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement(_InputSearchClose.default, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_body"
  }, /*#__PURE__*/_react.default.createElement(_virtualList.default, {
    options: options,
    className: "filter_list"
  }, ({
    item,
    ...resetProps
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: (0, _classnames.default)('filter_item', {
        checked: item.value === filterValue
      }),
      onClick: e => onChange(e, item)
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "filter_item_content"
    }, item.label), /*#__PURE__*/_react.default.createElement("div", {
      className: "filter_item_operate"
    }, item.value && /*#__PURE__*/_react.default.createElement("div", {
      className: "icon_hover",
      onClick: e => handleEdit(e, item)
    }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lmweb-edit"
    })), item.default && /*#__PURE__*/_react.default.createElement("div", null, locale.default)));
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item last_item",
    onClick: handleAdd
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item-content"
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-plus"
  }), locale?.customAdd))));
};
var _default = CustomSelect;
exports.default = _default;