@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.21

package/dist/Tree/RCTree.d.ts

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
-import DropIndicator from './DropIndicator';
-import { NodeListRef } from './NodeList';
+import * as React from 'react';
+import { DropIndicatorProps } from './DropIndicator';
+import { type NodeListRef } from './NodeList';
 import { NodeDragEventHandler, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
-import { BasicDataNode, DataEntity, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, NodeInstance, ScrollTo } from './typings';
+import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, SafeKey, ScrollTo, TreeNodeProps } from './typings';
 export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
     event: 'check';
-    node: EventDataNode;
+    node: EventDataNode<TreeDataType>;
     checked: boolean;
     nativeEvent: MouseEvent;
     checkedNodes: TreeDataType[];
@@ -23,26 +23,31 @@ export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode>
 export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
 export type DraggableFn = (node: DataNode) => boolean;
 export type DraggableConfig = {
-    icon?: React.ReactElement | false;
+    icon?: React.ReactNode | false;
     nodeDraggable?: DraggableFn;
 };
+export type ExpandAction = false | 'click' | 'doubleClick';
+export type SemanticName = 'itemIcon' | 'item' | 'itemTitle';
 export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
-    prefixCls?: string;
+    prefixCls: string;
     className?: string;
     style?: React.CSSProperties;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+    classNames?: Partial<Record<SemanticName, string>>;
     focusable?: boolean;
-    activeKey?: Key;
+    activeKey?: Key | null;
     tabIndex?: number;
-    children?: React.ReactElement;
+    children?: React.ReactNode;
     treeData?: TreeDataType[];
     fieldNames?: FieldNames;
     showLine?: boolean;
     showIcon?: boolean;
     icon?: IconType;
     selectable?: boolean;
+    expandAction?: ExpandAction;
     disabled?: boolean;
     multiple?: boolean;
-    checkable?: boolean | React.ReactElement;
+    checkable?: boolean | React.ReactNode;
     checkStrictly?: boolean;
     draggable?: DraggableFn | boolean | DraggableConfig;
     defaultExpandParent?: boolean;
@@ -58,23 +63,17 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     defaultSelectedKeys?: Key[];
     selectedKeys?: Key[];
     allowDrop?: AllowDrop<TreeDataType>;
-    titleRender?: (node: TreeDataType) => React.ReactElement | string;
-    dropIndicatorRender?: (props: {
-        dropPosition: -1 | 0 | 1;
-        dropLevelOffset: number;
-        indent: number;
-        prefixCls: string;
-        direction: Direction;
-    }) => React.ReactElement;
+    titleRender?: (node: TreeDataType) => React.ReactNode;
+    dropIndicatorRender?: (props: DropIndicatorProps) => React.ReactNode;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    onContextMenu?: React.MouseEvent<HTMLDivElement>;
-    onClick?: NodeMouseEventHandler;
-    onDoubleClick?: NodeMouseEventHandler;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: NodeMouseEventHandler<TreeDataType>;
+    onDoubleClick?: NodeMouseEventHandler<TreeDataType>;
     onScroll?: React.UIEventHandler<HTMLElement>;
     onExpand?: (expandedKeys: Key[], info: {
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
         expanded: boolean;
         nativeEvent: MouseEvent;
     }) => void;
@@ -85,48 +84,54 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     onSelect?: (selectedKeys: Key[], info: {
         event: 'select';
         selected: boolean;
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
         selectedNodes: TreeDataType[];
         nativeEvent: MouseEvent;
     }) => void;
     onLoad?: (loadedKeys: Key[], info: {
         event: 'load';
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
     }) => void;
-    loadData?: (treeNode: EventDataNode) => Promise<void>;
+    loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
     loadedKeys?: Key[];
-    onMouseEnter?: (info: NodeMouseEventParams) => void;
-    onMouseLeave?: (info: NodeMouseEventParams) => void;
+    onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
+    onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;
     onRightClick?: (info: {
         event: React.MouseEvent;
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
     }) => void;
-    onDragStart?: (info: NodeDragEventParams) => void;
-    onDragEnter?: (info: NodeDragEventParams & {
+    onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnter?: (info: NodeDragEventParams<TreeDataType> & {
         expandedKeys: Key[];
     }) => void;
-    onDragOver?: (info: NodeDragEventParams) => void;
-    onDragLeave?: (info: NodeDragEventParams) => void;
-    onDragEnd?: (info: NodeDragEventParams) => void;
-    onDrop?: (info: NodeDragEventParams & {
-        dragNode: EventDataNode;
+    onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDrop?: (info: NodeDragEventParams<TreeDataType> & {
+        dragNode: EventDataNode<TreeDataType>;
         dragNodesKeys: Key[];
         dropPosition: number;
         dropToGap: boolean;
     }) => void;
+    /**
+     * Used for `rc-tree-select` only.
+     * Do not use in your production code directly since this will be refactor.
+     */
     onActiveChange?: (key: Key) => void;
-    filterTreeNode?: (treeNode: EventDataNode) => boolean;
+    filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
     motion?: any;
     switcherIcon?: IconType;
     height?: number;
     itemHeight?: number;
+    scrollWidth?: number;
+    itemScrollOffset?: number;
     virtual?: boolean;
     direction?: Direction;
     rootClassName?: string;
     rootStyle?: React.CSSProperties;
 }
 interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
-    keyEntities: Record<Key, DataEntity<TreeDataType>>;
+    keyEntities: KeyEntities<TreeDataType>;
     indent: number | null;
     selectedKeys: Key[];
     checkedKeys: Key[];
@@ -143,15 +148,15 @@ interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
     dropTargetPos: string | null;
     dropAllowed: boolean;
     dragOverNodeKey: Key | null;
-    treeData: DataNode[];
-    flattenNodes: FlattenNode[];
+    treeData: TreeDataType[];
+    flattenNodes: FlattenNode<TreeDataType>[];
     focused: boolean;
-    activeKey: Key;
+    activeKey: Key | null;
     listChanging: boolean;
     prevProps: TreeProps;
     fieldNames: FieldNames;
 }
-declare class RCTree<TreeDataType extends BasicDataNode = DataNode> extends Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
+declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
     static defaultProps: {
         prefixCls: string;
         showLine: boolean;
@@ -168,64 +173,76 @@ declare class RCTree<TreeDataType extends BasicDataNode = DataNode> extends Comp
         defaultExpandedKeys: any[];
         defaultCheckedKeys: any[];
         defaultSelectedKeys: any[];
-        dropIndicatorRender: typeof DropIndicator;
+        dropIndicatorRender: React.FC<Readonly<DropIndicatorProps>>;
         allowDrop: () => boolean;
+        expandAction: boolean;
     };
-    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps<DataNode<any>>>;
+    static TreeNode: React.FC<Readonly<TreeNodeProps<DataNode>>>;
     destroyed: boolean;
-    delayedDragEnterLogic: Record<Key, number>;
-    loadingRetryTimes: Record<Key, number>;
+    delayedDragEnterLogic: Record<SafeKey, number>;
+    loadingRetryTimes: Record<SafeKey, number>;
     state: TreeState<TreeDataType>;
     dragStartMousePosition: any;
-    dragNode: NodeInstance<TreeDataType>;
+    dragNodeProps: TreeNodeProps<TreeDataType>;
     currentMouseOverDroppableNodeKey: any;
     listRef: React.RefObject<NodeListRef>;
     componentDidMount(): void;
     componentDidUpdate(): void;
     onUpdated(): void;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode<any>>>;
-    onNodeDragStart: NodeDragEventHandler<HTMLDivElement, TreeDataType>;
-    onNodeDragEnter: (event: any, node: NodeInstance<TreeDataType>) => void;
-    onNodeDragOver: (event: any, node: NodeInstance<TreeDataType>) => void;
-    onNodeDragLeave: NodeDragEventHandler;
+    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
+    onNodeDragStart: NodeDragEventHandler<TreeDataType, HTMLDivElement>;
+    /**
+     * [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.
+     */
+    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
+    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
+    onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
     onWindowDragEnd: (event: any) => void;
-    onNodeDragEnd: NodeDragEventHandler;
-    onNodeDrop: (event: any, node: any, outsideTree?: boolean) => void;
+    onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
+    onNodeDrop: (event: React.DragEvent<HTMLDivElement>, _: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
     resetDragState(): void;
     cleanDragState: () => void;
-    onNodeClick: NodeMouseEventHandler;
-    onNodeDoubleClick: NodeMouseEventHandler;
-    onNodeSelect: NodeMouseEventHandler;
-    onNodeCheck: (e: any, treeNode: EventDataNode, checked: boolean) => void;
-    onNodeLoad: (treeNode: EventDataNode) => Promise<void>;
-    onNodeMouseEnter: NodeMouseEventHandler;
-    onNodeMouseLeave: NodeMouseEventHandler;
-    onNodeContextMenu: NodeMouseEventHandler;
+    triggerExpandActionExpand: NodeMouseEventHandler;
+    onNodeClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeDoubleClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeSelect: NodeMouseEventHandler<TreeDataType>;
+    onNodeCheck: (e: React.MouseEvent<HTMLSpanElement>, treeNode: EventDataNode<TreeDataType>, checked: boolean) => void;
+    onNodeLoad: (treeNode: EventDataNode<TreeDataType>) => Promise<void>;
+    onNodeMouseEnter: NodeMouseEventHandler<TreeDataType>;
+    onNodeMouseLeave: NodeMouseEventHandler<TreeDataType>;
+    onNodeContextMenu: NodeMouseEventHandler<TreeDataType>;
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
     getTreeNodeRequiredProps: () => {
-        expandedKeys: Key[];
-        selectedKeys: Key[];
-        loadedKeys: Key[];
-        loadingKeys: Key[];
-        checkedKeys: Key[];
-        halfCheckedKeys: Key[];
-        dragOverNodeKey: Key;
+        expandedKeys: React.Key[];
+        selectedKeys: React.Key[];
+        loadedKeys: React.Key[];
+        loadingKeys: React.Key[];
+        checkedKeys: React.Key[];
+        halfCheckedKeys: React.Key[];
+        dragOverNodeKey: React.Key;
         dropPosition: 0 | 1 | -1;
-        keyEntities: Record<Key, DataEntity<TreeDataType>>;
+        keyEntities: KeyEntities<TreeDataType>;
     };
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
     setExpandedKeys: (expandedKeys: Key[]) => void;
-    flattenTreeData: (expandedKeys: Key[]) => FlattenNode[];
-    onNodeExpand: (e: any, treeNode: EventDataNode) => void;
+    onNodeExpand: (e: React.MouseEvent<HTMLDivElement>, treeNode: EventDataNode<TreeDataType>) => void;
     onListChangeStart: () => void;
     onListChangeEnd: () => void;
-    onActiveChange: (newActiveKey: Key) => void;
-    getActiveItem: () => FlattenNode;
+    onActiveChange: (newActiveKey: Key | null) => void;
+    getActiveItem: () => FlattenNode<TreeDataType>;
     offsetActiveKey: (offset: number) => void;
     onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
+    /**
+     * Only update the value which is not in props
+     */
+    setUncontrolledState: (state: Partial<TreeState<TreeDataType>>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
     scrollTo: ScrollTo;
     render(): React.JSX.Element;
 }
-export default RCTree;
+export default Tree;