rc-tree - npm Package Compare versions

Comparing version 4.2.2 to 5.0.0

es/DropIndicator.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export default function DropIndicator({ dropPosition, dropLevelOffset, indent, }: {
@@ -3,0 +2,0 @@ dropPosition: -1 | 0 | 1;

es/Indent.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 interface IndentProps {
@@ -3,0 +2,0 @@ prefixCls: string;

es/interface.d.ts

@@ -62,2 +62,4 @@ import * as React from 'react';
     data: DataNode;
+    title: React.ReactNode;
+    key: Key;
     isStart: boolean[];
@@ -69,1 +71,6 @@ isEnd: boolean[];
 export declare type Direction = 'ltr' | 'rtl' | undefined;
+export interface FieldNames {
+    title?: string;
+    key?: string;
+    children?: string;
+}

es/MotionTreeNode.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"],
-    _excluded2 = ["key"];
 import * as React from 'react';
@@ -24,3 +22,3 @@ import { useEffect } from 'react';
       treeNodeRequiredProps = _ref.treeNodeRequiredProps,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"]);
 
@@ -79,5 +77,5 @@ var _React$useState = React.useState(true),
       }, motionNodes.map(function (treeNode) {
-        var _treeNode$data = treeNode.data,
-            key = _treeNode$data.key,
-            restProps = _objectWithoutProperties(_treeNode$data, _excluded2),
+        var restProps = _extends({}, treeNode.data),
+            title = treeNode.title,
+            key = treeNode.key,
             isStart = treeNode.isStart,
@@ -89,2 +87,3 @@ isEnd = treeNode.isEnd;
         return /*#__PURE__*/React.createElement(TreeNode, _extends({}, restProps, treeNodeProps, {
+          title: title,
           active: active,
@@ -91,0 +90,0 @@ data: treeNode.data,

es/NodeList.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "data", "selectable", "checkable", "expandedKeys", "selectedKeys", "checkedKeys", "loadedKeys", "loadingKeys", "halfCheckedKeys", "keyEntities", "disabled", "dragging", "dragOverNodeKey", "dropPosition", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabIndex", "onKeyDown", "onFocus", "onBlur", "onActiveChange", "onListChangeStart", "onListChangeEnd"],
-    _excluded2 = ["key"];
 
@@ -44,2 +42,4 @@ /**
   data: MotionNode,
+  title: null,
+  key: MOTION_KEY,
 
@@ -110,3 +110,3 @@ /** Hold empty list here since we do not use it */
       onListChangeEnd = props.onListChangeEnd,
-      domProps = _objectWithoutProperties(props, _excluded); // =============================== Ref ================================
+      domProps = _objectWithoutProperties(props, ["prefixCls", "data", "selectable", "checkable", "expandedKeys", "selectedKeys", "checkedKeys", "loadedKeys", "loadingKeys", "halfCheckedKeys", "keyEntities", "disabled", "dragging", "dragOverNodeKey", "dropPosition", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabIndex", "onKeyDown", "onFocus", "onBlur", "onActiveChange", "onListChangeStart", "onListChangeEnd"]); // =============================== Ref ================================
 
@@ -220,5 +220,3 @@
     "aria-live": "assertive"
-  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", {
-    role: "tree"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     style: HIDDEN_STYLE,
@@ -231,3 +229,4 @@ disabled: focusable === false || disabled,
     value: "",
-    onChange: noop
+    onChange: noop,
+    "aria-label": "for screen reader"
   })), /*#__PURE__*/React.createElement("div", {
@@ -259,5 +258,5 @@ className: "".concat(prefixCls, "-treenode"),
     var pos = treeNode.pos,
-        _treeNode$data = treeNode.data,
-        key = _treeNode$data.key,
-        restProps = _objectWithoutProperties(_treeNode$data, _excluded2),
+        restProps = _extends({}, treeNode.data),
+        title = treeNode.title,
+        key = treeNode.key,
         isStart = treeNode.isStart,
@@ -267,5 +266,7 @@ isEnd = treeNode.isEnd;
     var mergedKey = getKey(key, pos);
+    delete restProps.key;
     delete restProps.children;
     var treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);
     return /*#__PURE__*/React.createElement(MotionTreeNode, _extends({}, restProps, treeNodeProps, {
+      title: title,
       active: !!activeItem && key === activeItem.data.key,
@@ -272,0 +273,0 @@ pos: pos,

es/Tree.d.ts

 import * as React from 'react';
 import { NodeMouseEventHandler, NodeDragEventHandler, NodeDragEventParams, NodeMouseEventParams } from './contextTypes';
-import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction } from './interface';
+import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction, FieldNames } from './interface';
 import { NodeListRef } from './NodeList';
@@ -30,2 +30,3 @@ import DropIndicator from './DropIndicator';
     treeData?: DataNode[];
+    fieldNames?: FieldNames;
     showLine?: boolean;
@@ -145,2 +146,3 @@ showIcon?: boolean;
     prevProps: TreeProps;
+    fieldNames: FieldNames;
 }
@@ -147,0 +149,0 @@ declare class Tree extends React.Component<TreeProps, TreeState> {

es/Tree.js

@@ -18,3 +18,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { getDataAndAria, getDragChildrenKeys, parseCheckedKeys, conductExpandParent, calcSelectedKeys, calcDropPosition, arrAdd, arrDel, posToArr } from './util';
-import { flattenTreeData, convertTreeToData, convertDataToEntities, warningWithoutKey, convertNodePropsToEventData, getTreeNodeProps } from './utils/treeUtil';
+import { flattenTreeData, convertTreeToData, convertDataToEntities, warningWithoutKey, convertNodePropsToEventData, getTreeNodeProps, fillFieldNames } from './utils/treeUtil';
 import NodeList, { MOTION_KEY, MotionEntity } from './NodeList';
@@ -35,9 +35,4 @@ import TreeNode from './TreeNode';
 
-    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));
+    _this = _super.apply(this, arguments);
     _this.destroyed = false;
-    _this.delayedDragEnterLogic = void 0;
     _this.state = {
@@ -72,6 +67,6 @@ keyEntities: {},
       listChanging: false,
-      prevProps: null
+      prevProps: null,
+      fieldNames: fillFieldNames()
     };
     _this.dragStartMousePosition = null;
-    _this.dragNode = void 0;
     _this.listRef = /*#__PURE__*/React.createRef();
@@ -109,3 +104,11 @@
     };
+    /**
+     * [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 = function (event, node) {
@@ -300,4 +303,6 @@ var _this$state2 = _this.state,
       }
-    };
+    }; // since stopPropagation() is called in treeNode
+    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
 
+
     _this.onWindowDragEnd = function (event) {
@@ -307,4 +312,5 @@ _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 = function (event, node) {
@@ -411,8 +417,10 @@ var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var selectedKeys = _this.state.selectedKeys;
-      var keyEntities = _this.state.keyEntities;
+      var _this$state5 = _this.state,
+          keyEntities = _this$state5.keyEntities,
+          fieldNames = _this$state5.fieldNames;
       var _this$props3 = _this.props,
           onSelect = _this$props3.onSelect,
           multiple = _this$props3.multiple;
-      var selected = treeNode.selected,
-          key = treeNode.key;
+      var selected = treeNode.selected;
+      var key = treeNode[fieldNames.key];
       var targetSelected = !selected; // Update selected keys
@@ -453,6 +461,6 @@
     _this.onNodeCheck = function (e, treeNode, checked) {
-      var _this$state5 = _this.state,
-          keyEntities = _this$state5.keyEntities,
-          oriCheckedKeys = _this$state5.checkedKeys,
-          oriHalfCheckedKeys = _this$state5.halfCheckedKeys;
+      var _this$state6 = _this.state,
+          keyEntities = _this$state6.keyEntities,
+          oriCheckedKeys = _this$state6.checkedKeys,
+          oriHalfCheckedKeys = _this$state6.halfCheckedKeys;
       var _this$props4 = _this.props,
@@ -559,5 +567,5 @@ checkStrictly = _this$props4.checkStrictly,
           promise.then(function () {
-            var _this$state6 = _this.state,
-                currentLoadedKeys = _this$state6.loadedKeys,
-                currentLoadingKeys = _this$state6.loadingKeys;
+            var _this$state7 = _this.state,
+                currentLoadedKeys = _this$state7.loadedKeys,
+                currentLoadingKeys = _this$state7.loadingKeys;
             var newLoadedKeys = arrAdd(currentLoadedKeys, key);
@@ -661,12 +669,12 @@ var newLoadingKeys = arrDel(currentLoadingKeys, key); // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
     _this.getTreeNodeRequiredProps = function () {
-      var _this$state7 = _this.state,
-          expandedKeys = _this$state7.expandedKeys,
-          selectedKeys = _this$state7.selectedKeys,
-          loadedKeys = _this$state7.loadedKeys,
-          loadingKeys = _this$state7.loadingKeys,
-          checkedKeys = _this$state7.checkedKeys,
-          halfCheckedKeys = _this$state7.halfCheckedKeys,
-          dragOverNodeKey = _this$state7.dragOverNodeKey,
-          dropPosition = _this$state7.dropPosition,
-          keyEntities = _this$state7.keyEntities;
+      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 {
@@ -683,7 +691,12 @@ expandedKeys: expandedKeys || [],
       };
-    };
+    }; // =========================== Expanded ===========================
 
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
+
+
     _this.setExpandedKeys = function (expandedKeys) {
-      var treeData = _this.state.treeData;
-      var flattenNodes = flattenTreeData(treeData, expandedKeys);
+      var _this$state9 = _this.state,
+          treeData = _this$state9.treeData,
+          fieldNames = _this$state9.fieldNames;
+      var flattenNodes = flattenTreeData(treeData, expandedKeys, fieldNames);
 
@@ -698,8 +711,10 @@ _this.setUncontrolledState({
       var expandedKeys = _this.state.expandedKeys;
-      var listChanging = _this.state.listChanging;
+      var _this$state10 = _this.state,
+          listChanging = _this$state10.listChanging,
+          fieldNames = _this$state10.fieldNames;
       var _this$props6 = _this.props,
           onExpand = _this$props6.onExpand,
           loadData = _this$props6.loadData;
-      var key = treeNode.key,
-          expanded = treeNode.expanded; // Do nothing when motion is in progress
+      var expanded = treeNode.expanded;
+      var key = treeNode[fieldNames.key]; // Do nothing when motion is in progress
 
@@ -738,3 +753,3 @@ if (listChanging) {
             // [Legacy] Refresh logic
-            var newFlattenTreeData = flattenTreeData(_this.state.treeData, expandedKeys);
+            var newFlattenTreeData = flattenTreeData(_this.state.treeData, expandedKeys, fieldNames);
 
@@ -766,4 +781,5 @@ _this.setUncontrolledState({
       });
-    };
+    }; // =========================== Keyboard ===========================
 
+
     _this.onActiveChange = function (newActiveKey) {
@@ -793,5 +809,5 @@ var activeKey = _this.state.activeKey;
     _this.getActiveItem = function () {
-      var _this$state8 = _this.state,
-          activeKey = _this$state8.activeKey,
-          flattenNodes = _this$state8.flattenNodes;
+      var _this$state11 = _this.state,
+          activeKey = _this$state11.activeKey,
+          flattenNodes = _this$state11.flattenNodes;
 
@@ -809,5 +825,5 @@ if (activeKey === null) {
     _this.offsetActiveKey = function (offset) {
-      var _this$state9 = _this.state,
-          flattenNodes = _this$state9.flattenNodes,
-          activeKey = _this$state9.activeKey;
+      var _this$state12 = _this.state,
+          flattenNodes = _this$state12.flattenNodes,
+          activeKey = _this$state12.activeKey;
       var index = flattenNodes.findIndex(function (_ref3) {
@@ -835,6 +851,6 @@ var key = _ref3.data.key;
     _this.onKeyDown = function (event) {
-      var _this$state10 = _this.state,
-          activeKey = _this$state10.activeKey,
-          expandedKeys = _this$state10.expandedKeys,
-          checkedKeys = _this$state10.checkedKeys;
+      var _this$state13 = _this.state,
+          activeKey = _this$state13.activeKey,
+          expandedKeys = _this$state13.expandedKeys,
+          checkedKeys = _this$state13.checkedKeys;
       var _this$props7 = _this.props,
@@ -922,3 +938,7 @@ onKeyDown = _this$props7.onKeyDown,
     };
+    /**
+     * Only update the value which is not in props
+     */
 
+
     _this.setUncontrolledState = function (state) {
@@ -968,14 +988,14 @@ var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      var _this$state11 = this.state,
-          focused = _this$state11.focused,
-          flattenNodes = _this$state11.flattenNodes,
-          keyEntities = _this$state11.keyEntities,
-          dragging = _this$state11.dragging,
-          activeKey = _this$state11.activeKey,
-          dropLevelOffset = _this$state11.dropLevelOffset,
-          dropContainerKey = _this$state11.dropContainerKey,
-          dropTargetKey = _this$state11.dropTargetKey,
-          dropPosition = _this$state11.dropPosition,
-          dragOverNodeKey = _this$state11.dragOverNodeKey,
-          indent = _this$state11.indent;
+      var _this$state14 = this.state,
+          focused = _this$state14.focused,
+          flattenNodes = _this$state14.flattenNodes,
+          keyEntities = _this$state14.keyEntities,
+          dragging = _this$state14.dragging,
+          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$props8 = this.props,
@@ -1048,2 +1068,3 @@ prefixCls = _this$props8.prefixCls,
       }, /*#__PURE__*/React.createElement("div", {
+        role: "tree",
         className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-show-line"), showLine), _defineProperty(_classNames, "".concat(prefixCls, "-focused"), focused), _defineProperty(_classNames, "".concat(prefixCls, "-active-focused"), activeKey !== null), _classNames))
@@ -1089,4 +1110,12 @@ }, /*#__PURE__*/React.createElement(NodeList, _extends({
 
-      var treeData; // Check if `treeData` or `children` changed and save into the state.
+      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')) {
@@ -1102,7 +1131,9 @@ treeData = props.treeData;
         newState.treeData = treeData;
-        var entitiesMap = convertDataToEntities(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);
+          warningWithoutKey(treeData, fieldNames);
         }
@@ -1132,3 +1163,3 @@ }
       if (treeData || newState.expandedKeys) {
-        var flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+        var flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
         newState.flattenNodes = flattenNodes;
@@ -1135,0 +1166,0 @@ } // ================ selectedKeys =================

es/TreeNode.js

@@ -10,3 +10,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove"];
 import * as React from 'react';
@@ -33,11 +32,6 @@ import classNames from 'classnames'; // @ts-ignore
 
-    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));
+    _this = _super.apply(this, arguments);
     _this.state = {
       dragNodeHighlight: false
     };
-    _this.selectHandle = void 0;
 
@@ -154,4 +148,5 @@ _this.onSelectorClick = function (e) {
       onNodeDrop(e, _assertThisInitialized(_this));
-    };
+    }; // Disabled item still can be switch
 
+
     _this.onExpand = function (e) {
@@ -163,4 +158,5 @@ var _this$props2 = _this.props,
       onNodeExpand(e, convertNodePropsToEventData(_this.props));
-    };
+    }; // Drag usage
 
+
     _this.setSelectHandle = function (node) {
@@ -217,4 +213,5 @@ _this.selectHandle = node;
       return treeCheckable;
-    };
+    }; // Load data to avoid default expanded tree without data
 
+
     _this.syncLoadData = function (props) {
@@ -230,5 +227,4 @@ var expanded = props.expanded,
         return;
-      }
+      } // read from state to avoid loadData at same time
 
-      ; // read from state to avoid loadData at same time
 
@@ -256,4 +252,5 @@ if (loadData && expanded && !_this.isLeaf()) {
       return switcherIcon;
-    };
+    }; // Switcher
 
+
     _this.renderSwitcher = function () {
@@ -280,4 +277,5 @@ var expanded = _this.props.expanded;
       }, switcherIconDom) : null;
-    };
+    }; // Checkbox
 
+
     _this.renderCheckbox = function () {
@@ -309,4 +307,5 @@ var _this$props4 = _this.props,
       });
-    };
+    }; // Icon + Title
 
+
     _this.renderSelector = function () {
@@ -399,8 +398,8 @@ var dragNodeHighlight = _this.state.dragNodeHighlight;
     return _this;
-  }
+  } // Isomorphic needn't load data in server side
 
+
   _createClass(InternalTreeNode, [{
     key: "componentDidMount",
-    value: // Isomorphic needn't load data in server side
-    function componentDidMount() {
+    value: function componentDidMount() {
       this.syncLoadData(this.props);
@@ -449,3 +448,3 @@ }
           onMouseMove = _this$props7.onMouseMove,
-          otherProps = _objectWithoutProperties(_this$props7, _excluded);
+          otherProps = _objectWithoutProperties(_this$props7, ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove"]);
 
@@ -452,0 +451,0 @@ var _this$props$context4 = this.props.context,

es/util.js

 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
 
@@ -235,3 +234,3 @@ /* eslint-disable no-lonely-if */
     var children = _ref3.children,
-        props = _objectWithoutProperties(_ref3, _excluded);
+        props = _objectWithoutProperties(_ref3, ["children"]);
 
@@ -238,0 +237,0 @@ var childrenNodes = convertDataToTree(children, processor);

es/utils/treeUtil.d.ts

 import * as React from 'react';
-import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey } from '../interface';
+import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames } from '../interface';
 import { TreeNodeProps } from '../TreeNode';
 export declare function getKey(key: Key, pos: string): Key;
+export declare function fillFieldNames(fieldNames?: FieldNames): {
+    title: string;
+    key: string;
+    children: string;
+};
 /**
  * Warning if TreeNode do not provides key
  */
-export declare function warningWithoutKey(treeData?: DataNode[]): void;
+export declare function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames): void;
 /**
@@ -19,3 +24,3 @@ * Convert `children` of Tree into `treeData` structure.
  */
-export declare function flattenTreeData(treeNodeList?: DataNode[], expandedKeys?: Key[] | true): FlattenNode[];
+export declare function flattenTreeData(treeNodeList: DataNode[], expandedKeys: Key[] | true, fieldNames: FieldNames): FlattenNode[];
 declare type ExternalGetKey = GetKey<DataNode> | string;
@@ -25,2 +30,3 @@ interface TraverseDataNodesConfig {
     externalGetKey?: ExternalGetKey;
+    fieldNames?: FieldNames;
 }
@@ -38,3 +44,3 @@ /**
     level: number;
-}) => void, config?: TraverseDataNodesConfig | ExternalGetKey): void;
+}) => void, config?: TraverseDataNodesConfig | string): void;
 interface Wrapper {
@@ -47,3 +53,3 @@ posEntities: Record<string, DataEntity>;
  */
-export declare function convertDataToEntities(dataNodes: DataNode[], { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, }?: {
+export declare function convertDataToEntities(dataNodes: DataNode[], { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, fieldNames, }?: {
     initWrapper?: (wrapper: Wrapper) => Wrapper;
@@ -54,2 +60,3 @@ processEntity?: (entity: DataEntity, wrapper: Wrapper) => void;
     childrenPropName?: string;
+    fieldNames?: FieldNames;
 }, 
@@ -56,0 +63,0 @@ /** @deprecated Use `config.externalGetKey` instead */

es/utils/treeUtil.js

@@ -5,3 +5,3 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
+import omit from "rc-util/es/omit";
 import toArray from "rc-util/es/Children/toArray";
@@ -17,2 +17,14 @@ import warning from "rc-util/es/warning";
 }
+export function fillFieldNames(fieldNames) {
+  var _ref = fieldNames || {},
+      title = _ref.title,
+      key = _ref.key,
+      children = _ref.children;
+
+  return {
+    title: title || 'title',
+    key: key || 'key',
+    children: children || 'children'
+  };
+}
 /**
@@ -22,4 +34,3 @@ * Warning if TreeNode do not provides key
 
-export function warningWithoutKey() {
-  var treeData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+export function warningWithoutKey(treeData, fieldNames) {
   var keys = new Map();
@@ -30,4 +41,4 @@
     (list || []).forEach(function (treeNode) {
-      var key = treeNode.key,
-          children = treeNode.children;
+      var key = treeNode[fieldNames.key];
+      var children = treeNode[fieldNames.children];
       warning(key !== null && key !== undefined, "Tree node must have a certain key: [".concat(path).concat(key, "]"));
@@ -61,3 +72,3 @@ var recordKey = String(key);
           children = _treeNode$props.children,
-          rest = _objectWithoutProperties(_treeNode$props, _excluded);
+          rest = _objectWithoutProperties(_treeNode$props, ["children"]);
 
@@ -89,5 +100,8 @@ var dataNode = _objectSpread({
 
-export function flattenTreeData() {
-  var treeNodeList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var expandedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+export function flattenTreeData(treeNodeList, expandedKeys, fieldNames) {
+  var _fillFieldNames = fillFieldNames(fieldNames),
+      fieldTitle = _fillFieldNames.title,
+      fieldKey = _fillFieldNames.key,
+      fieldChildren = _fillFieldNames.children;
+
   var expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
@@ -100,5 +114,7 @@ var flattenList = [];
       var pos = getPosition(parent ? parent.pos : '0', index);
-      var mergedKey = getKey(treeNode.key, pos); // Add FlattenDataNode into list
+      var mergedKey = getKey(treeNode[fieldKey], pos); // Add FlattenDataNode into list
 
-      var flattenNode = _objectSpread(_objectSpread({}, treeNode), {}, {
+      var flattenNode = _objectSpread(_objectSpread({}, omit(treeNode, [fieldTitle, fieldKey, fieldChildren])), {}, {
+        title: treeNode[fieldTitle],
+        key: mergedKey,
         parent: parent,
@@ -115,3 +131,3 @@ pos: pos,
       if (expandedKeys === true || expandedKeySet.has(mergedKey)) {
-        flattenNode.children = dig(treeNode.children || [], flattenNode);
+        flattenNode.children = dig(treeNode[fieldChildren] || [], flattenNode);
       } else {
@@ -135,18 +151,25 @@ flattenNode.children = [];
 config) {
-  // Init config
-  var externalGetKey = null;
-  var childrenPropName;
+  var mergedConfig = {};
 
-  var configType = _typeof(config);
-
-  if (configType === 'function' || configType === 'string') {
-    // Legacy getKey param
-    externalGetKey = config;
-  } else if (config && configType === 'object') {
-    childrenPropName = config.childrenPropName;
-    externalGetKey = config.externalGetKey;
+  if (_typeof(config) === 'object') {
+    mergedConfig = config;
+  } else {
+    mergedConfig = {
+      externalGetKey: config
+    };
   }
 
-  childrenPropName = childrenPropName || 'children'; // Get keys
+  mergedConfig = mergedConfig || {}; // Init config
 
+  var _mergedConfig = mergedConfig,
+      childrenPropName = _mergedConfig.childrenPropName,
+      externalGetKey = _mergedConfig.externalGetKey,
+      fieldNames = _mergedConfig.fieldNames;
+
+  var _fillFieldNames2 = fillFieldNames(fieldNames),
+      fieldKey = _fillFieldNames2.key,
+      fieldChildren = _fillFieldNames2.children;
+
+  var mergeChildrenPropName = childrenPropName || fieldChildren; // Get keys
+
   var syntheticGetKey;
@@ -166,3 +189,3 @@
     syntheticGetKey = function syntheticGetKey(node, pos) {
-      return getKey(node.key, pos);
+      return getKey(node[fieldKey], pos);
     };
@@ -173,3 +196,3 @@ } // Process
   function processNode(node, index, parent) {
-    var children = node ? node[childrenPropName] : dataNodes;
+    var children = node ? node[mergeChildrenPropName] : dataNodes;
     var pos = node ? getPosition(parent.pos, index) : '0'; // Process node if is not root
@@ -209,8 +232,9 @@
 export function convertDataToEntities(dataNodes) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      initWrapper = _ref.initWrapper,
-      processEntity = _ref.processEntity,
-      onProcessFinished = _ref.onProcessFinished,
-      externalGetKey = _ref.externalGetKey,
-      childrenPropName = _ref.childrenPropName;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      initWrapper = _ref2.initWrapper,
+      processEntity = _ref2.processEntity,
+      onProcessFinished = _ref2.onProcessFinished,
+      externalGetKey = _ref2.externalGetKey,
+      childrenPropName = _ref2.childrenPropName,
+      fieldNames = _ref2.fieldNames;
 
@@ -263,3 +287,4 @@ var
     externalGetKey: mergedExternalGetKey,
-    childrenPropName: childrenPropName
+    childrenPropName: childrenPropName,
+    fieldNames: fieldNames
   });
@@ -277,12 +302,12 @@
 
-export function getTreeNodeProps(key, _ref2) {
-  var expandedKeys = _ref2.expandedKeys,
-      selectedKeys = _ref2.selectedKeys,
-      loadedKeys = _ref2.loadedKeys,
-      loadingKeys = _ref2.loadingKeys,
-      checkedKeys = _ref2.checkedKeys,
-      halfCheckedKeys = _ref2.halfCheckedKeys,
-      dragOverNodeKey = _ref2.dragOverNodeKey,
-      dropPosition = _ref2.dropPosition,
-      keyEntities = _ref2.keyEntities;
+export function getTreeNodeProps(key, _ref3) {
+  var expandedKeys = _ref3.expandedKeys,
+      selectedKeys = _ref3.selectedKeys,
+      loadedKeys = _ref3.loadedKeys,
+      loadingKeys = _ref3.loadingKeys,
+      checkedKeys = _ref3.checkedKeys,
+      halfCheckedKeys = _ref3.halfCheckedKeys,
+      dragOverNodeKey = _ref3.dragOverNodeKey,
+      dropPosition = _ref3.dropPosition,
+      keyEntities = _ref3.keyEntities;
   var entity = keyEntities[key];
@@ -289,0 +314,0 @@ var treeNodeProps = {

lib/DropIndicator.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export default function DropIndicator({ dropPosition, dropLevelOffset, indent, }: {
@@ -3,0 +2,0 @@ dropPosition: -1 | 0 | 1;

lib/Indent.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 interface IndentProps {
@@ -3,0 +2,0 @@ prefixCls: string;

lib/interface.d.ts

@@ -62,2 +62,4 @@ import * as React from 'react';
     data: DataNode;
+    title: React.ReactNode;
+    key: Key;
     isStart: boolean[];
@@ -69,1 +71,6 @@ isEnd: boolean[];
 export declare type Direction = 'ltr' | 'rtl' | undefined;
+export interface FieldNames {
+    title?: string;
+    key?: string;
+    children?: string;
+}

lib/MotionTreeNode.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
@@ -30,5 +30,2 @@ value: true
 
-var _excluded = ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"],
-    _excluded2 = ["key"];
-
 var MotionTreeNode = function MotionTreeNode(_ref, ref) {
@@ -44,3 +41,3 @@ var className = _ref.className,
       treeNodeRequiredProps = _ref.treeNodeRequiredProps,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      props = (0, _objectWithoutProperties2.default)(_ref, ["className", "style", "motion", "motionNodes", "motionType", "onMotionStart", "onMotionEnd", "active", "treeNodeRequiredProps"]);
 
@@ -99,5 +96,5 @@ var _React$useState = React.useState(true),
       }, motionNodes.map(function (treeNode) {
-        var _treeNode$data = treeNode.data,
-            key = _treeNode$data.key,
-            restProps = (0, _objectWithoutProperties2.default)(_treeNode$data, _excluded2),
+        var restProps = (0, _extends2.default)({}, treeNode.data),
+            title = treeNode.title,
+            key = treeNode.key,
             isStart = treeNode.isStart,
@@ -108,2 +105,3 @@ isEnd = treeNode.isEnd;
         return /*#__PURE__*/React.createElement(_TreeNode.default, (0, _extends2.default)({}, restProps, treeNodeProps, {
+          title: title,
           active: active,
@@ -110,0 +108,0 @@ data: treeNode.data,

lib/NodeList.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
@@ -29,4 +29,5 @@ value: true
 
-var _excluded = ["prefixCls", "data", "selectable", "checkable", "expandedKeys", "selectedKeys", "checkedKeys", "loadedKeys", "loadingKeys", "halfCheckedKeys", "keyEntities", "disabled", "dragging", "dragOverNodeKey", "dropPosition", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabIndex", "onKeyDown", "onFocus", "onBlur", "onActiveChange", "onListChangeStart", "onListChangeEnd"],
-    _excluded2 = ["key"];
+/**
+ * Handle virtual list of the TreeNodes.
+ */
 var HIDDEN_STYLE = {
@@ -63,2 +64,4 @@ width: 0,
   data: MotionNode,
+  title: null,
+  key: MOTION_KEY,
 
@@ -129,3 +132,3 @@ /** Hold empty list here since we do not use it */
       onListChangeEnd = props.onListChangeEnd,
-      domProps = (0, _objectWithoutProperties2.default)(props, _excluded); // =============================== Ref ================================
+      domProps = (0, _objectWithoutProperties2.default)(props, ["prefixCls", "data", "selectable", "checkable", "expandedKeys", "selectedKeys", "checkedKeys", "loadedKeys", "loadingKeys", "halfCheckedKeys", "keyEntities", "disabled", "dragging", "dragOverNodeKey", "dropPosition", "motion", "height", "itemHeight", "virtual", "focusable", "activeItem", "focused", "tabIndex", "onKeyDown", "onFocus", "onBlur", "onActiveChange", "onListChangeStart", "onListChangeEnd"]); // =============================== Ref ================================
 
@@ -238,5 +241,3 @@ var listRef = React.useRef(null);
     "aria-live": "assertive"
-  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", {
-    role: "tree"
-  }, /*#__PURE__*/React.createElement("input", {
+  }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     style: HIDDEN_STYLE,
@@ -249,3 +250,4 @@ disabled: focusable === false || disabled,
     value: "",
-    onChange: noop
+    onChange: noop,
+    "aria-label": "for screen reader"
   })), /*#__PURE__*/React.createElement("div", {
@@ -277,11 +279,13 @@ className: "".concat(prefixCls, "-treenode"),
     var pos = treeNode.pos,
-        _treeNode$data = treeNode.data,
-        key = _treeNode$data.key,
-        restProps = (0, _objectWithoutProperties2.default)(_treeNode$data, _excluded2),
+        restProps = (0, _extends2.default)({}, treeNode.data),
+        title = treeNode.title,
+        key = treeNode.key,
         isStart = treeNode.isStart,
         isEnd = treeNode.isEnd;
     var mergedKey = (0, _treeUtil.getKey)(key, pos);
+    delete restProps.key;
     delete restProps.children;
     var treeNodeProps = (0, _treeUtil.getTreeNodeProps)(mergedKey, treeNodeRequiredProps);
     return /*#__PURE__*/React.createElement(_MotionTreeNode.default, (0, _extends2.default)({}, restProps, treeNodeProps, {
+      title: title,
       active: !!activeItem && key === activeItem.data.key,
@@ -288,0 +292,0 @@ pos: pos,

lib/Tree.d.ts

 import * as React from 'react';
 import { NodeMouseEventHandler, NodeDragEventHandler, NodeDragEventParams, NodeMouseEventParams } from './contextTypes';
-import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction } from './interface';
+import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction, FieldNames } from './interface';
 import { NodeListRef } from './NodeList';
@@ -30,2 +30,3 @@ import DropIndicator from './DropIndicator';
     treeData?: DataNode[];
+    fieldNames?: FieldNames;
     showLine?: boolean;
@@ -145,2 +146,3 @@ showIcon?: boolean;
     prevProps: TreeProps;
+    fieldNames: FieldNames;
 }
@@ -147,0 +149,0 @@ declare class Tree extends React.Component<TreeProps, TreeState> {

lib/Tree.js

@@ -63,10 +63,4 @@ "use strict";
     (0, _classCallCheck2.default)(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));
+    _this = _super.apply(this, arguments);
     _this.destroyed = false;
-    _this.delayedDragEnterLogic = void 0;
     _this.state = {
@@ -101,6 +95,6 @@ keyEntities: {},
       listChanging: false,
-      prevProps: null
+      prevProps: null,
+      fieldNames: (0, _treeUtil.fillFieldNames)()
     };
     _this.dragStartMousePosition = null;
-    _this.dragNode = void 0;
     _this.listRef = /*#__PURE__*/React.createRef();
@@ -138,3 +132,11 @@
     };
+    /**
+     * [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 = function (event, node) {
@@ -327,4 +329,6 @@ var _this$state2 = _this.state,
       }
-    };
+    }; // since stopPropagation() is called in treeNode
+    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
 
+
     _this.onWindowDragEnd = function (event) {
@@ -334,4 +338,5 @@ _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 = function (event, node) {
@@ -436,8 +441,10 @@ var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var selectedKeys = _this.state.selectedKeys;
-      var keyEntities = _this.state.keyEntities;
+      var _this$state5 = _this.state,
+          keyEntities = _this$state5.keyEntities,
+          fieldNames = _this$state5.fieldNames;
       var _this$props3 = _this.props,
           onSelect = _this$props3.onSelect,
           multiple = _this$props3.multiple;
-      var selected = treeNode.selected,
-          key = treeNode.key;
+      var selected = treeNode.selected;
+      var key = treeNode[fieldNames.key];
       var targetSelected = !selected; // Update selected keys
@@ -478,6 +485,6 @@
     _this.onNodeCheck = function (e, treeNode, checked) {
-      var _this$state5 = _this.state,
-          keyEntities = _this$state5.keyEntities,
-          oriCheckedKeys = _this$state5.checkedKeys,
-          oriHalfCheckedKeys = _this$state5.halfCheckedKeys;
+      var _this$state6 = _this.state,
+          keyEntities = _this$state6.keyEntities,
+          oriCheckedKeys = _this$state6.checkedKeys,
+          oriHalfCheckedKeys = _this$state6.halfCheckedKeys;
       var _this$props4 = _this.props,
@@ -584,5 +591,5 @@ checkStrictly = _this$props4.checkStrictly,
           promise.then(function () {
-            var _this$state6 = _this.state,
-                currentLoadedKeys = _this$state6.loadedKeys,
-                currentLoadingKeys = _this$state6.loadingKeys;
+            var _this$state7 = _this.state,
+                currentLoadedKeys = _this$state7.loadedKeys,
+                currentLoadingKeys = _this$state7.loadingKeys;
             var newLoadedKeys = (0, _util.arrAdd)(currentLoadedKeys, key);
@@ -686,12 +693,12 @@ var newLoadingKeys = (0, _util.arrDel)(currentLoadingKeys, key); // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
     _this.getTreeNodeRequiredProps = function () {
-      var _this$state7 = _this.state,
-          expandedKeys = _this$state7.expandedKeys,
-          selectedKeys = _this$state7.selectedKeys,
-          loadedKeys = _this$state7.loadedKeys,
-          loadingKeys = _this$state7.loadingKeys,
-          checkedKeys = _this$state7.checkedKeys,
-          halfCheckedKeys = _this$state7.halfCheckedKeys,
-          dragOverNodeKey = _this$state7.dragOverNodeKey,
-          dropPosition = _this$state7.dropPosition,
-          keyEntities = _this$state7.keyEntities;
+      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 {
@@ -708,7 +715,12 @@ expandedKeys: expandedKeys || [],
       };
-    };
+    }; // =========================== Expanded ===========================
 
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
+
+
     _this.setExpandedKeys = function (expandedKeys) {
-      var treeData = _this.state.treeData;
-      var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);
+      var _this$state9 = _this.state,
+          treeData = _this$state9.treeData,
+          fieldNames = _this$state9.fieldNames;
+      var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys, fieldNames);
 
@@ -723,8 +735,10 @@ _this.setUncontrolledState({
       var expandedKeys = _this.state.expandedKeys;
-      var listChanging = _this.state.listChanging;
+      var _this$state10 = _this.state,
+          listChanging = _this$state10.listChanging,
+          fieldNames = _this$state10.fieldNames;
       var _this$props6 = _this.props,
           onExpand = _this$props6.onExpand,
           loadData = _this$props6.loadData;
-      var key = treeNode.key,
-          expanded = treeNode.expanded; // Do nothing when motion is in progress
+      var expanded = treeNode.expanded;
+      var key = treeNode[fieldNames.key]; // Do nothing when motion is in progress
 
@@ -763,3 +777,3 @@ if (listChanging) {
             // [Legacy] Refresh logic
-            var newFlattenTreeData = (0, _treeUtil.flattenTreeData)(_this.state.treeData, expandedKeys);
+            var newFlattenTreeData = (0, _treeUtil.flattenTreeData)(_this.state.treeData, expandedKeys, fieldNames);
 
@@ -791,4 +805,5 @@ _this.setUncontrolledState({
       });
-    };
+    }; // =========================== Keyboard ===========================
 
+
     _this.onActiveChange = function (newActiveKey) {
@@ -818,5 +833,5 @@ var activeKey = _this.state.activeKey;
     _this.getActiveItem = function () {
-      var _this$state8 = _this.state,
-          activeKey = _this$state8.activeKey,
-          flattenNodes = _this$state8.flattenNodes;
+      var _this$state11 = _this.state,
+          activeKey = _this$state11.activeKey,
+          flattenNodes = _this$state11.flattenNodes;
 
@@ -834,5 +849,5 @@ if (activeKey === null) {
     _this.offsetActiveKey = function (offset) {
-      var _this$state9 = _this.state,
-          flattenNodes = _this$state9.flattenNodes,
-          activeKey = _this$state9.activeKey;
+      var _this$state12 = _this.state,
+          flattenNodes = _this$state12.flattenNodes,
+          activeKey = _this$state12.activeKey;
       var index = flattenNodes.findIndex(function (_ref3) {
@@ -860,6 +875,6 @@ var key = _ref3.data.key;
     _this.onKeyDown = function (event) {
-      var _this$state10 = _this.state,
-          activeKey = _this$state10.activeKey,
-          expandedKeys = _this$state10.expandedKeys,
-          checkedKeys = _this$state10.checkedKeys;
+      var _this$state13 = _this.state,
+          activeKey = _this$state13.activeKey,
+          expandedKeys = _this$state13.expandedKeys,
+          checkedKeys = _this$state13.checkedKeys;
       var _this$props7 = _this.props,
@@ -947,3 +962,7 @@ onKeyDown = _this$props7.onKeyDown,
     };
+    /**
+     * Only update the value which is not in props
+     */
 
+
     _this.setUncontrolledState = function (state) {
@@ -993,14 +1012,14 @@ var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      var _this$state11 = this.state,
-          focused = _this$state11.focused,
-          flattenNodes = _this$state11.flattenNodes,
-          keyEntities = _this$state11.keyEntities,
-          dragging = _this$state11.dragging,
-          activeKey = _this$state11.activeKey,
-          dropLevelOffset = _this$state11.dropLevelOffset,
-          dropContainerKey = _this$state11.dropContainerKey,
-          dropTargetKey = _this$state11.dropTargetKey,
-          dropPosition = _this$state11.dropPosition,
-          dragOverNodeKey = _this$state11.dragOverNodeKey,
-          indent = _this$state11.indent;
+      var _this$state14 = this.state,
+          focused = _this$state14.focused,
+          flattenNodes = _this$state14.flattenNodes,
+          keyEntities = _this$state14.keyEntities,
+          dragging = _this$state14.dragging,
+          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$props8 = this.props,
@@ -1073,2 +1092,3 @@ prefixCls = _this$props8.prefixCls,
       }, /*#__PURE__*/React.createElement("div", {
+        role: "tree",
         className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-show-line"), showLine), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-focused"), focused), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active-focused"), activeKey !== null), _classNames))
@@ -1114,4 +1134,12 @@ }, /*#__PURE__*/React.createElement(_NodeList.default, (0, _extends2.default)({
 
-      var treeData; // Check if `treeData` or `children` changed and save into the state.
+      var treeData; // fieldNames
 
+      var fieldNames = prevState.fieldNames;
+
+      if (needSync('fieldNames')) {
+        fieldNames = (0, _treeUtil.fillFieldNames)(props.fieldNames);
+        newState.fieldNames = fieldNames;
+      } // Check if `treeData` or `children` changed and save into the state.
+
+
       if (needSync('treeData')) {
@@ -1127,7 +1155,9 @@ treeData = props.treeData;
         newState.treeData = treeData;
-        var entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+        var entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData, {
+          fieldNames: fieldNames
+        });
         newState.keyEntities = (0, _objectSpread3.default)((0, _defineProperty2.default)({}, _NodeList.MOTION_KEY, _NodeList.MotionEntity), entitiesMap.keyEntities); // Warning if treeNode not provide key
 
         if (process.env.NODE_ENV !== 'production') {
-          (0, _treeUtil.warningWithoutKey)(treeData);
+          (0, _treeUtil.warningWithoutKey)(treeData, fieldNames);
         }
@@ -1156,3 +1186,3 @@ }
       if (treeData || newState.expandedKeys) {
-        var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+        var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
         newState.flattenNodes = flattenNodes;
@@ -1159,0 +1189,0 @@ } // ================ selectedKeys =================

lib/TreeNode.js

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
@@ -42,3 +42,3 @@ value: true
 
-var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove"];
+// @ts-ignore
 var ICON_OPEN = 'open';
@@ -57,12 +57,6 @@ var ICON_CLOSE = 'close';
     (0, _classCallCheck2.default)(this, InternalTreeNode);
-
-    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));
+    _this = _super.apply(this, arguments);
     _this.state = {
       dragNodeHighlight: false
     };
-    _this.selectHandle = void 0;
 
@@ -179,4 +173,5 @@ _this.onSelectorClick = function (e) {
       onNodeDrop(e, (0, _assertThisInitialized2.default)(_this));
-    };
+    }; // Disabled item still can be switch
 
+
     _this.onExpand = function (e) {
@@ -188,4 +183,5 @@ var _this$props2 = _this.props,
       onNodeExpand(e, (0, _treeUtil.convertNodePropsToEventData)(_this.props));
-    };
+    }; // Drag usage
 
+
     _this.setSelectHandle = function (node) {
@@ -242,4 +238,5 @@ _this.selectHandle = node;
       return treeCheckable;
-    };
+    }; // Load data to avoid default expanded tree without data
 
+
     _this.syncLoadData = function (props) {
@@ -255,5 +252,4 @@ var expanded = props.expanded,
         return;
-      }
+      } // read from state to avoid loadData at same time
 
-      ; // read from state to avoid loadData at same time
 
@@ -281,4 +277,5 @@ if (loadData && expanded && !_this.isLeaf()) {
       return switcherIcon;
-    };
+    }; // Switcher
 
+
     _this.renderSwitcher = function () {
@@ -305,4 +302,5 @@ var expanded = _this.props.expanded;
       }, switcherIconDom) : null;
-    };
+    }; // Checkbox
 
+
     _this.renderCheckbox = function () {
@@ -334,4 +332,5 @@ var _this$props4 = _this.props,
       });
-    };
+    }; // Icon + Title
 
+
     _this.renderSelector = function () {
@@ -424,8 +423,8 @@ var dragNodeHighlight = _this.state.dragNodeHighlight;
     return _this;
-  }
+  } // Isomorphic needn't load data in server side
 
+
   (0, _createClass2.default)(InternalTreeNode, [{
     key: "componentDidMount",
-    value: // Isomorphic needn't load data in server side
-    function componentDidMount() {
+    value: function componentDidMount() {
       this.syncLoadData(this.props);
@@ -474,3 +473,3 @@ }
           onMouseMove = _this$props7.onMouseMove,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props7, ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove"]);
       var _this$props$context4 = this.props.context,
@@ -477,0 +476,0 @@ prefixCls = _this$props$context4.prefixCls,

lib/util.js

@@ -35,4 +35,7 @@ "use strict";
 
-var _excluded = ["children"];
+/* eslint-disable no-lonely-if */
 
+/**
+ * Legacy code. Should avoid to use if you are new to import these code.
+ */
 function arrDel(list, value) {
@@ -268,3 +271,3 @@ var clone = list.slice();
     var children = _ref3.children,
-        props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+        props = (0, _objectWithoutProperties2.default)(_ref3, ["children"]);
     var childrenNodes = convertDataToTree(children, processor);
@@ -271,0 +274,0 @@ return /*#__PURE__*/_react.default.createElement(_TreeNode.default, processProps(props), childrenNodes);

lib/utils/treeUtil.d.ts

 import * as React from 'react';
-import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey } from '../interface';
+import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames } from '../interface';
 import { TreeNodeProps } from '../TreeNode';
 export declare function getKey(key: Key, pos: string): Key;
+export declare function fillFieldNames(fieldNames?: FieldNames): {
+    title: string;
+    key: string;
+    children: string;
+};
 /**
  * Warning if TreeNode do not provides key
  */
-export declare function warningWithoutKey(treeData?: DataNode[]): void;
+export declare function warningWithoutKey(treeData: DataNode[], fieldNames: FieldNames): void;
 /**
@@ -19,3 +24,3 @@ * Convert `children` of Tree into `treeData` structure.
  */
-export declare function flattenTreeData(treeNodeList?: DataNode[], expandedKeys?: Key[] | true): FlattenNode[];
+export declare function flattenTreeData(treeNodeList: DataNode[], expandedKeys: Key[] | true, fieldNames: FieldNames): FlattenNode[];
 declare type ExternalGetKey = GetKey<DataNode> | string;
@@ -25,2 +30,3 @@ interface TraverseDataNodesConfig {
     externalGetKey?: ExternalGetKey;
+    fieldNames?: FieldNames;
 }
@@ -38,3 +44,3 @@ /**
     level: number;
-}) => void, config?: TraverseDataNodesConfig | ExternalGetKey): void;
+}) => void, config?: TraverseDataNodesConfig | string): void;
 interface Wrapper {
@@ -47,3 +53,3 @@ posEntities: Record<string, DataEntity>;
  */
-export declare function convertDataToEntities(dataNodes: DataNode[], { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, }?: {
+export declare function convertDataToEntities(dataNodes: DataNode[], { initWrapper, processEntity, onProcessFinished, externalGetKey, childrenPropName, fieldNames, }?: {
     initWrapper?: (wrapper: Wrapper) => Wrapper;
@@ -54,2 +60,3 @@ processEntity?: (entity: DataEntity, wrapper: Wrapper) => void;
     childrenPropName?: string;
+    fieldNames?: FieldNames;
 }, 
@@ -56,0 +63,0 @@ /** @deprecated Use `config.externalGetKey` instead */

lib/utils/treeUtil.js

@@ -9,2 +9,3 @@ "use strict";
 exports.getKey = getKey;
+exports.fillFieldNames = fillFieldNames;
 exports.warningWithoutKey = warningWithoutKey;
@@ -26,2 +27,4 @@ exports.convertTreeToData = convertTreeToData;
 
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
 var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
@@ -33,4 +36,2 @@
 
-var _excluded = ["children"];
-
 function getKey(key, pos) {
@@ -43,2 +44,15 @@ if (key !== null && key !== undefined) {
 }
+
+function fillFieldNames(fieldNames) {
+  var _ref = fieldNames || {},
+      title = _ref.title,
+      key = _ref.key,
+      children = _ref.children;
+
+  return {
+    title: title || 'title',
+    key: key || 'key',
+    children: children || 'children'
+  };
+}
 /**
@@ -49,4 +63,3 @@ * Warning if TreeNode do not provides key
 
-function warningWithoutKey() {
-  var treeData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function warningWithoutKey(treeData, fieldNames) {
   var keys = new Map();
@@ -57,4 +70,4 @@
     (list || []).forEach(function (treeNode) {
-      var key = treeNode.key,
-          children = treeNode.children;
+      var key = treeNode[fieldNames.key];
+      var children = treeNode[fieldNames.children];
       (0, _warning.default)(key !== null && key !== undefined, "Tree node must have a certain key: [".concat(path).concat(key, "]"));
@@ -88,3 +101,3 @@ var recordKey = String(key);
           children = _treeNode$props.children,
-          rest = (0, _objectWithoutProperties2.default)(_treeNode$props, _excluded);
+          rest = (0, _objectWithoutProperties2.default)(_treeNode$props, ["children"]);
       var dataNode = (0, _objectSpread2.default)({
@@ -115,5 +128,8 @@ key: key
 
-function flattenTreeData() {
-  var treeNodeList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var expandedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+function flattenTreeData(treeNodeList, expandedKeys, fieldNames) {
+  var _fillFieldNames = fillFieldNames(fieldNames),
+      fieldTitle = _fillFieldNames.title,
+      fieldKey = _fillFieldNames.key,
+      fieldChildren = _fillFieldNames.children;
+
   var expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
@@ -126,5 +142,7 @@ var flattenList = [];
       var pos = (0, _util.getPosition)(parent ? parent.pos : '0', index);
-      var mergedKey = getKey(treeNode.key, pos); // Add FlattenDataNode into list
+      var mergedKey = getKey(treeNode[fieldKey], pos); // Add FlattenDataNode into list
 
-      var flattenNode = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, treeNode), {}, {
+      var flattenNode = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _omit.default)(treeNode, [fieldTitle, fieldKey, fieldChildren])), {}, {
+        title: treeNode[fieldTitle],
+        key: mergedKey,
         parent: parent,
@@ -140,3 +158,3 @@ pos: pos,
       if (expandedKeys === true || expandedKeySet.has(mergedKey)) {
-        flattenNode.children = dig(treeNode.children || [], flattenNode);
+        flattenNode.children = dig(treeNode[fieldChildren] || [], flattenNode);
       } else {
@@ -161,17 +179,25 @@ flattenNode.children = [];
 config) {
-  // Init config
-  var externalGetKey = null;
-  var childrenPropName;
-  var configType = (0, _typeof2.default)(config);
+  var mergedConfig = {};
 
-  if (configType === 'function' || configType === 'string') {
-    // Legacy getKey param
-    externalGetKey = config;
-  } else if (config && configType === 'object') {
-    childrenPropName = config.childrenPropName;
-    externalGetKey = config.externalGetKey;
+  if ((0, _typeof2.default)(config) === 'object') {
+    mergedConfig = config;
+  } else {
+    mergedConfig = {
+      externalGetKey: config
+    };
   }
 
-  childrenPropName = childrenPropName || 'children'; // Get keys
+  mergedConfig = mergedConfig || {}; // Init config
 
+  var _mergedConfig = mergedConfig,
+      childrenPropName = _mergedConfig.childrenPropName,
+      externalGetKey = _mergedConfig.externalGetKey,
+      fieldNames = _mergedConfig.fieldNames;
+
+  var _fillFieldNames2 = fillFieldNames(fieldNames),
+      fieldKey = _fillFieldNames2.key,
+      fieldChildren = _fillFieldNames2.children;
+
+  var mergeChildrenPropName = childrenPropName || fieldChildren; // Get keys
+
   var syntheticGetKey;
@@ -191,3 +217,3 @@
     syntheticGetKey = function syntheticGetKey(node, pos) {
-      return getKey(node.key, pos);
+      return getKey(node[fieldKey], pos);
     };
@@ -198,3 +224,3 @@ } // Process
   function processNode(node, index, parent) {
-    var children = node ? node[childrenPropName] : dataNodes;
+    var children = node ? node[mergeChildrenPropName] : dataNodes;
     var pos = node ? (0, _util.getPosition)(parent.pos, index) : '0'; // Process node if is not root
@@ -235,8 +261,9 @@
 function convertDataToEntities(dataNodes) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      initWrapper = _ref.initWrapper,
-      processEntity = _ref.processEntity,
-      onProcessFinished = _ref.onProcessFinished,
-      externalGetKey = _ref.externalGetKey,
-      childrenPropName = _ref.childrenPropName;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      initWrapper = _ref2.initWrapper,
+      processEntity = _ref2.processEntity,
+      onProcessFinished = _ref2.onProcessFinished,
+      externalGetKey = _ref2.externalGetKey,
+      childrenPropName = _ref2.childrenPropName,
+      fieldNames = _ref2.fieldNames;
 
@@ -289,3 +316,4 @@ var
     externalGetKey: mergedExternalGetKey,
-    childrenPropName: childrenPropName
+    childrenPropName: childrenPropName,
+    fieldNames: fieldNames
   });
@@ -304,12 +332,12 @@
 
-function getTreeNodeProps(key, _ref2) {
-  var expandedKeys = _ref2.expandedKeys,
-      selectedKeys = _ref2.selectedKeys,
-      loadedKeys = _ref2.loadedKeys,
-      loadingKeys = _ref2.loadingKeys,
-      checkedKeys = _ref2.checkedKeys,
-      halfCheckedKeys = _ref2.halfCheckedKeys,
-      dragOverNodeKey = _ref2.dragOverNodeKey,
-      dropPosition = _ref2.dropPosition,
-      keyEntities = _ref2.keyEntities;
+function getTreeNodeProps(key, _ref3) {
+  var expandedKeys = _ref3.expandedKeys,
+      selectedKeys = _ref3.selectedKeys,
+      loadedKeys = _ref3.loadedKeys,
+      loadingKeys = _ref3.loadingKeys,
+      checkedKeys = _ref3.checkedKeys,
+      halfCheckedKeys = _ref3.halfCheckedKeys,
+      dragOverNodeKey = _ref3.dragOverNodeKey,
+      dropPosition = _ref3.dropPosition,
+      keyEntities = _ref3.keyEntities;
   var entity = keyEntities[key];
@@ -316,0 +344,0 @@ var treeNodeProps = {

package.json

 {
   "name": "rc-tree",
-  "version": "4.2.2",
+  "version": "5.0.0",
   "description": "tree ui component for react",
@@ -53,2 +53,3 @@ "engines": {
   "devDependencies": {
+    "@types/enzyme": "^3.10.9",
     "@types/jest": "^26.0.4",
@@ -69,3 +70,3 @@ "@types/react": "^17.0.11",
     "rc-dialog": "^8.1.0",
-    "rc-tooltip": "4.x",
+    "rc-tooltip": "5.x",
     "rc-trigger": "^5.0.7",
@@ -72,0 +73,0 @@ "react": "^16.8.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

331214

increased by1.43%

Lines of code

7068

increased by1.55%

Worsened metrics

Dev dependency count

21

increased by5%

No dependency changes