@qsxy/element-plus-react 1.0.1 → 1.0.3

package/dist/Tree/TreeNode.js

@@ -1,8 +1,4 @@
 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 = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"];
-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 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); }
@@ -12,360 +8,354 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
-/* eslint-disable react-hooks/exhaustive-deps */
 import classNames from 'classnames';
-import React from 'react';
-import Indent from "./Indent";
-import { TreeContext, UnstableContext } from "./contextTypes";
-import getEntity from "./utils/keyUtil";
-import pickAttrs from "./utils/pickAttrs";
-import { convertNodePropsToEventData } from "./utils/treeUtil";
-var ICON_OPEN = 'open';
-var ICON_CLOSE = 'close';
-var defaultTitle = '---';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import Checkbox from "../Checkbox/Checkbox";
+import Icon from "../Icon/Icon";
+import Transition from "../Transition/Transition";
+import { isFunction, isString } from "../Util";
+import { useClassNames } from "../hooks";
+import { afterEnter as _afterEnter, afterLeave as _afterLeave, beforeEnter as _beforeEnter, beforeLeave as _beforeLeave, onEnter as _onEnter, onLeave as _onLeave } from "./CollapseTransition";
+import useTreeContext, { TreeNodeExpandContext, useDragEventsContext } from "./TreeContext";
+import TreeNodeContent from "./TreeNodeContent";
+import { useNodeExpandEventBroadcast } from "./model/useNodeExpandEventBroadcast";
+import { getNodeKey as getNodeKeyUtil, handleCurrentChange } from "./model/util";
 var TreeNode = function TreeNode(props) {
-  var _unstableContext$node, _context$filterTreeNo, _classNames4;
-  var eventKey = props.eventKey,
-    className = props.className,
-    style = props.style,
-    dragOver = props.dragOver,
-    dragOverGapTop = props.dragOverGapTop,
-    dragOverGapBottom = props.dragOverGapBottom,
-    isLeaf = props.isLeaf,
-    isStart = props.isStart,
-    isEnd = props.isEnd,
-    expanded = props.expanded,
-    selected = props.selected,
-    checked = props.checked,
-    halfChecked = props.halfChecked,
-    loading = props.loading,
-    domRef = props.domRef,
-    active = props.active,
-    data = props.data,
-    onMouseMove = props.onMouseMove,
-    selectable = props.selectable,
-    otherProps = _objectWithoutProperties(props, _excluded);
-  var context = React.useContext(TreeContext);
-  var _ref = context || {},
-    treeClassNames = _ref.classNames,
-    styles = _ref.styles;
-  var unstableContext = React.useContext(UnstableContext);
-  var selectHandleRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    dragNodeHighlight = _React$useState2[0],
-    setDragNodeHighlight = _React$useState2[1];
+  var _props$node, _props$node3, _props$node5, _props$node8, _props$node10, _tree$props3, _props$props2, _props$node12, _props$node13, _props$node14, _props$node15, _props$node16, _props$node17, _props$node18, _props$node19, _props$node20, _props$node21, _props$node22, _props$node23, _props$node24, _props$node25, _props$node26;
+  var tree = useTreeContext();
+  var dragEvents = useDragEventsContext();
 
-  // ======= State: Disabled State =======
-  var isDisabled = !!(context.disabled || props.disabled || (_unstableContext$node = unstableContext.nodeDisabled) !== null && _unstableContext$node !== void 0 && _unstableContext$node.call(unstableContext, data));
-  var isCheckable = React.useMemo(function () {
-    // Return false if tree or treeNode is not checkable
-    if (!context.checkable || props.checkable === false) {
-      return false;
-    }
-    return context.checkable;
-  }, [context.checkable, props.checkable]);
+  // 状态定义
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    childNodeRendered = _useState4[0],
+    setChildNodeRendered = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    oldChecked = _useState6[0],
+    setOldChecked = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    oldIndeterminate = _useState8[0],
+    setOldIndeterminate = _useState8[1];
 
-  // ======= Event Handlers: Selection and Check =======
-  var onSelect = function onSelect(e) {
-    if (isDisabled) {
-      return;
-    }
-    context.onNodeSelect(e, convertNodePropsToEventData(props));
-  };
-  var onCheck = function onCheck(e) {
-    if (isDisabled) {
-      return;
-    }
-    if (!isCheckable || props.disableCheckbox) {
-      return;
-    }
-    context.onNodeCheck(e, convertNodePropsToEventData(props), !checked);
-  };
+  // 引用
+  var nodeRef = useRef(null);
+  var transitionNodeRef = useRef(null);
+  var instanceRef = useRef(null);
 
-  // ======= State: Selectable Check =======
-  var isSelectable = React.useMemo(function () {
-    // Ignore when selectable is undefined or null
-    if (typeof selectable === 'boolean') {
-      return selectable;
+  // 初始化检查
+  useEffect(function () {
+    setExpanded(props.node.expanded);
+    if (props.node.expanded) {
+      setChildNodeRendered(true);
     }
-    return context.selectable;
-  }, [selectable, context.selectable]);
-  var onSelectorClick = function onSelectorClick(e) {
-    // Click trigger before select/check operation
-    context.onNodeClick(e, convertNodePropsToEventData(props));
-    if (isSelectable) {
-      onSelect(e);
-    } else {
-      onCheck(e);
+  }, [(_props$node = props.node) === null || _props$node === void 0 ? void 0 : _props$node.expanded]);
+  var ns = useClassNames('tree');
+  var _useNodeExpandEventBr = useNodeExpandEventBroadcast(props),
+    broadcastExpanded = _useNodeExpandEventBr.broadcastExpanded,
+    parentNodeMap = _useNodeExpandEventBr.parentNodeMap;
+  var childrenKey = useMemo(function () {
+    return tree.props.props['children'] || 'children';
+  }, [tree.props.props]);
+  var children = useMemo(function () {
+    var _props$node2;
+    return (_props$node2 = props.node) === null || _props$node2 === void 0 || (_props$node2 = _props$node2.data) === null || _props$node2 === void 0 ? void 0 : _props$node2[childrenKey];
+  }, [(_props$node3 = props.node) === null || _props$node3 === void 0 ? void 0 : _props$node3.data, childrenKey]);
+  var handleSelectChange = useCallback(function (checked, indeterminate) {
+    if (oldChecked !== checked || oldIndeterminate !== indeterminate) {
+      var _tree$props, _tree$props$onCheckCh, _props$node4;
+      tree === null || tree === void 0 || (_tree$props = tree.props) === null || _tree$props === void 0 || (_tree$props$onCheckCh = _tree$props.onCheckChange) === null || _tree$props$onCheckCh === void 0 || _tree$props$onCheckCh.call(_tree$props, (_props$node4 = props.node) === null || _props$node4 === void 0 ? void 0 : _props$node4.data, checked, indeterminate);
     }
-  };
-  var onSelectorDoubleClick = function onSelectorDoubleClick(e) {
-    context.onNodeDoubleClick(e, convertNodePropsToEventData(props));
-  };
-  var onMouseEnter = function onMouseEnter(e) {
-    context.onNodeMouseEnter(e, convertNodePropsToEventData(props));
-  };
-  var onMouseLeave = function onMouseLeave(e) {
-    context.onNodeMouseLeave(e, convertNodePropsToEventData(props));
-  };
-  var onContextMenu = function onContextMenu(e) {
-    context.onNodeContextMenu(e, convertNodePropsToEventData(props));
-  };
+    setOldChecked(checked);
+    setOldIndeterminate(indeterminate);
+  }, [oldChecked, oldIndeterminate, (_props$node5 = props.node) === null || _props$node5 === void 0 ? void 0 : _props$node5.data, tree === null || tree === void 0 ? void 0 : tree.props]);
 
-  // ======= Drag: Drag Enabled =======
-  var isDraggable = React.useMemo(function () {
-    return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
-  }, [context.draggable, data]);
+  // 监听子节点变化
+  useEffect(function () {
+    var _props$node6;
+    (_props$node6 = props.node) === null || _props$node6 === void 0 || _props$node6.updateChildren();
+  }, [children]);
 
-  // ======= Drag: Drag Event Handlers =======
-  var onDragStart = function onDragStart(e) {
-    e.stopPropagation();
-    setDragNodeHighlight(true);
-    context.onNodeDragStart(e, props);
-    try {
-      // ie throw error
-      // firefox-need-it
-      e.dataTransfer.setData('text/plain', '');
-    } catch (_unused) {
-      // empty
-    }
-  };
-  var onDragEnter = function onDragEnter(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    context.onNodeDragEnter(e, props);
-  };
-  var onDragOver = function onDragOver(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    context.onNodeDragOver(e, props);
-  };
-  var onDragLeave = function onDragLeave(e) {
-    e.stopPropagation();
-    context.onNodeDragLeave(e, props);
-  };
-  var onDragEnd = function onDragEnd(e) {
-    e.stopPropagation();
-    setDragNodeHighlight(false);
-    context.onNodeDragEnd(e, props);
-  };
-  var onDrop = function onDrop(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragNodeHighlight(false);
-    context.onNodeDrop(e, props);
-  };
+  // 监听不确定状态变化
+  useEffect(function () {
+    handleSelectChange(props.node.checked, props.node.indeterminate);
+  }, [props.node.indeterminate, props.node.checked]);
 
-  // ======= Expand: Node Expansion =======
-  var onExpand = function onExpand(e) {
-    if (loading) {
-      return;
-    }
-    context.onNodeExpand(e, convertNodePropsToEventData(props));
-  };
+  // 监听选中状态变化
+  // useEffect(() => {
+  //     if (props.node?.checked !== undefined) {
+  //         handleSelectChange(props.node.checked, props.node.indeterminate);
+  //     }
+  // }, [props.node?.checked]);
 
-  // ======= State: Has Children =======
-  var hasChildren = React.useMemo(function () {
-    var _ref2 = getEntity(context.keyEntities, eventKey) || {},
-      children = _ref2.children;
-    return Boolean((children || []).length);
-  }, [context.keyEntities, eventKey]);
+  // 监听子节点数量变化
+  useEffect(function () {
+    var _props$node7;
+    (_props$node7 = props.node) === null || _props$node7 === void 0 || _props$node7.reInitChecked();
+  }, [(_props$node8 = props.node) === null || _props$node8 === void 0 || (_props$node8 = _props$node8.childNodes) === null || _props$node8 === void 0 ? void 0 : _props$node8.length]);
 
-  // ======= State: Leaf Check =======
-  var memoizedIsLeaf = React.useMemo(function () {
-    if (isLeaf === false) {
-      return false;
+  // 监听展开状态变化
+  useEffect(function () {
+    var _props$node9;
+    if (((_props$node9 = props.node) === null || _props$node9 === void 0 ? void 0 : _props$node9.expanded) !== undefined) {
+      setExpanded(props.node.expanded);
+      if (props.node.expanded) {
+        setChildNodeRendered(true);
+      }
     }
-    return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
-  }, [isLeaf, context.loadData, hasChildren, props.loaded]);
+  }, [(_props$node10 = props.node) === null || _props$node10 === void 0 ? void 0 : _props$node10.expanded]);
 
-  // ============== Effect ==============
-  React.useEffect(function () {
-    // Load data to avoid default expanded tree without data
-    if (loading) {
+  // 工具函数
+  var getNodeKey = useCallback(function (node) {
+    var _tree$props2;
+    return getNodeKeyUtil(tree === null || tree === void 0 || (_tree$props2 = tree.props) === null || _tree$props2 === void 0 ? void 0 : _tree$props2.nodeKey, node === null || node === void 0 ? void 0 : node.data);
+  }, [tree === null || tree === void 0 || (_tree$props3 = tree.props) === null || _tree$props3 === void 0 ? void 0 : _tree$props3.nodeKey]);
+  var getNodeClass = useCallback(function (node) {
+    var _props$props;
+    var nodeClassFunc = (_props$props = props.props) === null || _props$props === void 0 ? void 0 : _props$props.class;
+    if (!nodeClassFunc) {
+      return {};
+    }
+    var className;
+    if (isFunction(nodeClassFunc)) {
+      className = nodeClassFunc(node === null || node === void 0 ? void 0 : node.data, node);
+    } else {
+      className = nodeClassFunc;
+    }
+    if (isString(className)) {
+      return _defineProperty({}, className, true);
+    } else {
+      return className;
+    }
+  }, [(_props$props2 = props.props) === null || _props$props2 === void 0 ? void 0 : _props$props2.class]);
+  var handleExpandIconClick = useCallback(function () {
+    if (props.node.isLeaf) {
       return;
     }
-    // read from state to avoid loadData at same time
-    if (typeof context.loadData === 'function' && expanded && !memoizedIsLeaf && !props.loaded) {
-      // We needn't reload data when has children in sync logic
-      // It's only needed in node expanded
-      context.onNodeLoad(convertNodePropsToEventData(props));
+    if (expanded) {
+      var _tree$props$onNodeCol, _tree$props4;
+      (_tree$props$onNodeCol = (_tree$props4 = tree.props).onNodeCollapse) === null || _tree$props$onNodeCol === void 0 || _tree$props$onNodeCol.call(_tree$props4, props.node.data, props.node, instanceRef);
+      props.node.collapse();
+      tree.forceUpdate();
+    } else {
+      props.node.expand(function () {
+        var _props$onNodeExpand;
+        (_props$onNodeExpand = props.onNodeExpand) === null || _props$onNodeExpand === void 0 || _props$onNodeExpand.call(props, props.node.data, props.node, instanceRef);
+        tree.forceUpdate();
+      });
     }
-  }, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
-
-  // ==================== Render: Drag Handler ====================
-  var dragHandlerNode = React.useMemo(function () {
-    var _context$draggable;
-    if (!((_context$draggable = context.draggable) !== null && _context$draggable !== void 0 && _context$draggable.icon)) {
-      return null;
+  }, [props, expanded, tree]);
+  var handleCheckChange = useCallback(function (value) {
+    var checkStrictly = tree === null || tree === void 0 ? void 0 : tree.props.checkStrictly;
+    var childNodes = props.node.childNodes;
+    if (!checkStrictly && childNodes.length) {
+      value = childNodes.some(function (node) {
+        return !node.isEffectivelyChecked;
+      });
     }
-    return /*#__PURE__*/React.createElement("span", {
-      className: "".concat(context.prefixCls, "-draggable-icon")
-    }, context.draggable.icon);
-  }, [context.draggable]);
-
-  // ====================== Render: Switcher ======================
-  var renderSwitcherIconDom = function renderSwitcherIconDom(isInternalLeaf) {
-    var switcherIcon = props.switcherIcon || context.switcherIcon;
-    // if switcherIconDom is null, no render switcher span
-    if (typeof switcherIcon === 'function') {
-      return switcherIcon(_objectSpread(_objectSpread({}, props), {}, {
-        isLeaf: isInternalLeaf
-      }));
+    props.node.setChecked(value, !checkStrictly);
+    tree.forceUpdate();
+    setTimeout(function () {
+      var _tree$props$onCheck, _tree$props5;
+      var store = tree.store;
+      (_tree$props$onCheck = (_tree$props5 = tree.props).onCheck) === null || _tree$props$onCheck === void 0 || _tree$props$onCheck.call(_tree$props5, props.node.data, {
+        checkedNodes: store.getCheckedNodes(),
+        checkedKeys: store.getCheckedKeys(),
+        halfCheckedNodes: store.getHalfCheckedNodes(),
+        halfCheckedKeys: store.getHalfCheckedKeys()
+      });
+    }, 0);
+  }, [tree, props.node]);
+  var handleClick = useCallback(function (e) {
+    var _tree$props$onNodeCli, _tree$props7;
+    handleCurrentChange(tree.store, tree.props.onCurrentChange, function () {
+      var _tree$props6;
+      var nodeKeyProp = tree === null || tree === void 0 || (_tree$props6 = tree.props) === null || _tree$props6 === void 0 ? void 0 : _tree$props6.nodeKey;
+      if (nodeKeyProp) {
+        var curNodeKey = getNodeKey(props.node);
+        tree.store.setCurrentNodeKey(curNodeKey);
+      } else {
+        tree.store.setCurrentNode(props.node);
+      }
+    });
+    if (tree.props.expandOnClickNode) {
+      handleExpandIconClick();
     }
-    return switcherIcon;
-  };
-
-  // Switcher
-  var renderSwitcher = function renderSwitcher() {
-    if (memoizedIsLeaf) {
-      // if switcherIconDom is null, no render switcher span
-      var _switcherIconDom = renderSwitcherIconDom(true);
-      return _switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
-        className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher-noop"))
-      }, _switcherIconDom) : null;
+    if ((tree.props.checkOnClickNode || props.node.isLeaf && tree.props.checkOnClickLeaf && props.showCheckbox) && !props.node.disabled) {
+      handleCheckChange(!props.node.checked);
     }
-    var switcherIconDom = renderSwitcherIconDom(false);
-    return switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
-      onClick: onExpand,
-      className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE))
-    }, switcherIconDom) : null;
-  };
-
-  // ====================== Checkbox ======================
-  var checkboxNode = React.useMemo(function () {
-    if (!isCheckable) {
-      return null;
+    (_tree$props$onNodeCli = (_tree$props7 = tree.props).onNodeClick) === null || _tree$props$onNodeCli === void 0 || _tree$props$onNodeCli.call(_tree$props7, props.node.data, props.node, instanceRef, e);
+    tree.forceUpdate();
+  }, [tree, props.node, props.showCheckbox, getNodeKey, handleExpandIconClick, handleCheckChange]);
+  var handleContextMenu = useCallback(function (event) {
+    var _tree$props8, _tree$props$onNodeCon, _tree$props9;
+    if ((_tree$props8 = tree.props) !== null && _tree$props8 !== void 0 && _tree$props8['onNodeContextmenu']) {
+      event.stopPropagation();
+      event.preventDefault();
     }
-
-    // [Legacy] Custom element should be separate with `checkable` in future
-    var $custom = typeof isCheckable !== 'boolean' ? isCheckable : null;
-    return /*#__PURE__*/React.createElement("span", {
-      className: classNames("".concat(context.prefixCls, "-checkbox"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(context.prefixCls, "-checkbox-checked"), checked), "".concat(context.prefixCls, "-checkbox-indeterminate"), !checked && halfChecked), "".concat(context.prefixCls, "-checkbox-disabled"), isDisabled || props.disableCheckbox)),
-      onClick: onCheck,
-      role: "checkbox",
-      "aria-checked": halfChecked ? 'mixed' : checked,
-      "aria-disabled": isDisabled || props.disableCheckbox,
-      "aria-label": "Select ".concat(typeof props.title === 'string' ? props.title : 'tree node')
-    }, $custom);
-  }, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
-
-  // ============== State: Node State (Open/Close) ==============
-  var nodeState = React.useMemo(function () {
-    if (memoizedIsLeaf) {
-      return null;
+    (_tree$props$onNodeCon = (_tree$props9 = tree.props).onNodeContextmenu) === null || _tree$props$onNodeCon === void 0 || _tree$props$onNodeCon.call(_tree$props9, event, props.node.data, props.node, instanceRef);
+  }, [tree, props.node]);
+  var handleChildNodeExpand = useCallback(function (nodeData, node, instance) {
+    var _tree$props$onNodeExp, _tree$props10;
+    broadcastExpanded(node);
+    (_tree$props$onNodeExp = (_tree$props10 = tree.props).onNodeExpand) === null || _tree$props$onNodeExp === void 0 || _tree$props$onNodeExp.call(_tree$props10, nodeData, node, instance);
+    tree.forceUpdate();
+  }, [broadcastExpanded, tree]);
+  var handleDragStart = useCallback(function (event) {
+    event.stopPropagation();
+    if (!tree.props.draggable) {
+      return;
     }
-    return expanded ? ICON_OPEN : ICON_CLOSE;
-  }, [memoizedIsLeaf, expanded]);
-
-  // ==================== Render: Title + Icon ====================
-  var iconNode = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement("span", {
-      className: classNames(treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemIcon, "".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__").concat(nodeState || 'docu'), _defineProperty({}, "".concat(context.prefixCls, "-icon_loading"), loading)),
-      style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+    dragEvents.treeNodeDragStart({
+      event: event,
+      treeNode: props
     });
-  }, [context.prefixCls, nodeState, loading]);
-
-  // =================== Drop Indicator ===================
-  var dropIndicatorNode = React.useMemo(function () {
-    var rootDraggable = Boolean(context.draggable);
-    // allowDrop is calculated in Tree.tsx, there is no need for calc it here
-    var showIndicator = !props.disabled && rootDraggable && context.dragOverNodeKey === eventKey;
-    if (!showIndicator) {
-      return null;
+  }, [tree.props.draggable, dragEvents, props]);
+  var handleDragOver = useCallback(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    if (!tree.props.draggable) {
+      return;
     }
-    return context.dropIndicatorRender({
-      dropPosition: context.dropPosition,
-      dropLevelOffset: context.dropLevelOffset,
-      indent: context.indent,
-      prefixCls: context.prefixCls,
-      direction: context.direction
+    dragEvents.treeNodeDragOver({
+      event: event,
+      treeNode: {
+        $el: nodeRef.current,
+        node: props.node
+      }
     });
-  }, [context.dropPosition, context.dropLevelOffset, context.indent, context.prefixCls, context.direction, context.draggable, context.dragOverNodeKey, context.dropIndicatorRender]);
-
-  // Icon + Title
-  var selectorNode = React.useMemo(function () {
-    var _props$title = props.title,
-      title = _props$title === void 0 ? defaultTitle : _props$title;
-    var wrapClass = "".concat(context.prefixCls, "-node-content-wrapper");
-
-    // Icon - Still show loading icon when loading without showIcon
-    var $icon;
-    if (context.showIcon) {
-      var currentIcon = props.icon || context.icon;
-      $icon = currentIcon ? /*#__PURE__*/React.createElement("span", {
-        className: classNames(treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemIcon, "".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__customize")),
-        style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
-      }, typeof currentIcon === 'function' ? currentIcon(props) : currentIcon) : iconNode;
-    } else if (context.loadData && loading) {
-      $icon = iconNode;
-    }
-
-    // Title
-    var titleNode;
-    if (typeof title === 'function') {
-      titleNode = title(data);
-    } else if (context.titleRender) {
-      titleNode = context.titleRender(data);
-    } else {
-      titleNode = title;
+  }, [tree.props.draggable, dragEvents, props.node]);
+  var handleDrop = useCallback(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }, []);
+  var handleDragEnd = useCallback(function (event) {
+    event.stopPropagation();
+    if (!tree.props.draggable) {
+      return;
     }
-    return /*#__PURE__*/React.createElement("span", {
-      ref: selectHandleRef,
-      title: typeof title === 'string' ? title : '',
-      className: classNames(wrapClass, "".concat(wrapClass, "-").concat(nodeState || 'normal'), _defineProperty({}, "".concat(context.prefixCls, "-node-selected"), !isDisabled && (selected || dragNodeHighlight))),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onContextMenu: onContextMenu,
-      onClick: onSelectorClick,
-      onDoubleClick: onSelectorDoubleClick
-    }, $icon, /*#__PURE__*/React.createElement("span", {
-      className: classNames("".concat(context.prefixCls, "-title"), treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemTitle),
-      style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
-    }, titleNode), dropIndicatorNode);
-  }, [context.prefixCls, context.showIcon, props, context.icon, iconNode, context.titleRender, data, nodeState, onMouseEnter, onMouseLeave, onContextMenu, onSelectorClick, onSelectorDoubleClick]);
-  var dataOrAriaAttributeProps = pickAttrs(otherProps, {
-    aria: true,
-    data: true
+    dragEvents.treeNodeDragEnd(event);
+    tree.forceUpdate();
+  }, [tree, dragEvents]);
+  useImperativeHandle(instanceRef, function () {
+    return {
+      handleExpandIconClick: handleExpandIconClick
+    };
   });
-  var _ref3 = getEntity(context.keyEntities, eventKey) || {},
-    level = _ref3.level;
-  var isEndNode = isEnd[isEnd.length - 1];
-  var draggableWithoutDisabled = !isDisabled && isDraggable;
-  var dragging = context.draggingNodeKey === eventKey;
-  var ariaSelected = selectable !== undefined ? {
-    'aria-selected': !!selectable
-  } : undefined;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: domRef,
+  var contentPaddingLeft = useMemo(function () {
+    var _props$node11;
+    return "".concat((((_props$node11 = props.node) === null || _props$node11 === void 0 ? void 0 : _props$node11.level) - 1) * tree.props.indent, "px");
+  }, [(_props$node12 = props.node) === null || _props$node12 === void 0 ? void 0 : _props$node12.level, tree.props.indent]);
+  return /*#__PURE__*/React.createElement(TreeNodeExpandContext.Provider, {
+    value: {
+      parentNodeMap: parentNodeMap
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: nodeRef,
+    className: classNames([ns.b('node'), ns.is({
+      expanded: expanded,
+      current: (_props$node13 = props.node) === null || _props$node13 === void 0 ? void 0 : _props$node13.isCurrent,
+      hidden: !((_props$node14 = props.node) !== null && _props$node14 !== void 0 && _props$node14.visible),
+      focusable: !((_props$node15 = props.node) !== null && _props$node15 !== void 0 && _props$node15.disabled),
+      checked: !((_props$node16 = props.node) !== null && _props$node16 !== void 0 && _props$node16.disabled) && ((_props$node17 = props.node) === null || _props$node17 === void 0 ? void 0 : _props$node17.checked)
+    }), getNodeClass(props.node)]),
     role: "treeitem",
-    "aria-expanded": isLeaf ? undefined : expanded,
-    className: classNames(className, "".concat(context.prefixCls, "-treenode"), treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.item, (_classNames4 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, "".concat(context.prefixCls, "-treenode-disabled"), isDisabled), "".concat(context.prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(context.prefixCls, "-treenode-checkbox-checked"), checked), "".concat(context.prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(context.prefixCls, "-treenode-selected"), selected), "".concat(context.prefixCls, "-treenode-loading"), loading), "".concat(context.prefixCls, "-treenode-active"), active), "".concat(context.prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(context.prefixCls, "-treenode-draggable"), isDraggable), "dragging", dragging), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, 'drop-target', context.dropTargetKey === eventKey), 'drop-container', context.dropContainerKey === eventKey), 'drag-over', !isDisabled && dragOver), 'drag-over-gap-top', !isDisabled && dragOverGapTop), 'drag-over-gap-bottom', !isDisabled && dragOverGapBottom), 'filter-node', (_context$filterTreeNo = context.filterTreeNode) === null || _context$filterTreeNo === void 0 ? void 0 : _context$filterTreeNo.call(context, convertNodePropsToEventData(props))), "".concat(context.prefixCls, "-treenode-leaf"), memoizedIsLeaf))),
-    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.item)
-    // Draggable config
-    ,
-    draggable: draggableWithoutDisabled,
-    onDragStart: draggableWithoutDisabled ? onDragStart : undefined
-    // Drop config
-    ,
-    onDragEnter: isDraggable ? onDragEnter : undefined,
-    onDragOver: isDraggable ? onDragOver : undefined,
-    onDragLeave: isDraggable ? onDragLeave : undefined,
-    onDrop: isDraggable ? onDrop : undefined,
-    onDragEnd: isDraggable ? onDragEnd : undefined,
-    onMouseMove: onMouseMove
-  }, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
-    prefixCls: context.prefixCls,
-    level: level,
-    isStart: isStart,
-    isEnd: isEnd
-  }), dragHandlerNode, renderSwitcher(), checkboxNode, selectorNode);
+    tabIndex: -1,
+    "aria-expanded": expanded,
+    "aria-disabled": (_props$node18 = props.node) === null || _props$node18 === void 0 ? void 0 : _props$node18.disabled,
+    "aria-checked": (_props$node19 = props.node) === null || _props$node19 === void 0 ? void 0 : _props$node19.checked,
+    draggable: tree.props.draggable,
+    "data-key": getNodeKey(props.node),
+    onClick: function onClick(e) {
+      return handleClick(e);
+    },
+    onContextMenu: handleContextMenu,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ns.be('node', 'content'),
+    style: {
+      paddingLeft: contentPaddingLeft
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: tree.props.icon || 'angle-right',
+    prefix: "far",
+    className: classNames([ns.be('node', 'expand-icon'), ns.is({
+      leaf: (_props$node20 = props.node) === null || _props$node20 === void 0 ? void 0 : _props$node20.isLeaf
+    }), {
+      expanded: !((_props$node21 = props.node) !== null && _props$node21 !== void 0 && _props$node21.isLeaf) && expanded
+    }]),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleExpandIconClick();
+    }
+  }), props.showCheckbox && /*#__PURE__*/React.createElement(Checkbox, {
+    checked: (_props$node22 = props.node) === null || _props$node22 === void 0 ? void 0 : _props$node22.checked,
+    indeterminate: (_props$node23 = props.node) === null || _props$node23 === void 0 ? void 0 : _props$node23.indeterminate,
+    disabled: !!((_props$node24 = props.node) !== null && _props$node24 !== void 0 && _props$node24.disabled),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onChange: handleCheckChange
+  }), ((_props$node25 = props.node) === null || _props$node25 === void 0 ? void 0 : _props$node25.loading) && /*#__PURE__*/React.createElement("span", {
+    className: classNames([ns.be('node', 'loading-icon'), ns.is('loading')])
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "loader",
+    prefix: "far",
+    spin: true
+  })), /*#__PURE__*/React.createElement(TreeNodeContent, {
+    node: props.node,
+    renderContent: props.renderContent
+  })), /*#__PURE__*/React.createElement(Transition, {
+    nodeRef: transitionNodeRef,
+    name: ns.b('menu-collapse', false),
+    duration: 10,
+    visible: expanded && childNodeRendered,
+    beforeEnter: function beforeEnter() {
+      return _beforeEnter(transitionNodeRef);
+    },
+    onEnter: function onEnter() {
+      return _onEnter(transitionNodeRef);
+    },
+    afterEnter: function afterEnter() {
+      return _afterEnter(transitionNodeRef);
+    },
+    beforeLeave: function beforeLeave() {
+      return _beforeLeave(transitionNodeRef);
+    },
+    onLeave: function onLeave() {
+      return _onLeave(transitionNodeRef);
+    },
+    afterLeave: function afterLeave() {
+      return _afterLeave(transitionNodeRef);
+    }
+  }, !props.renderAfterExpand || childNodeRendered ? /*#__PURE__*/React.createElement("div", {
+    ref: transitionNodeRef,
+    className: classNames(ns.be('node', 'children'), ns.b('collapse-transition', false)),
+    role: "group",
+    "aria-expanded": expanded,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, (_props$node26 = props.node) === null || _props$node26 === void 0 || (_props$node26 = _props$node26.childNodes) === null || _props$node26 === void 0 ? void 0 : _props$node26.map(function (child) {
+    return /*#__PURE__*/React.createElement(TreeNode, {
+      key: getNodeKey(child),
+      node: child,
+      props: props.props,
+      accordion: props.accordion,
+      renderContent: props.renderContent,
+      renderAfterExpand: props.renderAfterExpand,
+      showCheckbox: props.showCheckbox,
+      onNodeExpand: handleChildNodeExpand
+    });
+  })) : null)));
 };
-TreeNode.isTreeNode = 1;
-if (process.env.NODE_ENV !== 'production') {
-  TreeNode.displayName = 'TreeNode';
-}
+TreeNode.displayName = 'ElTreeNode';
 export default TreeNode;