linkmore-design/es/advanced-filter/widgets/SelectRender.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["item"];
import { useDebounceEffect } from 'ahooks';
import cn from 'classnames';
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import Empty from "../../empty";
import VirtualList from "../../virtual-list";
import DelayInput from "./DelayInput";
var SelectRender = /*#__PURE__*/forwardRef(function (props, ref) {
  var value = props.value,
    onChange = props.onChange,
    _props$options = props.options,
    filters = _props$options === void 0 ? [] : _props$options,
    fieldNames = props.fieldNames,
    onFocus = props.onFocus,
    _props$showSearch = props.showSearch,
    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
    itemRender = props.itemRender,
    footerRender = props.footerRender,
    optionFilterProp = props.optionFilterProp;
  var inputRef = useRef(null);
  // 存在搜索时, 下拉数据取搜索后的, 反之实时取最新来源
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    searched = _useState2[0],
    setSearched = _useState2[1];
  // 搜索后的筛选项
  var _useState3 = useState(filters),
    _useState4 = _slicedToArray(_useState3, 2),
    optionals = _useState4[0],
    setOptions = _useState4[1];
  var options = searched ? optionals : filters;

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

  var handleFilter = function handleFilter() {
    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    setSearched(!!val);
    var searchValues = filters.filter(function (item) {
      var _item$optionFilterPro;
      return ((_item$optionFilterPro = item[optionFilterProp]) !== null && _item$optionFilterPro !== void 0 ? _item$optionFilterPro : item[fieldNames.label] || '').indexOf(val) > -1;
    });
    setOptions(searchValues);
  };

  // 单选事件
  var handleOnClick = function handleOnClick(value, obj) {
    onChange === null || onChange === void 0 ? void 0 : onChange(value, obj);
  };
  var handleFocus = function handleFocus() {
    var _inputRef$current, _inputRef$current$foc;
    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
    (_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('');
  };

  // 初始化展开时获取焦点
  useDebounceEffect(function () {
    handleFocus();
  }, [], {
    wait: 200
  });
  useImperativeHandle(ref, function () {
    return {
      blur: function blur() {},
      focus: handleFocus
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, showSearch && /*#__PURE__*/React.createElement("div", {
    className: "filter_header"
  }, /*#__PURE__*/React.createElement(DelayInput, {
    ref: inputRef,
    onSearch: handleFilter,
    onChange: handleFilter
  })), /*#__PURE__*/React.createElement("div", {
    className: "filter_body"
  }, /*#__PURE__*/React.createElement(VirtualList, {
    options: options,
    className: "filter_list"
  }, function (_ref) {
    var _item$fieldNames$valu;
    var item = _ref.item,
      resetProps = _objectWithoutProperties(_ref, _excluded);
    var isActive = ((_item$fieldNames$valu = item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value]) === null || _item$fieldNames$valu === void 0 ? void 0 : _item$fieldNames$valu.toString()) === (value === null || value === void 0 ? void 0 : value.toString());
    var onSelect = function onSelect() {
      return handleOnClick(item[fieldNames.value], item);
    };
    if (itemRender) return itemRender === null || itemRender === void 0 ? void 0 : itemRender(_objectSpread({
      item: item,
      onSelect: onSelect,
      isActive: isActive
    }, resetProps));
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: cn('filter_item', {
        checked: isActive
      }),
      onClick: function onClick(e) {
        e.preventDefault();
        onSelect();
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "filter_item_content"
    }, item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label]));
  }), !options.length && /*#__PURE__*/React.createElement(Empty, {
    title: "",
    image: "nodata",
    className: "ant-empty-small"
  }), footerRender && (footerRender === null || footerRender === void 0 ? void 0 : footerRender())));
});
export default SelectRender;