import React from 'react'; import { NodeMouseEventHandler, NodeDragEventParams, NodeMouseEventParams, TreeContextProps } from './contextTypes'; export declare const DEFAULT_TREE_NODE_TITLE: string; export declare const MAX_RETRY_TIMES: number; export declare const TREE_NODE_ICON_OPEN: string; export declare const TREE_NODE_ICON_CLOSE: string; export { ScrollTo } from '../../VirtualList/VirtualList.types'; export interface TreeNodeProps { eventKey?: Key; classNames?: string; style?: React.CSSProperties; expanded?: boolean; selected?: boolean; checked?: boolean; loaded?: boolean; loading?: boolean; halfChecked?: boolean; title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode); dragOver?: boolean; dragOverGapTop?: boolean; dragOverGapBottom?: boolean; pos?: string; domRef?: React.Ref; /** New added in Tree for easy data access */ data?: TreeDataType; isStart?: boolean[]; isEnd?: boolean[]; active?: boolean; onMouseMove?: React.MouseEventHandler; isLeaf?: boolean; checkable?: boolean; selectable?: boolean; disabled?: boolean; disableCheckbox?: boolean; icon?: IconType; switcherIcon?: IconType; children?: React.ReactNode; } export interface InternalTreeNodeProps extends TreeNodeProps { context?: TreeContextProps; } export interface TreeNodeState { dragNodeHighlight: boolean; } /** For fieldNames, we provide a abstract interface */ export interface BasicDataNode { checkable?: boolean; disabled?: boolean; disableCheckbox?: boolean; icon?: IconType; isLeaf?: boolean; selectable?: boolean; switcherIcon?: IconType; /** Set style of TreeNode. This is not recommend if you don't have any force requirement */ className?: string; style?: React.CSSProperties; } /** Provide a wrap type define for developer to wrap with customize fieldNames data type */ export declare type FieldDataNode = BasicDataNode & T & Partial[]>>; export declare type DataNode = FieldDataNode<{ key: string | number; title?: React.ReactNode | ((data: DataNode) => React.ReactNode); }>; export declare type EventDataNode = { key: React.Key; expanded: boolean; selected: boolean; checked: boolean; loaded: boolean; loading: boolean; halfChecked: boolean; dragOver: boolean; dragOverGapTop: boolean; dragOverGapBottom: boolean; pos: string; active: boolean; } & TreeDataType; export declare type IconType = React.ReactNode | ((props: TreeNodeProps) => React.ReactNode); export declare type Key = string | number; export declare type NodeElement = React.ReactElement & { selectHandle?: HTMLSpanElement; type: { isTreeNode: boolean; }; }; export declare type NodeInstance = React.Component> & { selectHandle?: HTMLSpanElement; }; export interface Entity { node: NodeElement; index: number; key: Key; pos: string; parent?: Entity; children?: Entity[]; } export interface DataEntity extends Omit { node: TreeDataType; nodes: TreeDataType[]; parent?: DataEntity; children?: DataEntity[]; level: number; } export interface FlattenNode { parent: FlattenNode | null; children: FlattenNode[]; pos: string; data: TreeDataType; title: React.ReactNode; key: Key; isStart: boolean[]; isEnd: boolean[]; } export declare type GetKey = (record: RecordType, index?: number) => Key; export declare type GetCheckDisabled = (record: RecordType) => boolean; export interface FieldNames { title?: string; /** @private Internal usage for `tree-select`, safe to remove if no need */ _title?: string[]; key?: string; children?: string; } export interface CheckInfo { event: 'check'; node: EventDataNode; checked: boolean; nativeEvent: MouseEvent; checkedNodes: TreeDataType[]; checkedNodesPositions?: { node: TreeDataType; pos: string; }[]; halfCheckedKeys?: Key[]; } export interface AllowDropOptions { dragNode: TreeDataType; dropNode: TreeDataType; dropPosition: -1 | 0 | 1; } export declare type AllowDrop = (options: AllowDropOptions) => boolean; export declare type DraggableFn = (node: DataNode) => boolean; export declare type DraggableConfig = { icon?: React.ReactNode | false; nodeDraggable?: DraggableFn; }; export declare type ExpandAction = false | 'click' | 'doubleClick'; export interface OcTreeProps { classNames?: string; style?: React.CSSProperties; focusable?: boolean; activeKey?: Key; tabIndex?: number; children?: React.ReactNode; treeData?: TreeDataType[]; fieldNames?: FieldNames; showLine?: boolean; showIcon?: boolean; icon?: IconType; selectable?: boolean; expandAction?: ExpandAction; disabled?: boolean; multiple?: boolean; checkable?: boolean | React.ReactNode; checkStrictly?: boolean; draggable?: DraggableFn | boolean | DraggableConfig; defaultExpandParent?: boolean; autoExpandParent?: boolean; defaultExpandAll?: boolean; defaultExpandedKeys?: Key[]; expandedKeys?: Key[]; defaultCheckedKeys?: Key[]; checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[]; }; defaultSelectedKeys?: Key[]; selectedKeys?: Key[]; allowDrop?: AllowDrop; titleRender?: (node: TreeDataType) => React.ReactNode; dropIndicatorRender?: (props: { dropPosition: -1 | 0 | 1; dropLevelOffset: number; indent: number; direction: string; }) => React.ReactNode; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; onKeyDown?: React.KeyboardEventHandler; onContextMenu?: React.MouseEventHandler; onClick?: NodeMouseEventHandler; onDoubleClick?: NodeMouseEventHandler; onScroll?: React.UIEventHandler; onExpand?: (expandedKeys: Key[], info: { node: EventDataNode; expanded: boolean; nativeEvent: MouseEvent; }) => void; onCheck?: (checked: { checked: Key[]; halfChecked: Key[]; } | Key[], info: CheckInfo) => void; onSelect?: (selectedKeys: Key[], info: { event: 'select'; selected: boolean; node: EventDataNode; selectedNodes: TreeDataType[]; nativeEvent: MouseEvent; }) => void; onLoad?: (loadedKeys: Key[], info: { event: 'load'; node: EventDataNode; }) => void; loadData?: (treeNode: EventDataNode) => Promise; loadedKeys?: Key[]; onMouseEnter?: (info: NodeMouseEventParams) => void; onMouseLeave?: (info: NodeMouseEventParams) => void; onRightClick?: (info: { event: React.MouseEvent; node: EventDataNode; }) => void; onDragStart?: (info: NodeDragEventParams) => void; onDragEnter?: (info: NodeDragEventParams & { expandedKeys: Key[]; }) => void; onDragOver?: (info: NodeDragEventParams) => void; onDragLeave?: (info: NodeDragEventParams) => void; onDragEnd?: (info: NodeDragEventParams) => void; onDrop?: (info: NodeDragEventParams & { dragNode: EventDataNode; dragNodesKeys: Key[]; dropToGap: boolean; dropPosition: number; }) => void; /** * Used for `tree-select` only. * Do not use in your production code directly since this will be refactor. */ onActiveChange?: (key: Key) => void; filterTreeNode?: (treeNode: EventDataNode) => boolean; motion?: any; switcherIcon?: IconType; height?: number; itemHeight?: number; virtual?: boolean; direction?: string; rootClassName?: string; rootStyle?: React.CSSProperties; } export interface OcTreeState { keyEntities: Record>; indent: number | null; selectedKeys: Key[]; checkedKeys: Key[]; halfCheckedKeys: Key[]; loadedKeys: Key[]; loadingKeys: Key[]; expandedKeys: Key[]; draggingNodeKey: React.Key; dragChildrenKeys: Key[]; dropPosition: -1 | 0 | 1 | null; dropLevelOffset: number | null; dropContainerKey: Key | null; dropTargetKey: Key | null; dropTargetPos: string | null; dropAllowed: boolean; dragOverNodeKey: Key | null; treeData: TreeDataType[]; flattenNodes: FlattenNode[]; focused: boolean; activeKey: Key; listChanging: boolean; prevProps: OcTreeProps; fieldNames: FieldNames; }