linkmore-design/lib/advanced-filter/widgets/SelectRender.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 _ahooks = require("ahooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _empty = _interopRequireDefault(require("../../empty"));
var _virtualList = _interopRequireDefault(require("../../virtual-list"));
var _DelayInput = _interopRequireDefault(require("./DelayInput"));
const SelectRender = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    value,
    onChange,
    options: filters = [],
    fieldNames,
    onFocus,
    showSearch = true,
    itemRender,
    footerRender,
    optionFilterProp
  } = props;
  const inputRef = (0, _react.useRef)(null);
  // 存在搜索时, 下拉数据取搜索后的, 反之实时取最新来源
  const [searched, setSearched] = (0, _react.useState)(false);
  // 搜索后的筛选项
  const [optionals, setOptions] = (0, _react.useState)(filters);
  const options = searched ? optionals : filters;

  // 是否存在搜索, 当数据大于8时存在搜索
  // const isSearch = useMemo(() => filters.length > 8 && !!showSearch, [filters.length, showSearch])

  const handleFilter = (val = '') => {
    setSearched(!!val);
    const searchValues = filters.filter(item => (item[optionFilterProp] ?? (item[fieldNames.label] || '')).indexOf(val) > -1);
    setOptions(searchValues);
  };

  // 单选事件
  const handleOnClick = (value, obj) => {
    onChange?.(value, obj);
  };
  const handleFocus = () => {
    onFocus?.();
    inputRef.current?.focus?.({
      cursor: 'all'
    });
    // 若开启了 Dropdown => destroyPopupOnHide=true 无需重置操作 反之需开启
    // inputRef.current?.setValue?.('');
    // handleFilter('');
  };

  // 初始化展开时获取焦点
  (0, _ahooks.useDebounceEffect)(() => {
    handleFocus();
  }, [], {
    wait: 200
  });
  (0, _react.useImperativeHandle)(ref, () => ({
    blur: () => {},
    focus: handleFocus
  }));
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_dropdown"
  }, showSearch && /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/_react.default.createElement(_DelayInput.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
  }) => {
    const isActive = item[fieldNames?.value]?.toString() === value?.toString();
    const onSelect = () => handleOnClick(item[fieldNames.value], item);
    if (itemRender) return itemRender?.({
      item,
      onSelect,
      isActive,
      ...resetProps
    });
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: (0, _classnames.default)('filter_item', {
        checked: isActive
      }),
      onClick: e => {
        e.preventDefault();
        onSelect();
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "filter_item_content"
    }, item[fieldNames?.label]));
  }), !options.length && /*#__PURE__*/_react.default.createElement(_empty.default, {
    title: "",
    image: "nodata",
    className: "ant-empty-small"
  }), footerRender && footerRender?.()));
});
var _default = SelectRender;
exports.default = _default;