@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/TreeSelect/TreeSelect.js

@@ -1,584 +1,108 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var _excluded = ["placeholder", "clearable", "filterable", "multiple", "collapseTags", "onChange", "onEnter", "afterLeave", "maxWidth", "fieldNames", "append", "prepend", "warning", "error", "loading", "loadingText", "noDataText", "onExpand", "onLoadSuccess", "onSelect", "onBeforeClick", "onClickNode"];
-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 _excluded = ["cacheOptions"];
 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 _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; }
 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; }
-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); }
-/* eslint-disable indent */
-import classNames from 'classnames';
-import debounce from 'lodash/debounce';
-import filter from 'lodash/filter';
-import flattenDeep from 'lodash/flattenDeep';
-import head from 'lodash/head';
-import omit from 'lodash/omit';
-import trim from 'lodash/trim';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Divider } from "../Divider";
-import Icon from "../Icon/Icon";
-import Input from "../Input/Input";
-import InputGroup from "../Input/InputGroup";
-import Popper from "../Popper/Popper";
-import Scrollbar from "../Scrollbar/Scrollbar";
-import { Tag } from "../Tag";
-import { DirectoryTree } from "../Tree";
-import { isEmpty, isNotEmpty } from "../Util";
-import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
-import { parentNotSelectable } from "./Utils";
-function InternalTreeSelect(props, ref) {
-  var _props$expandedKeys;
-  props = _objectSpread({
-    clearable: true,
-    collapseTags: true,
-    checkStrictly: true,
-    disabled: false,
-    selectable: true,
-    filterable: true,
-    placeholder: '请选择',
-    noDataText: '无数据',
-    loadingText: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
-      prefix: "fas",
-      name: "spinner",
-      spin: true
-    }), " \u52A0\u8F7D\u4E2D..."),
-    fieldNames: {
-      title: 'title',
-      key: 'key',
-      children: 'children'
-    },
-    onBeforeClick: function onBeforeClick() {
-      return true;
+import { useMount } from 'ahooks';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import Select from "../Select/Select";
+import Tree from "../Tree/Tree";
+import { isNotEmpty, mergeDefaultProps } from "../Util";
+import { useControlled, useForceUpdate } from "../hooks";
+import CacheOptions from "./cacheOptions";
+import useSelect from "./useSelect";
+import useTree from "./useTree";
+var TreeSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  props = mergeDefaultProps({
+    renderAfterExpand: true,
+    expandOnClickNode: true,
+    checkOnClickLeaf: true,
+    autoExpandParent: true,
+    indent: 18,
+    props: {
+      children: 'children',
+      label: 'label',
+      disabled: 'disabled',
+      isLeaf: 'isLeaf',
+      class: null
     }
   }, props);
-  var _props = props,
-    placeholder = _props.placeholder,
-    clearable = _props.clearable,
-    filterable = _props.filterable,
-    multiple = _props.multiple,
-    collapseTags = _props.collapseTags,
-    onChange = _props.onChange,
-    onEnter = _props.onEnter,
-    afterLeave = _props.afterLeave,
-    maxWidth = _props.maxWidth,
-    fieldNames = _props.fieldNames,
-    append = _props.append,
-    prepend = _props.prepend,
-    warning = _props.warning,
-    error = _props.error,
-    loading = _props.loading,
-    loadingText = _props.loadingText,
-    noDataText = _props.noDataText,
-    _onExpand = _props.onExpand,
-    onLoadSuccess = _props.onLoadSuccess,
-    onSelect = _props.onSelect,
-    onBeforeClick = _props.onBeforeClick,
-    onClickNode = _props.onClickNode,
-    rest = _objectWithoutProperties(_props, _excluded);
-  var _useClassNames = useClassNames('select'),
-    b = _useClassNames.b,
-    e = _useClassNames.e,
-    m = _useClassNames.m,
-    be = _useClassNames.be,
-    is = _useClassNames.is;
-  var disabled = useDisabled(props.disabled);
-  var size = useSize(props.size);
+  var selectRef = useRef();
+  var treeRef = useRef();
+  var key = useMemo(function () {
+    return props.nodeKey || props.valueKey || 'value';
+  }, [props.nodeKey, props.valueKey]);
   var _useControlled = useControlled(props.value, props.defaultValue),
     _useControlled2 = _slicedToArray(_useControlled, 2),
     value = _useControlled2[0],
     setValue = _useControlled2[1];
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  // 单选框显示文本
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    label = _useState4[0],
-    setLabel = _useState4[1];
-  // 搜索关键词
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchText = _useState6[0],
-    setSearchText = _useState6[1];
-  var _useState7 = useState((_props$expandedKeys = props.expandedKeys) !== null && _props$expandedKeys !== void 0 ? _props$expandedKeys : []),
-    _useState8 = _slicedToArray(_useState7, 2),
-    expandedKeys = _useState8[0],
-    setExpandedKeys = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    autoExpandParent = _useState10[0],
-    setAutoExpandParent = _useState10[1];
-  // 多选时input框高度
-  var _useState11 = useState(32),
-    _useState12 = _slicedToArray(_useState11, 2),
-    inputHeight = _useState12[0],
-    setInputHeight = _useState12[1];
-  var _useState13 = useState({}),
-    _useState14 = _slicedToArray(_useState13, 2),
-    popperStyle = _useState14[0],
-    setPopperStyle = _useState14[1];
-  var _useState15 = useState([]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    checkedNodes = _useState16[0],
-    setCheckedNodes = _useState16[1];
-  var groupRef = useRef(null);
-  // 选择框容器div
-  var containerRef = useRef(null);
-  // 下拉选项容器div
-  var contentRef = useRef(null);
-  var wrapperRef = useRef(null);
-  var popperInstRef = useRef(null);
-  var treeRef = useRef(null);
-  var dataList = useRef([]);
-  var labelRef = useRef(null);
-  var inputInstance = useRef(null);
-  var searchInstance = useRef(null);
-  var scrollbarRef = useRef(null);
-  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 _partitionTreePropsUt = partitionTreePropsUtils(rest),
-    _partitionTreePropsUt2 = _slicedToArray(_partitionTreePropsUt, 1),
-    treeProps = _partitionTreePropsUt2[0];
-  useEffect(function () {
-    labelRef.current = label;
-  }, [label]);
-
-  // 打开后搜索框自动获取焦点
-  useEffect(function () {
-    if (visible && filterable) {
-      searchInstance.current.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible]);
-  var treeData = useMemo(function () {
-    // @ts-ignore
-    return !multiple && !props.checkStrictly ? parentNotSelectable(props.treeData) : props.treeData;
-  }, [multiple, props.checkStrictly, props.treeData]);
-  var loop = useCallback(function (data, searchValue, parent) {
-    return data.map(function (item) {
-      var _item$fieldNames$chil;
-      var index = item[fieldNames.title].indexOf(searchValue);
-      var beforeStr = item[fieldNames.title].substring(0, index);
-      var afterStr = item[fieldNames.title].slice(index + searchValue.length);
-      var title = index > -1 ? /*#__PURE__*/React.createElement("span", null, beforeStr, /*#__PURE__*/React.createElement("span", {
-        className: b('tree-search-value', false)
-      }, searchValue), afterStr) : /*#__PURE__*/React.createElement("span", null, item[fieldNames.title]);
-      var newItem = _objectSpread(_objectSpread({}, item), {}, {
-        parentId: parent ? [parent.parentId, parent[fieldNames.key]].filter(function (item1) {
-          return !!item1;
-        }).join(',') : ''
-      });
-      dataList.current.push(newItem);
-      if ((item === null || item === void 0 || (_item$fieldNames$chil = item[fieldNames.children]) === null || _item$fieldNames$chil === void 0 ? void 0 : _item$fieldNames$chil.length) > 0) {
-        return _objectSpread(_objectSpread({}, item), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, fieldNames.title, title), "_title", item[fieldNames.title]), fieldNames.key, item[fieldNames.key]), fieldNames.children, loop(item.children, searchValue, newItem).filter(function (item1) {
-          return !!item1;
-        })), "disabled", item.disabled));
-      }
-      return index > -1 ? _objectSpread(_objectSpread({}, item), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, fieldNames.title, title), "_title", item[fieldNames.title]), fieldNames.key, item[fieldNames.key]), "disabled", item.disabled)) : null;
-    });
-  }, [b, fieldNames.children, fieldNames.key, fieldNames.title]);
-  var filterTreeData = useMemo(function () {
-    if (isEmpty(searchText)) {
-      return treeData;
-    }
-    dataList.current = [];
-    if ((treeData === null || treeData === void 0 ? void 0 : treeData.length) > 0) {
-      var res = loop(treeData, searchText, null);
-      return res.filter(function (item) {
-        return !!item;
-      });
-    }
-    return [];
-  }, [loop, searchText, treeData]);
-  var getExpandKeys = useCallback(function () {
-    var _expandedKeys = flattenDeep(dataList.current.map(function (item) {
-      if (item[fieldNames.title].indexOf(searchText) > -1) {
-        var _item$parentId$split, _item$parentId;
-        return (_item$parentId$split = (_item$parentId = item.parentId) === null || _item$parentId === void 0 ? void 0 : _item$parentId.split(',')) !== null && _item$parentId$split !== void 0 ? _item$parentId$split : [];
-      }
-      return null;
-    })).filter(function (item, i, self) {
-      return item && self.indexOf(item) === i;
-    });
-    setExpandedKeys(_expandedKeys);
-    setAutoExpandParent(true);
-  }, [fieldNames.title, searchText]);
-
-  /** 搜索时 */
-  useEffect(function () {
-    var _popperInstRef$curren;
-    (_popperInstRef$curren = popperInstRef.current) === null || _popperInstRef$curren === void 0 || _popperInstRef$curren.update();
-    if (isNotEmpty(searchText)) {
-      getExpandKeys();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchText, popperStyle]);
-  useEffect(function () {
-    var _treeRef$current, _treeRef$current2;
-    // @ts-ignore
-    var flattenNodes = (_treeRef$current = treeRef.current) === null || _treeRef$current === void 0 ? void 0 : _treeRef$current.flattenTreeData(expandedKeys);
-    (_treeRef$current2 = treeRef.current) === null || _treeRef$current2 === void 0 || _treeRef$current2.setState({
-      expandedKeys: expandedKeys,
-      flattenNodes: flattenNodes
-    });
-  }, [expandedKeys]);
-
-  // 多选框值
-  var multiValue = useMemo(function () {
-    if (multiple) {
-      if (value instanceof Array) {
-        return value;
-      } else if (typeof value === 'string') {
-        return [value];
-      }
-    }
-    return [];
-  }, [multiple, value]);
-  var multiLabel = useMemo(function () {
-    if (multiple && checkedNodes.length > 0) {
-      return checkedNodes.map(function (item) {
-        var _item$fieldNames$titl;
-        return (_item$fieldNames$titl = item[fieldNames.title]) === null || _item$fieldNames$titl === void 0 ? void 0 : _item$fieldNames$titl.toString();
-      });
-    }
-    return [];
-  }, [checkedNodes, multiple, fieldNames.title]);
-  var refreshWidth = useCallback(function () {
-    var _current;
-    var rect = (_current = (append || prepend ? groupRef : containerRef).current) === null || _current === void 0 ? void 0 : _current.getBoundingClientRect();
-    var width = rect.width > 200 ? rect.width : 200;
-    setPopperStyle(_objectSpread(_objectSpread({}, popperStyle), {}, {
-      width: isEmpty(treeData) ? rect.width : width
-    }));
-  }, [append, popperStyle, prepend, treeData]);
-  var fn = debounce(useCallback(function () {
-    if (visible && contentRef.current) {
-      refreshWidth();
-    }
-  }, [refreshWidth, visible]), 200);
-
-  /** 动态计算下拉框宽度 */
-  var handleEnter = useCallback(function (node) {
-    if (visible && contentRef.current) {
-      refreshWidth();
-      // treeRef.current.scrollTo({ key: value });
-      onEnter === null || onEnter === void 0 || onEnter(node);
-    }
-  }, [onEnter, refreshWidth, visible]);
-
-  /** 关闭下拉框后清空搜索项 */
-  var handleAfterLeave = useCallback(function (node) {
-    setSearchText('');
-    afterLeave === null || afterLeave === void 0 || afterLeave(node);
-    searchInstance.current.onClear();
-  }, [afterLeave]);
-
-  /**
-   * 展开/关闭下拉框
-   * @param e
-   * @returns
-   */
-  var onClick = useCallback(function (event) {
-    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;
-    });
-    setCheckedNodes(filter(checkedNodes, function (item1) {
-      return item1.key !== item;
-    }));
-    setValue(res);
-    onChange === null || onChange === void 0 || onChange(res, checkedNodes.map(function (item1) {
-      var _item1$fieldNames$tit;
-      return (_item1$fieldNames$tit = item1[fieldNames.title]) === null || _item1$fieldNames$tit === void 0 ? void 0 : _item1$fieldNames$tit.toString();
-    }));
-  }, [checkedNodes, fieldNames.title, multiValue, onChange, setValue]);
-
-  /** 重置值 */
-  var onClear = useCallback(function () {
-    setValue(multiple ? [] : '');
-    setLabel('');
-    onChange === null || onChange === void 0 || onChange('', '');
-  }, [multiple, onChange, setValue]);
-
-  /** 清除搜索关键词 */
-  var onClearSearch = useCallback(function (event) {
-    event === null || event === void 0 || event.stopPropagation();
-    setSearchText('');
-  }, []);
-
-  /** 搜索 */
-  var onSearch = useCallback(function (val) {
-    var keywords = trim(val);
-    if (keywords === searchText) {
-      return;
-    } else if (isEmpty(keywords)) {
-      setSearchText('');
-    }
-    setSearchText(keywords);
-  }, [searchText]);
-
-  /** 选中回调 */
-  var handleSelect = useCallback(function (selectedKeys, info) {
-    var _info$node$_title, _info$node, _info$node$fieldNames;
-    info.nativeEvent.preventDefault();
-    if (multiple) {
-      return;
-    }
-    if (!(onBeforeClick !== null && onBeforeClick !== void 0 && onBeforeClick(info.node, info.nativeEvent))) {
-      return;
-    }
-    // @ts-ignore
-    var text = (_info$node$_title = (_info$node = info.node) === null || _info$node === void 0 ? void 0 : _info$node._title) !== null && _info$node$_title !== void 0 ? _info$node$_title : (_info$node$fieldNames = info.node[fieldNames.title]) === null || _info$node$fieldNames === void 0 ? void 0 : _info$node$fieldNames.toString();
-    setLabel(text);
-    // @ts-ignore
-    setValue(selectedKeys);
-    // @ts-ignore
-    onChange === null || onChange === void 0 || onChange(multiple ? selectedKeys : head(selectedKeys), text);
-    !multiple && onClick(info.nativeEvent);
-    // @ts-ignore
-    onSelect === null || onSelect === void 0 || onSelect(selectedKeys, info);
-    onClickNode === null || onClickNode === void 0 || onClickNode(info.node, info.nativeEvent);
-  }, [multiple, onBeforeClick, fieldNames.title, setValue, onChange, onClick, onSelect, onClickNode]);
-  var handleCheck = useCallback(function (checked, info) {
-    // @ts-ignore
-    setValue(checked);
-    setCheckedNodes(info.checkedNodes);
-    setLabel('');
-    onChange === null || onChange === void 0 || onChange(checked instanceof Array ? checked : checked === null || checked === void 0 ? void 0 : checked.checked, info.checkedNodes.map(function (item) {
-      return item[fieldNames.title];
-    }));
-  }, [fieldNames.title, onChange, setValue]);
-
-  /** 多选框选择选项后，动态调整input框高度 */
-  useEffect(function () {
-    var _wrapperRef$current, _popperInstRef$curren2;
-    var height = (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientHeight) + 4;
-    setInputHeight(height < 32 ? 32 : height);
-    popperInstRef === null || popperInstRef === void 0 || (_popperInstRef$curren2 = popperInstRef.current) === null || _popperInstRef$curren2 === void 0 || _popperInstRef$curren2.update();
-  }, [multiValue]);
-  useEffect(function () {
-    window.addEventListener('resize', fn);
-    return function () {
-      window.removeEventListener('resize', fn);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(function () {
-    var _treeRef$current$stat, _treeRef$current3;
-    var _ref = (_treeRef$current$stat = (_treeRef$current3 = treeRef.current) === null || _treeRef$current3 === void 0 ? void 0 : _treeRef$current3.state) !== null && _treeRef$current$stat !== void 0 ? _treeRef$current$stat : {},
-      _ref$selectedKeys = _ref.selectedKeys,
-      selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
-      _ref$keyEntities = _ref.keyEntities,
-      keyEntities = _ref$keyEntities === void 0 ? {} : _ref$keyEntities,
-      _ref$fieldNames = _ref.fieldNames,
-      _fieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
-    if (isEmpty(labelRef.current) && isNotEmpty(selectedKeys)) {
-      var labels = selectedKeys.filter(function (item) {
-        return isNotEmpty(item);
-      }).map(function (item) {
-        var _keyEntities$item$nod, _keyEntities$item;
-        // @ts-ignore
-        return (_keyEntities$item$nod = (_keyEntities$item = keyEntities[item]) === null || _keyEntities$item === void 0 ? void 0 : _keyEntities$item.node[_fieldNames.title]) !== null && _keyEntities$item$nod !== void 0 ? _keyEntities$item$nod : null;
-      });
-      if (labels.length > 0) {
-        setLabel(labels.join(','));
-      }
-      onLoadSuccess === null || onLoadSuccess === void 0 || onLoadSuccess(value, labels);
+  var _useForceUpdate = useForceUpdate(),
+    forceUpdate = _useForceUpdate.forceUpdate;
+  var handleChange = useCallback(function (val) {
+    var _props$onChange, _props;
+    setValue(val);
+    (_props$onChange = (_props = props).onChange) === null || _props$onChange === void 0 || _props$onChange.call(_props, val);
+  }, [setValue, props]);
+  var selectProps = useSelect(props, {
+    selectRef: selectRef,
+    treeRef: treeRef,
+    key: key
+  });
+  var _useTree = useTree(props, {
+      selectRef: selectRef,
+      treeRef: treeRef,
+      key: key,
+      value: value,
+      setValue: setValue
+    }),
+    cacheOptions = _useTree.cacheOptions,
+    treeProps = _objectWithoutProperties(_useTree, _excluded);
+  useMount(function () {
+    if (isNotEmpty(value)) {
+      forceUpdate();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [treeData]);
+  });
   useImperativeHandle(ref, function () {
     return {
-      popperInstRef: popperInstRef.current,
-      label: label,
-      setLabel: setLabel,
-      inputInstance: inputInstance.current,
-      searchInstance: searchInstance.current,
-      getValue: function getValue() {
-        return value;
-      },
-      setValue: setValue,
-      onClear: onClear,
-      setVisible: setVisible
+      getValue: selectRef.current.getValue,
+      setVisible: selectRef.current.setVisible,
+      filter: treeRef.current.filter,
+      updateKeyChildren: treeRef.current.updateKeyChildren,
+      getCheckedNodes: treeRef.current.getCheckedNodes,
+      setCheckedNodes: treeRef.current.setCheckedNodes,
+      getCheckedKeys: treeRef.current.getCheckedKeys,
+      setCheckedKeys: treeRef.current.setCheckedKeys,
+      setChecked: treeRef.current.setChecked,
+      getHalfCheckedNodes: treeRef.current.getHalfCheckedNodes,
+      getHalfCheckedKeys: treeRef.current.getHalfCheckedKeys,
+      getCurrentKey: treeRef.current.getCurrentKey,
+      getCurrentNode: treeRef.current.getCurrentNode,
+      setCurrentKey: treeRef.current.setCurrentKey,
+      setCurrentNode: treeRef.current.setCurrentNode,
+      getNode: treeRef.current.getNode,
+      remove: treeRef.current.remove,
+      append: treeRef.current.append,
+      insertBefore: treeRef.current.insertBefore,
+      insertAfter: treeRef.current.insertAfter
     };
-  });
-  var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(b(), m(_defineProperty({}, size, size)), is({
-        disabled: disabled
-      }), props.className),
-      style: append || prepend ? null : props.style,
-      ref: append || prepend ? groupRef : containerRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["trigger"])))
-    }, multiple && /*#__PURE__*/React.createElement("div", {
-      className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tags"])))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tags-wrapper"]))), 'has-prefix'),
-      onClick: onClick,
-      ref: wrapperRef
-    }, (collapseTags ? multiLabel.slice(0, 1) : multiLabel).map(function (item, i) {
-      return /*#__PURE__*/React.createElement(Tag, {
-        type: "info",
-        onClick: onClick,
-        onClose: function onClose() {
-          return onCloseTag(multiValue[i]);
-        }
-      }, item);
-    }), collapseTags && (multiValue === null || multiValue === void 0 ? void 0 : multiValue.length) > 1 && /*#__PURE__*/React.createElement(Tag, {
-      type: "info",
-      onClick: onClick
-    }, "+ ".concat(multiValue.length - 1)))), /*#__PURE__*/React.createElement(Input, _extends({
-      value: label,
-      placeholder: placeholder,
-      readOnly: true,
-      clearable: clearable && !disabled,
-      disabled: disabled,
-      size: size,
-      onClick: onClick,
-      onClear: onClear,
-      plain: props.plain,
-      className: is({
-        focus: visible
-      }),
-      error: error,
-      warning: warning,
-      innerStyle: multiple ? {
-        height: inputHeight
-      } : {},
-      suffix: /*#__PURE__*/React.createElement(Icon, {
-        prefix: "fal",
-        name: "angle-down",
-        className: visible ? 'fa-rotate-180' : '',
-        onClick: onClick
-      }),
-      ref: inputInstance
-    }, omit(htmlInputProps, ['value', 'defaultValue', 'onInput', 'disabled', 'size', 'prefix', 'onChange', 'style'])))), /*#__PURE__*/React.createElement(Popper, _extends({
-      referenceElement: append || prepend ? groupRef : containerRef,
-      visible: visible,
-      popperStyle: popperStyle,
-      popperInstRef: popperInstRef,
-      onDestroy: function onDestroy() {
-        return setVisible(false);
-      },
-      onEnter: handleEnter,
-      afterLeave: handleAfterLeave,
-      placement: 'bottom-start',
-      transitionAppear: true
-    }, transitionProps, popperProps), /*#__PURE__*/React.createElement("div", {
-      className: classNames(b(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["dorpdown"]))), is({
-        multiple: multiple
-      })),
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      },
-      ref: contentRef
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, filterable && /*#__PURE__*/React.createElement("div", {
-      className: e('search'),
-      onClick: function onClick(event) {
-        return event.stopPropagation();
-      }
-    }, /*#__PURE__*/React.createElement(Input
-    // value={searchText}
-    , {
-      ref: searchInstance,
-      style: {
-        width: '100%'
-      },
-      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
-      clearable: true,
-      plain: true,
-      debounceInput: true,
-      onClear: onClearSearch,
-      onChange: onSearch,
-      prefix: /*#__PURE__*/React.createElement(Icon, {
-        prefix: "fal",
-        name: "search"
-      })
-    }), /*#__PURE__*/React.createElement(Divider, {
-      style: {
-        margin: 0
-      }
-    })), /*#__PURE__*/React.createElement(Scrollbar, {
-      ref: scrollbarRef,
-      wrapClass: be('dropdown', 'wrap'),
-      viewClass: be('dropdown', 'list')
-    }, (filterTreeData === null || filterTreeData === void 0 ? void 0 : filterTreeData.length) === 0 || loading ? /*#__PURE__*/React.createElement("li", {
-      className: classNames(be('dropdown', 'item'), 'no-data'),
-      key: "no-data",
-      onClick: function onClick() {
-        return setVisible(false);
-      }
-    }, loading ? loadingText : noDataText) : /*#__PURE__*/React.createElement(DirectoryTree, _extends({
-      ref: treeRef
-      // height={filterable ? 240 : 248}
-      ,
-      selectedKeys: value instanceof Array ? value : [value],
-      checkedKeys: value instanceof Array ? value : [value]
-      // defaultExpandedKeys={value instanceof Array ? value : [value]}
-      ,
-      treeData: filterTreeData,
-      checkable: multiple,
-      showIcon: false
-      // @ts-ignore
-      ,
-      onSelect: handleSelect,
-      onCheck: handleCheck,
-      fieldNames: fieldNames,
-      onExpand: function onExpand(_expandedKeys, info) {
-        _onExpand === null || _onExpand === void 0 || _onExpand(_expandedKeys, info);
-        // setExpandedKeys(_expandedKeys);
-        setAutoExpandParent(false);
-        setTimeout(function () {
-          var _popperInstRef$curren3, _scrollbarRef$current;
-          (_popperInstRef$curren3 = popperInstRef.current) === null || _popperInstRef$curren3 === void 0 || _popperInstRef$curren3.update();
-          (_scrollbarRef$current = scrollbarRef.current) === null || _scrollbarRef$current === void 0 || _scrollbarRef$current.update();
-        }, 200);
-      }
-      // expandedKeys={expandedKeys}
-      ,
-      autoExpandParent: autoExpandParent
-    }, omit(treeProps, ['checkStrictly', 'expandedKeys', 'selectedKeys', 'checkedKeys', 'treeData', 'checkable', 'showIcon', 'onSelect', 'onCheck']))))))));
-  }, [b, m, size, is, disabled, props.className, props.style, props.plain, append, prepend, e, multiple, onClick, collapseTags, multiLabel, multiValue, label, placeholder, clearable, onClear, visible, error, warning, inputHeight, htmlInputProps, popperStyle, handleEnter, handleAfterLeave, transitionProps, popperProps, filterable, onClearSearch, onSearch, be, filterTreeData, loading, loadingText, noDataText, value, handleSelect, handleCheck, fieldNames, autoExpandParent, treeProps, onCloseTag, _onExpand]);
-  if (append || prepend) {
-    return /*#__PURE__*/React.createElement(InputGroup, {
-      prepend: prepend,
-      append: append,
-      ref: groupRef,
-      style: props.style
-    }, content);
-  } else {
-    return content;
-  }
-}
-var ForwardTreeSelect = /*#__PURE__*/forwardRef(InternalTreeSelect);
-var TreeSelect = ForwardTreeSelect;
-TreeSelect.displayName = 'TreeSelect';
+  }, [selectRef, treeRef]);
+  return /*#__PURE__*/React.createElement(Select, _extends({
+    ref: selectRef
+  }, selectProps, {
+    value: value,
+    onChange: handleChange,
+    unmountOnExit: false
+  }), /*#__PURE__*/React.createElement(CacheOptions, {
+    data: cacheOptions,
+    select: selectRef
+  }), /*#__PURE__*/React.createElement(Tree, _extends({
+    ref: treeRef
+  }, treeProps)));
+});
+TreeSelect.displayName = 'ElTreeSelect';
 export default TreeSelect;