@uiw-admin/components/esm/ProForm/widgets/SelectMultiple/index.js

业务组件集合

import React, { useState } from 'react';
import { Input, Popover, Menu, Icon, Loader } from 'uiw';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function SelectMultiple(_ref) {
  var {
    option = [],
    onChange,
    onSelect,
    onSearch,
    onBlur,
    onClear,
    value = [],
    loading = true,
    disabled = false,
    placeholder = '请选择',
    allowClear = false,
    noContent,
    showSearch = false,
    maxCount = 3
  } = _ref;
  // 选中的集合
  var [selectedItems, setSelectedItems] = useState(value);
  // 搜索内容
  var [searchValue, setSearchValue] = useState('');
  // 是否是搜索状态
  var [isSearch, setIsSearch] = useState(false);

  // 是否已达上限
  var isMax = selectedItems.length === maxCount;

  // 选择下拉项
  var handleOnChange = selected => {
    var selKeys = [...selectedItems];
    var findKey = selKeys.find(v => v.value === selected.value);
    if (!findKey && !isMax) {
      selKeys.push(selected);
    } else {
      selKeys = selKeys.filter(ele => ele.value !== selected.value);
    }
    setSelectedItems(selKeys);
    onChange == null ? void 0 : onChange(selKeys);
    onSelect == null ? void 0 : onSelect(selected);
  };
  var handleInput = (type, _ref2) => {
    var {
      target
    } = _ref2;
    if (type === 'search') {
      setIsSearch(true);
      setSearchValue(target.value);
      onSearch == null ? void 0 : onSearch(target.value);
    }
    if (type === 'blur') {
      setSearchValue('');
      setIsSearch(false);
      onBlur == null ? void 0 : onBlur();
    }
    if (type === 'clean') {
      setSearchValue('');
      setSelectedItems([]);
      setIsSearch(false);
      onClear == null ? void 0 : onClear([]);
    }
  };
  var contentShow = () => {
    var optionNotEmpty = option && option.length > 0;
    // 有数据
    if (optionNotEmpty) {
      return /*#__PURE__*/_jsx(Menu, {
        style: {
          minHeight: 25,
          maxHeight: 150,
          overflowY: 'scroll',
          width: 200
        },
        children: option.map((opt, idx) => {
          var active = selectedItems && selectedItems.findIndex(item => item.value === opt.value) !== -1;
          return /*#__PURE__*/_jsx(Menu.Item, {
            style: {
              marginBottom: option.length - 1 === idx ? 0 : 5
            },
            active: active,
            text: opt.label,
            disabled: opt.disabled,
            onClick: e => {
              setIsSearch(false);
              e.preventDefault();
              handleOnChange(opt);
            }
          }, opt.value);
        })
      });
    }
    return noContent ? noContent : /*#__PURE__*/_jsx(Loader, {
      loading: loading,
      color: "black",
      children: /*#__PURE__*/_jsxs("div", {
        style: {
          padding: 10,
          height: 70,
          width: 200,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          fontSize: 12,
          color: '#888'
        },
        children: [/*#__PURE__*/_jsx(Icon, {
          type: "file-unknown",
          style: {
            fontSize: 20
          }
        }), "\u6682\u65E0\u6570\u636E"]
      })
    });
  };

  // input的value值
  var inputValue = React.useMemo(() => {
    var content = selectedItems && selectedItems.length > 0 && selectedItems.map(item => item.label) || [];
    return isSearch ? searchValue : content.join(';');
  }, [selectedItems, searchValue, isSearch]);

  // 渲染icon
  function renderSelectIcon() {
    if (!isSearch && allowClear && selectedItems.length > 0) {
      return 'close';
    }
    if (isSearch && loading) {
      return 'loading';
    }
    return 'search';
  }
  return /*#__PURE__*/_jsx(Popover, {
    trigger: "focus",
    placement: "bottomLeft",
    content: contentShow(),
    visibleArrow: false,
    children: /*#__PURE__*/_jsx(Input, {
      readOnly: !showSearch,
      disabled: disabled,
      placeholder: placeholder,
      value: inputValue,
      onChange: e => handleInput('search', e),
      onBlur: e => handleInput('blur', e),
      addonAfter: /*#__PURE__*/_jsx(Icon, {
        type: renderSelectIcon(),
        spin: loading,
        onClick: renderSelectIcon() === 'close' ? handleInput.bind(this, 'clean') : undefined
      })
    })
  });
}
export default SelectMultiple;