linkmore-design/es/complex-filter/widgets/SelectRender.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 cn from 'classnames';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import Empty from "../../empty";
import VirtualList from "../../virtual-list";
import { useDelayedFn } from "../hooks";
import DelayInput from "./DelayInput";
var SelectRender = /*#__PURE__*/forwardRef(function (props, ref) {
  var _props$value = props.value,
    value = _props$value === void 0 ? '' : _props$value,
    onChange = props.onChange,
    _props$options = props.options,
    filters = _props$options === void 0 ? [] : _props$options,
    itemFieldNames = props.fieldNames,
    onFocus = props.onFocus,
    showSearch = props.showSearch,
    itemRender = props.itemRender,
    footerRender = props.footerRender;
  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'
    }, itemFieldNames);
  }, [itemFieldNames]);
  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 handleOnClick = function handleOnClick(e, obj) {
    e.preventDefault();
    onChange === null || onChange === void 0 ? void 0 : onChange(obj[fieldNames.value], obj);
  };
  var handeFocus = function handeFocus() {
    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
    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('');
  };

  // 初始化展开时获取焦点
  useEffect(function () {
    handeFocus();
  }, []);
  useImperativeHandle(ref, function () {
    return {
      blur: function blur() {},
      focus: handeFocus
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_dropdown"
  }, isSearch && /*#__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);
    if (itemRender) return itemRender === null || itemRender === void 0 ? void 0 : itemRender(_objectSpread({
      item: item
    }, resetProps));
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: cn('filter_item', {
        checked: ((_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())
      }),
      onClick: function onClick(e) {
        return handleOnClick(e, item);
      }
    }), /*#__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;