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

package/dist/Tree/TreeNode.js

@@ -1,249 +1,279 @@
-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 _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); }
+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; }
+/* 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 = '---';
+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];
 
-// src/Tree/TreeNode.tsx
-var TreeNode_exports = {};
-__export(TreeNode_exports, {
-  default: () => TreeNode_default
-});
-module.exports = __toCommonJS(TreeNode_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_Indent = __toESM(require("./Indent"));
-var import_contextTypes = require("./contextTypes");
-var import_keyUtil = __toESM(require("./utils/keyUtil"));
-var import_pickAttrs = __toESM(require("./utils/pickAttrs"));
-var import_treeUtil = require("./utils/treeUtil");
-var ICON_OPEN = "open";
-var ICON_CLOSE = "close";
-var defaultTitle = "---";
-var TreeNode = (props) => {
-  var _a, _b;
-  const {
-    eventKey,
-    className,
-    style,
-    dragOver,
-    dragOverGapTop,
-    dragOverGapBottom,
-    isLeaf,
-    isStart,
-    isEnd,
-    expanded,
-    selected,
-    checked,
-    halfChecked,
-    loading,
-    domRef,
-    active,
-    data,
-    onMouseMove,
-    selectable,
-    ...otherProps
-  } = props;
-  const context = import_react.default.useContext(import_contextTypes.TreeContext);
-  const { classNames: treeClassNames, styles } = context || {};
-  const unstableContext = import_react.default.useContext(import_contextTypes.UnstableContext);
-  const selectHandleRef = import_react.default.useRef(null);
-  const [dragNodeHighlight, setDragNodeHighlight] = import_react.default.useState(false);
-  const isDisabled = !!(context.disabled || props.disabled || ((_a = unstableContext.nodeDisabled) == null ? void 0 : _a.call(unstableContext, data)));
-  const isCheckable = import_react.default.useMemo(() => {
+  // ======= 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]);
-  const onSelect = (e) => {
+
+  // ======= Event Handlers: Selection and Check =======
+  var onSelect = function onSelect(e) {
     if (isDisabled) {
       return;
     }
-    context.onNodeSelect(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+    context.onNodeSelect(e, convertNodePropsToEventData(props));
   };
-  const onCheck = (e) => {
+  var onCheck = function onCheck(e) {
     if (isDisabled) {
       return;
     }
     if (!isCheckable || props.disableCheckbox) {
       return;
     }
-    context.onNodeCheck(e, (0, import_treeUtil.convertNodePropsToEventData)(props), !checked);
+    context.onNodeCheck(e, convertNodePropsToEventData(props), !checked);
   };
-  const isSelectable = import_react.default.useMemo(() => {
-    if (typeof selectable === "boolean") {
+
+  // ======= State: Selectable Check =======
+  var isSelectable = React.useMemo(function () {
+    // Ignore when selectable is undefined or null
+    if (typeof selectable === 'boolean') {
       return selectable;
     }
     return context.selectable;
   }, [selectable, context.selectable]);
-  const onSelectorClick = (e) => {
-    context.onNodeClick(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  var onSelectorClick = function onSelectorClick(e) {
+    // Click trigger before select/check operation
+    context.onNodeClick(e, convertNodePropsToEventData(props));
     if (isSelectable) {
       onSelect(e);
     } else {
       onCheck(e);
     }
   };
-  const onSelectorDoubleClick = (e) => {
-    context.onNodeDoubleClick(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  var onSelectorDoubleClick = function onSelectorDoubleClick(e) {
+    context.onNodeDoubleClick(e, convertNodePropsToEventData(props));
   };
-  const onMouseEnter = (e) => {
-    context.onNodeMouseEnter(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  var onMouseEnter = function onMouseEnter(e) {
+    context.onNodeMouseEnter(e, convertNodePropsToEventData(props));
   };
-  const onMouseLeave = (e) => {
-    context.onNodeMouseLeave(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  var onMouseLeave = function onMouseLeave(e) {
+    context.onNodeMouseLeave(e, convertNodePropsToEventData(props));
   };
-  const onContextMenu = (e) => {
-    context.onNodeContextMenu(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  var onContextMenu = function onContextMenu(e) {
+    context.onNodeContextMenu(e, convertNodePropsToEventData(props));
   };
-  const isDraggable = import_react.default.useMemo(() => {
+
+  // ======= Drag: Drag Enabled =======
+  var isDraggable = React.useMemo(function () {
     return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
   }, [context.draggable, data]);
-  const onDragStart = (e) => {
+
+  // ======= Drag: Drag Event Handlers =======
+  var onDragStart = function onDragStart(e) {
     e.stopPropagation();
     setDragNodeHighlight(true);
     context.onNodeDragStart(e, props);
     try {
-      e.dataTransfer.setData("text/plain", "");
-    } catch {
+      // ie throw error
+      // firefox-need-it
+      e.dataTransfer.setData('text/plain', '');
+    } catch (_unused) {
+      // empty
     }
   };
-  const onDragEnter = (e) => {
+  var onDragEnter = function onDragEnter(e) {
     e.preventDefault();
     e.stopPropagation();
     context.onNodeDragEnter(e, props);
   };
-  const onDragOver = (e) => {
+  var onDragOver = function onDragOver(e) {
     e.preventDefault();
     e.stopPropagation();
     context.onNodeDragOver(e, props);
   };
-  const onDragLeave = (e) => {
+  var onDragLeave = function onDragLeave(e) {
     e.stopPropagation();
     context.onNodeDragLeave(e, props);
   };
-  const onDragEnd = (e) => {
+  var onDragEnd = function onDragEnd(e) {
     e.stopPropagation();
     setDragNodeHighlight(false);
     context.onNodeDragEnd(e, props);
   };
-  const onDrop = (e) => {
+  var onDrop = function onDrop(e) {
     e.preventDefault();
     e.stopPropagation();
     setDragNodeHighlight(false);
     context.onNodeDrop(e, props);
   };
-  const onExpand = (e) => {
+
+  // ======= Expand: Node Expansion =======
+  var onExpand = function onExpand(e) {
     if (loading) {
       return;
     }
-    context.onNodeExpand(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+    context.onNodeExpand(e, convertNodePropsToEventData(props));
   };
-  const hasChildren = import_react.default.useMemo(() => {
-    const { children } = (0, import_keyUtil.default)(context.keyEntities, eventKey) || {};
+
+  // ======= State: Has Children =======
+  var hasChildren = React.useMemo(function () {
+    var _ref2 = getEntity(context.keyEntities, eventKey) || {},
+      children = _ref2.children;
     return Boolean((children || []).length);
   }, [context.keyEntities, eventKey]);
-  const memoizedIsLeaf = import_react.default.useMemo(() => {
+
+  // ======= State: Leaf Check =======
+  var memoizedIsLeaf = React.useMemo(function () {
     if (isLeaf === false) {
       return false;
     }
     return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
   }, [isLeaf, context.loadData, hasChildren, props.loaded]);
-  import_react.default.useEffect(() => {
+
+  // ============== Effect ==============
+  React.useEffect(function () {
+    // Load data to avoid default expanded tree without data
     if (loading) {
       return;
     }
-    if (typeof context.loadData === "function" && expanded && !memoizedIsLeaf && !props.loaded) {
-      context.onNodeLoad((0, import_treeUtil.convertNodePropsToEventData)(props));
+    // 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));
     }
   }, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
-  const dragHandlerNode = import_react.default.useMemo(() => {
-    var _a2;
-    if (!((_a2 = context.draggable) == null ? void 0 : _a2.icon)) {
+
+  // ==================== 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;
     }
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${context.prefixCls}-draggable-icon` }, context.draggable.icon);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(context.prefixCls, "-draggable-icon")
+    }, context.draggable.icon);
   }, [context.draggable]);
-  const renderSwitcherIconDom = (isInternalLeaf) => {
-    const switcherIcon = props.switcherIcon || context.switcherIcon;
-    if (typeof switcherIcon === "function") {
-      return switcherIcon({ ...props, isLeaf: isInternalLeaf });
+
+  // ====================== 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
+      }));
     }
     return switcherIcon;
   };
-  const renderSwitcher = () => {
+
+  // Switcher
+  var renderSwitcher = function renderSwitcher() {
     if (memoizedIsLeaf) {
-      const switcherIconDom2 = renderSwitcherIconDom(true);
-      return switcherIconDom2 !== false ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher-noop`) }, switcherIconDom2) : null;
+      // 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;
     }
-    const switcherIconDom = renderSwitcherIconDom(false);
-    return switcherIconDom !== false ? /* @__PURE__ */ import_react.default.createElement("span", { onClick: onExpand, className: (0, import_classnames.default)(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`) }, switcherIconDom) : null;
+    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;
   };
-  const checkboxNode = import_react.default.useMemo(() => {
+
+  // ====================== Checkbox ======================
+  var checkboxNode = React.useMemo(function () {
     if (!isCheckable) {
       return null;
     }
-    const $custom = typeof isCheckable !== "boolean" ? isCheckable : null;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: (0, import_classnames.default)(`${context.prefixCls}-checkbox`, {
-          [`${context.prefixCls}-checkbox-checked`]: checked,
-          [`${context.prefixCls}-checkbox-indeterminate`]: !checked && halfChecked,
-          [`${context.prefixCls}-checkbox-disabled`]: isDisabled || props.disableCheckbox
-        }),
-        onClick: onCheck,
-        role: "checkbox",
-        "aria-checked": halfChecked ? "mixed" : checked,
-        "aria-disabled": isDisabled || props.disableCheckbox,
-        "aria-label": `Select ${typeof props.title === "string" ? props.title : "tree node"}`
-      },
-      $custom
-    );
+
+    // [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]);
-  const nodeState = import_react.default.useMemo(() => {
+
+  // ============== State: Node State (Open/Close) ==============
+  var nodeState = React.useMemo(function () {
     if (memoizedIsLeaf) {
       return null;
     }
     return expanded ? ICON_OPEN : ICON_CLOSE;
   }, [memoizedIsLeaf, expanded]);
-  const iconNode = import_react.default.useMemo(() => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: (0, import_classnames.default)(treeClassNames == null ? void 0 : treeClassNames.itemIcon, `${context.prefixCls}-iconEle`, `${context.prefixCls}-icon__${nodeState || "docu"}`, {
-          [`${context.prefixCls}-icon_loading`]: loading
-        }),
-        style: styles == null ? void 0 : styles.itemIcon
-      }
-    );
+
+  // ==================== 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
+    });
   }, [context.prefixCls, nodeState, loading]);
-  const dropIndicatorNode = import_react.default.useMemo(() => {
-    const rootDraggable = Boolean(context.draggable);
-    const showIndicator = !props.disabled && rootDraggable && context.dragOverNodeKey === eventKey;
+
+  // =================== 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;
     }
@@ -254,119 +284,88 @@ var TreeNode = (props) => {
       prefixCls: context.prefixCls,
       direction: context.direction
     });
-  }, [
-    context.dropPosition,
-    context.dropLevelOffset,
-    context.indent,
-    context.prefixCls,
-    context.direction,
-    context.draggable,
-    context.dragOverNodeKey,
-    context.dropIndicatorRender
-  ]);
-  const selectorNode = import_react.default.useMemo(() => {
-    const { title = defaultTitle } = props;
-    const wrapClass = `${context.prefixCls}-node-content-wrapper`;
-    let $icon;
+  }, [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) {
-      const currentIcon = props.icon || context.icon;
-      $icon = currentIcon ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(treeClassNames == null ? void 0 : treeClassNames.itemIcon, `${context.prefixCls}-iconEle`, `${context.prefixCls}-icon__customize`), style: styles == null ? void 0 : styles.itemIcon }, typeof currentIcon === "function" ? currentIcon(props) : currentIcon) : iconNode;
+      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;
     }
-    let titleNode;
-    if (typeof title === "function") {
+
+    // Title
+    var titleNode;
+    if (typeof title === 'function') {
       titleNode = title(data);
     } else if (context.titleRender) {
       titleNode = context.titleRender(data);
     } else {
       titleNode = title;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        ref: selectHandleRef,
-        title: typeof title === "string" ? title : "",
-        className: (0, import_classnames.default)(wrapClass, `${wrapClass}-${nodeState || "normal"}`, {
-          [`${context.prefixCls}-node-selected`]: !isDisabled && (selected || dragNodeHighlight)
-        }),
-        onMouseEnter,
-        onMouseLeave,
-        onContextMenu,
-        onClick: onSelectorClick,
-        onDoubleClick: onSelectorDoubleClick
-      },
-      $icon,
-      /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${context.prefixCls}-title`, treeClassNames == null ? void 0 : treeClassNames.itemTitle), style: styles == null ? void 0 : styles.itemTitle }, titleNode),
-      dropIndicatorNode
-    );
-  }, [
-    context.prefixCls,
-    context.showIcon,
-    props,
-    context.icon,
-    iconNode,
-    context.titleRender,
-    data,
-    nodeState,
-    onMouseEnter,
-    onMouseLeave,
-    onContextMenu,
-    onSelectorClick,
-    onSelectorDoubleClick
-  ]);
-  const dataOrAriaAttributeProps = (0, import_pickAttrs.default)(otherProps, { aria: true, data: true });
-  const { level } = (0, import_keyUtil.default)(context.keyEntities, eventKey) || {};
-  const isEndNode = isEnd[isEnd.length - 1];
-  const draggableWithoutDisabled = !isDisabled && isDraggable;
-  const dragging = context.draggingNodeKey === eventKey;
-  const ariaSelected = selectable !== void 0 ? { "aria-selected": !!selectable } : void 0;
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref: domRef,
-      role: "treeitem",
-      "aria-expanded": isLeaf ? void 0 : expanded,
-      className: (0, import_classnames.default)(className, `${context.prefixCls}-treenode`, treeClassNames == null ? void 0 : treeClassNames.item, {
-        [`${context.prefixCls}-treenode-disabled`]: isDisabled,
-        [`${context.prefixCls}-treenode-switcher-${expanded ? "open" : "close"}`]: !isLeaf,
-        [`${context.prefixCls}-treenode-checkbox-checked`]: checked,
-        [`${context.prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
-        [`${context.prefixCls}-treenode-selected`]: selected,
-        [`${context.prefixCls}-treenode-loading`]: loading,
-        [`${context.prefixCls}-treenode-active`]: active,
-        [`${context.prefixCls}-treenode-leaf-last`]: isEndNode,
-        [`${context.prefixCls}-treenode-draggable`]: isDraggable,
-        dragging,
-        "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": (_b = context.filterTreeNode) == null ? void 0 : _b.call(context, (0, import_treeUtil.convertNodePropsToEventData)(props)),
-        [`${context.prefixCls}-treenode-leaf`]: memoizedIsLeaf
-      }),
-      style: { ...style, ...styles == null ? void 0 : styles.item },
-      draggable: draggableWithoutDisabled,
-      onDragStart: draggableWithoutDisabled ? onDragStart : void 0,
-      onDragEnter: isDraggable ? onDragEnter : void 0,
-      onDragOver: isDraggable ? onDragOver : void 0,
-      onDragLeave: isDraggable ? onDragLeave : void 0,
-      onDrop: isDraggable ? onDrop : void 0,
-      onDragEnd: isDraggable ? onDragEnd : void 0,
-      onMouseMove,
-      ...ariaSelected,
-      ...dataOrAriaAttributeProps
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_Indent.default, { prefixCls: context.prefixCls, level, isStart, isEnd }),
-    dragHandlerNode,
-    renderSwitcher(),
-    checkboxNode,
-    selectorNode
-  );
+    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
+  });
+  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,
+    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);
 };
 TreeNode.isTreeNode = 1;
-if (process.env.NODE_ENV !== "production") {
-  TreeNode.displayName = "TreeNode";
+if (process.env.NODE_ENV !== 'production') {
+  TreeNode.displayName = 'TreeNode';
 }
-var TreeNode_default = TreeNode;
+export default TreeNode;