2023-08-30 21:18:09 +08:00
|
|
|
import type { Component } from 'react';
|
|
|
|
import React from 'react';
|
2021-09-27 15:54:06 +08:00
|
|
|
import HolderOutlined from '@ant-design/icons/HolderOutlined';
|
2018-06-04 11:20:17 +08:00
|
|
|
import classNames from 'classnames';
|
2023-08-30 21:18:09 +08:00
|
|
|
import type { CSSMotionProps } from 'rc-motion';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
|
2022-11-07 17:20:07 +08:00
|
|
|
import RcTree from 'rc-tree';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { DataNode, Key } from 'rc-tree/lib/interface';
|
2023-08-30 21:18:09 +08:00
|
|
|
|
2022-07-19 22:53:38 +08:00
|
|
|
import initCollapseMotion from '../_util/motion';
|
2023-04-01 13:38:34 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2024-04-01 15:49:45 +08:00
|
|
|
import { useToken } from '../theme/internal';
|
2022-03-02 20:32:25 +08:00
|
|
|
import useStyle from './style';
|
2023-04-01 13:38:34 +08:00
|
|
|
import dropIndicatorRender from './utils/dropIndicator';
|
|
|
|
import SwitcherIconCom from './utils/iconUtil';
|
2018-06-04 11:20:17 +08:00
|
|
|
|
2022-07-23 16:54:36 +08:00
|
|
|
export type SwitcherIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
|
2022-09-27 12:07:30 +08:00
|
|
|
export type TreeLeafIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
|
2022-04-11 18:15:03 +08:00
|
|
|
|
2018-06-04 11:20:17 +08:00
|
|
|
export interface AntdTreeNodeAttribute {
|
|
|
|
eventKey: string;
|
|
|
|
prefixCls: string;
|
|
|
|
className: string;
|
|
|
|
expanded: boolean;
|
|
|
|
selected: boolean;
|
|
|
|
checked: boolean;
|
|
|
|
halfChecked: boolean;
|
|
|
|
children: React.ReactNode;
|
|
|
|
title: React.ReactNode;
|
|
|
|
pos: string;
|
|
|
|
dragOver: boolean;
|
|
|
|
dragOverGapTop: boolean;
|
|
|
|
dragOverGapBottom: boolean;
|
|
|
|
isLeaf: boolean;
|
|
|
|
selectable: boolean;
|
|
|
|
disabled: boolean;
|
|
|
|
disableCheckbox: boolean;
|
|
|
|
}
|
2019-05-16 23:32:16 +08:00
|
|
|
|
2018-06-04 11:20:17 +08:00
|
|
|
export interface AntTreeNodeProps {
|
2018-06-25 11:44:35 +08:00
|
|
|
className?: string;
|
2019-05-06 12:04:39 +08:00
|
|
|
checkable?: boolean;
|
2018-06-04 11:20:17 +08:00
|
|
|
disabled?: boolean;
|
|
|
|
disableCheckbox?: boolean;
|
|
|
|
title?: string | React.ReactNode;
|
2020-04-17 23:31:39 +08:00
|
|
|
key?: Key;
|
2018-06-04 11:20:17 +08:00
|
|
|
eventKey?: string;
|
|
|
|
isLeaf?: boolean;
|
|
|
|
checked?: boolean;
|
|
|
|
expanded?: boolean;
|
2018-08-17 16:36:33 +08:00
|
|
|
loading?: boolean;
|
2018-06-04 11:20:17 +08:00
|
|
|
selected?: boolean;
|
2018-08-13 14:09:32 +08:00
|
|
|
selectable?: boolean;
|
2018-06-08 16:22:15 +08:00
|
|
|
icon?: ((treeNode: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
|
2018-06-04 11:20:17 +08:00
|
|
|
children?: React.ReactNode;
|
2018-08-23 20:38:56 +08:00
|
|
|
[customProp: string]: any;
|
2018-06-04 11:20:17 +08:00
|
|
|
}
|
|
|
|
|
2023-01-07 21:15:59 +08:00
|
|
|
export interface AntTreeNode extends Component<AntTreeNodeProps, {}> {}
|
2018-06-04 11:20:17 +08:00
|
|
|
|
|
|
|
export interface AntTreeNodeBaseEvent {
|
|
|
|
node: AntTreeNode;
|
|
|
|
nativeEvent: MouseEvent;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface AntTreeNodeCheckedEvent extends AntTreeNodeBaseEvent {
|
|
|
|
event: 'check';
|
|
|
|
checked?: boolean;
|
|
|
|
checkedNodes?: AntTreeNode[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface AntTreeNodeSelectedEvent extends AntTreeNodeBaseEvent {
|
|
|
|
event: 'select';
|
|
|
|
selected?: boolean;
|
2019-08-12 13:22:36 +08:00
|
|
|
selectedNodes?: DataNode[];
|
2018-06-04 11:20:17 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface AntTreeNodeExpandedEvent extends AntTreeNodeBaseEvent {
|
|
|
|
expanded?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface AntTreeNodeMouseEvent {
|
|
|
|
node: AntTreeNode;
|
2020-01-25 00:22:28 +08:00
|
|
|
event: React.DragEvent<HTMLElement>;
|
2018-06-04 11:20:17 +08:00
|
|
|
}
|
|
|
|
|
2019-05-16 22:33:15 +08:00
|
|
|
export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
|
2020-04-17 23:31:39 +08:00
|
|
|
expandedKeys: Key[];
|
2019-05-16 22:33:15 +08:00
|
|
|
}
|
|
|
|
|
2018-09-17 17:37:20 +08:00
|
|
|
export interface AntTreeNodeDropEvent {
|
|
|
|
node: AntTreeNode;
|
|
|
|
dragNode: AntTreeNode;
|
2020-04-17 23:31:39 +08:00
|
|
|
dragNodesKeys: Key[];
|
2018-11-15 05:45:01 +08:00
|
|
|
dropPosition: number;
|
|
|
|
dropToGap?: boolean;
|
2019-06-16 20:51:47 +08:00
|
|
|
event: React.MouseEvent<HTMLElement>;
|
2018-09-17 17:37:20 +08:00
|
|
|
}
|
|
|
|
|
2020-03-02 13:52:42 +08:00
|
|
|
// [Legacy] Compatible for v3
|
|
|
|
export type TreeNodeNormal = DataNode;
|
2019-06-28 03:28:00 +08:00
|
|
|
|
2022-07-22 20:26:52 +08:00
|
|
|
type DraggableFn = (node: DataNode) => boolean;
|
|
|
|
|
2021-09-27 15:54:06 +08:00
|
|
|
interface DraggableConfig {
|
|
|
|
icon?: React.ReactNode | false;
|
|
|
|
nodeDraggable?: DraggableFn;
|
|
|
|
}
|
|
|
|
|
2021-11-23 23:05:49 +08:00
|
|
|
export interface TreeProps<T extends BasicDataNode = DataNode>
|
2022-06-23 12:17:05 +08:00
|
|
|
extends Omit<
|
|
|
|
RcTreeProps<T>,
|
|
|
|
'prefixCls' | 'showLine' | 'direction' | 'draggable' | 'icon' | 'switcherIcon'
|
|
|
|
> {
|
2022-09-27 12:07:30 +08:00
|
|
|
showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };
|
2018-06-04 11:20:17 +08:00
|
|
|
className?: string;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Whether to support multiple selection */
|
2018-06-04 11:20:17 +08:00
|
|
|
multiple?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Whether to automatically expand the parent node */
|
2018-06-04 11:20:17 +08:00
|
|
|
autoExpandParent?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Node selection in Checkable state is fully controlled (the selected state of parent and child nodes is no longer associated) */
|
2018-06-04 11:20:17 +08:00
|
|
|
checkStrictly?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Whether to support selection */
|
2018-06-04 11:20:17 +08:00
|
|
|
checkable?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** whether to disable the tree */
|
2018-07-11 22:21:01 +08:00
|
|
|
disabled?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Expand all tree nodes by default */
|
2018-06-04 11:20:17 +08:00
|
|
|
defaultExpandAll?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Expand the corresponding tree node by default */
|
2018-06-04 11:20:17 +08:00
|
|
|
defaultExpandParent?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Expand the specified tree node by default */
|
2020-04-17 23:31:39 +08:00
|
|
|
defaultExpandedKeys?: Key[];
|
2023-02-01 11:22:29 +08:00
|
|
|
/** (Controlled) Expand the specified tree node */
|
2020-04-17 23:31:39 +08:00
|
|
|
expandedKeys?: Key[];
|
2023-02-01 11:22:29 +08:00
|
|
|
/** (Controlled) Tree node with checked checkbox */
|
2020-04-17 23:31:39 +08:00
|
|
|
checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Tree node with checkbox checked by default */
|
2020-04-17 23:31:39 +08:00
|
|
|
defaultCheckedKeys?: Key[];
|
2023-02-01 11:22:29 +08:00
|
|
|
/** (Controlled) Set the selected tree node */
|
2020-04-17 23:31:39 +08:00
|
|
|
selectedKeys?: Key[];
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Tree node selected by default */
|
2020-04-17 23:31:39 +08:00
|
|
|
defaultSelectedKeys?: Key[];
|
2018-06-25 11:44:35 +08:00
|
|
|
selectable?: boolean;
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Click on the tree node to trigger */
|
2018-06-04 11:20:17 +08:00
|
|
|
filterAntTreeNode?: (node: AntTreeNode) => boolean;
|
2020-04-17 23:31:39 +08:00
|
|
|
loadedKeys?: Key[];
|
2023-02-01 11:22:29 +08:00
|
|
|
/** Set the node to be draggable (IE>8) */
|
2021-09-27 15:54:06 +08:00
|
|
|
draggable?: DraggableFn | boolean | DraggableConfig;
|
2018-06-04 11:20:17 +08:00
|
|
|
style?: React.CSSProperties;
|
|
|
|
showIcon?: boolean;
|
2022-06-23 12:17:05 +08:00
|
|
|
icon?:
|
|
|
|
| ((nodeProps: AntdTreeNodeAttribute) => React.ReactNode)
|
|
|
|
| React.ReactNode
|
|
|
|
| RcTreeProps<T>['icon'];
|
|
|
|
switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];
|
2018-06-04 11:20:17 +08:00
|
|
|
prefixCls?: string;
|
2019-06-16 20:51:47 +08:00
|
|
|
children?: React.ReactNode;
|
2019-03-08 12:36:46 +08:00
|
|
|
blockNode?: boolean;
|
2018-06-04 11:20:17 +08:00
|
|
|
}
|
|
|
|
|
2020-04-25 15:30:13 +08:00
|
|
|
const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
|
2023-07-03 22:42:46 +08:00
|
|
|
const { getPrefixCls, direction, virtual, tree } = React.useContext(ConfigContext);
|
2020-04-25 15:30:13 +08:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
className,
|
2022-10-02 16:50:34 +08:00
|
|
|
showIcon = false,
|
2020-04-25 15:30:13 +08:00
|
|
|
showLine,
|
|
|
|
switcherIcon,
|
2022-10-02 16:50:34 +08:00
|
|
|
blockNode = false,
|
2020-04-25 15:30:13 +08:00
|
|
|
children,
|
2022-10-02 16:50:34 +08:00
|
|
|
checkable = false,
|
|
|
|
selectable = true,
|
2021-09-27 15:54:06 +08:00
|
|
|
draggable,
|
2022-07-19 22:53:38 +08:00
|
|
|
motion: customMotion,
|
2023-07-03 22:42:46 +08:00
|
|
|
style,
|
2020-04-25 15:30:13 +08:00
|
|
|
} = props;
|
2022-10-02 16:50:34 +08:00
|
|
|
|
2020-11-29 14:15:08 +08:00
|
|
|
const prefixCls = getPrefixCls('tree', customizePrefixCls);
|
2022-07-19 22:53:38 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
|
2023-07-28 12:15:30 +08:00
|
|
|
const motion: CSSMotionProps = customMotion ?? {
|
2022-07-19 22:53:38 +08:00
|
|
|
...initCollapseMotion(rootPrefixCls),
|
|
|
|
motionAppear: false,
|
|
|
|
};
|
|
|
|
|
2020-06-29 11:04:58 +08:00
|
|
|
const newProps = {
|
|
|
|
...props,
|
2022-10-02 16:50:34 +08:00
|
|
|
checkable,
|
|
|
|
selectable,
|
|
|
|
showIcon,
|
2022-07-19 22:53:38 +08:00
|
|
|
motion,
|
2022-10-02 16:50:34 +08:00
|
|
|
blockNode,
|
2020-06-29 11:04:58 +08:00
|
|
|
showLine: Boolean(showLine),
|
2020-11-29 14:15:08 +08:00
|
|
|
dropIndicatorRender,
|
2020-06-29 11:04:58 +08:00
|
|
|
};
|
2021-09-27 15:54:06 +08:00
|
|
|
|
2023-12-14 14:58:53 +08:00
|
|
|
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
2023-12-28 21:05:36 +08:00
|
|
|
const [, token] = useToken();
|
|
|
|
|
2023-12-30 02:40:22 +08:00
|
|
|
const itemHeight = token.paddingXS / 2 + (token.Tree?.titleHeight || token.controlHeightSM);
|
2022-03-02 20:32:25 +08:00
|
|
|
|
2021-09-27 15:54:06 +08:00
|
|
|
const draggableConfig = React.useMemo(() => {
|
|
|
|
if (!draggable) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
let mergedDraggable: DraggableConfig = {};
|
|
|
|
switch (typeof draggable) {
|
|
|
|
case 'function':
|
|
|
|
mergedDraggable.nodeDraggable = draggable;
|
|
|
|
break;
|
|
|
|
case 'object':
|
|
|
|
mergedDraggable = { ...draggable };
|
|
|
|
break;
|
|
|
|
default:
|
2022-10-02 16:50:34 +08:00
|
|
|
break;
|
2021-09-27 15:54:06 +08:00
|
|
|
// Do nothing
|
|
|
|
}
|
|
|
|
|
|
|
|
if (mergedDraggable.icon !== false) {
|
|
|
|
mergedDraggable.icon = mergedDraggable.icon || <HolderOutlined />;
|
|
|
|
}
|
|
|
|
|
|
|
|
return mergedDraggable;
|
|
|
|
}, [draggable]);
|
|
|
|
|
2023-04-01 13:38:34 +08:00
|
|
|
const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
|
|
|
|
<SwitcherIconCom
|
|
|
|
prefixCls={prefixCls}
|
2024-04-01 15:49:45 +08:00
|
|
|
switcherIcon={switcherIcon as any}
|
2023-04-01 13:38:34 +08:00
|
|
|
treeNodeProps={nodeProps}
|
|
|
|
showLine={showLine}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2023-11-14 19:17:23 +08:00
|
|
|
return wrapCSSVar(
|
2024-04-01 15:49:45 +08:00
|
|
|
// @ts-ignore
|
2020-04-25 15:30:13 +08:00
|
|
|
<RcTree
|
2023-12-28 21:05:36 +08:00
|
|
|
itemHeight={itemHeight}
|
2020-04-25 15:30:13 +08:00
|
|
|
ref={ref}
|
2020-05-05 15:00:43 +08:00
|
|
|
virtual={virtual}
|
2020-06-29 11:04:58 +08:00
|
|
|
{...newProps}
|
2023-07-03 22:42:46 +08:00
|
|
|
// newProps may contain style so declare style below it
|
|
|
|
style={{ ...tree?.style, ...style }}
|
2020-04-25 15:30:13 +08:00
|
|
|
prefixCls={prefixCls}
|
2020-09-06 13:07:39 +08:00
|
|
|
className={classNames(
|
|
|
|
{
|
|
|
|
[`${prefixCls}-icon-hide`]: !showIcon,
|
|
|
|
[`${prefixCls}-block-node`]: blockNode,
|
2020-12-09 16:36:14 +08:00
|
|
|
[`${prefixCls}-unselectable`]: !selectable,
|
2020-09-06 13:07:39 +08:00
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
2023-07-03 22:42:46 +08:00
|
|
|
tree?.className,
|
2020-09-06 13:07:39 +08:00
|
|
|
className,
|
2022-03-03 14:55:19 +08:00
|
|
|
hashId,
|
2023-12-14 14:58:53 +08:00
|
|
|
cssVarCls,
|
2020-09-06 13:07:39 +08:00
|
|
|
)}
|
2020-11-29 14:15:08 +08:00
|
|
|
direction={direction}
|
2020-04-25 15:30:13 +08:00
|
|
|
checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
|
2020-12-09 16:36:14 +08:00
|
|
|
selectable={selectable}
|
2024-04-01 15:49:45 +08:00
|
|
|
switcherIcon={renderSwitcherIcon as any}
|
2022-10-02 16:50:34 +08:00
|
|
|
draggable={draggableConfig}
|
2020-04-25 15:30:13 +08:00
|
|
|
>
|
|
|
|
{children}
|
2022-03-02 20:32:25 +08:00
|
|
|
</RcTree>,
|
2020-04-25 15:30:13 +08:00
|
|
|
);
|
2022-11-07 17:20:07 +08:00
|
|
|
});
|
2020-04-25 15:30:13 +08:00
|
|
|
|
2023-01-08 21:30:41 +08:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
Tree.displayName = 'Tree';
|
|
|
|
}
|
|
|
|
|
2020-04-25 15:30:13 +08:00
|
|
|
export default Tree;
|