UNPKG

9.9 kBTypeScriptView Raw
1import * as React from 'react';
2import { NodeMouseEventHandler, NodeDragEventHandler, NodeDragEventParams, NodeMouseEventParams } from './contextTypes';
3import { DataNode, IconType, Key, FlattenNode, DataEntity, EventDataNode, NodeInstance, ScrollTo, Direction, FieldNames, BasicDataNode } from './interface';
4import { NodeListRef } from './NodeList';
5import DropIndicator from './DropIndicator';
6interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
7 event: 'check';
8 node: EventDataNode<TreeDataType>;
9 checked: boolean;
10 nativeEvent: MouseEvent;
11 checkedNodes: TreeDataType[];
12 checkedNodesPositions?: {
13 node: TreeDataType;
14 pos: string;
15 }[];
16 halfCheckedKeys?: Key[];
17}
18export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode> {
19 dragNode: TreeDataType;
20 dropNode: TreeDataType;
21 dropPosition: -1 | 0 | 1;
22}
23export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
24export type DraggableFn = (node: DataNode) => boolean;
25export type DraggableConfig = {
26 icon?: React.ReactNode | false;
27 nodeDraggable?: DraggableFn;
28};
29export type ExpandAction = false | 'click' | 'doubleClick';
30export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
31 prefixCls: string;
32 className?: string;
33 style?: React.CSSProperties;
34 focusable?: boolean;
35 activeKey?: Key | null;
36 tabIndex?: number;
37 children?: React.ReactNode;
38 treeData?: TreeDataType[];
39 fieldNames?: FieldNames;
40 showLine?: boolean;
41 showIcon?: boolean;
42 icon?: IconType;
43 selectable?: boolean;
44 expandAction?: ExpandAction;
45 disabled?: boolean;
46 multiple?: boolean;
47 checkable?: boolean | React.ReactNode;
48 checkStrictly?: boolean;
49 draggable?: DraggableFn | boolean | DraggableConfig;
50 defaultExpandParent?: boolean;
51 autoExpandParent?: boolean;
52 defaultExpandAll?: boolean;
53 defaultExpandedKeys?: Key[];
54 expandedKeys?: Key[];
55 defaultCheckedKeys?: Key[];
56 checkedKeys?: Key[] | {
57 checked: Key[];
58 halfChecked: Key[];
59 };
60 defaultSelectedKeys?: Key[];
61 selectedKeys?: Key[];
62 allowDrop?: AllowDrop<TreeDataType>;
63 titleRender?: (node: TreeDataType) => React.ReactNode;
64 dropIndicatorRender?: (props: {
65 dropPosition: -1 | 0 | 1;
66 dropLevelOffset: number;
67 indent: number;
68 prefixCls: string;
69 direction: Direction;
70 }) => React.ReactNode;
71 onFocus?: React.FocusEventHandler<HTMLDivElement>;
72 onBlur?: React.FocusEventHandler<HTMLDivElement>;
73 onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
74 onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
75 onClick?: NodeMouseEventHandler;
76 onDoubleClick?: NodeMouseEventHandler;
77 onScroll?: React.UIEventHandler<HTMLElement>;
78 onExpand?: (expandedKeys: Key[], info: {
79 node: EventDataNode<TreeDataType>;
80 expanded: boolean;
81 nativeEvent: MouseEvent;
82 }) => void;
83 onCheck?: (checked: {
84 checked: Key[];
85 halfChecked: Key[];
86 } | Key[], info: CheckInfo<TreeDataType>) => void;
87 onSelect?: (selectedKeys: Key[], info: {
88 event: 'select';
89 selected: boolean;
90 node: EventDataNode<TreeDataType>;
91 selectedNodes: TreeDataType[];
92 nativeEvent: MouseEvent;
93 }) => void;
94 onLoad?: (loadedKeys: Key[], info: {
95 event: 'load';
96 node: EventDataNode<TreeDataType>;
97 }) => void;
98 loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
99 loadedKeys?: Key[];
100 onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
101 onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;
102 onRightClick?: (info: {
103 event: React.MouseEvent;
104 node: EventDataNode<TreeDataType>;
105 }) => void;
106 onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
107 onDragEnter?: (info: NodeDragEventParams<TreeDataType> & {
108 expandedKeys: Key[];
109 }) => void;
110 onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
111 onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
112 onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
113 onDrop?: (info: NodeDragEventParams<TreeDataType> & {
114 dragNode: EventDataNode<TreeDataType>;
115 dragNodesKeys: Key[];
116 dropPosition: number;
117 dropToGap: boolean;
118 }) => void;
119 /**
120 * Used for `rc-tree-select` only.
121 * Do not use in your production code directly since this will be refactor.
122 */
123 onActiveChange?: (key: Key) => void;
124 filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
125 motion?: any;
126 switcherIcon?: IconType;
127 height?: number;
128 itemHeight?: number;
129 virtual?: boolean;
130 direction?: Direction;
131 rootClassName?: string;
132 rootStyle?: React.CSSProperties;
133}
134interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
135 keyEntities: Record<Key, DataEntity<TreeDataType>>;
136 indent: number | null;
137 selectedKeys: Key[];
138 checkedKeys: Key[];
139 halfCheckedKeys: Key[];
140 loadedKeys: Key[];
141 loadingKeys: Key[];
142 expandedKeys: Key[];
143 draggingNodeKey: React.Key;
144 dragChildrenKeys: Key[];
145 dropPosition: -1 | 0 | 1 | null;
146 dropLevelOffset: number | null;
147 dropContainerKey: Key | null;
148 dropTargetKey: Key | null;
149 dropTargetPos: string | null;
150 dropAllowed: boolean;
151 dragOverNodeKey: Key | null;
152 treeData: TreeDataType[];
153 flattenNodes: FlattenNode<TreeDataType>[];
154 focused: boolean;
155 activeKey: Key | null;
156 listChanging: boolean;
157 prevProps: TreeProps;
158 fieldNames: FieldNames;
159}
160declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
161 static defaultProps: {
162 prefixCls: string;
163 showLine: boolean;
164 showIcon: boolean;
165 selectable: boolean;
166 multiple: boolean;
167 checkable: boolean;
168 disabled: boolean;
169 checkStrictly: boolean;
170 draggable: boolean;
171 defaultExpandParent: boolean;
172 autoExpandParent: boolean;
173 defaultExpandAll: boolean;
174 defaultExpandedKeys: any[];
175 defaultCheckedKeys: any[];
176 defaultSelectedKeys: any[];
177 dropIndicatorRender: typeof DropIndicator;
178 allowDrop: () => boolean;
179 expandAction: boolean;
180 };
181 static TreeNode: React.FC<import("./TreeNode").TreeNodeProps<DataNode>>;
182 destroyed: boolean;
183 delayedDragEnterLogic: Record<Key, number>;
184 loadingRetryTimes: Record<Key, number>;
185 state: TreeState<TreeDataType>;
186 dragStartMousePosition: any;
187 dragNode: NodeInstance<TreeDataType>;
188 currentMouseOverDroppableNodeKey: any;
189 listRef: React.RefObject<NodeListRef>;
190 componentDidMount(): void;
191 componentDidUpdate(): void;
192 onUpdated(): void;
193 componentWillUnmount(): void;
194 static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
195 onNodeDragStart: NodeDragEventHandler<TreeDataType, HTMLDivElement>;
196 /**
197 * [Legacy] Select handler is smaller than node,
198 * so that this will trigger when drag enter node or select handler.
199 * This is a little tricky if customize css without padding.
200 * Better for use mouse move event to refresh drag state.
201 * But let's just keep it to avoid event trigger logic change.
202 */
203 onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
204 onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, node: NodeInstance<TreeDataType>) => void;
205 onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
206 onWindowDragEnd: (event: any) => void;
207 onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
208 onNodeDrop: (event: React.DragEvent<HTMLDivElement>, node: any, outsideTree?: boolean) => void;
209 resetDragState(): void;
210 cleanDragState: () => void;
211 triggerExpandActionExpand: NodeMouseEventHandler;
212 onNodeClick: NodeMouseEventHandler;
213 onNodeDoubleClick: NodeMouseEventHandler;
214 onNodeSelect: NodeMouseEventHandler<TreeDataType>;
215 onNodeCheck: (e: React.MouseEvent<HTMLSpanElement>, treeNode: EventDataNode<TreeDataType>, checked: boolean) => void;
216 onNodeLoad: (treeNode: EventDataNode<TreeDataType>) => Promise<void>;
217 onNodeMouseEnter: NodeMouseEventHandler<TreeDataType>;
218 onNodeMouseLeave: NodeMouseEventHandler<TreeDataType>;
219 onNodeContextMenu: NodeMouseEventHandler<TreeDataType>;
220 onFocus: React.FocusEventHandler<HTMLDivElement>;
221 onBlur: React.FocusEventHandler<HTMLDivElement>;
222 getTreeNodeRequiredProps: () => {
223 expandedKeys: Key[];
224 selectedKeys: Key[];
225 loadedKeys: Key[];
226 loadingKeys: Key[];
227 checkedKeys: Key[];
228 halfCheckedKeys: Key[];
229 dragOverNodeKey: Key;
230 dropPosition: 0 | 1 | -1;
231 keyEntities: Record<Key, DataEntity<TreeDataType>>;
232 };
233 /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
234 setExpandedKeys: (expandedKeys: Key[]) => void;
235 onNodeExpand: (e: React.MouseEvent<HTMLDivElement>, treeNode: EventDataNode<TreeDataType>) => void;
236 onListChangeStart: () => void;
237 onListChangeEnd: () => void;
238 onActiveChange: (newActiveKey: Key | null) => void;
239 getActiveItem: () => FlattenNode<TreeDataType>;
240 offsetActiveKey: (offset: number) => void;
241 onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
242 /**
243 * Only update the value which is not in props
244 */
245 setUncontrolledState: (state: Partial<TreeState<TreeDataType>>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
246 scrollTo: ScrollTo;
247 render(): React.JSX.Element;
248}
249export default Tree;