@aloudata/aloudata-design 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dropdown/index.d.ts +8 -1
- package/dist/Dropdown/index.js +3 -1
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Form/index.js +1 -1
- package/dist/Form/index.js.map +1 -1
- package/dist/InputNumber/index.js +1 -0
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/InputSearch/index.d.ts +3 -0
- package/dist/InputSearch/index.js +3 -1
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/Tabs/index.js +3 -1
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tree/Tree.d.ts +11 -0
- package/dist/Tree/Tree2.js +84 -6
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Tree/utils/composeAllowDrop.d.ts +14 -0
- package/dist/Tree/utils/composeAllowDrop.js +20 -0
- package/dist/Tree/utils/composeAllowDrop.js.map +1 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/locale/zh_CN.js +1 -0
- package/dist/locale/zh_CN.js.map +1 -1
- package/package.json +2 -2
package/dist/Tree/Tree2.js
CHANGED
|
@@ -6,6 +6,7 @@ import { ConfigContext } from "../ConfigProvider/index.js";
|
|
|
6
6
|
import HighlightText from "../HighlightText/index.js";
|
|
7
7
|
/* empty css */
|
|
8
8
|
import collapseMotion from "../_utils/motion.js";
|
|
9
|
+
import { composeAllowDrop } from "./utils/composeAllowDrop.js";
|
|
9
10
|
import dropIndicatorRender from "./utils/dropIndicator.js";
|
|
10
11
|
import renderSwitcherIcon from "./utils/iconUtil.js";
|
|
11
12
|
import * as React$1 from "react";
|
|
@@ -48,8 +49,11 @@ var Tree = React$1.forwardRef((props, ref) => {
|
|
|
48
49
|
dropIndicatorRender,
|
|
49
50
|
titleRender: customTitleRender
|
|
50
51
|
};
|
|
51
|
-
const draggableConfig = React$1.useMemo(() => {
|
|
52
|
-
if (!draggable) return
|
|
52
|
+
const { draggableConfig, dropOnlyResolvers } = React$1.useMemo(() => {
|
|
53
|
+
if (!draggable) return {
|
|
54
|
+
draggableConfig: false,
|
|
55
|
+
dropOnlyResolvers: null
|
|
56
|
+
};
|
|
53
57
|
const newIcon = /* @__PURE__ */ jsx(Memo$1, {
|
|
54
58
|
size: TREE_SWITCH_CION_SIZE,
|
|
55
59
|
color: "var(--alias-colors-icon-subtle)"
|
|
@@ -67,8 +71,59 @@ var Tree = React$1.forwardRef((props, ref) => {
|
|
|
67
71
|
break;
|
|
68
72
|
default: break;
|
|
69
73
|
}
|
|
70
|
-
|
|
74
|
+
let resolvers = null;
|
|
75
|
+
if (mergedDraggable.nodeDroppable) {
|
|
76
|
+
const userNodeDraggable = mergedDraggable.nodeDraggable;
|
|
77
|
+
const userNodeDroppable = mergedDraggable.nodeDroppable;
|
|
78
|
+
resolvers = {
|
|
79
|
+
nodeDraggable: userNodeDraggable,
|
|
80
|
+
nodeDroppable: userNodeDroppable
|
|
81
|
+
};
|
|
82
|
+
mergedDraggable = {
|
|
83
|
+
...mergedDraggable,
|
|
84
|
+
nodeDraggable: (node) => (userNodeDraggable ? userNodeDraggable(node) : true) || userNodeDroppable(node)
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
return {
|
|
88
|
+
draggableConfig: mergedDraggable,
|
|
89
|
+
dropOnlyResolvers: resolvers
|
|
90
|
+
};
|
|
71
91
|
}, [draggable]);
|
|
92
|
+
/**
|
|
93
|
+
* drop-only 节点不能真的起拖。
|
|
94
|
+
*
|
|
95
|
+
* 历史教训:以前在 props.onDragStart 里调 preventDefault。问题是 rc-tree 内部
|
|
96
|
+
* onNodeDragStart(Tree.js:88-99)会在调用 user onDragStart **之前**把
|
|
97
|
+
* draggingNodeKey/dragNodeProps 写进 state;TreeNode(TreeNode.js:112)也已经先
|
|
98
|
+
* setDragNodeHighlight(true)。然后 preventDefault 让浏览器取消拖拽,dragend 不再派发
|
|
99
|
+
* → onWindowDragEnd 永远不触发 → state 卡在"正在拖类目",外层 .ald-tree-treenode
|
|
100
|
+
* 卡着 `dragging`、内层 .ald-tree-node-content-wrapper 卡着 `ald-tree-node-selected`
|
|
101
|
+
* 高亮,直到下一次合法 dragstart 才被覆盖。
|
|
102
|
+
*
|
|
103
|
+
* 修复手段:document 级 dragstart capture handler,在 rc-tree 的 React 监听器之前
|
|
104
|
+
* stopPropagation+preventDefault,让 TreeNode 的 onDragStart 整段都不执行,rc-tree
|
|
105
|
+
* 内部 state 彻底不写入。document 是 React root 容器的祖先,capture 阶段先于 React
|
|
106
|
+
* delegation 监听器,因此 stopPropagation 能彻底拦截。
|
|
107
|
+
*/
|
|
108
|
+
React$1.useLayoutEffect(() => {
|
|
109
|
+
if (!dropOnlyResolvers) return;
|
|
110
|
+
const handler = (e) => {
|
|
111
|
+
const target = e.target;
|
|
112
|
+
if (!target?.closest) return;
|
|
113
|
+
if (target.closest(".ald-tree-treenode-drop-only")) {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
e.stopPropagation();
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
document.addEventListener("dragstart", handler, true);
|
|
119
|
+
return () => document.removeEventListener("dragstart", handler, true);
|
|
120
|
+
}, [dropOnlyResolvers]);
|
|
121
|
+
/**
|
|
122
|
+
* nodeDroppable 同时收口到 rc-tree 的 allowDrop:避免出现"nodeDroppable=false 但 rc-tree
|
|
123
|
+
* 默认 allowDrop=()=>true 仍然接收 drop"的语义裂缝。用户自传的 allowDrop 与 nodeDroppable
|
|
124
|
+
* 取 AND(任一拒绝即拒绝)。
|
|
125
|
+
*/
|
|
126
|
+
const composedAllowDrop = React$1.useMemo(() => composeAllowDrop(rest.allowDrop, dropOnlyResolvers?.nodeDroppable), [rest.allowDrop, dropOnlyResolvers]);
|
|
72
127
|
const renderIndent = (nodeProps) => {
|
|
73
128
|
const { pos, isLeaf } = nodeProps;
|
|
74
129
|
const level = pos ? pos.split("-").length - 1 : 0;
|
|
@@ -104,19 +159,42 @@ var Tree = React$1.forwardRef((props, ref) => {
|
|
|
104
159
|
treeData,
|
|
105
160
|
highlightKeywords
|
|
106
161
|
]);
|
|
162
|
+
/** 给 drop-only 节点的 wrapper 加 'ald-tree-treenode-drop-only' className(rc-tree 5.x
|
|
163
|
+
* 会把 DataNode.className 透传到 .ald-tree-treenode 上)。css 据此隐藏 drag handle icon
|
|
164
|
+
* 并提供 not-allowed cursor,区分纯 drop target 与真正可拖节点。 */
|
|
165
|
+
const finalTreeData = React$1.useMemo(() => {
|
|
166
|
+
if (!dropOnlyResolvers || !newTreeData) return newTreeData;
|
|
167
|
+
const { nodeDraggable, nodeDroppable } = dropOnlyResolvers;
|
|
168
|
+
return produce(newTreeData, (draft) => {
|
|
169
|
+
const visit = (nodes) => {
|
|
170
|
+
if (!nodes) return;
|
|
171
|
+
for (const node of nodes) {
|
|
172
|
+
const isDraggable = nodeDraggable ? nodeDraggable(node) : true;
|
|
173
|
+
const isDroppable = nodeDroppable(node);
|
|
174
|
+
if (!isDraggable && isDroppable) {
|
|
175
|
+
const existing = node.className ?? "";
|
|
176
|
+
if (!existing.includes("ald-tree-treenode-drop-only")) node.className = cn(existing, "ald-tree-treenode-drop-only");
|
|
177
|
+
}
|
|
178
|
+
visit(node.children);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
visit(draft);
|
|
182
|
+
});
|
|
183
|
+
}, [newTreeData, dropOnlyResolvers]);
|
|
107
184
|
const noChildren = React$1.useMemo(() => {
|
|
108
|
-
if (
|
|
185
|
+
if (finalTreeData?.length) return finalTreeData.every((node) => {
|
|
109
186
|
return !node.children?.length && node.isLeaf !== false;
|
|
110
187
|
});
|
|
111
188
|
return true;
|
|
112
|
-
}, [
|
|
189
|
+
}, [finalTreeData]);
|
|
113
190
|
return /* @__PURE__ */ jsx(RcTree, {
|
|
114
191
|
itemHeight: 20,
|
|
115
192
|
ref,
|
|
116
193
|
virtual,
|
|
117
194
|
...newProps,
|
|
195
|
+
allowDrop: composedAllowDrop,
|
|
118
196
|
prefixCls,
|
|
119
|
-
treeData:
|
|
197
|
+
treeData: finalTreeData,
|
|
120
198
|
className: cn({
|
|
121
199
|
[`${prefixCls}-icon-hide`]: !showIcon,
|
|
122
200
|
[`${prefixCls}-block-node`]: blockNode,
|
package/dist/Tree/Tree2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n nodeDraggable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n return (\n <>\n {renderedTitle}\n {showTabLeader && <div className=\"ald-tree-tab-leader\"></div>}\n {handlerRender && (handlerRender(node) as React.ReactNode)}\n </>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n const draggableConfig = React.useMemo(() => {\n if (!draggable) {\n return false;\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = {\n icon: newIcon,\n };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = {\n ...draggable,\n icon: draggable.icon === undefined ? newIcon : draggable.icon,\n };\n break;\n default:\n break;\n // Do nothing\n }\n\n return mergedDraggable;\n }, [draggable]);\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos, isLeaf } = nodeProps as AldTreeNodeProps & { pos?: string };\n // Determine level from `pos` string (e.g. \"0-0-1\" → level 2)\n const level = pos ? pos.split('-').length - 1 : 0;\n const iconSize = TREE_SWITCH_CION_SIZE;\n let indentWidth = isLeaf ? iconSize : 0;\n indentWidth += level * (iconSize / 2);\n return <span style={{ width: indentWidth, flexShrink: 0 }}></span>;\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n const noChildren = React.useMemo(() => {\n if (newTreeData?.length) {\n return newTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [newTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n prefixCls={prefixCls}\n treeData={newTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tree2.js","names":[],"sources":["../../src/Tree/Tree.tsx"],"sourcesContent":["import './tree.css';\nimport { cn } from '../lib/utils';\nimport { produce } from 'immer';\nimport { noop } from 'lodash';\nimport type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';\nimport RcTree from 'rc-tree';\nimport type { DataNode, Key } from 'rc-tree/es/interface';\nimport * as React from 'react';\nimport { ConfigContext } from '../ConfigProvider';\nimport HighlightText from '../HighlightText';\nimport { ArrowRightLightLine, DragLine } from '../Icon';\nimport collapseMotion from '../_utils/motion';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { composeAllowDrop } from './utils/composeAllowDrop';\nimport dropIndicatorRender from './utils/dropIndicator';\nimport renderSwitcherIcon from './utils/iconUtil';\nconst TREE_SWITCH_CION_SIZE = 16;\nconst NODE_DISABLE_CLASS_NAME = 'ald-tree-node-disabled';\nexport type SwitcherIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\nexport type TreeLeafIcon =\n | React.ReactNode\n | ((props: AldTreeNodeProps) => React.ReactNode);\n\nexport interface AldTreeNodeAttribute {\n eventKey: string;\n prefixCls: string;\n className: string;\n expanded: boolean;\n selected: boolean;\n checked: boolean;\n halfChecked: boolean;\n children: React.ReactNode;\n title: React.ReactNode;\n pos: string;\n dragOver: boolean;\n dragOverGapTop: boolean;\n dragOverGapBottom: boolean;\n isLeaf: boolean;\n selectable: boolean;\n disabled: boolean;\n disableCheckbox: boolean;\n}\n\nexport interface AldTreeNodeProps {\n className?: string;\n checkable?: boolean;\n disabled?: boolean;\n disableCheckbox?: boolean;\n title?: string | React.ReactNode;\n key?: Key;\n eventKey?: string;\n isLeaf?: boolean;\n checked?: boolean;\n expanded?: boolean;\n loading?: boolean;\n selected?: boolean;\n selectable?: boolean;\n icon?:\n | ((treeNode: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode;\n children?: React.ReactNode;\n [customProp: string]: any;\n}\n\nexport type AldTreeNode = React.Component<AldTreeNodeProps, object>;\n\nexport interface AldTreeNodeBaseEvent {\n node: AldTreeNode;\n nativeEvent: MouseEvent;\n}\n\nexport interface AldTreeNodeCheckedEvent extends AldTreeNodeBaseEvent {\n event: 'check';\n checked?: boolean;\n checkedNodes?: AldTreeNode[];\n}\n\nexport interface AldTreeNodeSelectedEvent extends AldTreeNodeBaseEvent {\n event: 'select';\n selected?: boolean;\n selectedNodes?: DataNode[];\n}\n\nexport interface AldTreeNodeExpandedEvent extends AldTreeNodeBaseEvent {\n expanded?: boolean;\n}\n\nexport interface AldTreeNodeMouseEvent {\n node: AldTreeNode;\n event: React.DragEvent<HTMLElement>;\n}\n\nexport interface AldTreeNodeDragEnterEvent extends AldTreeNodeMouseEvent {\n expandedKeys: Key[];\n}\n\nexport interface AldTreeNodeAttribute {\n node: AldTreeNode;\n dragNode: AldTreeNode;\n dragNodesKeys: Key[];\n dropPosition: number;\n dropToGap?: boolean;\n event: React.MouseEvent<HTMLElement>;\n}\n\n// [Legacy] Compatible for v3\nexport type TreeNodeNormal = DataNode;\n\ntype DraggableFn = (node: DataNode) => boolean;\n\ninterface DropOnlyResolvers {\n nodeDraggable: DraggableFn | undefined;\n nodeDroppable: DraggableFn;\n}\n\ninterface DraggableConfig {\n icon?: React.ReactNode | false;\n /** 节点是否可作为 drag source(拖起来)。返回 false:不显示 drag handle、不能起拖。 */\n nodeDraggable?: DraggableFn;\n /**\n * 节点是否可作为 drop target(接收落入)。返回 true:即使 nodeDraggable=false 仍注册\n * onDragOver/onDrop 等 listener,浏览器才会真正派发 drop 事件。\n *\n * 解决 rc-tree 5.x 把\"可拖\"与\"可放\"绑到同一个 nodeDraggable 的限制——之前要让\"类目可接收\n * 资源拖入但本身不可拖\"只能让 nodeDraggable 全返回 true,再用业务侧 CSS hack 隐藏 drag icon。\n *\n * 默认不传 = 沿用 nodeDraggable 行为(向后兼容)。\n */\n nodeDroppable?: DraggableFn;\n}\n\nexport interface TreeProps<T extends BasicDataNode = DataNode>\n extends Omit<\n RcTreeProps<T>,\n | 'prefixCls'\n | 'showLine'\n | 'direction'\n | 'draggable'\n | 'icon'\n | 'switcherIcon'\n | 'filterTreeNode'\n > {\n showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };\n className?: string;\n /** 是否支持多选 */\n multiple?: boolean;\n /** 是否自动展开父节点 */\n autoExpandParent?: boolean;\n /** Checkable状态下节点选择完全受控(父子节点选中状态不再关联) */\n checkStrictly?: boolean;\n /** 是否支持选中 */\n checkable?: boolean;\n /** 是否禁用树 */\n disabled?: boolean;\n /** 默认展开所有树节点 */\n defaultExpandAll?: boolean;\n /** 默认展开对应树节点 */\n defaultExpandParent?: boolean;\n /** 默认展开指定的树节点 */\n defaultExpandedKeys?: Key[];\n /** (受控)展开指定的树节点 */\n expandedKeys?: Key[];\n /** (受控)选中复选框的树节点 */\n checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };\n /** 默认选中复选框的树节点 */\n defaultCheckedKeys?: Key[];\n /** (受控)设置选中的树节点 */\n selectedKeys?: Key[];\n /** 默认选中的树节点 */\n defaultSelectedKeys?: Key[];\n selectable?: boolean;\n /** 点击树节点触发 */\n filterTreeNode?: (node: DataNode) => boolean;\n loadedKeys?: Key[];\n /** 设置节点可拖拽(IE>8) */\n draggable?: DraggableFn | boolean | DraggableConfig;\n style?: React.CSSProperties;\n showIcon?: boolean;\n icon?:\n | ((nodeProps: AldTreeNodeAttribute) => React.ReactNode)\n | React.ReactNode\n | RcTreeProps<T>['icon'];\n switcherIcon?: SwitcherIcon | RcTreeProps<T>['switcherIcon'];\n prefixCls?: string;\n children?: React.ReactNode;\n blockNode?: boolean;\n size?: 'large' | 'small';\n titleRender?: (node: T) => React.ReactNode;\n showTabLeader?: boolean;\n handlerRender?: (node: T) => React.ReactNode;\n highlightKeywords?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst Tree = React.forwardRef<any, TreeProps>((props, ref) => {\n const { locale } = React.useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const { getPrefixCls, direction, virtual } = React.useContext(ConfigContext);\n const size = props.size || 'large';\n const {\n className,\n showIcon = false,\n showLine,\n blockNode = false,\n children,\n checkable = false,\n selectable = true,\n draggable,\n titleRender,\n showTabLeader,\n handlerRender = noop,\n filterTreeNode,\n treeData,\n highlightKeywords,\n motion = { ...collapseMotion, motionAppear: false },\n ...rest\n } = props;\n const prefixCls = getPrefixCls('tree', 'ald-tree');\n\n const customTitleRender = React.useCallback(\n (node: DataNode) => {\n const renderedTitle = titleRender\n ? titleRender(node)\n : typeof node.title === 'function'\n ? node.title(node)\n : node.title;\n return (\n <>\n {renderedTitle}\n {showTabLeader && <div className=\"ald-tree-tab-leader\"></div>}\n {handlerRender && (handlerRender(node) as React.ReactNode)}\n </>\n );\n },\n [titleRender, showTabLeader, handlerRender],\n );\n const newProps = {\n ...rest,\n checkable,\n selectable,\n showIcon,\n motion,\n blockNode,\n showLine: Boolean(showLine),\n dropIndicatorRender,\n titleRender: customTitleRender,\n };\n\n // 一次性吃掉 draggable 的归一化:rc-tree 看到的 mergedDraggable + 我们内部用的\n // dropOnlyResolvers(原样保留用户 nodeDraggable/nodeDroppable)。集中一处避免两处 useMemo\n // 的判断散开导致字段扩展时遗漏。\n const { draggableConfig, dropOnlyResolvers } = React.useMemo(() => {\n if (!draggable) {\n return {\n draggableConfig: false as const,\n dropOnlyResolvers: null as DropOnlyResolvers | null,\n };\n }\n const newIcon = (\n <DragLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n ></DragLine>\n );\n let mergedDraggable: DraggableConfig = { icon: newIcon };\n switch (typeof draggable) {\n case 'function':\n mergedDraggable.nodeDraggable = draggable;\n break;\n case 'object':\n mergedDraggable = {\n ...draggable,\n icon: draggable.icon === undefined ? newIcon : draggable.icon,\n };\n break;\n default:\n break;\n }\n\n // rc-tree 5.x 把\"可拖(drag source)\"与\"可放(drop target)\"绑到同一个 nodeDraggable:\n // 该返回 false 时 onDragOver/onDrop 也连带不注册,浏览器认为该节点 not droppable\n // → drop 事件根本不派发。为了让\"类目可接收资源拖入但本身不可拖\",把 rc-tree 看到的\n // nodeDraggable 改成 nodeDraggable || nodeDroppable,从而保证 drop listener 仍注册。\n // 真正的 drag-source 阻断由 document 级 dragstart capture handler 负责(见下方 effect)。\n let resolvers: DropOnlyResolvers | null = null;\n if (mergedDraggable.nodeDroppable) {\n const userNodeDraggable = mergedDraggable.nodeDraggable;\n const userNodeDroppable = mergedDraggable.nodeDroppable;\n resolvers = {\n nodeDraggable: userNodeDraggable,\n nodeDroppable: userNodeDroppable,\n };\n mergedDraggable = {\n ...mergedDraggable,\n nodeDraggable: (node: DataNode) =>\n (userNodeDraggable ? userNodeDraggable(node) : true) ||\n userNodeDroppable(node),\n };\n }\n\n return { draggableConfig: mergedDraggable, dropOnlyResolvers: resolvers };\n }, [draggable]);\n\n /**\n * drop-only 节点不能真的起拖。\n *\n * 历史教训:以前在 props.onDragStart 里调 preventDefault。问题是 rc-tree 内部\n * onNodeDragStart(Tree.js:88-99)会在调用 user onDragStart **之前**把\n * draggingNodeKey/dragNodeProps 写进 state;TreeNode(TreeNode.js:112)也已经先\n * setDragNodeHighlight(true)。然后 preventDefault 让浏览器取消拖拽,dragend 不再派发\n * → onWindowDragEnd 永远不触发 → state 卡在\"正在拖类目\",外层 .ald-tree-treenode\n * 卡着 `dragging`、内层 .ald-tree-node-content-wrapper 卡着 `ald-tree-node-selected`\n * 高亮,直到下一次合法 dragstart 才被覆盖。\n *\n * 修复手段:document 级 dragstart capture handler,在 rc-tree 的 React 监听器之前\n * stopPropagation+preventDefault,让 TreeNode 的 onDragStart 整段都不执行,rc-tree\n * 内部 state 彻底不写入。document 是 React root 容器的祖先,capture 阶段先于 React\n * delegation 监听器,因此 stopPropagation 能彻底拦截。\n */\n React.useLayoutEffect(() => {\n if (!dropOnlyResolvers) return;\n const handler = (e: DragEvent) => {\n const target = e.target as HTMLElement | null;\n if (!target?.closest) return;\n if (target.closest('.ald-tree-treenode-drop-only')) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n document.addEventListener('dragstart', handler, true);\n return () => document.removeEventListener('dragstart', handler, true);\n }, [dropOnlyResolvers]);\n\n /**\n * nodeDroppable 同时收口到 rc-tree 的 allowDrop:避免出现\"nodeDroppable=false 但 rc-tree\n * 默认 allowDrop=()=>true 仍然接收 drop\"的语义裂缝。用户自传的 allowDrop 与 nodeDroppable\n * 取 AND(任一拒绝即拒绝)。\n */\n const composedAllowDrop = React.useMemo(\n () => composeAllowDrop(rest.allowDrop, dropOnlyResolvers?.nodeDroppable),\n [rest.allowDrop, dropOnlyResolvers],\n );\n const renderIndent = (nodeProps: AldTreeNodeProps) => {\n const { pos, isLeaf } = nodeProps as AldTreeNodeProps & { pos?: string };\n // Determine level from `pos` string (e.g. \"0-0-1\" → level 2)\n const level = pos ? pos.split('-').length - 1 : 0;\n const iconSize = TREE_SWITCH_CION_SIZE;\n let indentWidth = isLeaf ? iconSize : 0;\n indentWidth += level * (iconSize / 2);\n return <span style={{ width: indentWidth, flexShrink: 0 }}></span>;\n };\n const newTreeData = React.useMemo(() => {\n if (!filterTreeNode || !treeData) return treeData;\n\n const shouldNodeDisabled = (node: DataNode): boolean => {\n // 初始化一个标志来表示是否需要为当前节点添加className\n let shouldAddDisabled = true;\n if (filterTreeNode(node)) {\n shouldAddDisabled = false;\n }\n\n if (node.children) {\n // 遍历当前节点的子节点,只要有一个子节点不disable,则该不需要添加className\n const allChildrenShouldAddDisabled = node.children.reduce(\n (pre, child) => {\n return shouldNodeDisabled(child) && pre;\n },\n shouldAddDisabled,\n );\n shouldAddDisabled = allChildrenShouldAddDisabled;\n }\n\n // 如果shouldAddDisabled为true,就为当前节点添加className\n if (shouldAddDisabled) {\n node.className = node.className?.includes(NODE_DISABLE_CLASS_NAME)\n ? node.className\n : cn(node.className, NODE_DISABLE_CLASS_NAME);\n } else {\n const reg = /ald-tree-node-disabled/g;\n node.className?.replace(reg, ' ');\n }\n if (highlightKeywords && typeof node.title !== 'function') {\n node.title = (\n <HighlightText keyword={highlightKeywords}>\n {node.title}\n </HighlightText>\n );\n }\n return shouldAddDisabled;\n };\n const newTreeData = produce(treeData, (draft) => {\n for (const rootNode of draft) {\n shouldNodeDisabled(rootNode);\n }\n });\n return newTreeData;\n }, [filterTreeNode, treeData, highlightKeywords]);\n\n /** 给 drop-only 节点的 wrapper 加 'ald-tree-treenode-drop-only' className(rc-tree 5.x\n * 会把 DataNode.className 透传到 .ald-tree-treenode 上)。css 据此隐藏 drag handle icon\n * 并提供 not-allowed cursor,区分纯 drop target 与真正可拖节点。 */\n const finalTreeData = React.useMemo(() => {\n if (!dropOnlyResolvers || !newTreeData) return newTreeData;\n const { nodeDraggable, nodeDroppable } = dropOnlyResolvers;\n return produce(newTreeData, (draft) => {\n const visit = (nodes: DataNode[] | undefined) => {\n if (!nodes) return;\n for (const node of nodes) {\n const isDraggable = nodeDraggable ? nodeDraggable(node) : true;\n const isDroppable = nodeDroppable(node);\n if (!isDraggable && isDroppable) {\n const existing = node.className ?? '';\n if (!existing.includes('ald-tree-treenode-drop-only')) {\n node.className = cn(existing, 'ald-tree-treenode-drop-only');\n }\n }\n visit(node.children as DataNode[] | undefined);\n }\n };\n visit(draft as DataNode[]);\n });\n }, [newTreeData, dropOnlyResolvers]);\n\n const noChildren = React.useMemo(() => {\n if (finalTreeData?.length) {\n return finalTreeData.every((node) => {\n return !node.children?.length && node.isLeaf !== false;\n });\n }\n return true;\n }, [finalTreeData]);\n\n return (\n <RcTree\n itemHeight={20}\n ref={ref}\n virtual={virtual}\n {...newProps}\n allowDrop={composedAllowDrop}\n prefixCls={prefixCls}\n treeData={finalTreeData}\n className={cn(\n {\n [`${prefixCls}-icon-hide`]: !showIcon,\n [`${prefixCls}-block-node`]: blockNode,\n [`${prefixCls}-unselectable`]: !selectable,\n [`${prefixCls}-large`]: size === 'large',\n [`${prefixCls}-rtl`]: direction === 'rtl',\n ['ald-draggable-tree']: draggable,\n [`${prefixCls}-no-children`]: noChildren,\n },\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ant-tree',\n className,\n )}\n direction={direction as any}\n checkable={\n checkable ? (\n <span className={`${prefixCls}-checkbox-inner`} />\n ) : (\n checkable\n )\n }\n selectable={selectable}\n // @ts-ignore\n switcherIcon={(nodeProps: AldTreeNodeProps) => {\n return (\n <>\n {renderIndent(nodeProps)}\n {renderSwitcherIcon(\n prefixCls,\n <ArrowRightLightLine\n size={TREE_SWITCH_CION_SIZE}\n color={'var(--alias-colors-icon-subtle)'}\n >\n {t.Tree.expand}\n </ArrowRightLightLine>,\n showLine,\n nodeProps,\n TREE_SWITCH_CION_SIZE,\n )}\n </>\n );\n }}\n draggable={draggableConfig}\n >\n {children}\n </RcTree>\n );\n});\n\nexport default Tree;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TreeProps as RcTreeProps } from 'rc-tree';
|
|
2
|
+
import { DataNode } from 'rc-tree/es/interface';
|
|
3
|
+
type RcAllowDrop = NonNullable<RcTreeProps['allowDrop']>;
|
|
4
|
+
type NodeDroppableFn = (node: DataNode) => boolean;
|
|
5
|
+
/**
|
|
6
|
+
* 把用户传入的 allowDrop 和 nodeDroppable 组合成 AND 关系:任一拒绝即整体拒绝。
|
|
7
|
+
*
|
|
8
|
+
* 没传 nodeDroppable 时原样透传用户 allowDrop(包括 undefined),保持向后兼容。
|
|
9
|
+
*
|
|
10
|
+
* 短路:nodeDroppable 先判定,false 即返回 false,不调用用户 allowDrop;避免用户
|
|
11
|
+
* allowDrop 里做拼接计算时产生无谓副作用。
|
|
12
|
+
*/
|
|
13
|
+
export declare function composeAllowDrop(userAllowDrop: RcAllowDrop | undefined, nodeDroppable: NodeDroppableFn | undefined): RcAllowDrop | undefined;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
//#region src/Tree/utils/composeAllowDrop.ts
|
|
2
|
+
/**
|
|
3
|
+
* 把用户传入的 allowDrop 和 nodeDroppable 组合成 AND 关系:任一拒绝即整体拒绝。
|
|
4
|
+
*
|
|
5
|
+
* 没传 nodeDroppable 时原样透传用户 allowDrop(包括 undefined),保持向后兼容。
|
|
6
|
+
*
|
|
7
|
+
* 短路:nodeDroppable 先判定,false 即返回 false,不调用用户 allowDrop;避免用户
|
|
8
|
+
* allowDrop 里做拼接计算时产生无谓副作用。
|
|
9
|
+
*/
|
|
10
|
+
function composeAllowDrop(userAllowDrop, nodeDroppable) {
|
|
11
|
+
if (!nodeDroppable) return userAllowDrop;
|
|
12
|
+
return (info) => {
|
|
13
|
+
if (!nodeDroppable(info.dropNode)) return false;
|
|
14
|
+
return userAllowDrop ? userAllowDrop(info) : true;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { composeAllowDrop };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=composeAllowDrop.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"composeAllowDrop.js","names":[],"sources":["../../../src/Tree/utils/composeAllowDrop.ts"],"sourcesContent":["import type { TreeProps as RcTreeProps } from 'rc-tree';\nimport type { DataNode } from 'rc-tree/es/interface';\n\ntype RcAllowDrop = NonNullable<RcTreeProps['allowDrop']>;\ntype AllowDropInfo = Parameters<RcAllowDrop>[0];\ntype NodeDroppableFn = (node: DataNode) => boolean;\n\n/**\n * 把用户传入的 allowDrop 和 nodeDroppable 组合成 AND 关系:任一拒绝即整体拒绝。\n *\n * 没传 nodeDroppable 时原样透传用户 allowDrop(包括 undefined),保持向后兼容。\n *\n * 短路:nodeDroppable 先判定,false 即返回 false,不调用用户 allowDrop;避免用户\n * allowDrop 里做拼接计算时产生无谓副作用。\n */\nexport function composeAllowDrop(\n userAllowDrop: RcAllowDrop | undefined,\n nodeDroppable: NodeDroppableFn | undefined,\n): RcAllowDrop | undefined {\n if (!nodeDroppable) return userAllowDrop;\n return (info: AllowDropInfo) => {\n if (!nodeDroppable(info.dropNode as DataNode)) return false;\n return userAllowDrop ? userAllowDrop(info) : true;\n };\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,iBACd,eACA,eACyB;AACzB,KAAI,CAAC,cAAe,QAAO;AAC3B,SAAQ,SAAwB;AAC9B,MAAI,CAAC,cAAc,KAAK,SAAqB,CAAE,QAAO;AACtD,SAAO,gBAAgB,cAAc,KAAK,GAAG"}
|