linkmore-design/es/lm-filter/components/SelectFilter.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["item"];
import React, { useRef, useState, useMemo, useEffect } from 'react';
import cn from 'classnames';
import VirtualList from "../../virtual-list";
import InputSearchClose from "./InputSearchClose";
import EmptyFilter from "./EmptyFilter";
import { useDelayedFn } from "../hooks";
var SelectFilter = function SelectFilter(_ref) {
  var instance = _ref.instance,
    itemProps = _ref.item;
  var _instance$filterValue = instance.filterValue,
    filterValue = _instance$filterValue === void 0 ? '' : _instance$filterValue,
    setFilterValue = instance.setFilterValue,
    visible = instance.visible,
    locale = instance.locale;
  var _itemProps$data = itemProps.data,
    filters = _itemProps$data === void 0 ? [] : _itemProps$data,
    showSearch = itemProps.showSearch;
  var delayedFn = useDelayedFn();
  var inputRef = useRef(null);
  // 搜索后的筛选项
  var _useState = useState(filters),
    _useState2 = _slicedToArray(_useState, 2),
    options = _useState2[0],
    setOptions = _useState2[1];
  // 是否存在搜索, 当数据大于8时存在搜索
  var isSearch = useMemo(function () {
    return filters.length > 8 && !!(showSearch !== null && showSearch !== void 0 ? showSearch : true);
  }, [filters.length, showSearch]);

  // 自定义节点字段
  var fieldNames = useMemo(function () {
    return _objectSpread({
      label: 'label',
      value: 'value'
    }, itemProps.fieldNames);
  }, [itemProps.fieldNames]);
  var handleFilter = function handleFilter() {
    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    var serachValues = filters.filter(function (v) {
      return v[fieldNames.label].indexOf(val) > -1;
    });
    setOptions(serachValues);
  };

  // 单选事件
  var onChange = function onChange(e, obj) {
    e.preventDefault();
    setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue(obj[fieldNames.value], obj);
  };

  // 展开下拉时触发: 赋值 && 聚焦 && 重置显示内容
  useEffect(function () {
    if (visible) {
      delayedFn(function () {
        var _inputRef$current, _inputRef$current$foc;
        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 ? void 0 : _inputRef$current$foc.call(_inputRef$current, {
          cursor: 'all'
        });
      });
      // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
      // inputRef.current?.setValue?.('');
      // handleFilter('');
    }
  }, [visible]);
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, isSearch && /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement(InputSearchClose, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  })), /*#__PURE__*/React.createElement("div", {
    className: "filter_body"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: options,
    className: "filter_list"
  }, function (_ref2) {
    var item = _ref2.item,
      resetProps = _objectWithoutProperties(_ref2, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: cn('filter_item', {
        checked: item[fieldNames.value] === filterValue
      }),
      onClick: function onClick(e) {
        return onChange(e, item);
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "filter_item_content"
    }, item[fieldNames.label]));
  }), !options.length && /*#__PURE__*/React.createElement(EmptyFilter, {
    description: locale.empty
  })));
};
export default SelectFilter;