@qsxy/element-plus-react 1.0.0-next.10 → 1.0.0-next.11

package/dist/Tree/RCTree.js

@@ -1,57 +1,57 @@
-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);
-
-// src/Tree/RCTree.tsx
-var RCTree_exports = {};
-__export(RCTree_exports, {
-  default: () => RCTree_default
-});
-module.exports = __toCommonJS(RCTree_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_KeyCode = __toESM(require("rc-util/lib/KeyCode"));
-var import_pickAttrs = __toESM(require("rc-util/lib/pickAttrs"));
-var import_warning = __toESM(require("rc-util/lib/warning"));
-var React = __toESM(require("react"));
-var import_DropIndicator = __toESM(require("./DropIndicator"));
-var import_NodeList = __toESM(require("./NodeList"));
-var import_TreeNode = __toESM(require("./TreeNode"));
-var import_contextTypes = require("./contextTypes");
-var import_util = require("./util");
-var import_conductUtil = require("./utils/conductUtil");
-var import_keyUtil = __toESM(require("./utils/keyUtil"));
-var import_treeUtil = require("./utils/treeUtil");
+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 _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); }
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+// TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html
+// Fully accessibility support
+
+import classNames from 'classnames';
+import KeyCode from 'rc-util/lib/KeyCode';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import DropIndicator from "./DropIndicator";
+import NodeList, { MOTION_KEY, MotionEntity } from "./NodeList";
+import TreeNode from "./TreeNode";
+import { TreeContext } from "./contextTypes";
+import { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, parseCheckedKeys, posToArr } from "./util";
+import { conductCheck } from "./utils/conductUtil";
+import getEntity from "./utils/keyUtil";
+import { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, warningWithoutKey } from "./utils/treeUtil";
 var MAX_RETRY_TIMES = 10;
-var Tree = class extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.destroyed = false;
-    this.loadingRetryTimes = {};
-    this.state = {
+var Tree = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tree, _React$Component);
+  var _super = _createSuper(Tree);
+  function Tree() {
+    var _this;
+    _classCallCheck(this, Tree);
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(_args));
+    _defineProperty(_assertThisInitialized(_this), "destroyed", false);
+    _defineProperty(_assertThisInitialized(_this), "delayedDragEnterLogic", void 0);
+    _defineProperty(_assertThisInitialized(_this), "loadingRetryTimes", {});
+    _defineProperty(_assertThisInitialized(_this), "state", {
       keyEntities: {},
       indent: null,
       selectedKeys: [],
@@ -86,217 +86,265 @@ var Tree = class extends React.Component {
       activeKey: null,
       listChanging: false,
       prevProps: null,
-      fieldNames: (0, import_treeUtil.fillFieldNames)()
-    };
-    this.dragStartMousePosition = null;
-    this.dragNodeProps = null;
-    this.currentMouseOverDroppableNodeKey = null;
-    this.listRef = React.createRef();
-    this.onNodeDragStart = (event, nodeProps) => {
-      const { expandedKeys, keyEntities } = this.state;
-      const { onDragStart } = this.props;
-      const { eventKey } = nodeProps;
-      this.dragNodeProps = nodeProps;
-      this.dragStartMousePosition = {
+      fieldNames: fillFieldNames()
+    });
+    _defineProperty(_assertThisInitialized(_this), "dragStartMousePosition", null);
+    _defineProperty(_assertThisInitialized(_this), "dragNodeProps", null);
+    _defineProperty(_assertThisInitialized(_this), "currentMouseOverDroppableNodeKey", null);
+    _defineProperty(_assertThisInitialized(_this), "listRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "onNodeDragStart", function (event, nodeProps) {
+      var _this$state = _this.state,
+        expandedKeys = _this$state.expandedKeys,
+        keyEntities = _this$state.keyEntities;
+      var onDragStart = _this.props.onDragStart;
+      var eventKey = nodeProps.eventKey;
+      _this.dragNodeProps = nodeProps;
+      _this.dragStartMousePosition = {
         x: event.clientX,
         y: event.clientY
       };
-      const newExpandedKeys = (0, import_util.arrDel)(expandedKeys, eventKey);
-      this.setState({
+      var newExpandedKeys = arrDel(expandedKeys, eventKey);
+      _this.setState({
         draggingNodeKey: eventKey,
-        dragChildrenKeys: (0, import_util.getDragChildrenKeys)(eventKey, keyEntities),
-        indent: this.listRef.current.getIndentWidth()
+        dragChildrenKeys: getDragChildrenKeys(eventKey, keyEntities),
+        indent: _this.listRef.current.getIndentWidth()
       });
-      this.setExpandedKeys(newExpandedKeys);
-      window.addEventListener("dragend", this.onWindowDragEnd);
-      onDragStart == null ? void 0 : onDragStart({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps) });
-    };
-    /**
-     * [Legacy] Select handler is smaller than node,
-     * so that this will trigger when drag enter node or select handler.
-     * This is a little tricky if customize css without padding.
-     * Better for use mouse move event to refresh drag state.
-     * But let's just keep it to avoid event trigger logic change.
+      _this.setExpandedKeys(newExpandedKeys);
+      window.addEventListener('dragend', _this.onWindowDragEnd);
+      onDragStart === null || onDragStart === void 0 || onDragStart({
+        event: event,
+        node: convertNodePropsToEventData(nodeProps)
+      });
+    });
+    /**
+     * [Legacy] Select handler is smaller than node,
+     * so that this will trigger when drag enter node or select handler.
+     * This is a little tricky if customize css without padding.
+     * Better for use mouse move event to refresh drag state.
+     * But let's just keep it to avoid event trigger logic change.
      */
-    this.onNodeDragEnter = (event, nodeProps) => {
-      const { expandedKeys, keyEntities, dragChildrenKeys, flattenNodes, indent } = this.state;
-      const { onDragEnter, onExpand, allowDrop, direction } = this.props;
-      const { pos, eventKey } = nodeProps;
-      if (this.currentMouseOverDroppableNodeKey !== eventKey) {
-        this.currentMouseOverDroppableNodeKey = eventKey;
-      }
-      if (!this.dragNodeProps) {
-        this.resetDragState();
+    _defineProperty(_assertThisInitialized(_this), "onNodeDragEnter", function (event, nodeProps) {
+      var _this$state2 = _this.state,
+        expandedKeys = _this$state2.expandedKeys,
+        keyEntities = _this$state2.keyEntities,
+        dragChildrenKeys = _this$state2.dragChildrenKeys,
+        flattenNodes = _this$state2.flattenNodes,
+        indent = _this$state2.indent;
+      var _this$props = _this.props,
+        onDragEnter = _this$props.onDragEnter,
+        onExpand = _this$props.onExpand,
+        allowDrop = _this$props.allowDrop,
+        direction = _this$props.direction;
+      var pos = nodeProps.pos,
+        eventKey = nodeProps.eventKey;
+
+      // record the key of node which is latest entered, used in dragleave event.
+      if (_this.currentMouseOverDroppableNodeKey !== eventKey) {
+        _this.currentMouseOverDroppableNodeKey = eventKey;
+      }
+      if (!_this.dragNodeProps) {
+        _this.resetDragState();
         return;
       }
-      const { dropPosition, dropLevelOffset, dropTargetKey, dropContainerKey, dropTargetPos, dropAllowed, dragOverNodeKey } = (0, import_util.calcDropPosition)(
-        event,
-        this.dragNodeProps,
-        nodeProps,
-        indent,
-        this.dragStartMousePosition,
-        allowDrop,
-        flattenNodes,
-        keyEntities,
-        expandedKeys,
-        direction
-      );
+      var _calcDropPosition = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
+        dropPosition = _calcDropPosition.dropPosition,
+        dropLevelOffset = _calcDropPosition.dropLevelOffset,
+        dropTargetKey = _calcDropPosition.dropTargetKey,
+        dropContainerKey = _calcDropPosition.dropContainerKey,
+        dropTargetPos = _calcDropPosition.dropTargetPos,
+        dropAllowed = _calcDropPosition.dropAllowed,
+        dragOverNodeKey = _calcDropPosition.dragOverNodeKey;
       if (
-        // don't allow drop inside its children
-        dragChildrenKeys.includes(dropTargetKey) || // don't allow drop when drop is not allowed caculated by calcDropPosition
-        !dropAllowed
-      ) {
-        this.resetDragState();
+      // don't allow drop inside its children
+      dragChildrenKeys.includes(dropTargetKey) ||
+      // don't allow drop when drop is not allowed caculated by calcDropPosition
+      !dropAllowed) {
+        _this.resetDragState();
         return;
       }
-      if (!this.delayedDragEnterLogic) {
-        this.delayedDragEnterLogic = {};
+
+      // Side effect for delay drag
+      if (!_this.delayedDragEnterLogic) {
+        _this.delayedDragEnterLogic = {};
       }
-      Object.keys(this.delayedDragEnterLogic).forEach((key) => {
-        clearTimeout(this.delayedDragEnterLogic[key]);
+      Object.keys(_this.delayedDragEnterLogic).forEach(function (key) {
+        clearTimeout(_this.delayedDragEnterLogic[key]);
       });
-      if (this.dragNodeProps.eventKey !== nodeProps.eventKey) {
+      if (_this.dragNodeProps.eventKey !== nodeProps.eventKey) {
+        // hoist expand logic here
+        // since if logic is on the bottom
+        // it will be blocked by abstract dragover node check
+        //   => if you dragenter from top, you mouse will still be consider as in the top node
         event.persist();
-        this.delayedDragEnterLogic[pos] = window.setTimeout(() => {
-          if (this.state.draggingNodeKey === null) {
+        _this.delayedDragEnterLogic[pos] = window.setTimeout(function () {
+          if (_this.state.draggingNodeKey === null) {
             return;
           }
-          let newExpandedKeys = [...expandedKeys];
-          const entity = (0, import_keyUtil.default)(keyEntities, nodeProps.eventKey);
+          var newExpandedKeys = _toConsumableArray(expandedKeys);
+          var entity = getEntity(keyEntities, nodeProps.eventKey);
           if (entity && (entity.children || []).length) {
-            newExpandedKeys = (0, import_util.arrAdd)(expandedKeys, nodeProps.eventKey);
+            newExpandedKeys = arrAdd(expandedKeys, nodeProps.eventKey);
           }
-          if (!Object.prototype.hasOwnProperty.call(this.props, "expandedKeys")) {
-            this.setExpandedKeys(newExpandedKeys);
+          if (!Object.prototype.hasOwnProperty.call(_this.props, 'expandedKeys')) {
+            _this.setExpandedKeys(newExpandedKeys);
           }
-          onExpand == null ? void 0 : onExpand(newExpandedKeys, {
-            node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps),
+          onExpand === null || onExpand === void 0 || onExpand(newExpandedKeys, {
+            node: convertNodePropsToEventData(nodeProps),
             expanded: true,
             nativeEvent: event.nativeEvent
           });
         }, 800);
       }
-      if (this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
-        this.resetDragState();
+
+      // Skip if drag node is self
+      if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        _this.resetDragState();
         return;
       }
-      this.setState({
-        dragOverNodeKey,
-        dropPosition,
-        dropLevelOffset,
-        dropTargetKey,
-        dropContainerKey,
-        dropTargetPos,
-        dropAllowed
+
+      // Update drag over node and drag state
+      _this.setState({
+        dragOverNodeKey: dragOverNodeKey,
+        dropPosition: dropPosition,
+        dropLevelOffset: dropLevelOffset,
+        dropTargetKey: dropTargetKey,
+        dropContainerKey: dropContainerKey,
+        dropTargetPos: dropTargetPos,
+        dropAllowed: dropAllowed
       });
-      onDragEnter == null ? void 0 : onDragEnter({
-        event,
-        node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps),
-        expandedKeys
+      onDragEnter === null || onDragEnter === void 0 || onDragEnter({
+        event: event,
+        node: convertNodePropsToEventData(nodeProps),
+        expandedKeys: expandedKeys
       });
-    };
-    this.onNodeDragOver = (event, nodeProps) => {
-      const { dragChildrenKeys, flattenNodes, keyEntities, expandedKeys, indent } = this.state;
-      const { onDragOver, allowDrop, direction } = this.props;
-      if (!this.dragNodeProps) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeDragOver", function (event, nodeProps) {
+      var _this$state3 = _this.state,
+        dragChildrenKeys = _this$state3.dragChildrenKeys,
+        flattenNodes = _this$state3.flattenNodes,
+        keyEntities = _this$state3.keyEntities,
+        expandedKeys = _this$state3.expandedKeys,
+        indent = _this$state3.indent;
+      var _this$props2 = _this.props,
+        onDragOver = _this$props2.onDragOver,
+        allowDrop = _this$props2.allowDrop,
+        direction = _this$props2.direction;
+      if (!_this.dragNodeProps) {
         return;
       }
-      const { dropPosition, dropLevelOffset, dropTargetKey, dropContainerKey, dropTargetPos, dropAllowed, dragOverNodeKey } = (0, import_util.calcDropPosition)(
-        event,
-        this.dragNodeProps,
-        nodeProps,
-        indent,
-        this.dragStartMousePosition,
-        allowDrop,
-        flattenNodes,
-        keyEntities,
-        expandedKeys,
-        direction
-      );
+      var _calcDropPosition2 = calcDropPosition(event, _this.dragNodeProps, nodeProps, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
+        dropPosition = _calcDropPosition2.dropPosition,
+        dropLevelOffset = _calcDropPosition2.dropLevelOffset,
+        dropTargetKey = _calcDropPosition2.dropTargetKey,
+        dropContainerKey = _calcDropPosition2.dropContainerKey,
+        dropTargetPos = _calcDropPosition2.dropTargetPos,
+        dropAllowed = _calcDropPosition2.dropAllowed,
+        dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
       if (dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) {
+        // don't allow drop inside its children
+        // don't allow drop when drop is not allowed calculated by calcDropPosition
         return;
       }
-      if (this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
-        if (!(this.state.dropPosition === null && this.state.dropLevelOffset === null && this.state.dropTargetKey === null && this.state.dropContainerKey === null && this.state.dropTargetPos === null && this.state.dropAllowed === false && this.state.dragOverNodeKey === null)) {
-          this.resetDragState();
+
+      // Update drag position
+
+      if (_this.dragNodeProps.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) {
+          _this.resetDragState();
         }
-      } else if (!(dropPosition === this.state.dropPosition && dropLevelOffset === this.state.dropLevelOffset && dropTargetKey === this.state.dropTargetKey && dropContainerKey === this.state.dropContainerKey && dropTargetPos === this.state.dropTargetPos && dropAllowed === this.state.dropAllowed && dragOverNodeKey === this.state.dragOverNodeKey)) {
-        this.setState({
-          dropPosition,
-          dropLevelOffset,
-          dropTargetKey,
-          dropContainerKey,
-          dropTargetPos,
-          dropAllowed,
-          dragOverNodeKey
+      } else if (!(dropPosition === _this.state.dropPosition && dropLevelOffset === _this.state.dropLevelOffset && dropTargetKey === _this.state.dropTargetKey && dropContainerKey === _this.state.dropContainerKey && dropTargetPos === _this.state.dropTargetPos && dropAllowed === _this.state.dropAllowed && dragOverNodeKey === _this.state.dragOverNodeKey)) {
+        _this.setState({
+          dropPosition: dropPosition,
+          dropLevelOffset: dropLevelOffset,
+          dropTargetKey: dropTargetKey,
+          dropContainerKey: dropContainerKey,
+          dropTargetPos: dropTargetPos,
+          dropAllowed: dropAllowed,
+          dragOverNodeKey: dragOverNodeKey
         });
       }
-      onDragOver == null ? void 0 : onDragOver({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps) });
-    };
-    this.onNodeDragLeave = (event, nodeProps) => {
-      if (this.currentMouseOverDroppableNodeKey === nodeProps.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
-        this.resetDragState();
-        this.currentMouseOverDroppableNodeKey = null;
+      onDragOver === null || onDragOver === void 0 || onDragOver({
+        event: event,
+        node: convertNodePropsToEventData(nodeProps)
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeDragLeave", function (event, nodeProps) {
+      // if it is outside the droppable area
+      // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
+      if (_this.currentMouseOverDroppableNodeKey === nodeProps.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
+        _this.resetDragState();
+        _this.currentMouseOverDroppableNodeKey = null;
       }
-      const { onDragLeave } = this.props;
-      onDragLeave == null ? void 0 : onDragLeave({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps) });
-    };
+      var onDragLeave = _this.props.onDragLeave;
+      onDragLeave === null || onDragLeave === void 0 || onDragLeave({
+        event: event,
+        node: convertNodePropsToEventData(nodeProps)
+      });
+    });
     // since stopPropagation() is called in treeNode
     // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
-    this.onWindowDragEnd = (event) => {
-      this.onNodeDragEnd(event, null, true);
-      window.removeEventListener("dragend", this.onWindowDragEnd);
-    };
+    _defineProperty(_assertThisInitialized(_this), "onWindowDragEnd", function (event) {
+      _this.onNodeDragEnd(event, null, true);
+      window.removeEventListener('dragend', _this.onWindowDragEnd);
+    });
     // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
-    this.onNodeDragEnd = (event, nodeProps) => {
-      const { onDragEnd } = this.props;
-      this.setState({
+    _defineProperty(_assertThisInitialized(_this), "onNodeDragEnd", function (event, nodeProps) {
+      var onDragEnd = _this.props.onDragEnd;
+      _this.setState({
         dragOverNodeKey: null
       });
-      this.cleanDragState();
-      onDragEnd == null ? void 0 : onDragEnd({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(nodeProps) });
-      this.dragNodeProps = null;
-      window.removeEventListener("dragend", this.onWindowDragEnd);
-    };
-    this.onNodeDrop = (event, _, outsideTree = false) => {
-      var _a;
-      const { dragChildrenKeys, dropPosition, dropTargetKey, dropTargetPos, dropAllowed } = this.state;
+      _this.cleanDragState();
+      onDragEnd === null || onDragEnd === void 0 || onDragEnd({
+        event: event,
+        node: convertNodePropsToEventData(nodeProps)
+      });
+      _this.dragNodeProps = null;
+      window.removeEventListener('dragend', _this.onWindowDragEnd);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeDrop", function (event, _) {
+      var _this$getActiveItem;
+      var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var _this$state4 = _this.state,
+        dragChildrenKeys = _this$state4.dragChildrenKeys,
+        dropPosition = _this$state4.dropPosition,
+        dropTargetKey = _this$state4.dropTargetKey,
+        dropTargetPos = _this$state4.dropTargetPos,
+        dropAllowed = _this$state4.dropAllowed;
       if (!dropAllowed) {
         return;
       }
-      const { onDrop } = this.props;
-      this.setState({
+      var onDrop = _this.props.onDrop;
+      _this.setState({
         dragOverNodeKey: null
       });
-      this.cleanDragState();
+      _this.cleanDragState();
       if (dropTargetKey === null) {
         return;
       }
-      const abstractDropNodeProps = {
-        ...(0, import_treeUtil.getTreeNodeProps)(dropTargetKey, this.getTreeNodeRequiredProps()),
-        active: ((_a = this.getActiveItem()) == null ? void 0 : _a.key) === dropTargetKey,
-        data: (0, import_keyUtil.default)(this.state.keyEntities, dropTargetKey).node
-      };
-      const dropToChild = dragChildrenKeys.includes(dropTargetKey);
-      (0, import_warning.default)(!dropToChild, "Can not drop to dragNodes children node. This is a bug of rc-tree. Please report an issue.");
-      const posArr = (0, import_util.posToArr)(dropTargetPos);
-      const dropResult = {
-        event,
-        node: (0, import_treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
-        dragNode: this.dragNodeProps ? (0, import_treeUtil.convertNodePropsToEventData)(this.dragNodeProps) : null,
-        dragNodesKeys: [this.dragNodeProps.eventKey].concat(dragChildrenKeys),
+      var abstractDropNodeProps = _objectSpread(_objectSpread({}, getTreeNodeProps(dropTargetKey, _this.getTreeNodeRequiredProps())), {}, {
+        active: ((_this$getActiveItem = _this.getActiveItem()) === null || _this$getActiveItem === void 0 ? void 0 : _this$getActiveItem.key) === dropTargetKey,
+        data: getEntity(_this.state.keyEntities, dropTargetKey).node
+      });
+      var dropToChild = dragChildrenKeys.includes(dropTargetKey);
+      warning(!dropToChild, 'Can not drop to dragNodes children node. This is a bug of rc-tree. Please report an issue.');
+      var posArr = posToArr(dropTargetPos);
+      var dropResult = {
+        event: event,
+        node: convertNodePropsToEventData(abstractDropNodeProps),
+        dragNode: _this.dragNodeProps ? convertNodePropsToEventData(_this.dragNodeProps) : null,
+        dragNodesKeys: [_this.dragNodeProps.eventKey].concat(dragChildrenKeys),
         dropToGap: dropPosition !== 0,
         dropPosition: dropPosition + Number(posArr[posArr.length - 1])
       };
       if (!outsideTree) {
-        onDrop == null ? void 0 : onDrop(dropResult);
+        onDrop === null || onDrop === void 0 || onDrop(dropResult);
       }
-      this.dragNodeProps = null;
-    };
-    this.cleanDragState = () => {
-      const { draggingNodeKey } = this.state;
+      _this.dragNodeProps = null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "cleanDragState", function () {
+      var draggingNodeKey = _this.state.draggingNodeKey;
       if (draggingNodeKey !== null) {
-        this.setState({
+        _this.setState({
           draggingNodeKey: null,
           dropPosition: null,
           dropContainerKey: null,
@@ -306,186 +354,292 @@ var Tree = class extends React.Component {
           dragOverNodeKey: null
         });
       }
-      this.dragStartMousePosition = null;
-      this.currentMouseOverDroppableNodeKey = null;
-    };
-    this.triggerExpandActionExpand = (e, treeNode) => {
-      const { expandedKeys, flattenNodes } = this.state;
-      const { expanded, key, isLeaf } = treeNode;
+      _this.dragStartMousePosition = null;
+      _this.currentMouseOverDroppableNodeKey = null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "triggerExpandActionExpand", function (e, treeNode) {
+      var _this$state5 = _this.state,
+        expandedKeys = _this$state5.expandedKeys,
+        flattenNodes = _this$state5.flattenNodes;
+      var expanded = treeNode.expanded,
+        key = treeNode.key,
+        isLeaf = treeNode.isLeaf;
       if (isLeaf || e.shiftKey || e.metaKey || e.ctrlKey) {
         return;
       }
-      const node = flattenNodes.filter((nodeItem) => nodeItem.key === key)[0];
-      const eventNode = (0, import_treeUtil.convertNodePropsToEventData)({
-        ...(0, import_treeUtil.getTreeNodeProps)(key, this.getTreeNodeRequiredProps()),
+      var node = flattenNodes.filter(function (nodeItem) {
+        return nodeItem.key === key;
+      })[0];
+      var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(key, _this.getTreeNodeRequiredProps())), {}, {
         data: node.data
-      });
-      this.setExpandedKeys(expanded ? (0, import_util.arrDel)(expandedKeys, key) : (0, import_util.arrAdd)(expandedKeys, key));
-      this.onNodeExpand(e, eventNode);
-    };
-    this.onNodeClick = (e, treeNode) => {
-      const { onClick, expandAction } = this.props;
-      if (expandAction === "click") {
-        this.triggerExpandActionExpand(e, treeNode);
-      }
-      onClick == null ? void 0 : onClick(e, treeNode);
-    };
-    this.onNodeDoubleClick = (e, treeNode) => {
-      const { onDoubleClick, expandAction } = this.props;
-      if (expandAction === "doubleClick") {
-        this.triggerExpandActionExpand(e, treeNode);
-      }
-      onDoubleClick == null ? void 0 : onDoubleClick(e, treeNode);
-    };
-    this.onNodeSelect = (e, treeNode) => {
-      let { selectedKeys } = this.state;
-      const { keyEntities, fieldNames } = this.state;
-      const { onSelect, multiple } = this.props;
-      const { selected } = treeNode;
-      const key = treeNode[fieldNames.key];
-      const targetSelected = !selected;
+      }));
+      _this.setExpandedKeys(expanded ? arrDel(expandedKeys, key) : arrAdd(expandedKeys, key));
+      _this.onNodeExpand(e, eventNode);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeClick", function (e, treeNode) {
+      var _this$props3 = _this.props,
+        onClick = _this$props3.onClick,
+        expandAction = _this$props3.expandAction;
+      if (expandAction === 'click') {
+        _this.triggerExpandActionExpand(e, treeNode);
+      }
+      onClick === null || onClick === void 0 || onClick(e, treeNode);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeDoubleClick", function (e, treeNode) {
+      var _this$props4 = _this.props,
+        onDoubleClick = _this$props4.onDoubleClick,
+        expandAction = _this$props4.expandAction;
+      if (expandAction === 'doubleClick') {
+        _this.triggerExpandActionExpand(e, treeNode);
+      }
+      onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(e, treeNode);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeSelect", function (e, treeNode) {
+      var selectedKeys = _this.state.selectedKeys;
+      var _this$state6 = _this.state,
+        keyEntities = _this$state6.keyEntities,
+        fieldNames = _this$state6.fieldNames;
+      var _this$props5 = _this.props,
+        onSelect = _this$props5.onSelect,
+        multiple = _this$props5.multiple;
+      var selected = treeNode.selected;
+      var key = treeNode[fieldNames.key];
+      var targetSelected = !selected;
+
+      // Update selected keys
       if (!targetSelected) {
-        selectedKeys = (0, import_util.arrDel)(selectedKeys, key);
+        selectedKeys = arrDel(selectedKeys, key);
       } else if (!multiple) {
         selectedKeys = [key];
       } else {
-        selectedKeys = (0, import_util.arrAdd)(selectedKeys, key);
+        selectedKeys = arrAdd(selectedKeys, key);
       }
-      const selectedNodes = selectedKeys.map((selectedKey) => {
-        const entity = (0, import_keyUtil.default)(keyEntities, selectedKey);
+
+      // [Legacy] Not found related usage in doc or upper libs
+      var selectedNodes = selectedKeys.map(function (selectedKey) {
+        var entity = getEntity(keyEntities, selectedKey);
         return entity ? entity.node : null;
       }).filter(Boolean);
-      this.setUncontrolledState({ selectedKeys });
-      onSelect == null ? void 0 : onSelect(selectedKeys, {
-        event: "select",
+      _this.setUncontrolledState({
+        selectedKeys: selectedKeys
+      });
+      onSelect === null || onSelect === void 0 || onSelect(selectedKeys, {
+        event: 'select',
         selected: targetSelected,
         node: treeNode,
-        selectedNodes,
+        selectedNodes: selectedNodes,
         nativeEvent: e.nativeEvent
       });
-    };
-    this.onNodeCheck = (e, treeNode, checked) => {
-      const { keyEntities, checkedKeys: oriCheckedKeys, halfCheckedKeys: oriHalfCheckedKeys } = this.state;
-      const { checkStrictly, onCheck } = this.props;
-      const { key } = treeNode;
-      let checkedObj;
-      const eventObj = {
-        event: "check",
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeCheck", function (e, treeNode, checked) {
+      var _this$state7 = _this.state,
+        keyEntities = _this$state7.keyEntities,
+        oriCheckedKeys = _this$state7.checkedKeys,
+        oriHalfCheckedKeys = _this$state7.halfCheckedKeys;
+      var _this$props6 = _this.props,
+        checkStrictly = _this$props6.checkStrictly,
+        onCheck = _this$props6.onCheck;
+      var key = treeNode.key;
+
+      // Prepare trigger arguments
+      var checkedObj;
+      var eventObj = {
+        event: 'check',
         node: treeNode,
-        checked,
+        checked: checked,
         nativeEvent: e.nativeEvent
       };
       if (checkStrictly) {
-        const checkedKeys = checked ? (0, import_util.arrAdd)(oriCheckedKeys, key) : (0, import_util.arrDel)(oriCheckedKeys, key);
-        const halfCheckedKeys = (0, import_util.arrDel)(oriHalfCheckedKeys, key);
-        checkedObj = { checked: checkedKeys, halfChecked: halfCheckedKeys };
-        eventObj.checkedNodes = checkedKeys.map((checkedKey) => (0, import_keyUtil.default)(keyEntities, checkedKey)).filter(Boolean).map((entity) => entity.node);
-        this.setUncontrolledState({ checkedKeys });
+        var checkedKeys = checked ? arrAdd(oriCheckedKeys, key) : arrDel(oriCheckedKeys, key);
+        var halfCheckedKeys = arrDel(oriHalfCheckedKeys, key);
+        checkedObj = {
+          checked: checkedKeys,
+          halfChecked: halfCheckedKeys
+        };
+        eventObj.checkedNodes = checkedKeys.map(function (checkedKey) {
+          return getEntity(keyEntities, checkedKey);
+        }).filter(Boolean).map(function (entity) {
+          return entity.node;
+        });
+        _this.setUncontrolledState({
+          checkedKeys: checkedKeys
+        });
       } else {
-        let { checkedKeys, halfCheckedKeys } = (0, import_conductUtil.conductCheck)([...oriCheckedKeys, key], true, keyEntities);
+        // Always fill first
+        var _conductCheck = conductCheck([].concat(_toConsumableArray(oriCheckedKeys), [key]), true, keyEntities),
+          _checkedKeys = _conductCheck.checkedKeys,
+          _halfCheckedKeys = _conductCheck.halfCheckedKeys;
+
+        // If remove, we do it again to correction
         if (!checked) {
-          const keySet = new Set(checkedKeys);
+          var keySet = new Set(_checkedKeys);
           keySet.delete(key);
-          ({ checkedKeys, halfCheckedKeys } = (0, import_conductUtil.conductCheck)(Array.from(keySet), { checked: false, halfCheckedKeys }, keyEntities));
+          var _conductCheck2 = conductCheck(Array.from(keySet), {
+            checked: false,
+            halfCheckedKeys: _halfCheckedKeys
+          }, keyEntities);
+          _checkedKeys = _conductCheck2.checkedKeys;
+          _halfCheckedKeys = _conductCheck2.halfCheckedKeys;
         }
-        checkedObj = checkedKeys;
+        checkedObj = _checkedKeys;
+
+        // [Legacy] This is used for `rc-tree-select`
         eventObj.checkedNodes = [];
         eventObj.checkedNodesPositions = [];
-        eventObj.halfCheckedKeys = halfCheckedKeys;
-        checkedKeys.forEach((checkedKey) => {
-          const entity = (0, import_keyUtil.default)(keyEntities, checkedKey);
+        eventObj.halfCheckedKeys = _halfCheckedKeys;
+        _checkedKeys.forEach(function (checkedKey) {
+          var entity = getEntity(keyEntities, checkedKey);
           if (!entity) {
             return;
           }
-          const { node, pos } = entity;
+          var node = entity.node,
+            pos = entity.pos;
           eventObj.checkedNodes.push(node);
-          eventObj.checkedNodesPositions.push({ node, pos });
+          eventObj.checkedNodesPositions.push({
+            node: node,
+            pos: pos
+          });
+        });
+        _this.setUncontrolledState({
+          checkedKeys: _checkedKeys
+        }, false, {
+          halfCheckedKeys: _halfCheckedKeys
         });
-        this.setUncontrolledState({ checkedKeys }, false, { halfCheckedKeys });
-      }
-      onCheck == null ? void 0 : onCheck(checkedObj, eventObj);
-    };
-    this.onNodeLoad = (treeNode) => {
-      var _a;
-      const { key } = treeNode;
-      const { keyEntities } = this.state;
-      const entity = (0, import_keyUtil.default)(keyEntities, key);
-      if ((_a = entity == null ? void 0 : entity.children) == null ? void 0 : _a.length) {
+      }
+      onCheck === null || onCheck === void 0 || onCheck(checkedObj, eventObj);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeLoad", function (treeNode) {
+      var _entity$children;
+      var key = treeNode.key;
+      var keyEntities = _this.state.keyEntities;
+
+      // Skip if has children already
+      var entity = getEntity(keyEntities, key);
+      if (entity !== null && entity !== void 0 && (_entity$children = entity.children) !== null && _entity$children !== void 0 && _entity$children.length) {
         return;
       }
-      const loadPromise = new Promise((resolve, reject) => {
-        this.setState(({ loadedKeys = [], loadingKeys = [] }) => {
-          const { loadData, onLoad } = this.props;
+      var loadPromise = new Promise(function (resolve, reject) {
+        // We need to get the latest state of loading/loaded keys
+        _this.setState(function (_ref) {
+          var _ref$loadedKeys = _ref.loadedKeys,
+            loadedKeys = _ref$loadedKeys === void 0 ? [] : _ref$loadedKeys,
+            _ref$loadingKeys = _ref.loadingKeys,
+            loadingKeys = _ref$loadingKeys === void 0 ? [] : _ref$loadingKeys;
+          var _this$props7 = _this.props,
+            loadData = _this$props7.loadData,
+            onLoad = _this$props7.onLoad;
           if (!loadData || loadedKeys.includes(key) || loadingKeys.includes(key)) {
             return null;
           }
-          const promise = loadData(treeNode);
-          promise.then(() => {
-            const { loadedKeys: currentLoadedKeys } = this.state;
-            const newLoadedKeys = (0, import_util.arrAdd)(currentLoadedKeys, key);
-            onLoad == null ? void 0 : onLoad(newLoadedKeys, {
-              event: "load",
+
+          // Process load data
+          var promise = loadData(treeNode);
+          promise.then(function () {
+            var currentLoadedKeys = _this.state.loadedKeys;
+            var newLoadedKeys = arrAdd(currentLoadedKeys, key);
+
+            // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
+            // https://github.com/ant-design/ant-design/issues/12464
+            onLoad === null || onLoad === void 0 || onLoad(newLoadedKeys, {
+              event: 'load',
               node: treeNode
             });
-            this.setUncontrolledState({
+            _this.setUncontrolledState({
               loadedKeys: newLoadedKeys
             });
-            this.setState((prevState) => ({
-              loadingKeys: (0, import_util.arrDel)(prevState.loadingKeys, key)
-            }));
+            _this.setState(function (prevState) {
+              return {
+                loadingKeys: arrDel(prevState.loadingKeys, key)
+              };
+            });
             resolve();
-          }).catch((e) => {
-            this.setState((prevState) => ({
-              loadingKeys: (0, import_util.arrDel)(prevState.loadingKeys, key)
-            }));
-            this.loadingRetryTimes[key] = (this.loadingRetryTimes[key] || 0) + 1;
-            if (this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
-              const { loadedKeys: currentLoadedKeys } = this.state;
-              (0, import_warning.default)(false, "Retry for `loadData` many times but still failed. No more retry.");
-              this.setUncontrolledState({
-                loadedKeys: (0, import_util.arrAdd)(currentLoadedKeys, key)
+          }).catch(function (e) {
+            _this.setState(function (prevState) {
+              return {
+                loadingKeys: arrDel(prevState.loadingKeys, key)
+              };
+            });
+
+            // If exceed max retry times, we give up retry
+            _this.loadingRetryTimes[key] = (_this.loadingRetryTimes[key] || 0) + 1;
+            if (_this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
+              var currentLoadedKeys = _this.state.loadedKeys;
+              warning(false, 'Retry for `loadData` many times but still failed. No more retry.');
+              _this.setUncontrolledState({
+                loadedKeys: arrAdd(currentLoadedKeys, key)
               });
               resolve();
             }
             reject(e);
           });
           return {
-            loadingKeys: (0, import_util.arrAdd)(loadingKeys, key)
+            loadingKeys: arrAdd(loadingKeys, key)
           };
         });
       });
-      loadPromise.catch(() => {
+
+      // Not care warning if we ignore this
+      loadPromise.catch(function () {
+        //
       });
       return loadPromise;
-    };
-    this.onNodeMouseEnter = (event, node) => {
-      const { onMouseEnter } = this.props;
-      onMouseEnter == null ? void 0 : onMouseEnter({ event, node });
-    };
-    this.onNodeMouseLeave = (event, node) => {
-      const { onMouseLeave } = this.props;
-      onMouseLeave == null ? void 0 : onMouseLeave({ event, node });
-    };
-    this.onNodeContextMenu = (event, node) => {
-      const { onRightClick } = this.props;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeMouseEnter", function (event, node) {
+      var onMouseEnter = _this.props.onMouseEnter;
+      onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({
+        event: event,
+        node: node
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeMouseLeave", function (event, node) {
+      var onMouseLeave = _this.props.onMouseLeave;
+      onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave({
+        event: event,
+        node: node
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeContextMenu", function (event, node) {
+      var onRightClick = _this.props.onRightClick;
       if (onRightClick) {
         event.preventDefault();
-        onRightClick({ event, node });
-      }
-    };
-    this.onFocus = (...args) => {
-      const { onFocus } = this.props;
-      this.setState({ focused: true });
-      onFocus == null ? void 0 : onFocus(...args);
-    };
-    this.onBlur = (...args) => {
-      const { onBlur } = this.props;
-      this.setState({ focused: false });
-      this.onActiveChange(null);
-      onBlur == null ? void 0 : onBlur(...args);
-    };
-    this.getTreeNodeRequiredProps = () => {
-      const { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities } = this.state;
+        onRightClick({
+          event: event,
+          node: node
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "onFocus", function () {
+      var onFocus = _this.props.onFocus;
+      _this.setState({
+        focused: true
+      });
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      onFocus === null || onFocus === void 0 || onFocus.apply(void 0, args);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
+      var onBlur = _this.props.onBlur;
+      _this.setState({
+        focused: false
+      });
+      _this.onActiveChange(null);
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      onBlur === null || onBlur === void 0 || onBlur.apply(void 0, args);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getTreeNodeRequiredProps", function () {
+      var _this$state8 = _this.state,
+        expandedKeys = _this$state8.expandedKeys,
+        selectedKeys = _this$state8.selectedKeys,
+        loadedKeys = _this$state8.loadedKeys,
+        loadingKeys = _this$state8.loadingKeys,
+        checkedKeys = _this$state8.checkedKeys,
+        halfCheckedKeys = _this$state8.halfCheckedKeys,
+        dragOverNodeKey = _this$state8.dragOverNodeKey,
+        dropPosition = _this$state8.dropPosition,
+        keyEntities = _this$state8.keyEntities;
       return {
         expandedKeys: expandedKeys || [],
         selectedKeys: selectedKeys || [],
@@ -493,164 +647,224 @@ var Tree = class extends React.Component {
         loadingKeys: loadingKeys || [],
         checkedKeys: checkedKeys || [],
         halfCheckedKeys: halfCheckedKeys || [],
-        dragOverNodeKey,
-        dropPosition,
-        keyEntities
+        dragOverNodeKey: dragOverNodeKey,
+        dropPosition: dropPosition,
+        keyEntities: keyEntities
       };
-    };
+    });
     // =========================== Expanded ===========================
     /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
-    this.setExpandedKeys = (expandedKeys) => {
-      const { treeData, fieldNames } = this.state;
-      const flattenNodes = (0, import_treeUtil.flattenTreeData)(treeData, expandedKeys, fieldNames);
-      this.setUncontrolledState({ expandedKeys, flattenNodes }, true);
-    };
-    this.onNodeExpand = (e, treeNode) => {
-      let { expandedKeys } = this.state;
-      const { listChanging, fieldNames } = this.state;
-      const { onExpand, loadData } = this.props;
-      const { expanded } = treeNode;
-      const key = treeNode[fieldNames.key];
+    _defineProperty(_assertThisInitialized(_this), "setExpandedKeys", function (expandedKeys) {
+      var _this$state9 = _this.state,
+        treeData = _this$state9.treeData,
+        fieldNames = _this$state9.fieldNames;
+      var flattenNodes = flattenTreeData(treeData, expandedKeys, fieldNames);
+      _this.setUncontrolledState({
+        expandedKeys: expandedKeys,
+        flattenNodes: flattenNodes
+      }, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onNodeExpand", function (e, treeNode) {
+      var expandedKeys = _this.state.expandedKeys;
+      var _this$state10 = _this.state,
+        listChanging = _this$state10.listChanging,
+        fieldNames = _this$state10.fieldNames;
+      var _this$props8 = _this.props,
+        onExpand = _this$props8.onExpand,
+        loadData = _this$props8.loadData;
+      var expanded = treeNode.expanded;
+      var key = treeNode[fieldNames.key];
+
+      // Do nothing when motion is in progress
       if (listChanging) {
         return;
       }
-      const certain = expandedKeys.includes(key);
-      const targetExpanded = !expanded;
-      (0, import_warning.default)(expanded && certain || !expanded && !certain, "Expand state not sync with index check");
-      expandedKeys = targetExpanded ? (0, import_util.arrAdd)(expandedKeys, key) : (0, import_util.arrDel)(expandedKeys, key);
-      this.setExpandedKeys(expandedKeys);
-      onExpand == null ? void 0 : onExpand(expandedKeys, {
+
+      // Update selected keys
+      var certain = expandedKeys.includes(key);
+      var targetExpanded = !expanded;
+      warning(expanded && certain || !expanded && !certain, 'Expand state not sync with index check');
+      expandedKeys = targetExpanded ? arrAdd(expandedKeys, key) : arrDel(expandedKeys, key);
+      _this.setExpandedKeys(expandedKeys);
+      onExpand === null || onExpand === void 0 || onExpand(expandedKeys, {
         node: treeNode,
         expanded: targetExpanded,
         nativeEvent: e.nativeEvent
       });
+
+      // Async Load data
       if (targetExpanded && loadData) {
-        const loadPromise = this.onNodeLoad(treeNode);
+        var loadPromise = _this.onNodeLoad(treeNode);
         if (loadPromise) {
-          loadPromise.then(() => {
-            const newFlattenTreeData = (0, import_treeUtil.flattenTreeData)(this.state.treeData, expandedKeys, fieldNames);
-            this.setUncontrolledState({ flattenNodes: newFlattenTreeData });
-          }).catch(() => {
-            const { expandedKeys: currentExpandedKeys } = this.state;
-            const expandedKeysToRestore = (0, import_util.arrDel)(currentExpandedKeys, key);
-            this.setExpandedKeys(expandedKeysToRestore);
+          loadPromise.then(function () {
+            // [Legacy] Refresh logic
+            var newFlattenTreeData = flattenTreeData(_this.state.treeData, expandedKeys, fieldNames);
+            _this.setUncontrolledState({
+              flattenNodes: newFlattenTreeData
+            });
+          }).catch(function () {
+            var currentExpandedKeys = _this.state.expandedKeys;
+            var expandedKeysToRestore = arrDel(currentExpandedKeys, key);
+            _this.setExpandedKeys(expandedKeysToRestore);
           });
         }
       }
-    };
-    this.onListChangeStart = () => {
-      this.setUncontrolledState({
+    });
+    _defineProperty(_assertThisInitialized(_this), "onListChangeStart", function () {
+      _this.setUncontrolledState({
         listChanging: true
       });
-    };
-    this.onListChangeEnd = () => {
-      setTimeout(() => {
-        this.setUncontrolledState({
+    });
+    _defineProperty(_assertThisInitialized(_this), "onListChangeEnd", function () {
+      setTimeout(function () {
+        _this.setUncontrolledState({
           listChanging: false
         });
       });
-    };
+    });
     // =========================== Keyboard ===========================
-    this.onActiveChange = (newActiveKey) => {
-      const { activeKey } = this.state;
-      const { onActiveChange, itemScrollOffset = 0 } = this.props;
+    _defineProperty(_assertThisInitialized(_this), "onActiveChange", function (newActiveKey) {
+      var activeKey = _this.state.activeKey;
+      var _this$props9 = _this.props,
+        onActiveChange = _this$props9.onActiveChange,
+        _this$props9$itemScro = _this$props9.itemScrollOffset,
+        itemScrollOffset = _this$props9$itemScro === void 0 ? 0 : _this$props9$itemScro;
       if (activeKey === newActiveKey) {
         return;
       }
-      this.setState({ activeKey: newActiveKey });
+      _this.setState({
+        activeKey: newActiveKey
+      });
       if (newActiveKey !== null) {
-        this.scrollTo({ key: newActiveKey, offset: itemScrollOffset });
+        _this.scrollTo({
+          key: newActiveKey,
+          offset: itemScrollOffset
+        });
       }
-      onActiveChange == null ? void 0 : onActiveChange(newActiveKey);
-    };
-    this.getActiveItem = () => {
-      const { activeKey, flattenNodes } = this.state;
+      onActiveChange === null || onActiveChange === void 0 || onActiveChange(newActiveKey);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getActiveItem", function () {
+      var _this$state11 = _this.state,
+        activeKey = _this$state11.activeKey,
+        flattenNodes = _this$state11.flattenNodes;
       if (activeKey === null) {
         return null;
       }
-      return flattenNodes.find(({ key }) => key === activeKey) || null;
-    };
-    this.offsetActiveKey = (offset) => {
-      const { flattenNodes, activeKey } = this.state;
-      let index = flattenNodes.findIndex(({ key }) => key === activeKey);
+      return flattenNodes.find(function (_ref2) {
+        var key = _ref2.key;
+        return key === activeKey;
+      }) || null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "offsetActiveKey", function (offset) {
+      var _this$state12 = _this.state,
+        flattenNodes = _this$state12.flattenNodes,
+        activeKey = _this$state12.activeKey;
+      var index = flattenNodes.findIndex(function (_ref3) {
+        var key = _ref3.key;
+        return key === activeKey;
+      });
+
+      // Align with index
       if (index === -1 && offset < 0) {
         index = flattenNodes.length;
       }
       index = (index + offset + flattenNodes.length) % flattenNodes.length;
-      const item = flattenNodes[index];
+      var item = flattenNodes[index];
       if (item) {
-        const { key } = item;
-        this.onActiveChange(key);
+        var _key4 = item.key;
+        _this.onActiveChange(_key4);
       } else {
-        this.onActiveChange(null);
+        _this.onActiveChange(null);
       }
-    };
-    this.onKeyDown = (event) => {
-      const { activeKey, expandedKeys, checkedKeys, fieldNames } = this.state;
-      const { onKeyDown, checkable, selectable } = this.props;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
+      var _this$state13 = _this.state,
+        activeKey = _this$state13.activeKey,
+        expandedKeys = _this$state13.expandedKeys,
+        checkedKeys = _this$state13.checkedKeys,
+        fieldNames = _this$state13.fieldNames;
+      var _this$props10 = _this.props,
+        onKeyDown = _this$props10.onKeyDown,
+        checkable = _this$props10.checkable,
+        selectable = _this$props10.selectable;
+
+      // >>>>>>>>>> Direction
       switch (event.which) {
-        case import_KeyCode.default.UP: {
-          this.offsetActiveKey(-1);
-          event.preventDefault();
-          break;
-        }
-        case import_KeyCode.default.DOWN: {
-          this.offsetActiveKey(1);
-          event.preventDefault();
-          break;
-        }
+        case KeyCode.UP:
+          {
+            _this.offsetActiveKey(-1);
+            event.preventDefault();
+            break;
+          }
+        case KeyCode.DOWN:
+          {
+            _this.offsetActiveKey(1);
+            event.preventDefault();
+            break;
+          }
       }
-      const activeItem = this.getActiveItem();
+
+      // >>>>>>>>>> Expand & Selection
+      var activeItem = _this.getActiveItem();
       if (activeItem && activeItem.data) {
-        const treeNodeRequiredProps = this.getTreeNodeRequiredProps();
-        const expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;
-        const eventNode = (0, import_treeUtil.convertNodePropsToEventData)({
-          ...(0, import_treeUtil.getTreeNodeProps)(activeKey, treeNodeRequiredProps),
+        var treeNodeRequiredProps = _this.getTreeNodeRequiredProps();
+        var expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;
+        var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(activeKey, treeNodeRequiredProps)), {}, {
           data: activeItem.data,
           active: true
-        });
+        }));
         switch (event.which) {
-          case import_KeyCode.default.LEFT: {
-            if (expandable && expandedKeys.includes(activeKey)) {
-              this.onNodeExpand({}, eventNode);
-            } else if (activeItem.parent) {
-              this.onActiveChange(activeItem.parent.key);
+          // >>> Expand
+          case KeyCode.LEFT:
+            {
+              // Collapse if possible
+              if (expandable && expandedKeys.includes(activeKey)) {
+                _this.onNodeExpand({}, eventNode);
+              } else if (activeItem.parent) {
+                _this.onActiveChange(activeItem.parent.key);
+              }
+              event.preventDefault();
+              break;
             }
-            event.preventDefault();
-            break;
-          }
-          case import_KeyCode.default.RIGHT: {
-            if (expandable && !expandedKeys.includes(activeKey)) {
-              this.onNodeExpand({}, eventNode);
-            } else if (activeItem.children && activeItem.children.length) {
-              this.onActiveChange(activeItem.children[0].key);
+          case KeyCode.RIGHT:
+            {
+              // Expand if possible
+              if (expandable && !expandedKeys.includes(activeKey)) {
+                _this.onNodeExpand({}, eventNode);
+              } else if (activeItem.children && activeItem.children.length) {
+                _this.onActiveChange(activeItem.children[0].key);
+              }
+              event.preventDefault();
+              break;
             }
-            event.preventDefault();
-            break;
-          }
-          case import_KeyCode.default.ENTER:
-          case import_KeyCode.default.SPACE: {
-            if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
-              this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
-            } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
-              this.onNodeSelect({}, eventNode);
+
+          // Selection
+          case KeyCode.ENTER:
+          case KeyCode.SPACE:
+            {
+              if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
+                _this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
+              } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
+                _this.onNodeSelect({}, eventNode);
+              }
+              break;
             }
-            break;
-          }
         }
       }
-      onKeyDown == null ? void 0 : onKeyDown(event);
-    };
-    /**
-     * Only update the value which is not in props
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+    });
+    /**
+     * Only update the value which is not in props
      */
-    this.setUncontrolledState = (state, atomic = false, forceState = null) => {
-      if (!this.destroyed) {
-        let needSync = false;
-        let allPassed = true;
-        const newState = {};
-        Object.keys(state).forEach((name) => {
-          if (Object.prototype.hasOwnProperty.call(this.props, name)) {
+    _defineProperty(_assertThisInitialized(_this), "setUncontrolledState", function (state) {
+      var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var forceState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      if (!_this.destroyed) {
+        var needSync = false;
+        var allPassed = true;
+        var newState = {};
+        Object.keys(state).forEach(function (name) {
+          if (Object.prototype.hasOwnProperty.call(_this.props, name)) {
             allPassed = false;
             return;
           }
@@ -658,275 +872,326 @@ var Tree = class extends React.Component {
           newState[name] = state[name];
         });
         if (needSync && (!atomic || allPassed)) {
-          this.setState({
-            ...newState,
-            ...forceState
-          });
+          _this.setState(_objectSpread(_objectSpread({}, newState), forceState));
         }
       }
-    };
-    this.scrollTo = (scroll) => {
-      this.listRef.current.scrollTo(scroll);
-    };
-  }
-  componentDidMount() {
-    this.destroyed = false;
-    this.onUpdated();
-  }
-  componentDidUpdate() {
-    this.onUpdated();
+    });
+    _defineProperty(_assertThisInitialized(_this), "scrollTo", function (scroll) {
+      _this.listRef.current.scrollTo(scroll);
+    });
+    return _this;
   }
-  onUpdated() {
-    const { activeKey, itemScrollOffset = 0 } = this.props;
-    if (activeKey !== void 0 && activeKey !== this.state.activeKey) {
-      this.setState({ activeKey });
-      if (activeKey !== null) {
-        this.scrollTo({ key: activeKey, offset: itemScrollOffset });
+  _createClass(Tree, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.destroyed = false;
+      this.onUpdated();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.onUpdated();
+    }
+  }, {
+    key: "onUpdated",
+    value: function onUpdated() {
+      var _this$props11 = this.props,
+        activeKey = _this$props11.activeKey,
+        _this$props11$itemScr = _this$props11.itemScrollOffset,
+        itemScrollOffset = _this$props11$itemScr === void 0 ? 0 : _this$props11$itemScr;
+      if (activeKey !== undefined && activeKey !== this.state.activeKey) {
+        this.setState({
+          activeKey: activeKey
+        });
+        if (activeKey !== null) {
+          this.scrollTo({
+            key: activeKey,
+            offset: itemScrollOffset
+          });
+        }
       }
     }
-  }
-  componentWillUnmount() {
-    window.removeEventListener("dragend", this.onWindowDragEnd);
-    this.destroyed = true;
-  }
-  static getDerivedStateFromProps(props, prevState) {
-    const { prevProps } = prevState;
-    const newState = {
-      prevProps: props
-    };
-    function needSync(name) {
-      return !prevProps && Object.prototype.hasOwnProperty.call(props, name) || prevProps && prevProps[name] !== props[name];
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('dragend', this.onWindowDragEnd);
+      this.destroyed = true;
     }
-    let treeData;
-    let { fieldNames } = prevState;
-    if (needSync("fieldNames")) {
-      fieldNames = (0, import_treeUtil.fillFieldNames)(props.fieldNames);
-      newState.fieldNames = fieldNames;
+  }, {
+    key: "resetDragState",
+    value: function resetDragState() {
+      this.setState({
+        dragOverNodeKey: null,
+        dropPosition: null,
+        dropLevelOffset: null,
+        dropTargetKey: null,
+        dropContainerKey: null,
+        dropTargetPos: null,
+        dropAllowed: false
+      });
     }
-    if (needSync("treeData")) {
-      ({ treeData } = props);
-    } else if (needSync("children")) {
-      (0, import_warning.default)(false, "`children` of Tree is deprecated. Please use `treeData` instead.");
-      treeData = (0, import_treeUtil.convertTreeToData)(props.children);
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state14 = this.state,
+        focused = _this$state14.focused,
+        flattenNodes = _this$state14.flattenNodes,
+        keyEntities = _this$state14.keyEntities,
+        draggingNodeKey = _this$state14.draggingNodeKey,
+        activeKey = _this$state14.activeKey,
+        dropLevelOffset = _this$state14.dropLevelOffset,
+        dropContainerKey = _this$state14.dropContainerKey,
+        dropTargetKey = _this$state14.dropTargetKey,
+        dropPosition = _this$state14.dropPosition,
+        dragOverNodeKey = _this$state14.dragOverNodeKey,
+        indent = _this$state14.indent;
+      var _this$props12 = this.props,
+        prefixCls = _this$props12.prefixCls,
+        className = _this$props12.className,
+        style = _this$props12.style,
+        styles = _this$props12.styles,
+        treeClassNames = _this$props12.classNames,
+        showLine = _this$props12.showLine,
+        focusable = _this$props12.focusable,
+        _this$props12$tabInde = _this$props12.tabIndex,
+        tabIndex = _this$props12$tabInde === void 0 ? 0 : _this$props12$tabInde,
+        selectable = _this$props12.selectable,
+        showIcon = _this$props12.showIcon,
+        icon = _this$props12.icon,
+        switcherIcon = _this$props12.switcherIcon,
+        draggable = _this$props12.draggable,
+        checkable = _this$props12.checkable,
+        checkStrictly = _this$props12.checkStrictly,
+        disabled = _this$props12.disabled,
+        motion = _this$props12.motion,
+        loadData = _this$props12.loadData,
+        filterTreeNode = _this$props12.filterTreeNode,
+        height = _this$props12.height,
+        itemHeight = _this$props12.itemHeight,
+        scrollWidth = _this$props12.scrollWidth,
+        virtual = _this$props12.virtual,
+        titleRender = _this$props12.titleRender,
+        dropIndicatorRender = _this$props12.dropIndicatorRender,
+        onContextMenu = _this$props12.onContextMenu,
+        onScroll = _this$props12.onScroll,
+        direction = _this$props12.direction,
+        rootClassName = _this$props12.rootClassName,
+        rootStyle = _this$props12.rootStyle;
+      var domProps = pickAttrs(this.props, {
+        aria: true,
+        data: true
+      });
+
+      // It's better move to hooks but we just simply keep here
+      var draggableConfig;
+      if (draggable) {
+        if (_typeof(draggable) === 'object') {
+          draggableConfig = draggable;
+        } else if (typeof draggable === 'function') {
+          draggableConfig = {
+            nodeDraggable: draggable
+          };
+        } else {
+          draggableConfig = {};
+        }
+      }
+      var contextValue = {
+        styles: styles,
+        classNames: treeClassNames,
+        prefixCls: prefixCls,
+        selectable: selectable,
+        showIcon: showIcon,
+        icon: icon,
+        switcherIcon: switcherIcon,
+        draggable: draggableConfig,
+        draggingNodeKey: draggingNodeKey,
+        checkable: checkable,
+        checkStrictly: checkStrictly,
+        disabled: disabled,
+        keyEntities: keyEntities,
+        dropLevelOffset: dropLevelOffset,
+        dropContainerKey: dropContainerKey,
+        dropTargetKey: dropTargetKey,
+        dropPosition: dropPosition,
+        dragOverNodeKey: dragOverNodeKey,
+        indent: indent,
+        direction: direction,
+        dropIndicatorRender: dropIndicatorRender,
+        loadData: loadData,
+        filterTreeNode: filterTreeNode,
+        titleRender: titleRender,
+        onNodeClick: this.onNodeClick,
+        onNodeDoubleClick: this.onNodeDoubleClick,
+        onNodeExpand: this.onNodeExpand,
+        onNodeSelect: this.onNodeSelect,
+        onNodeCheck: this.onNodeCheck,
+        onNodeLoad: this.onNodeLoad,
+        onNodeMouseEnter: this.onNodeMouseEnter,
+        onNodeMouseLeave: this.onNodeMouseLeave,
+        onNodeContextMenu: this.onNodeContextMenu,
+        onNodeDragStart: this.onNodeDragStart,
+        onNodeDragEnter: this.onNodeDragEnter,
+        onNodeDragOver: this.onNodeDragOver,
+        onNodeDragLeave: this.onNodeDragLeave,
+        onNodeDragEnd: this.onNodeDragEnd,
+        onNodeDrop: this.onNodeDrop
+      };
+      return /*#__PURE__*/React.createElement(TreeContext.Provider, {
+        value: contextValue
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(prefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-show-line"), showLine), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-active-focused"), activeKey !== null)),
+        style: rootStyle
+      }, /*#__PURE__*/React.createElement(NodeList, _extends({
+        ref: this.listRef,
+        prefixCls: prefixCls,
+        style: style,
+        data: flattenNodes,
+        disabled: disabled,
+        selectable: selectable,
+        checkable: !!checkable,
+        motion: motion,
+        dragging: draggingNodeKey !== null,
+        height: height,
+        itemHeight: itemHeight,
+        virtual: virtual,
+        focusable: focusable,
+        focused: focused,
+        tabIndex: tabIndex,
+        activeItem: this.getActiveItem(),
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        onKeyDown: this.onKeyDown,
+        onActiveChange: this.onActiveChange,
+        onListChangeStart: this.onListChangeStart,
+        onListChangeEnd: this.onListChangeEnd,
+        onContextMenu: onContextMenu,
+        onScroll: onScroll,
+        scrollWidth: scrollWidth
+      }, this.getTreeNodeRequiredProps(), domProps))));
     }
-    if (treeData) {
-      newState.treeData = treeData;
-      const entitiesMap = (0, import_treeUtil.convertDataToEntities)(treeData, { fieldNames });
-      newState.keyEntities = {
-        [import_NodeList.MOTION_KEY]: import_NodeList.MotionEntity,
-        ...entitiesMap.keyEntities
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, prevState) {
+      var prevProps = prevState.prevProps;
+      var newState = {
+        prevProps: props
       };
-      if (process.env.NODE_ENV !== "production") {
-        (0, import_treeUtil.warningWithoutKey)(treeData, fieldNames);
+      function needSync(name) {
+        return !prevProps && Object.prototype.hasOwnProperty.call(props, name) || prevProps && prevProps[name] !== props[name];
       }
-    }
-    const keyEntities = newState.keyEntities || prevState.keyEntities;
-    if (needSync("expandedKeys") || prevProps && needSync("autoExpandParent")) {
-      newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? (0, import_util.conductExpandParent)(props.expandedKeys, keyEntities) : props.expandedKeys;
-    } else if (!prevProps && props.defaultExpandAll) {
-      const cloneKeyEntities = { ...keyEntities };
-      delete cloneKeyEntities[import_NodeList.MOTION_KEY];
-      const nextExpandedKeys = [];
-      Object.keys(cloneKeyEntities).forEach((key) => {
-        const entity = cloneKeyEntities[key];
-        if (entity.children && entity.children.length) {
-          nextExpandedKeys.push(entity.key);
+
+      // ================== Tree Node ==================
+      var treeData;
+
+      // fieldNames
+      var fieldNames = prevState.fieldNames;
+      if (needSync('fieldNames')) {
+        fieldNames = fillFieldNames(props.fieldNames);
+        newState.fieldNames = fieldNames;
+      }
+
+      // Check if `treeData` or `children` changed and save into the state.
+      if (needSync('treeData')) {
+        treeData = props.treeData;
+      } else if (needSync('children')) {
+        warning(false, '`children` of Tree is deprecated. Please use `treeData` instead.');
+        treeData = convertTreeToData(props.children);
+      }
+
+      // Save flatten nodes info and convert `treeData` into keyEntities
+      if (treeData) {
+        newState.treeData = treeData;
+        var entitiesMap = convertDataToEntities(treeData, {
+          fieldNames: fieldNames
+        });
+        newState.keyEntities = _objectSpread(_defineProperty({}, MOTION_KEY, MotionEntity), entitiesMap.keyEntities);
+
+        // Warning if treeNode not provide key
+        if (process.env.NODE_ENV !== 'production') {
+          warningWithoutKey(treeData, fieldNames);
         }
-      });
-      newState.expandedKeys = nextExpandedKeys;
-    } else if (!prevProps && props.defaultExpandedKeys) {
-      newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? (0, import_util.conductExpandParent)(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
-    }
-    if (!newState.expandedKeys) {
-      delete newState.expandedKeys;
-    }
-    if (treeData || newState.expandedKeys) {
-      const flattenNodes = (0, import_treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
-      newState.flattenNodes = flattenNodes;
-    }
-    if (props.selectable) {
-      if (needSync("selectedKeys")) {
-        newState.selectedKeys = (0, import_util.calcSelectedKeys)(props.selectedKeys, props);
-      } else if (!prevProps && props.defaultSelectedKeys) {
-        newState.selectedKeys = (0, import_util.calcSelectedKeys)(props.defaultSelectedKeys, props);
       }
-    }
-    if (props.checkable) {
-      let checkedKeyEntity;
-      if (needSync("checkedKeys")) {
-        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.checkedKeys) || {};
-      } else if (!prevProps && props.defaultCheckedKeys) {
-        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.defaultCheckedKeys) || {};
-      } else if (treeData) {
-        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.checkedKeys) || {
-          checkedKeys: prevState.checkedKeys,
-          halfCheckedKeys: prevState.halfCheckedKeys
-        };
+      var keyEntities = newState.keyEntities || prevState.keyEntities;
+
+      // ================ expandedKeys =================
+      if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent')) {
+        newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? conductExpandParent(props.expandedKeys, keyEntities) : props.expandedKeys;
+      } else if (!prevProps && props.defaultExpandAll) {
+        var cloneKeyEntities = _objectSpread({}, keyEntities);
+        delete cloneKeyEntities[MOTION_KEY];
+
+        // Only take the key who has the children to enhance the performance
+        var nextExpandedKeys = [];
+        Object.keys(cloneKeyEntities).forEach(function (key) {
+          var entity = cloneKeyEntities[key];
+          if (entity.children && entity.children.length) {
+            nextExpandedKeys.push(entity.key);
+          }
+        });
+        newState.expandedKeys = nextExpandedKeys;
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? conductExpandParent(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
+      }
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
       }
-      if (checkedKeyEntity) {
-        let { checkedKeys = [], halfCheckedKeys = [] } = checkedKeyEntity;
-        if (!props.checkStrictly) {
-          const conductKeys = (0, import_conductUtil.conductCheck)(checkedKeys, true, keyEntities);
-          ({ checkedKeys, halfCheckedKeys } = conductKeys);
+
+      // ================ flattenNodes =================
+      if (treeData || newState.expandedKeys) {
+        var flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
+        newState.flattenNodes = flattenNodes;
+      }
+
+      // ================ selectedKeys =================
+      if (props.selectable) {
+        if (needSync('selectedKeys')) {
+          newState.selectedKeys = calcSelectedKeys(props.selectedKeys, props);
+        } else if (!prevProps && props.defaultSelectedKeys) {
+          newState.selectedKeys = calcSelectedKeys(props.defaultSelectedKeys, props);
         }
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
       }
-    }
-    if (needSync("loadedKeys")) {
-      newState.loadedKeys = props.loadedKeys;
-    }
-    return newState;
-  }
-  resetDragState() {
-    this.setState({
-      dragOverNodeKey: null,
-      dropPosition: null,
-      dropLevelOffset: null,
-      dropTargetKey: null,
-      dropContainerKey: null,
-      dropTargetPos: null,
-      dropAllowed: false
-    });
-  }
-  render() {
-    const { focused, flattenNodes, keyEntities, draggingNodeKey, activeKey, dropLevelOffset, dropContainerKey, dropTargetKey, dropPosition, dragOverNodeKey, indent } = this.state;
-    const {
-      prefixCls,
-      className,
-      style,
-      styles,
-      classNames: treeClassNames,
-      showLine,
-      focusable,
-      tabIndex = 0,
-      selectable,
-      showIcon,
-      icon,
-      switcherIcon,
-      draggable,
-      checkable,
-      checkStrictly,
-      disabled,
-      motion,
-      loadData,
-      filterTreeNode,
-      height,
-      itemHeight,
-      scrollWidth,
-      virtual,
-      titleRender,
-      dropIndicatorRender,
-      onContextMenu,
-      onScroll,
-      direction,
-      rootClassName,
-      rootStyle
-    } = this.props;
-    const domProps = (0, import_pickAttrs.default)(this.props, {
-      aria: true,
-      data: true
-    });
-    let draggableConfig;
-    if (draggable) {
-      if (typeof draggable === "object") {
-        draggableConfig = draggable;
-      } else if (typeof draggable === "function") {
-        draggableConfig = {
-          nodeDraggable: draggable
-        };
-      } else {
-        draggableConfig = {};
+
+      // ================= checkedKeys =================
+      if (props.checkable) {
+        var checkedKeyEntity;
+        if (needSync('checkedKeys')) {
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
+        } else if (!prevProps && props.defaultCheckedKeys) {
+          checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};
+        } else if (treeData) {
+          // If `treeData` changed, we also need check it
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
+            checkedKeys: prevState.checkedKeys,
+            halfCheckedKeys: prevState.halfCheckedKeys
+          };
+        }
+        if (checkedKeyEntity) {
+          var _checkedKeyEntity = checkedKeyEntity,
+            _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
+            checkedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
+            _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
+            halfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;
+          if (!props.checkStrictly) {
+            var conductKeys = conductCheck(checkedKeys, true, keyEntities);
+            checkedKeys = conductKeys.checkedKeys;
+            halfCheckedKeys = conductKeys.halfCheckedKeys;
+          }
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
+
+      // ================= loadedKeys ==================
+      if (needSync('loadedKeys')) {
+        newState.loadedKeys = props.loadedKeys;
+      }
+      return newState;
     }
-    const contextValue = {
-      styles,
-      classNames: treeClassNames,
-      prefixCls,
-      selectable,
-      showIcon,
-      icon,
-      switcherIcon,
-      draggable: draggableConfig,
-      draggingNodeKey,
-      checkable,
-      checkStrictly,
-      disabled,
-      keyEntities,
-      dropLevelOffset,
-      dropContainerKey,
-      dropTargetKey,
-      dropPosition,
-      dragOverNodeKey,
-      indent,
-      direction,
-      dropIndicatorRender,
-      loadData,
-      filterTreeNode,
-      titleRender,
-      onNodeClick: this.onNodeClick,
-      onNodeDoubleClick: this.onNodeDoubleClick,
-      onNodeExpand: this.onNodeExpand,
-      onNodeSelect: this.onNodeSelect,
-      onNodeCheck: this.onNodeCheck,
-      onNodeLoad: this.onNodeLoad,
-      onNodeMouseEnter: this.onNodeMouseEnter,
-      onNodeMouseLeave: this.onNodeMouseLeave,
-      onNodeContextMenu: this.onNodeContextMenu,
-      onNodeDragStart: this.onNodeDragStart,
-      onNodeDragEnter: this.onNodeDragEnter,
-      onNodeDragOver: this.onNodeDragOver,
-      onNodeDragLeave: this.onNodeDragLeave,
-      onNodeDragEnd: this.onNodeDragEnd,
-      onNodeDrop: this.onNodeDrop
-    };
-    return /* @__PURE__ */ React.createElement(import_contextTypes.TreeContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(prefixCls, className, rootClassName, {
-          [`${prefixCls}-show-line`]: showLine,
-          [`${prefixCls}-focused`]: focused,
-          [`${prefixCls}-active-focused`]: activeKey !== null
-        }),
-        style: rootStyle
-      },
-      /* @__PURE__ */ React.createElement(
-        import_NodeList.default,
-        {
-          ref: this.listRef,
-          prefixCls,
-          style,
-          data: flattenNodes,
-          disabled,
-          selectable,
-          checkable: !!checkable,
-          motion,
-          dragging: draggingNodeKey !== null,
-          height,
-          itemHeight,
-          virtual,
-          focusable,
-          focused,
-          tabIndex,
-          activeItem: this.getActiveItem(),
-          onFocus: this.onFocus,
-          onBlur: this.onBlur,
-          onKeyDown: this.onKeyDown,
-          onActiveChange: this.onActiveChange,
-          onListChangeStart: this.onListChangeStart,
-          onListChangeEnd: this.onListChangeEnd,
-          onContextMenu,
-          onScroll,
-          scrollWidth,
-          ...this.getTreeNodeRequiredProps(),
-          ...domProps
-        }
-      )
-    ));
-  }
-};
-Tree.defaultProps = {
-  prefixCls: "el-tree",
+  }]);
+  return Tree;
+}(React.Component);
+_defineProperty(Tree, "defaultProps", {
+  prefixCls: 'el-tree',
   showLine: false,
   showIcon: true,
   selectable: true,
@@ -941,9 +1206,11 @@ Tree.defaultProps = {
   defaultExpandedKeys: [],
   defaultCheckedKeys: [],
   defaultSelectedKeys: [],
-  dropIndicatorRender: import_DropIndicator.default,
-  allowDrop: () => true,
+  dropIndicatorRender: DropIndicator,
+  allowDrop: function allowDrop() {
+    return true;
+  },
   expandAction: false
-};
-Tree.TreeNode = import_TreeNode.default;
-var RCTree_default = Tree;
+});
+_defineProperty(Tree, "TreeNode", TreeNode);
+export default Tree;