rc-tree - npm Package Compare versions

Comparing version 5.2.2 to 5.3.0

es/contextTypes.d.ts

@@ -6,3 +6,3 @@ /**
 import * as React from 'react';
-import { IconType, Key, DataEntity, EventDataNode, NodeInstance, DataNode, Direction } from './interface';
+import { IconType, Key, DataEntity, EventDataNode, NodeInstance, DataNode, Direction, BasicDataNode } from './interface';
 import { DraggableConfig } from './Tree';
@@ -18,3 +18,3 @@ export declare type NodeMouseEventParams<T = HTMLSpanElement> = {
 export declare type NodeMouseEventHandler<T = HTMLSpanElement> = (e: React.MouseEvent<T>, node: EventDataNode) => void;
-export declare type NodeDragEventHandler<T = HTMLDivElement> = (e: React.DragEvent<T>, node: NodeInstance, outsideTree?: boolean) => void;
+export declare type NodeDragEventHandler<T = HTMLDivElement, TreeDataType extends BasicDataNode = DataNode> = (e: React.DragEvent<T>, node: NodeInstance<TreeDataType>, outsideTree?: boolean) => void;
 export interface TreeContextProps {
@@ -31,3 +31,3 @@ prefixCls: string;
     disabled: boolean;
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<any>>;
     dropLevelOffset?: number;
@@ -49,3 +49,3 @@ dropContainerKey: Key | null;
     filterTreeNode: (treeNode: EventDataNode) => boolean;
-    titleRender?: (node: DataNode) => React.ReactNode;
+    titleRender?: (node: any) => React.ReactNode;
     onNodeClick: NodeMouseEventHandler;
@@ -60,9 +60,9 @@ onNodeDoubleClick: NodeMouseEventHandler;
     onNodeContextMenu: NodeMouseEventHandler;
-    onNodeDragStart: NodeDragEventHandler;
-    onNodeDragEnter: NodeDragEventHandler;
-    onNodeDragOver: NodeDragEventHandler;
-    onNodeDragLeave: NodeDragEventHandler;
-    onNodeDragEnd: NodeDragEventHandler;
-    onNodeDrop: NodeDragEventHandler;
+    onNodeDragStart: NodeDragEventHandler<any, any>;
+    onNodeDragEnter: NodeDragEventHandler<any, any>;
+    onNodeDragOver: NodeDragEventHandler<any, any>;
+    onNodeDragLeave: NodeDragEventHandler<any, any>;
+    onNodeDragEnd: NodeDragEventHandler<any, any>;
+    onNodeDrop: NodeDragEventHandler<any, any>;
 }
 export declare const TreeContext: React.Context<TreeContextProps | null>;

es/index.d.ts

@@ -5,4 +5,5 @@ import Tree from './Tree';
 import type { TreeNodeProps } from './TreeNode';
+import type { BasicDataNode } from './interface';
 export { TreeNode };
-export type { TreeProps, TreeNodeProps };
+export type { TreeProps, TreeNodeProps, BasicDataNode };
 export default Tree;

es/interface.d.ts

 import * as React from 'react';
 import { TreeNodeProps } from './TreeNode';
 export { ScrollTo } from 'rc-virtual-list/lib/List';
-export interface DataNode {
+/** For fieldNames, we provides a abstract interface */
+export interface BasicDataNode {
     checkable?: boolean;
-    children?: DataNode[];
     disabled?: boolean;
@@ -11,4 +11,2 @@ disableCheckbox?: boolean;
     isLeaf?: boolean;
-    key: string | number;
-    title?: React.ReactNode;
     selectable?: boolean;
@@ -20,2 +18,7 @@ switcherIcon?: IconType;
 }
+export interface DataNode extends BasicDataNode {
+    children?: DataNode[];
+    key: string | number;
+    title?: React.ReactNode;
+}
 export interface EventDataNode extends DataNode {
@@ -42,3 +45,3 @@ expanded: boolean;
 };
-export declare type NodeInstance = React.Component<TreeNodeProps> & {
+export declare type NodeInstance<TreeDataType extends BasicDataNode = DataNode> = React.Component<TreeNodeProps<TreeDataType>> & {
     selectHandle?: HTMLSpanElement;
@@ -54,6 +57,6 @@ };
 }
-export interface DataEntity extends Omit<Entity, 'node' | 'parent' | 'children'> {
-    node: DataNode;
-    parent?: DataEntity;
-    children?: DataEntity[];
+export interface DataEntity<TreeDataType extends BasicDataNode = DataNode> extends Omit<Entity, 'node' | 'parent' | 'children'> {
+    node: TreeDataType;
+    parent?: DataEntity<TreeDataType>;
+    children?: DataEntity<TreeDataType>[];
     level: number;
@@ -60,0 +63,0 @@ }

es/NodeList.d.ts

@@ -30,3 +30,3 @@ /**
     halfCheckedKeys: Key[];
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<any>>;
     dragging: boolean;
@@ -33,0 +33,0 @@ dragOverNodeKey: Key;

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, FieldNames } from './interface';
+import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction, FieldNames, BasicDataNode } from './interface';
 import { NodeListRef } from './NodeList';
 import DropIndicator from './DropIndicator';
-interface CheckInfo {
+interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
     event: 'check';
@@ -11,5 +11,5 @@ node: EventDataNode;
     nativeEvent: MouseEvent;
-    checkedNodes: DataNode[];
+    checkedNodes: TreeDataType[];
     checkedNodesPositions?: {
-        node: DataNode;
+        node: TreeDataType;
         pos: string;
@@ -19,8 +19,8 @@ }[];
 }
-export interface AllowDropOptions {
-    dragNode: DataNode;
-    dropNode: DataNode;
+export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode> {
+    dragNode: TreeDataType;
+    dropNode: TreeDataType;
     dropPosition: -1 | 0 | 1;
 }
-export declare type AllowDrop = (options: AllowDropOptions) => boolean;
+export declare type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
 export declare type DraggableFn = (node: DataNode) => boolean;
@@ -31,3 +31,3 @@ export declare type DraggableConfig = {
 };
-export interface TreeProps {
+export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     prefixCls: string;
@@ -39,3 +39,3 @@ className?: string;
     children?: React.ReactNode;
-    treeData?: DataNode[];
+    treeData?: TreeDataType[];
     fieldNames?: FieldNames;
@@ -63,4 +63,4 @@ showLine?: boolean;
     selectedKeys?: Key[];
-    allowDrop?: AllowDrop;
-    titleRender?: (node: DataNode) => React.ReactNode;
+    allowDrop?: AllowDrop<TreeDataType>;
+    titleRender?: (node: TreeDataType) => React.ReactNode;
     dropIndicatorRender?: (props: {
@@ -88,3 +88,3 @@ dropPosition: -1 | 0 | 1;
         halfChecked: Key[];
-    } | Key[], info: CheckInfo) => void;
+    } | Key[], info: CheckInfo<BasicDataNode>) => void;
     onSelect?: (selectedKeys: Key[], info: {
@@ -94,3 +94,3 @@ event: 'select';
         node: EventDataNode;
-        selectedNodes: DataNode[];
+        selectedNodes: TreeDataType[];
         nativeEvent: MouseEvent;
@@ -136,4 +136,4 @@ }) => void;
 }
-interface TreeState {
-    keyEntities: Record<Key, DataEntity>;
+interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
     indent: number | null;
@@ -163,3 +163,3 @@ selectedKeys: Key[];
 }
-declare class Tree extends React.Component<TreeProps, TreeState> {
+declare class Tree<TreeDataType extends BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
     static defaultProps: {
@@ -184,14 +184,14 @@ prefixCls: string;
     };
-    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps>;
+    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps<DataNode>>;
     destroyed: boolean;
     delayedDragEnterLogic: Record<Key, number>;
     loadingRetryTimes: Record<Key, number>;
-    state: TreeState;
+    state: TreeState<TreeDataType>;
     dragStartMousePosition: any;
-    dragNode: NodeInstance;
+    dragNode: NodeInstance<TreeDataType>;
     currentMouseOverDroppableNodeKey: any;
     listRef: React.RefObject<NodeListRef>;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
-    onNodeDragStart: NodeDragEventHandler;
+    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
+    onNodeDragStart: NodeDragEventHandler<HTMLDivElement, TreeDataType>;
     /**
@@ -204,4 +204,4 @@ * [Legacy] Select handler is smaller than node,
      */
-    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance) => void;
-    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance) => void;
+    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
+    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
     onNodeDragLeave: NodeDragEventHandler;
@@ -231,3 +231,3 @@ onWindowDragEnd: (event: any) => void;
         dropPosition: 0 | 1 | -1;
-        keyEntities: Record<Key, DataEntity>;
+        keyEntities: Record<Key, DataEntity<TreeDataType>>;
     };
@@ -246,3 +246,3 @@ /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
      */
-    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState> | null) => void;
+    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
     scrollTo: ScrollTo;
@@ -249,0 +249,0 @@ render(): JSX.Element;

es/Tree.js

@@ -16,5 +16,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import warning from "rc-util/es/warning";
+import pickAttrs from "rc-util/es/pickAttrs";
 import classNames from 'classnames';
 import { TreeContext } from './contextTypes';
-import { getDataAndAria, getDragChildrenKeys, parseCheckedKeys, conductExpandParent, calcSelectedKeys, calcDropPosition, arrAdd, arrDel, posToArr } from './util';
+import { getDragChildrenKeys, parseCheckedKeys, conductExpandParent, calcSelectedKeys, calcDropPosition, arrAdd, arrDel, posToArr } from './util';
 import { flattenTreeData, convertTreeToData, convertDataToEntities, warningWithoutKey, convertNodePropsToEventData, getTreeNodeProps, fillFieldNames } from './utils/treeUtil';
@@ -1038,3 +1039,6 @@ import NodeList, { MOTION_KEY, MotionEntity } from './NodeList';
           direction = _this$props8.direction;
-      var domProps = getDataAndAria(this.props); // It's better move to hooks but we just simply keep here
+      var domProps = pickAttrs(this.props, {
+        aria: true,
+        data: true
+      }); // It's better move to hooks but we just simply keep here
 
@@ -1041,0 +1045,0 @@ var draggableConfig;

es/TreeNode.d.ts

 import * as React from 'react';
 import { TreeContextProps } from './contextTypes';
-import { IconType, Key, DataNode } from './interface';
-export interface TreeNodeProps {
+import { IconType, Key, DataNode, BasicDataNode } from './interface';
+export interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
     eventKey?: Key;
@@ -15,3 +15,3 @@ prefixCls?: string;
     halfChecked?: boolean;
-    title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
+    title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
     dragOver?: boolean;
@@ -23,3 +23,3 @@ dragOverGapTop?: boolean;
     /** New added in Tree for easy data access */
-    data?: DataNode;
+    data?: TreeDataType;
     isStart?: boolean[];
@@ -26,0 +26,0 @@ isEnd?: boolean[];

es/TreeNode.js

@@ -12,6 +12,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import classNames from 'classnames'; // @ts-ignore
+import classNames from 'classnames';
+import pickAttrs from "rc-util/es/pickAttrs"; // @ts-ignore
 
 import { TreeContext } from './contextTypes';
-import { getDataAndAria } from './util';
 import Indent from './Indent';
@@ -461,3 +461,6 @@ import { convertNodePropsToEventData } from './utils/treeUtil';
       var disabled = this.isDisabled();
-      var dataOrAriaAttributeProps = getDataAndAria(otherProps);
+      var dataOrAriaAttributeProps = pickAttrs(otherProps, {
+        aria: true,
+        data: true
+      });
 
@@ -464,0 +467,0 @@ var _ref2 = keyEntities[eventKey] || {},

es/util.d.ts

@@ -5,4 +5,3 @@ /**
 import React from 'react';
-import { TreeNodeProps } from './TreeNode';
-import { NodeElement, Key, DataNode, DataEntity, NodeInstance, FlattenNode, Direction } from './interface';
+import { NodeElement, Key, DataNode, DataEntity, NodeInstance, FlattenNode, Direction, BasicDataNode } from './interface';
 import { TreeProps, AllowDrop } from './Tree';
@@ -14,9 +13,9 @@ export declare function arrDel(list: Key[], value: Key): Key[];
 export declare function isTreeNode(node: NodeElement): boolean;
-export declare function getDragChildrenKeys(dragNodeKey: Key, keyEntities: Record<Key, DataEntity>): Key[];
-export declare function isLastChild(treeNodeEntity: DataEntity): boolean;
-export declare function isFirstChild(treeNodeEntity: DataEntity): boolean;
-export declare function calcDropPosition(event: React.MouseEvent, dragNode: NodeInstance, targetNode: NodeInstance, indent: number, startMousePosition: {
+export declare function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(dragNodeKey: Key, keyEntities: Record<Key, DataEntity<TreeDataType>>): Key[];
+export declare function isLastChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
+export declare function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
+export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNode: NodeInstance<TreeDataType>, targetNode: NodeInstance<TreeDataType>, indent: number, startMousePosition: {
     x: number;
     y: number;
-}, allowDrop: AllowDrop, flattenedNodes: FlattenNode[], keyEntities: Record<Key, DataEntity>, expandKeys: Key[], direction: Direction): {
+}, allowDrop: AllowDrop<TreeDataType>, flattenedNodes: FlattenNode[], keyEntities: Record<Key, DataEntity<TreeDataType>>, expandKeys: Key[], direction: Direction): {
     dropPosition: -1 | 0 | 1;
@@ -53,5 +52,1 @@ dropLevelOffset: number;
 export declare function conductExpandParent(keyList: Key[], keyEntities: Record<Key, DataEntity>): Key[];
-/**
- * Returns only the data- and aria- key/value pairs
- */
-export declare function getDataAndAria(props: Partial<TreeProps | TreeNodeProps>): Record<string, string>;

es/util.js

@@ -305,15 +305,2 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
   return _toConsumableArray(expandedKeys);
-}
-/**
- * Returns only the data- and aria- key/value pairs
- */
-
-export function getDataAndAria(props) {
-  var omitProps = {};
-  Object.keys(props).forEach(function (key) {
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      omitProps[key] = props[key];
-    }
-  });
-  return omitProps;
 }

es/utils/conductUtil.d.ts

@@ -1,2 +0,2 @@
-import { Key, DataEntity, DataNode, GetCheckDisabled } from '../interface';
+import { Key, DataEntity, DataNode, GetCheckDisabled, BasicDataNode } from '../interface';
 interface ConductReturnType {
@@ -6,3 +6,3 @@ checkedKeys: Key[];
 }
-export declare function isCheckDisabled(node: DataNode): boolean;
+export declare function isCheckDisabled<TreeDataType>(node: TreeDataType): boolean;
 /**
@@ -14,6 +14,6 @@ * Conduct with keys.
  */
-export declare function conductCheck(keyList: Key[], checked: true | {
+export declare function conductCheck<TreeDataType extends BasicDataNode = DataNode>(keyList: Key[], checked: true | {
     checked: false;
     halfCheckedKeys: Key[];
-}, keyEntities: Record<Key, DataEntity>, getCheckDisabled?: GetCheckDisabled<DataNode>): ConductReturnType;
+}, keyEntities: Record<Key, DataEntity<TreeDataType>>, getCheckDisabled?: GetCheckDisabled<TreeDataType>): ConductReturnType;
 export {};

es/utils/treeUtil.d.ts

 import * as React from 'react';
-import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames } from '../interface';
+import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames, BasicDataNode } from '../interface';
 import { TreeNodeProps } from '../TreeNode';
@@ -63,3 +63,3 @@ export declare function getKey(key: Key, pos: string): Key;
 };
-export interface TreeNodeRequiredProps {
+export interface TreeNodeRequiredProps<TreeDataType extends BasicDataNode = DataNode> {
     expandedKeys: Key[];
@@ -73,3 +73,3 @@ selectedKeys: Key[];
     dropPosition: number;
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
 }
@@ -79,3 +79,3 @@ /**
  */
-export declare function getTreeNodeProps(key: Key, { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities, }: TreeNodeRequiredProps): {
+export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = DataNode>(key: Key, { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities, }: TreeNodeRequiredProps<TreeDataType>): {
     eventKey: Key;
@@ -93,3 +93,3 @@ expanded: boolean;
 };
-export declare function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode;
+export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode;
 export {};

lib/contextTypes.d.ts

@@ -6,3 +6,3 @@ /**
 import * as React from 'react';
-import { IconType, Key, DataEntity, EventDataNode, NodeInstance, DataNode, Direction } from './interface';
+import { IconType, Key, DataEntity, EventDataNode, NodeInstance, DataNode, Direction, BasicDataNode } from './interface';
 import { DraggableConfig } from './Tree';
@@ -18,3 +18,3 @@ export declare type NodeMouseEventParams<T = HTMLSpanElement> = {
 export declare type NodeMouseEventHandler<T = HTMLSpanElement> = (e: React.MouseEvent<T>, node: EventDataNode) => void;
-export declare type NodeDragEventHandler<T = HTMLDivElement> = (e: React.DragEvent<T>, node: NodeInstance, outsideTree?: boolean) => void;
+export declare type NodeDragEventHandler<T = HTMLDivElement, TreeDataType extends BasicDataNode = DataNode> = (e: React.DragEvent<T>, node: NodeInstance<TreeDataType>, outsideTree?: boolean) => void;
 export interface TreeContextProps {
@@ -31,3 +31,3 @@ prefixCls: string;
     disabled: boolean;
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<any>>;
     dropLevelOffset?: number;
@@ -49,3 +49,3 @@ dropContainerKey: Key | null;
     filterTreeNode: (treeNode: EventDataNode) => boolean;
-    titleRender?: (node: DataNode) => React.ReactNode;
+    titleRender?: (node: any) => React.ReactNode;
     onNodeClick: NodeMouseEventHandler;
@@ -60,9 +60,9 @@ onNodeDoubleClick: NodeMouseEventHandler;
     onNodeContextMenu: NodeMouseEventHandler;
-    onNodeDragStart: NodeDragEventHandler;
-    onNodeDragEnter: NodeDragEventHandler;
-    onNodeDragOver: NodeDragEventHandler;
-    onNodeDragLeave: NodeDragEventHandler;
-    onNodeDragEnd: NodeDragEventHandler;
-    onNodeDrop: NodeDragEventHandler;
+    onNodeDragStart: NodeDragEventHandler<any, any>;
+    onNodeDragEnter: NodeDragEventHandler<any, any>;
+    onNodeDragOver: NodeDragEventHandler<any, any>;
+    onNodeDragLeave: NodeDragEventHandler<any, any>;
+    onNodeDragEnd: NodeDragEventHandler<any, any>;
+    onNodeDrop: NodeDragEventHandler<any, any>;
 }
 export declare const TreeContext: React.Context<TreeContextProps | null>;

lib/index.d.ts

@@ -5,4 +5,5 @@ import Tree from './Tree';
 import type { TreeNodeProps } from './TreeNode';
+import type { BasicDataNode } from './interface';
 export { TreeNode };
-export type { TreeProps, TreeNodeProps };
+export type { TreeProps, TreeNodeProps, BasicDataNode };
 export default Tree;

lib/interface.d.ts

 import * as React from 'react';
 import { TreeNodeProps } from './TreeNode';
 export { ScrollTo } from 'rc-virtual-list/lib/List';
-export interface DataNode {
+/** For fieldNames, we provides a abstract interface */
+export interface BasicDataNode {
     checkable?: boolean;
-    children?: DataNode[];
     disabled?: boolean;
@@ -11,4 +11,2 @@ disableCheckbox?: boolean;
     isLeaf?: boolean;
-    key: string | number;
-    title?: React.ReactNode;
     selectable?: boolean;
@@ -20,2 +18,7 @@ switcherIcon?: IconType;
 }
+export interface DataNode extends BasicDataNode {
+    children?: DataNode[];
+    key: string | number;
+    title?: React.ReactNode;
+}
 export interface EventDataNode extends DataNode {
@@ -42,3 +45,3 @@ expanded: boolean;
 };
-export declare type NodeInstance = React.Component<TreeNodeProps> & {
+export declare type NodeInstance<TreeDataType extends BasicDataNode = DataNode> = React.Component<TreeNodeProps<TreeDataType>> & {
     selectHandle?: HTMLSpanElement;
@@ -54,6 +57,6 @@ };
 }
-export interface DataEntity extends Omit<Entity, 'node' | 'parent' | 'children'> {
-    node: DataNode;
-    parent?: DataEntity;
-    children?: DataEntity[];
+export interface DataEntity<TreeDataType extends BasicDataNode = DataNode> extends Omit<Entity, 'node' | 'parent' | 'children'> {
+    node: TreeDataType;
+    parent?: DataEntity<TreeDataType>;
+    children?: DataEntity<TreeDataType>[];
     level: number;
@@ -60,0 +63,0 @@ }

lib/NodeList.d.ts

@@ -30,3 +30,3 @@ /**
     halfCheckedKeys: Key[];
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<any>>;
     dragging: boolean;
@@ -33,0 +33,0 @@ dragOverNodeKey: Key;

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, FieldNames } from './interface';
+import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction, FieldNames, BasicDataNode } from './interface';
 import { NodeListRef } from './NodeList';
 import DropIndicator from './DropIndicator';
-interface CheckInfo {
+interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
     event: 'check';
@@ -11,5 +11,5 @@ node: EventDataNode;
     nativeEvent: MouseEvent;
-    checkedNodes: DataNode[];
+    checkedNodes: TreeDataType[];
     checkedNodesPositions?: {
-        node: DataNode;
+        node: TreeDataType;
         pos: string;
@@ -19,8 +19,8 @@ }[];
 }
-export interface AllowDropOptions {
-    dragNode: DataNode;
-    dropNode: DataNode;
+export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode> {
+    dragNode: TreeDataType;
+    dropNode: TreeDataType;
     dropPosition: -1 | 0 | 1;
 }
-export declare type AllowDrop = (options: AllowDropOptions) => boolean;
+export declare type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
 export declare type DraggableFn = (node: DataNode) => boolean;
@@ -31,3 +31,3 @@ export declare type DraggableConfig = {
 };
-export interface TreeProps {
+export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     prefixCls: string;
@@ -39,3 +39,3 @@ className?: string;
     children?: React.ReactNode;
-    treeData?: DataNode[];
+    treeData?: TreeDataType[];
     fieldNames?: FieldNames;
@@ -63,4 +63,4 @@ showLine?: boolean;
     selectedKeys?: Key[];
-    allowDrop?: AllowDrop;
-    titleRender?: (node: DataNode) => React.ReactNode;
+    allowDrop?: AllowDrop<TreeDataType>;
+    titleRender?: (node: TreeDataType) => React.ReactNode;
     dropIndicatorRender?: (props: {
@@ -88,3 +88,3 @@ dropPosition: -1 | 0 | 1;
         halfChecked: Key[];
-    } | Key[], info: CheckInfo) => void;
+    } | Key[], info: CheckInfo<BasicDataNode>) => void;
     onSelect?: (selectedKeys: Key[], info: {
@@ -94,3 +94,3 @@ event: 'select';
         node: EventDataNode;
-        selectedNodes: DataNode[];
+        selectedNodes: TreeDataType[];
         nativeEvent: MouseEvent;
@@ -136,4 +136,4 @@ }) => void;
 }
-interface TreeState {
-    keyEntities: Record<Key, DataEntity>;
+interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
     indent: number | null;
@@ -163,3 +163,3 @@ selectedKeys: Key[];
 }
-declare class Tree extends React.Component<TreeProps, TreeState> {
+declare class Tree<TreeDataType extends BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
     static defaultProps: {
@@ -184,14 +184,14 @@ prefixCls: string;
     };
-    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps>;
+    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps<DataNode>>;
     destroyed: boolean;
     delayedDragEnterLogic: Record<Key, number>;
     loadingRetryTimes: Record<Key, number>;
-    state: TreeState;
+    state: TreeState<TreeDataType>;
     dragStartMousePosition: any;
-    dragNode: NodeInstance;
+    dragNode: NodeInstance<TreeDataType>;
     currentMouseOverDroppableNodeKey: any;
     listRef: React.RefObject<NodeListRef>;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState>;
-    onNodeDragStart: NodeDragEventHandler;
+    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
+    onNodeDragStart: NodeDragEventHandler<HTMLDivElement, TreeDataType>;
     /**
@@ -204,4 +204,4 @@ * [Legacy] Select handler is smaller than node,
      */
-    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance) => void;
-    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance) => void;
+    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
+    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
     onNodeDragLeave: NodeDragEventHandler;
@@ -231,3 +231,3 @@ onWindowDragEnd: (event: any) => void;
         dropPosition: 0 | 1 | -1;
-        keyEntities: Record<Key, DataEntity>;
+        keyEntities: Record<Key, DataEntity<TreeDataType>>;
     };
@@ -246,3 +246,3 @@ /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
      */
-    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState> | null) => void;
+    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
     scrollTo: ScrollTo;
@@ -249,0 +249,0 @@ render(): JSX.Element;

lib/Tree.js

@@ -38,2 +38,4 @@ "use strict";
 
+var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -1066,3 +1068,6 @@
           direction = _this$props8.direction;
-      var domProps = (0, _util.getDataAndAria)(this.props); // It's better move to hooks but we just simply keep here
+      var domProps = (0, _pickAttrs.default)(this.props, {
+        aria: true,
+        data: true
+      }); // It's better move to hooks but we just simply keep here
 
@@ -1069,0 +1074,0 @@ var draggableConfig;

lib/TreeNode.d.ts

 import * as React from 'react';
 import { TreeContextProps } from './contextTypes';
-import { IconType, Key, DataNode } from './interface';
-export interface TreeNodeProps {
+import { IconType, Key, DataNode, BasicDataNode } from './interface';
+export interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
     eventKey?: Key;
@@ -15,3 +15,3 @@ prefixCls?: string;
     halfChecked?: boolean;
-    title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
+    title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
     dragOver?: boolean;
@@ -23,3 +23,3 @@ dragOverGapTop?: boolean;
     /** New added in Tree for easy data access */
-    data?: DataNode;
+    data?: TreeDataType;
     isStart?: boolean[];
@@ -26,0 +26,0 @@ isEnd?: boolean[];

lib/TreeNode.js

@@ -34,6 +34,6 @@ "use strict";
 
+var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
+
 var _contextTypes = require("./contextTypes");
 
-var _util = require("./util");
-
 var _Indent = _interopRequireDefault(require("./Indent"));
@@ -485,3 +485,6 @@
       var disabled = this.isDisabled();
-      var dataOrAriaAttributeProps = (0, _util.getDataAndAria)(otherProps);
+      var dataOrAriaAttributeProps = (0, _pickAttrs.default)(otherProps, {
+        aria: true,
+        data: true
+      });
 
@@ -488,0 +491,0 @@ var _ref2 = keyEntities[eventKey] || {},

lib/util.d.ts

@@ -5,4 +5,3 @@ /**
 import React from 'react';
-import { TreeNodeProps } from './TreeNode';
-import { NodeElement, Key, DataNode, DataEntity, NodeInstance, FlattenNode, Direction } from './interface';
+import { NodeElement, Key, DataNode, DataEntity, NodeInstance, FlattenNode, Direction, BasicDataNode } from './interface';
 import { TreeProps, AllowDrop } from './Tree';
@@ -14,9 +13,9 @@ export declare function arrDel(list: Key[], value: Key): Key[];
 export declare function isTreeNode(node: NodeElement): boolean;
-export declare function getDragChildrenKeys(dragNodeKey: Key, keyEntities: Record<Key, DataEntity>): Key[];
-export declare function isLastChild(treeNodeEntity: DataEntity): boolean;
-export declare function isFirstChild(treeNodeEntity: DataEntity): boolean;
-export declare function calcDropPosition(event: React.MouseEvent, dragNode: NodeInstance, targetNode: NodeInstance, indent: number, startMousePosition: {
+export declare function getDragChildrenKeys<TreeDataType extends BasicDataNode = DataNode>(dragNodeKey: Key, keyEntities: Record<Key, DataEntity<TreeDataType>>): Key[];
+export declare function isLastChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
+export declare function isFirstChild<TreeDataType extends BasicDataNode = DataNode>(treeNodeEntity: DataEntity<TreeDataType>): boolean;
+export declare function calcDropPosition<TreeDataType extends BasicDataNode = DataNode>(event: React.MouseEvent, dragNode: NodeInstance<TreeDataType>, targetNode: NodeInstance<TreeDataType>, indent: number, startMousePosition: {
     x: number;
     y: number;
-}, allowDrop: AllowDrop, flattenedNodes: FlattenNode[], keyEntities: Record<Key, DataEntity>, expandKeys: Key[], direction: Direction): {
+}, allowDrop: AllowDrop<TreeDataType>, flattenedNodes: FlattenNode[], keyEntities: Record<Key, DataEntity<TreeDataType>>, expandKeys: Key[], direction: Direction): {
     dropPosition: -1 | 0 | 1;
@@ -53,5 +52,1 @@ dropLevelOffset: number;
 export declare function conductExpandParent(keyList: Key[], keyEntities: Record<Key, DataEntity>): Key[];
-/**
- * Returns only the data- and aria- key/value pairs
- */
-export declare function getDataAndAria(props: Partial<TreeProps | TreeNodeProps>): Record<string, string>;

lib/util.js

@@ -14,3 +14,2 @@ "use strict";
 exports.convertDataToTree = convertDataToTree;
-exports.getDataAndAria = getDataAndAria;
 exports.getDragChildrenKeys = getDragChildrenKeys;
@@ -339,16 +338,2 @@ exports.getPosition = getPosition;
   return (0, _toConsumableArray2.default)(expandedKeys);
-}
-/**
- * Returns only the data- and aria- key/value pairs
- */
-
-
-function getDataAndAria(props) {
-  var omitProps = {};
-  Object.keys(props).forEach(function (key) {
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      omitProps[key] = props[key];
-    }
-  });
-  return omitProps;
 }

lib/utils/conductUtil.d.ts

@@ -1,2 +0,2 @@
-import { Key, DataEntity, DataNode, GetCheckDisabled } from '../interface';
+import { Key, DataEntity, DataNode, GetCheckDisabled, BasicDataNode } from '../interface';
 interface ConductReturnType {
@@ -6,3 +6,3 @@ checkedKeys: Key[];
 }
-export declare function isCheckDisabled(node: DataNode): boolean;
+export declare function isCheckDisabled<TreeDataType>(node: TreeDataType): boolean;
 /**
@@ -14,6 +14,6 @@ * Conduct with keys.
  */
-export declare function conductCheck(keyList: Key[], checked: true | {
+export declare function conductCheck<TreeDataType extends BasicDataNode = DataNode>(keyList: Key[], checked: true | {
     checked: false;
     halfCheckedKeys: Key[];
-}, keyEntities: Record<Key, DataEntity>, getCheckDisabled?: GetCheckDisabled<DataNode>): ConductReturnType;
+}, keyEntities: Record<Key, DataEntity<TreeDataType>>, getCheckDisabled?: GetCheckDisabled<TreeDataType>): ConductReturnType;
 export {};

lib/utils/treeUtil.d.ts

 import * as React from 'react';
-import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames } from '../interface';
+import { DataNode, FlattenNode, DataEntity, Key, EventDataNode, GetKey, FieldNames, BasicDataNode } from '../interface';
 import { TreeNodeProps } from '../TreeNode';
@@ -63,3 +63,3 @@ export declare function getKey(key: Key, pos: string): Key;
 };
-export interface TreeNodeRequiredProps {
+export interface TreeNodeRequiredProps<TreeDataType extends BasicDataNode = DataNode> {
     expandedKeys: Key[];
@@ -73,3 +73,3 @@ selectedKeys: Key[];
     dropPosition: number;
-    keyEntities: Record<Key, DataEntity>;
+    keyEntities: Record<Key, DataEntity<TreeDataType>>;
 }
@@ -79,3 +79,3 @@ /**
  */
-export declare function getTreeNodeProps(key: Key, { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities, }: TreeNodeRequiredProps): {
+export declare function getTreeNodeProps<TreeDataType extends BasicDataNode = DataNode>(key: Key, { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities, }: TreeNodeRequiredProps<TreeDataType>): {
     eventKey: Key;
@@ -93,3 +93,3 @@ expanded: boolean;
 };
-export declare function convertNodePropsToEventData(props: TreeNodeProps): EventDataNode;
+export declare function convertNodePropsToEventData<TreeDataType extends BasicDataNode = DataNode>(props: TreeNodeProps<TreeDataType>): EventDataNode;
 export {};

package.json

 {
   "name": "rc-tree",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "description": "tree ui component for react",
@@ -5,0 +5,0 @@ "engines": {

No alert changes

Improved metrics

Total package byte prevSize

342047

increased by0.77%

Worsened metrics

Lines of code

7262

decreased by-0.18%

No dependency changes