@qsxy/element-plus-react 1.0.0-next.7 → 1.0.1

package/dist/Select/SelectCore.js

@@ -1,433 +1,545 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _excluded = ["filterable", "clearable", "error", "warning", "multiple", "collapseTags", "maxCollapseTags", "collapseTagsTooltip", "tagType", "tagEffect", "showArrow", "collapseTips", "filterMethod", "onChange", "allowCreate", "onEnter", "afterLeave", "prepend", "append", "onLoadSuccess", "onVisibleChange", "onRemoveTag", "onClear"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from 'classnames';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import max from 'lodash/max';
+import min from 'lodash/min';
+import omit from 'lodash/omit';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Popper from "../Popper/Popper";
+import { Tag } from "../Tag";
+import Tooltip from "../Tooltip/Tooltip";
+import { isNotEmpty, mergeDefaultProps } from "../Util";
+import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, useChildrenInstance, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+import SelectDropdown from "./SelectDropdown";
+var SelectCore = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  props = mergeDefaultProps({
+    placeholder: t('el.select.placeholder', {
+      lng: locale
+    }),
+    noDataText: t('el.select.noData', {
+      lng: locale
+    }),
+    noMatchText: t('el.select.noMatch', {
+      lng: locale
+    }),
+    loadingText: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+      prefix: "fas",
+      name: "spinner",
+      spin: true
+    }), " ", t('el.select.loading', {
+      lng: locale
+    })),
+    showArrow: true,
+    clearable: true,
+    filterable: false,
+    error: false,
+    required: false,
+    disabled: false,
+    maxWidth: 500,
+    collapseTagsTooltip: true,
+    maxCollapseTags: 1,
+    tagType: 'info',
+    tagEffect: 'light'
+  }, props);
+  var _useClassNames = useClassNames('select'),
+    b = _useClassNames.b,
+    e = _useClassNames.e,
+    be = _useClassNames.be,
+    m = _useClassNames.m,
+    is = _useClassNames.is;
+  // 选择框容器div
+  var containerRef = useRef(null);
+  // 下拉选项容器div
+  var contentRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var createInputRef = useRef(null);
+  var popperInstRef = useRef(null);
+  var selectDropdownRef = useRef(null);
+  var inputInstance = useRef(null);
+  var searchInstance = useRef(null);
+  var tagTooltipRef = useRef(null);
+  var _props = props,
+    filterable = _props.filterable,
+    clearable = _props.clearable,
+    error = _props.error,
+    warning = _props.warning,
+    multiple = _props.multiple,
+    _props$collapseTags = _props.collapseTags,
+    collapseTags = _props$collapseTags === void 0 ? false : _props$collapseTags,
+    maxCollapseTags = _props.maxCollapseTags,
+    collapseTagsTooltip = _props.collapseTagsTooltip,
+    tagType = _props.tagType,
+    tagEffect = _props.tagEffect,
+    showArrow = _props.showArrow,
+    collapseTips = _props.collapseTips,
+    filterMethod = _props.filterMethod,
+    onChange = _props.onChange,
+    allowCreate = _props.allowCreate,
+    onEnter = _props.onEnter,
+    afterLeave = _props.afterLeave,
+    prepend = _props.prepend,
+    append = _props.append,
+    onLoadSuccess = _props.onLoadSuccess,
+    onVisibleChange = _props.onVisibleChange,
+    onRemoveTag = _props.onRemoveTag,
+    onClearProp = _props.onClear,
+    rest = _objectWithoutProperties(_props, _excluded);
+  var _partitionHTMLProps = partitionHTMLProps(rest),
+    _partitionHTMLProps2 = _slicedToArray(_partitionHTMLProps, 1),
+    htmlInputProps = _partitionHTMLProps2[0];
+  var _partitionAnimationPr = partitionAnimationProps(rest),
+    _partitionAnimationPr2 = _slicedToArray(_partitionAnimationPr, 1),
+    transitionProps = _partitionAnimationPr2[0];
+  var _partitionPopperProps = partitionPopperPropsUtils(rest),
+    _partitionPopperProps2 = _slicedToArray(_partitionPopperProps, 1),
+    popperProps = _partitionPopperProps2[0];
+  var _useControlled = useControlled(props.value, props.defaultValue),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    createItem = _useState2[0],
+    setCreateItem = _useState2[1];
+  var disabled = useDisabled(props.disabled);
+  var size = useSize(props.size);
 
-// src/Select/SelectCore.tsx
-var SelectCore_exports = {};
-__export(SelectCore_exports, {
-  default: () => SelectCore_default
-});
-module.exports = __toCommonJS(SelectCore_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_filter = __toESM(require("lodash/filter"));
-var import_find = __toESM(require("lodash/find"));
-var import_max = __toESM(require("lodash/max"));
-var import_min = __toESM(require("lodash/min"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_react = __toESM(require("react"));
-var import_Icon = require("../Icon");
-var import_Input = require("../Input");
-var import_Popper = require("../Popper");
-var import_Tag = require("../Tag");
-var import_Tooltip = __toESM(require("../Tooltip/Tooltip"));
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_SelectDropdown = __toESM(require("./SelectDropdown"));
-var SelectCore = (0, import_react.forwardRef)((props, ref) => {
-  props = (0, import_Util.mergeDefaultProps)(
-    {
-      placeholder: "请选择",
-      noDataText: "无数据",
-      noMatchText: "没有找到匹配的结果",
-      loadingText: /* @__PURE__ */ import_react.default.createElement("span", null, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fas", name: "spinner", spin: true }), " 加载中..."),
-      clearable: true,
-      filterable: false,
-      error: false,
-      required: false,
-      disabled: false,
-      maxWidth: 500,
-      collapseTagsTooltip: true,
-      maxCollapseTags: 1
-    },
-    props
-  );
-  const { b, e, be, m, is } = (0, import_hooks.useClassNames)("select");
-  const containerRef = (0, import_react.useRef)(null);
-  const contentRef = (0, import_react.useRef)(null);
-  const wrapperRef = (0, import_react.useRef)(null);
-  const createInputRef = (0, import_react.useRef)(null);
-  const popperInstRef = (0, import_react.useRef)(null);
-  const selectDropdownRef = (0, import_react.useRef)(null);
-  const inputInstance = (0, import_react.useRef)(null);
-  const searchInstance = (0, import_react.useRef)(null);
-  const {
-    filterable,
-    clearable,
-    error,
-    warning,
-    multiple,
-    collapseTags = false,
-    maxCollapseTags,
-    collapseTagsTooltip,
-    collapseTips,
-    filterMethod,
-    onChange,
-    allowCreate,
-    onEnter,
-    afterLeave,
-    prepend,
-    append,
-    onLoadSuccess,
-    ...rest
-  } = props;
-  const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
-  const [transitionProps] = (0, import_hooks.partitionAnimationProps)(rest);
-  const [popperProps] = (0, import_hooks.partitionPopperPropsUtils)(rest);
-  const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
-  const [createItem, setCreateItem] = (0, import_react.useState)("");
-  const disabled = (0, import_hooks.useDisabled)(props.disabled);
-  const size = (0, import_hooks.useSize)(props.size);
-  const multiValue = (0, import_react.useMemo)(() => {
+  // 多选框值
+  var multiValue = useMemo(function () {
     if (multiple) {
       if (value instanceof Array) {
         return value;
-      } else if (typeof value === "string") {
+      } else if (typeof value === 'string') {
         return [value];
       }
     }
     return [];
   }, [multiple, value]);
-  const [label, setLabel] = (0, import_react.useState)("");
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  const [popperStyle, setPopperStyle] = (0, import_react.useState)({});
-  const [inputHeight, setInputHeight] = (0, import_react.useState)(32);
-  const placeholder = (0, import_react.useMemo)(() => {
-    return multiple && (0, import_Util.isNotEmpty)(multiValue) || (0, import_Util.isNotEmpty)(createItem) ? "" : props.placeholder;
+  // 单选框显示文本
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    label = _useState4[0],
+    setLabel = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popperStyle = _useState8[0],
+    setPopperStyle = _useState8[1];
+  // 多选时input框高度
+  var _useState9 = useState(32),
+    _useState10 = _slicedToArray(_useState9, 2),
+    inputHeight = _useState10[0],
+    setInputHeight = _useState10[1];
+  // 占位符
+  var placeholder = useMemo(function () {
+    return multiple && isNotEmpty(multiValue) || isNotEmpty(createItem) ? '' : props.placeholder;
   }, [createItem, multiValue, multiple, props.placeholder]);
-  const getOptionInstance = (0, import_hooks.useChildrenInstance)("Select.Option", "OptionGroup");
-  const optionData = (0, import_react.useMemo)(() => {
+
+  /** 获取所有的option组件 */
+  var getOptionInstance = useChildrenInstance('ElOption', 'ElOptionGroup');
+  var optionData = useMemo(function () {
     if (props.children) {
-      const componentChildren = getOptionInstance(props.children);
-      return componentChildren.map((node) => {
-        var _a;
+      var componentChildren = getOptionInstance(props.children);
+      return componentChildren.map(function (node) {
+        var _node$props$label, _node$props;
         return {
-          label: ((_a = node.props) == null ? void 0 : _a.label) ?? node.props.value,
+          label: (_node$props$label = (_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.label) !== null && _node$props$label !== void 0 ? _node$props$label : node.props.value,
           value: node.props.value
         };
       });
     }
     return [];
   }, [getOptionInstance, props.children]);
-  const multiLabel = (0, import_react.useMemo)(() => {
+  var multiLabel = useMemo(function () {
     if (multiple) {
-      return multiValue.map((item) => {
-        var _a;
-        return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
+      return multiValue.map(function (item) {
+        var _find$label, _find;
+        return (_find$label = (_find = find(optionData, {
+          value: item
+        })) === null || _find === void 0 ? void 0 : _find.label) !== null && _find$label !== void 0 ? _find$label : item;
       });
     }
     return [];
   }, [multiValue, multiple, optionData]);
-  const handleEnter = (0, import_react.useCallback)(
-    (node) => {
-      var _a;
-      if (visible && contentRef.current && containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const options = Array.from(contentRef.current.querySelectorAll(`.${be("dropdown", "item")}>span`));
-        const maxWidth = (options.length > 0 ? (0, import_max.default)(options.map((item) => (item == null ? void 0 : item.offsetWidth) ?? 0)) : 0) + 35;
-        if (maxWidth && maxWidth < rect.width) {
-          setPopperStyle({
-            ...popperStyle,
-            width: rect.width
-          });
-        } else {
-          setPopperStyle({
-            ...popperStyle,
-            width: (0, import_min.default)([maxWidth, props.maxWidth])
-          });
-        }
-        (_a = selectDropdownRef.current) == null ? void 0 : _a.scrollToSelected();
-        onEnter == null ? void 0 : onEnter(node);
+
+  /** 动态计算下拉框宽度 */
+  var handleEnter = useCallback(function (node) {
+    if (visible && contentRef.current && containerRef.current) {
+      var _selectDropdownRef$cu, _selectDropdownRef$cu2;
+      var rect = containerRef.current.getBoundingClientRect();
+      // const { width } = contentRef.current.getBoundingClientRect();
+      var options = Array.from(contentRef.current.querySelectorAll(".".concat(be('dropdown', 'item'), ">span")));
+      var maxWidth = (options.length > 0 ? max(options.map(function (item) {
+        var _item$offsetWidth;
+        return (_item$offsetWidth = item === null || item === void 0 ? void 0 : item.offsetWidth) !== null && _item$offsetWidth !== void 0 ? _item$offsetWidth : 0;
+      })) : 0) + 35;
+      if (maxWidth && maxWidth < rect.width) {
+        setPopperStyle(_objectSpread(_objectSpread({}, popperStyle), {}, {
+          width: rect.width
+        }));
+      } else {
+        setPopperStyle(_objectSpread(_objectSpread({}, popperStyle), {}, {
+          width: min([maxWidth, props.maxWidth])
+        }));
       }
-    },
-    [be, onEnter, popperStyle, props.maxWidth, visible]
-  );
-  const handleAfterLeave = (0, import_react.useCallback)(
-    (node) => {
-      var _a;
-      (_a = selectDropdownRef.current) == null ? void 0 : _a.clear();
-      afterLeave == null ? void 0 : afterLeave(node);
-    },
-    [afterLeave]
-  );
-  const onClick = (0, import_react.useCallback)(
-    (event) => {
-      event.preventDefault();
-      event == null ? void 0 : event.stopPropagation();
-      if (disabled) {
-        setVisible(false);
-        return;
+      (_selectDropdownRef$cu = selectDropdownRef.current) === null || _selectDropdownRef$cu === void 0 || _selectDropdownRef$cu.scrollToSelected();
+      onEnter === null || onEnter === void 0 || onEnter(node);
+      (_selectDropdownRef$cu2 = selectDropdownRef.current) === null || _selectDropdownRef$cu2 === void 0 || _selectDropdownRef$cu2.onEnter();
+    }
+  }, [be, onEnter, popperStyle, props.maxWidth, visible]);
+
+  /** 关闭下拉框后清空搜索项 */
+  var handleAfterLeave = useCallback(function (node) {
+    var _selectDropdownRef$cu3;
+    (_selectDropdownRef$cu3 = selectDropdownRef.current) === null || _selectDropdownRef$cu3 === void 0 || _selectDropdownRef$cu3.clear();
+    afterLeave === null || afterLeave === void 0 || afterLeave(node);
+  }, [afterLeave]);
+
+  /**
+   * 展开/关闭下拉框
+   * @param e
+   * @returns
+   */
+  var onClick = useCallback(function (event) {
+    event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
+    if (disabled) {
+      setVisible(false);
+      return;
+    }
+    setVisible(!visible);
+  }, [disabled, visible]);
+
+  /** 取消多选项 */
+  var onCloseTag = useCallback(function (item) {
+    var res = filter(multiValue, function (item1) {
+      return item1 !== item;
+    });
+    setValue(res);
+    onChange === null || onChange === void 0 || onChange(res, multiLabel);
+    onRemoveTag === null || onRemoveTag === void 0 || onRemoveTag(item);
+    setTimeout(function () {
+      if (tagTooltipRef.current) {
+        tagTooltipRef.current.updatePopper();
       }
-      setVisible(!visible);
-    },
-    [disabled, visible]
-  );
-  const onCloseTag = (0, import_react.useCallback)(
-    (item) => {
-      const res = (0, import_filter.default)(multiValue, (item1) => item1 !== item);
-      setValue(res);
-      onChange == null ? void 0 : onChange(res, multiLabel);
-    },
-    [multiLabel, multiValue, onChange, setValue]
-  );
-  const onClear = (0, import_react.useCallback)(() => {
-    var _a;
-    setValue(multiple ? [] : "");
-    setLabel("");
-    (_a = selectDropdownRef.current) == null ? void 0 : _a.hover("");
-    onChange == null ? void 0 : onChange(multiple ? [] : "", multiple ? [] : "");
-    setCreateItem("");
-  }, [multiple, onChange, setValue]);
-  const onChoose = (0, import_react.useCallback)(
-    (val, text, event) => {
-      event.preventDefault();
-      if ((0, import_Util.isNotEmpty)(val)) {
-        let result = val;
-        if (multiple) {
-          if (multiValue.includes(val)) {
-            result = (0, import_filter.default)(multiValue, (item) => item !== val);
-          } else {
-            result = [...multiValue, val];
-          }
+    }, 50);
+  }, [multiLabel, multiValue, onChange, onRemoveTag, setValue]);
+
+  /** 重置值 */
+  var onClear = useCallback(function () {
+    var _selectDropdownRef$cu4;
+    setValue(multiple ? [] : '');
+    setLabel('');
+    (_selectDropdownRef$cu4 = selectDropdownRef.current) === null || _selectDropdownRef$cu4 === void 0 || _selectDropdownRef$cu4.hover('');
+    onChange === null || onChange === void 0 || onChange(multiple ? [] : '', multiple ? [] : '');
+    setCreateItem('');
+    onClearProp === null || onClearProp === void 0 || onClearProp();
+  }, [multiple, onChange, onClearProp, setValue]);
+
+  /** 选中项回调 */
+  var onChoose = useCallback(function (val, text, event) {
+    event.preventDefault();
+    if (isNotEmpty(val)) {
+      var result = val;
+      if (multiple) {
+        if (multiValue.includes(val)) {
+          result = filter(multiValue, function (item) {
+            return item !== val;
+          });
         } else {
-          if (val !== createItem) {
-            setCreateItem("");
-          }
+          result = [].concat(_toConsumableArray(multiValue), [val]);
         }
-        setValue(result);
-        setLabel(multiple ? "" : text);
-        onChange == null ? void 0 : onChange(result, multiple ? result.map((item) => {
-          var _a;
-          return ((_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label) ?? item;
-        }) : text);
-        !multiple && onClick(event);
       } else {
-        setVisible(false);
+        // 当选中项不是创建项时，清空创建项
+        if (val !== createItem) {
+          setCreateItem('');
+        }
       }
-    },
-    [multiple, setValue, onChange, multiValue, onClick, createItem, optionData]
-  );
-  (0, import_react.useEffect)(() => {
-    var _a;
+      setValue(result);
+      setLabel(multiple ? '' : text);
+      onChange === null || onChange === void 0 || onChange(result, multiple ? result.map(function (item) {
+        var _find$label2, _find2;
+        return (_find$label2 = (_find2 = find(optionData, {
+          value: item
+        })) === null || _find2 === void 0 ? void 0 : _find2.label) !== null && _find$label2 !== void 0 ? _find$label2 : item;
+      }) : text);
+      !multiple && onClick(event);
+    } else {
+      setVisible(false);
+    }
+  }, [multiple, setValue, onChange, multiValue, onClick, createItem, optionData]);
+
+  /** 监听加载状态，加载中时自动打开下拉 */
+  // useEffect(() => {
+  //     setVisible(props.loading);
+  //     popperInstRef.current?.update();
+  // }, [props.loading]);
+
+  // 打开后搜索框自动获取焦点
+  useEffect(function () {
     if (visible && filterable && !allowCreate) {
-      (_a = searchInstance.current) == null ? void 0 : _a.focus();
+      var _searchInstance$curre;
+      (_searchInstance$curre = searchInstance.current) === null || _searchInstance$curre === void 0 || _searchInstance$curre.focus();
     }
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(visible);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
-  (0, import_react.useEffect)(() => {
-    var _a;
+
+  /** 搜索时 */
+  useEffect(function () {
     if (popperInstRef.current && popperInstRef.current.update) {
-      (_a = popperInstRef.current) == null ? void 0 : _a.update();
+      var _popperInstRef$curren;
+      (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
     }
   }, [popperStyle]);
-  (0, import_react.useEffect)(() => {
-    var _a, _b;
-    if (wrapperRef.current) {
-      const height = ((_a = wrapperRef.current) == null ? void 0 : _a.clientHeight) + 4;
-      setInputHeight(height <= 32 ? 32 : height + 32);
-    }
-    if (popperInstRef.current && popperInstRef.current.update) {
-      (_b = popperInstRef.current) == null ? void 0 : _b.update();
-    }
+
+  /** 多选框选择选项后，动态调整input框高度 */
+  useEffect(function () {
+    setTimeout(function () {
+      if (wrapperRef.current) {
+        var _wrapperRef$current;
+        var height = ((_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientHeight) + 4;
+        setInputHeight(height <= 32 ? 32 : height);
+      }
+      if (popperInstRef.current && popperInstRef.current.update) {
+        var _popperInstRef$curren2;
+        (_popperInstRef$curren2 = popperInstRef.current) === null || _popperInstRef$curren2 === void 0 || _popperInstRef$curren2.update();
+      }
+    }, 50);
   }, [multiValue]);
-  (0, import_react.useEffect)(() => {
-    const labels = (value instanceof Array ? value : [value]).map((item) => {
-      var _a;
-      return (_a = (0, import_find.default)(optionData, { value: item })) == null ? void 0 : _a.label;
-    }).filter((item) => !!item);
+
+  /** 初次加载时反显选中文本 */
+  useEffect(function () {
+    var labels = (value instanceof Array ? value : [value]).map(function (item) {
+      var _find3;
+      return (_find3 = find(optionData, {
+        value: item
+      })) === null || _find3 === void 0 ? void 0 : _find3.label;
+    }).filter(function (item) {
+      return !!item;
+    });
     if (labels.length > 0) {
-      setLabel(multiple ? "" : labels.join(","));
+      setLabel(multiple ? '' : labels.join(','));
     } else {
-      if ((0, import_Util.isNotEmpty)(value)) {
-        setLabel(value instanceof Array ? value.join(",") : value + "");
+      if (isNotEmpty(value)) {
+        setLabel(value instanceof Array ? value.join(',') : value + '');
       } else {
-        setLabel("");
+        setLabel('');
       }
     }
-    onLoadSuccess == null ? void 0 : onLoadSuccess(value, labels);
+    onLoadSuccess === null || onLoadSuccess === void 0 || onLoadSuccess(value, labels);
   }, [multiple, onLoadSuccess, optionData, value]);
-  (0, import_react.useImperativeHandle)(ref, () => ({
-    popperInstRef,
-    label,
-    setLabel,
-    inputInstance,
-    searchInstance,
-    getValue: () => value,
-    setValue,
-    onClear,
-    clear: onClear,
-    setVisible
-  }));
-  (0, import_react.useImperativeHandle)(ref, () => containerRef.current);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), e`default`, is({ disabled }), m({ [size]: size }), props.className), style: append || prepend ? {} : props.style, ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`trigger` }, multiple && /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: e`tags`,
-      onMouseEnter: () => {
-        var _a;
-        return (_a = inputInstance.current) == null ? void 0 : _a.showClear(multiple ? multiValue.join(",") : createItem || label);
+  useImperativeHandle(ref, function () {
+    return {
+      popperInstRef: popperInstRef,
+      selectedLabel: label,
+      setLabel: setLabel,
+      inputInstance: inputInstance,
+      searchInstance: searchInstance,
+      getValue: function getValue() {
+        return value;
       },
-      onMouseLeave: () => {
-        var _a;
-        return (_a = inputInstance.current) == null ? void 0 : _a.hideClear();
-      }
+      setValue: setValue,
+      onClear: onClear,
+      clear: onClear,
+      setVisible: setVisible
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), e(_templateObject || (_templateObject = _taggedTemplateLiteral(["default"]))), is({
+      disabled: disabled
+    }), m(_defineProperty({}, size, size)), props.className),
+    style: append || prepend ? {} : props.style,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["trigger"])))
+  }, multiple && /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tags"]))),
+    onMouseEnter: function onMouseEnter() {
+      var _inputInstance$curren;
+      return (_inputInstance$curren = inputInstance.current) === null || _inputInstance$curren === void 0 ? void 0 : _inputInstance$curren.showClear(multiple ? multiValue.join(',') : createItem || label);
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`tags-wrapper`, "has-prefix"), onClick, ref: wrapperRef }, (collapseTags ? multiLabel.slice(0, maxCollapseTags) : multiLabel).map((item, i) => {
-      return /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", key: multiValue[i], closable: !disabled, onClick, onClose: () => onCloseTag(multiValue[i]), disableTransitions: true }, item);
-    }), collapseTags && (multiValue == null ? void 0 : multiValue.length) > maxCollapseTags && /* @__PURE__ */ import_react.default.createElement(
-      import_Tooltip.default,
-      {
-        popperClass: e`tooltip`,
-        placement: "top",
-        disabled: !collapseTagsTooltip,
-        content: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, multiLabel.slice(maxCollapseTags, multiLabel.length).map((item) => /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { key: item, type: "info", disableTransitions: true }, item))),
-        effect: "light",
-        enterable: true
+    onMouseLeave: function onMouseLeave() {
+      var _inputInstance$curren2;
+      return (_inputInstance$curren2 = inputInstance.current) === null || _inputInstance$curren2 === void 0 ? void 0 : _inputInstance$curren2.hideClear();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tags-wrapper"]))), 'has-prefix'),
+    onClick: onClick,
+    ref: wrapperRef
+  }, (collapseTags ? multiLabel.slice(0, maxCollapseTags) : multiLabel).map(function (item, i) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      type: tagType,
+      key: multiValue[i],
+      closable: !disabled,
+      effect: tagEffect,
+      onClick: onClick,
+      onClose: function onClose() {
+        return onCloseTag(multiValue[i]);
       },
-      /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { type: "info", onClick, disableTransitions: true }, collapseTips ? collapseTips(multiLabel.length - maxCollapseTags, multiLabel.length) : `+ ${multiLabel.length - maxCollapseTags}`)
-    )),
-    allowCreate && /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      {
-        type: "text",
-        className: e`input`,
-        style: { marginLeft: 5, flexGrow: 1, width: "0.111111%", maxWidth: 170 },
-        ref: createInputRef,
-        onClick: () => setVisible(!visible),
-        onInput: (event) => {
-          var _a;
-          setVisible(true);
-          setCreateItem(event.target.value);
-          if (popperInstRef.current && popperInstRef.current.update) {
-            (_a = popperInstRef.current) == null ? void 0 : _a.update();
-          }
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Enter") {
-            onChoose(createItem, createItem, event);
-            setCreateItem("");
-            if (createInputRef.current) {
-              createInputRef.current.value = "";
-            }
-          }
-        },
-        onBlur: () => {
-          setTimeout(() => {
-            setCreateItem("");
-            if (createInputRef.current) {
-              createInputRef.current.value = "";
-            }
-          }, 200);
+      disableTransitions: true
+    }, item);
+  }), collapseTags && (multiValue === null || multiValue === void 0 ? void 0 : multiValue.length) > maxCollapseTags && /*#__PURE__*/React.createElement(Tooltip, {
+    ref: tagTooltipRef,
+    popperClass: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tooltip"]))),
+    placement: "top",
+    disabled: !collapseTagsTooltip,
+    content: /*#__PURE__*/React.createElement(React.Fragment, null, multiLabel.slice(maxCollapseTags, multiLabel.length).map(function (item, i) {
+      return /*#__PURE__*/React.createElement(Tag, {
+        key: item,
+        type: tagType,
+        disableTransitions: true,
+        closable: !disabled,
+        effect: tagEffect,
+        onClick: onClick,
+        onClose: function onClose() {
+          return onCloseTag(multiValue[i + maxCollapseTags]);
+        }
+      }, item);
+    })),
+    effect: "light",
+    enterable: true
+  }, /*#__PURE__*/React.createElement(Tag, {
+    type: tagType,
+    onClick: onClick,
+    disableTransitions: true,
+    effect: tagEffect
+  }, collapseTips ? collapseTips(multiLabel.length - maxCollapseTags, multiLabel.length) : "+ ".concat(multiLabel.length - maxCollapseTags)))), allowCreate && /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["input"]))),
+    style: {
+      marginLeft: 5,
+      flexGrow: 1,
+      width: '0.111111%',
+      maxWidth: 170
+    },
+    ref: createInputRef,
+    onClick: function onClick() {
+      return setVisible(!visible);
+    },
+    onInput: function onInput(event) {
+      setVisible(true);
+      setCreateItem(event.target.value);
+      if (popperInstRef.current && popperInstRef.current.update) {
+        var _popperInstRef$curren3;
+        (_popperInstRef$curren3 = popperInstRef.current) === null || _popperInstRef$curren3 === void 0 || _popperInstRef$curren3.update();
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter') {
+        onChoose(createItem, createItem, event);
+        setCreateItem('');
+        if (createInputRef.current) {
+          createInputRef.current.value = '';
         }
       }
-    )
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_Input.Input,
-    {
-      ref: inputInstance,
-      value: multiple ? multiValue.join(",") : createItem || label,
-      hiddenValue: multiple,
-      placeholder,
-      readOnly: !allowCreate,
-      clearable: clearable && !disabled,
-      disabled,
-      onClick,
-      onClear,
-      plain: props.plain,
-      className: (0, import_classnames.default)(is({ active: visible })),
-      size,
-      onChange: (val) => {
-        setVisible(true);
-        setCreateItem(val + "");
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          onChoose(createItem, createItem, event);
+    },
+    onBlur: function onBlur() {
+      setTimeout(function () {
+        setCreateItem('');
+        if (createInputRef.current) {
+          createInputRef.current.value = '';
         }
-      },
-      onBlur: () => {
-        setTimeout(() => {
-          setCreateItem("");
-        }, 200);
-      },
-      error,
-      warning,
-      innerStyle: multiple ? { height: inputHeight } : {},
-      suffix: /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { prefix: "fal", name: "angle-down", rotate: visible ? 180 : null, onClick }),
-      ...(0, import_omit.default)(htmlInputProps, [
-        "value",
-        "defaultValue",
-        "onInput",
-        "size",
-        "prefix",
-        "onChange",
-        "style",
-        "placeholder",
-        "readOnly",
-        "onKeyDown",
-        "disabled",
-        "className",
-        "type",
-        "name",
-        "minLength",
-        "maxLength"
-      ])
+      }, 200);
     }
-  )), /* @__PURE__ */ import_react.default.createElement(
-    import_Popper.Popper,
-    {
-      referenceElement: containerRef,
-      visible,
-      popperInstRef,
-      popperStyle,
-      onDestroy: () => setVisible(false),
-      onEnter: handleEnter,
-      afterLeave: handleAfterLeave,
-      placement: "bottom-start",
-      transitionAppear: true,
-      unmountOnExit: true,
-      ...transitionProps,
-      ...popperProps
+  })), /*#__PURE__*/React.createElement(Input, _extends({
+    ref: inputInstance,
+    value: multiple ? multiValue.join(',') : createItem || label,
+    hiddenValue: multiple,
+    placeholder: placeholder,
+    readOnly: !allowCreate,
+    clearable: clearable && !disabled,
+    disabled: disabled,
+    onClick: onClick,
+    onClear: onClear,
+    plain: props.plain,
+    className: classNames(is({
+      active: visible
+    })),
+    size: size,
+    onChange: function onChange(val) {
+      setVisible(true);
+      setCreateItem(val + '');
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_SelectDropdown.default,
-      {
-        ref: selectDropdownRef,
-        value,
-        searchInstance,
-        createItem,
-        setCreateItem,
-        onChoose,
-        contentRef,
-        createInputRef,
-        popperInstRef,
-        ...props
-      },
-      props.children
-    )
-  ));
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter') {
+        onChoose(createItem, createItem, event);
+      }
+    },
+    onBlur: function onBlur() {
+      setTimeout(function () {
+        setCreateItem('');
+      }, 200);
+    },
+    error: error,
+    warning: warning,
+    innerStyle: multiple ? {
+      height: inputHeight
+    } : {},
+    suffix: /*#__PURE__*/React.createElement(Icon, {
+      prefix: "fal",
+      name: "angle-down",
+      rotate: visible ? 180 : null,
+      onClick: onClick
+    })
+  }, omit(htmlInputProps, ['value', 'defaultValue', 'onInput', 'size', 'prefix', 'onChange', 'style', 'placeholder', 'readOnly', 'onKeyDown', 'disabled', 'className', 'type', 'name', 'minLength', 'maxLength'])))), /*#__PURE__*/React.createElement(Popper, _extends({
+    referenceElement: containerRef,
+    visible: visible,
+    popperInstRef: popperInstRef,
+    popperStyle: popperStyle,
+    onDestroy: function onDestroy() {
+      return setVisible(false);
+    },
+    onEnter: handleEnter,
+    afterLeave: handleAfterLeave,
+    placement: 'bottom-start',
+    transitionAppear: true,
+    unmountOnExit: true,
+    showArrow: showArrow
+  }, transitionProps, popperProps), /*#__PURE__*/React.createElement(SelectDropdown, _extends({
+    ref: selectDropdownRef,
+    value: value,
+    searchInstance: searchInstance,
+    createItem: createItem,
+    setCreateItem: setCreateItem,
+    onChoose: onChoose,
+    contentRef: contentRef,
+    createInputRef: createInputRef,
+    popperInstRef: popperInstRef
+  }, props), props.children)));
 });
-SelectCore.displayName = "SelectCore";
-var SelectCore_default = SelectCore;
+SelectCore.displayName = 'SelectCore';
+export default SelectCore;