Tree.d.ts 9.8 KB

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