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

业务组件集合

"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _uiw = require("uiw");
var _jsxRuntime = require("react/jsx-runtime");
function SelectMultiple(_ref) {
  var _ref$option = _ref.option,
    option = _ref$option === void 0 ? [] : _ref$option,
    onChange = _ref.onChange,
    onSelect = _ref.onSelect,
    onSearch = _ref.onSearch,
    onBlur = _ref.onBlur,
    onClear = _ref.onClear,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? [] : _ref$value,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? true : _ref$loading,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
    _ref$allowClear = _ref.allowClear,
    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
    noContent = _ref.noContent,
    _ref$showSearch = _ref.showSearch,
    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
    _ref$maxCount = _ref.maxCount,
    maxCount = _ref$maxCount === void 0 ? 3 : _ref$maxCount;
  // 选中的集合
  var _useState = (0, _react.useState)(value),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    selectedItems = _useState2[0],
    setSelectedItems = _useState2[1];
  // 搜索内容
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    searchValue = _useState4[0],
    setSearchValue = _useState4[1];
  // 是否是搜索状态
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    isSearch = _useState6[0],
    setIsSearch = _useState6[1];

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

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

  // input的value值
  var inputValue = _react["default"].useMemo(function () {
    var content = selectedItems && selectedItems.length > 0 && selectedItems.map(function (item) {
      return 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__*/(0, _jsxRuntime.jsx)(_uiw.Popover, {
    trigger: "focus",
    placement: "bottomLeft",
    content: contentShow(),
    visibleArrow: false,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uiw.Input, {
      readOnly: !showSearch,
      disabled: disabled,
      placeholder: placeholder,
      value: inputValue,
      onChange: function onChange(e) {
        return handleInput('search', e);
      },
      onBlur: function onBlur(e) {
        return handleInput('blur', e);
      },
      addonAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uiw.Icon, {
        type: renderSelectIcon(),
        spin: loading,
        onClick: renderSelectIcon() === 'close' ? handleInput.bind(this, 'clean') : undefined
      })
    })
  });
}
var _default = SelectMultiple;
exports["default"] = _default;
module.exports = exports.default;