@hkyhy/marsun-components-core 0.1.66 → 0.1.68
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/components/OrgTree/OrgTree.d.ts +9 -2
- package/dist/components/OrgTree/OrgTree.js +164 -133
- package/dist/components/OrgTree/OrgTree.js.map +1 -1
- package/dist/components/VirtualScrollbar/VirtualScrollbar/index.d.ts +5 -0
- package/dist/components/VirtualScrollbar/VirtualScrollbar/index.js +75 -51
- package/dist/components/VirtualScrollbar/VirtualScrollbar/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,13 @@ export type OrgTreeProps = {
|
|
|
13
13
|
/** 展示节点内增删改操作 */
|
|
14
14
|
editable?: boolean;
|
|
15
15
|
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* 初始展开深度:0=全部折叠;1=展开根(露出一级子,默认);
|
|
18
|
+
* 传很大的数或 Infinity ≈ 全展开(仅小树建议)。
|
|
19
|
+
*/
|
|
20
|
+
defaultExpandDepth?: number;
|
|
21
|
+
/** 虚拟列表可视高度(px);节点多时默认开启 */
|
|
22
|
+
virtualHeight?: number | false;
|
|
16
23
|
/** 受控选中(点选节点,如右侧岗位面板) */
|
|
17
24
|
selectedKeys?: Key[];
|
|
18
25
|
onSelect?: (node: {
|
|
@@ -38,8 +45,8 @@ export type OrgTreeProps = {
|
|
|
38
45
|
deleteOkType?: 'primary' | 'danger';
|
|
39
46
|
};
|
|
40
47
|
/**
|
|
41
|
-
* 组织树(对齐 Assets
|
|
42
|
-
* 纯 UI,无业务 API
|
|
48
|
+
* 组织树(对齐 Assets 组织架构行为):可配置展开深度、节点 hover 增删改。
|
|
49
|
+
* 纯 UI,无业务 API。大树勿默认全展开(会卡死 DOM)。
|
|
43
50
|
*/
|
|
44
51
|
declare const OrgTree: React.FC<OrgTreeProps>;
|
|
45
52
|
export default OrgTree;
|
|
@@ -1,154 +1,185 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Spin as
|
|
3
|
-
import
|
|
4
|
-
import { useMemo as
|
|
5
|
-
import
|
|
6
|
-
import { Plus as
|
|
7
|
-
import { Pencil as
|
|
8
|
-
import { Trash2 as
|
|
9
|
-
function
|
|
10
|
-
var
|
|
1
|
+
import { jsx as o, jsxs as d, Fragment as A } from "react/jsx-runtime";
|
|
2
|
+
import { Spin as D, Tree as G, Tooltip as H, Space as J, Button as k, Popconfirm as Q } from "antd";
|
|
3
|
+
import f from "classnames";
|
|
4
|
+
import { useMemo as x, useState as U, useEffect as W, useRef as X } from "react";
|
|
5
|
+
import h from "./style.module.scss.js";
|
|
6
|
+
import { Plus as Y } from "../Icons/Plus.js";
|
|
7
|
+
import { Pencil as Z } from "../Icons/Pencil.js";
|
|
8
|
+
import { Trash2 as _ } from "../Icons/Trash2.js";
|
|
9
|
+
function j(n, a) {
|
|
10
|
+
var e;
|
|
11
|
+
if (a <= 0 || !n.length) return [];
|
|
11
12
|
const i = [];
|
|
12
|
-
for (const
|
|
13
|
-
|
|
13
|
+
for (const s of n)
|
|
14
|
+
(e = s.children) != null && e.length && (i.push(s.id), a > 1 && i.push(...j(s.children, a - 1)));
|
|
14
15
|
return i;
|
|
15
16
|
}
|
|
16
|
-
function
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
function R(n) {
|
|
18
|
+
var i;
|
|
19
|
+
let a = 0;
|
|
20
|
+
for (const e of n)
|
|
21
|
+
a += 1, (i = e.children) != null && i.length && (a += R(e.children));
|
|
22
|
+
return a;
|
|
23
|
+
}
|
|
24
|
+
function $(n, a) {
|
|
25
|
+
var i;
|
|
26
|
+
for (const e of n) {
|
|
27
|
+
if (e.id === a)
|
|
28
|
+
return { id: e.id, name: e.name, parentId: e.parentId ?? null };
|
|
29
|
+
if ((i = e.children) != null && i.length) {
|
|
30
|
+
const s = $(e.children, a);
|
|
31
|
+
if (s) return s;
|
|
24
32
|
}
|
|
25
33
|
}
|
|
26
34
|
return null;
|
|
27
35
|
}
|
|
28
|
-
const
|
|
29
|
-
nodes:
|
|
30
|
-
loading:
|
|
31
|
-
editable:
|
|
32
|
-
className:
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
const lr = ({
|
|
37
|
+
nodes: n,
|
|
38
|
+
loading: a = !1,
|
|
39
|
+
editable: i = !1,
|
|
40
|
+
className: e,
|
|
41
|
+
defaultExpandDepth: s = 1,
|
|
42
|
+
virtualHeight: v,
|
|
43
|
+
selectedKeys: F,
|
|
44
|
+
onSelect: C,
|
|
45
|
+
onAdd: N,
|
|
46
|
+
onEdit: y,
|
|
47
|
+
onDelete: E,
|
|
48
|
+
deleteConfirmTitle: S = "确认删除该节点?",
|
|
49
|
+
deleteOkText: P = "删除",
|
|
40
50
|
deleteOkType: b = "danger"
|
|
41
51
|
}) => {
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
{
|
|
79
|
-
type: "text",
|
|
80
|
-
size: "small",
|
|
81
|
-
"aria-label": "添加子节点",
|
|
82
|
-
icon: /* @__PURE__ */ t(O, { size: 14 }),
|
|
83
|
-
onClick: (e) => {
|
|
84
|
-
e.stopPropagation(), g(r.id);
|
|
52
|
+
const L = x(() => R(n), [n]), M = x(() => {
|
|
53
|
+
const l = (m) => m.map((r) => {
|
|
54
|
+
var p;
|
|
55
|
+
return `${r.id}:${(p = r.children) != null && p.length ? l(r.children) : ""}`;
|
|
56
|
+
}).join("|");
|
|
57
|
+
return l(n);
|
|
58
|
+
}, [n]), z = x(
|
|
59
|
+
() => j(n, s),
|
|
60
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- 故意跟 structureKey,不跟 nodes 引用
|
|
61
|
+
[M, s]
|
|
62
|
+
), [V, w] = U(z);
|
|
63
|
+
W(() => {
|
|
64
|
+
w(z);
|
|
65
|
+
}, [z]);
|
|
66
|
+
const g = X({ onAdd: N, onEdit: y, onDelete: E });
|
|
67
|
+
g.current = { onAdd: N, onEdit: y, onDelete: E };
|
|
68
|
+
const B = !!N, I = !!y, K = !!E, q = x(() => {
|
|
69
|
+
const l = (m) => m.map((r) => {
|
|
70
|
+
var p;
|
|
71
|
+
return {
|
|
72
|
+
key: r.id,
|
|
73
|
+
title: /* @__PURE__ */ d("div", { className: f("marsun-org-tree-row", h["marsun-org-tree-row"]), children: [
|
|
74
|
+
/* @__PURE__ */ o(
|
|
75
|
+
H,
|
|
76
|
+
{
|
|
77
|
+
title: r.nameExtra ? /* @__PURE__ */ d(A, { children: [
|
|
78
|
+
r.name,
|
|
79
|
+
r.nameExtra
|
|
80
|
+
] }) : r.name,
|
|
81
|
+
children: /* @__PURE__ */ d("span", { className: f("marsun-org-tree-name", h["marsun-org-tree-name"]), children: [
|
|
82
|
+
r.name,
|
|
83
|
+
r.nameExtra ? /* @__PURE__ */ o(
|
|
84
|
+
"span",
|
|
85
|
+
{
|
|
86
|
+
className: f("marsun-org-tree-extra", h["marsun-org-tree-extra"]),
|
|
87
|
+
children: r.nameExtra
|
|
85
88
|
}
|
|
86
|
-
|
|
87
|
-
)
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
89
|
+
) : null
|
|
90
|
+
] })
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
i ? /* @__PURE__ */ d(
|
|
94
|
+
J,
|
|
95
|
+
{
|
|
96
|
+
size: 0,
|
|
97
|
+
className: f("marsun-org-tree-actions", h["marsun-org-tree-actions"]),
|
|
98
|
+
children: [
|
|
99
|
+
B ? /* @__PURE__ */ o(
|
|
100
|
+
k,
|
|
101
|
+
{
|
|
102
|
+
type: "text",
|
|
103
|
+
size: "small",
|
|
104
|
+
"aria-label": "添加子节点",
|
|
105
|
+
icon: /* @__PURE__ */ o(Y, { size: 14 }),
|
|
106
|
+
onClick: (t) => {
|
|
107
|
+
var c, u;
|
|
108
|
+
t.stopPropagation(), (u = (c = g.current).onAdd) == null || u.call(c, r.id);
|
|
109
|
+
}
|
|
101
110
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
size: "small",
|
|
118
|
-
danger: !0,
|
|
119
|
-
"aria-label": x,
|
|
120
|
-
icon: /* @__PURE__ */ t(A, { size: 14 }),
|
|
121
|
-
onClick: (e) => e.stopPropagation()
|
|
111
|
+
) : null,
|
|
112
|
+
I ? /* @__PURE__ */ o(
|
|
113
|
+
k,
|
|
114
|
+
{
|
|
115
|
+
type: "text",
|
|
116
|
+
size: "small",
|
|
117
|
+
"aria-label": "编辑",
|
|
118
|
+
icon: /* @__PURE__ */ o(Z, { size: 14 }),
|
|
119
|
+
onClick: (t) => {
|
|
120
|
+
var c, u;
|
|
121
|
+
t.stopPropagation(), (u = (c = g.current).onEdit) == null || u.call(c, {
|
|
122
|
+
id: r.id,
|
|
123
|
+
name: r.name,
|
|
124
|
+
parentId: r.parentId ?? null
|
|
125
|
+
});
|
|
122
126
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
127
|
+
}
|
|
128
|
+
) : null,
|
|
129
|
+
K ? /* @__PURE__ */ o(
|
|
130
|
+
Q,
|
|
131
|
+
{
|
|
132
|
+
title: S,
|
|
133
|
+
okText: P,
|
|
134
|
+
okType: b,
|
|
135
|
+
cancelText: "取消",
|
|
136
|
+
onConfirm: (t) => {
|
|
137
|
+
var c, u;
|
|
138
|
+
return t == null || t.stopPropagation(), (u = (c = g.current).onDelete) == null ? void 0 : u.call(c, { id: r.id, name: r.name });
|
|
139
|
+
},
|
|
140
|
+
onCancel: (t) => t == null ? void 0 : t.stopPropagation(),
|
|
141
|
+
children: /* @__PURE__ */ o(
|
|
142
|
+
k,
|
|
143
|
+
{
|
|
144
|
+
type: "text",
|
|
145
|
+
size: "small",
|
|
146
|
+
danger: !0,
|
|
147
|
+
"aria-label": P,
|
|
148
|
+
icon: /* @__PURE__ */ o(_, { size: 14 }),
|
|
149
|
+
onClick: (t) => t.stopPropagation()
|
|
150
|
+
}
|
|
151
|
+
)
|
|
152
|
+
}
|
|
153
|
+
) : null
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
) : null
|
|
157
|
+
] }),
|
|
158
|
+
children: (p = r.children) != null && p.length ? l(r.children) : void 0
|
|
159
|
+
};
|
|
160
|
+
});
|
|
161
|
+
return l(n);
|
|
162
|
+
}, [n, i, B, I, K, S, P, b]), T = v === !1 ? void 0 : v ?? (L > 80 ? 520 : void 0);
|
|
163
|
+
return /* @__PURE__ */ o(D, { spinning: a, children: /* @__PURE__ */ o(
|
|
164
|
+
G,
|
|
135
165
|
{
|
|
136
|
-
className:
|
|
137
|
-
treeData:
|
|
138
|
-
expandedKeys:
|
|
139
|
-
onExpand: (
|
|
140
|
-
selectedKeys:
|
|
141
|
-
onSelect: (
|
|
142
|
-
if (!
|
|
143
|
-
const
|
|
144
|
-
|
|
166
|
+
className: f("marsun-org-tree", h["marsun-org-tree"], e),
|
|
167
|
+
treeData: q,
|
|
168
|
+
expandedKeys: V,
|
|
169
|
+
onExpand: (l) => w(l),
|
|
170
|
+
selectedKeys: F,
|
|
171
|
+
onSelect: (l) => {
|
|
172
|
+
if (!C) return;
|
|
173
|
+
const m = l[0] != null ? String(l[0]) : "";
|
|
174
|
+
C(m ? $(n, m) : null);
|
|
145
175
|
},
|
|
146
176
|
showLine: !0,
|
|
147
|
-
blockNode: !0
|
|
177
|
+
blockNode: !0,
|
|
178
|
+
...T ? { virtual: !0, height: T } : {}
|
|
148
179
|
}
|
|
149
180
|
) });
|
|
150
181
|
};
|
|
151
182
|
export {
|
|
152
|
-
|
|
183
|
+
lr as default
|
|
153
184
|
};
|
|
154
185
|
//# sourceMappingURL=OrgTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrgTree.js","sources":["../../../src/components/OrgTree/OrgTree.tsx"],"sourcesContent":["import { Pencil, Plus, Trash2 } from '../Icons';\nimport { Button, Popconfirm, Space, Spin, Tooltip, Tree } from 'antd';\nimport type { DataNode } from 'antd/es/tree';\nimport classNames from 'classnames';\nimport React, { useEffect, useMemo, useState, type Key, type ReactNode } from 'react';\nimport styles from './style.module.scss';\n\nexport type OrgTreeNode = {\n id: string;\n name: string;\n parentId?: string | null;\n children?: OrgTreeNode[];\n /** 名称旁附加文案(如 mapped) */\n nameExtra?: ReactNode;\n};\n\nexport type OrgTreeProps = {\n nodes: OrgTreeNode[];\n loading?: boolean;\n /** 展示节点内增删改操作 */\n editable?: boolean;\n className?: string;\n /** 受控选中(点选节点,如右侧岗位面板) */\n selectedKeys?: Key[];\n onSelect?: (node: { id: string; name: string; parentId: string | null } | null) => void;\n onAdd?: (parentId: string) => void;\n onEdit?: (node: { id: string; name: string; parentId: string | null }) => void;\n /** 确认删除后回调;由业务执行 API */\n onDelete?: (node: { id: string; name: string }) => void | Promise<void>;\n /** 删除确认文案 */\n deleteConfirmTitle?: string;\n /** 确认钮文案(软禁用场景可传「禁用」) */\n deleteOkText?: string;\n deleteOkType?: 'primary' | 'danger';\n};\n\nfunction collectAllKeys(nodes: OrgTreeNode[]): string[] {\n const keys: string[] = [];\n for (const n of nodes) {\n keys.push(n.id);\n if (n.children?.length) keys.push(...collectAllKeys(n.children));\n }\n return keys;\n}\n\nfunction findOrgNode(\n list: OrgTreeNode[],\n id: string,\n): { id: string; name: string; parentId: string | null } | null {\n for (const n of list) {\n if (n.id === id) {\n return { id: n.id, name: n.name, parentId: n.parentId ?? null };\n }\n if (n.children?.length) {\n const hit = findOrgNode(n.children, id);\n if (hit) return hit;\n }\n }\n return null;\n}\n\n/**\n * 组织树(对齐 Assets 组织架构行为):默认展开、节点 hover 增删改。\n * 纯 UI,无业务 API。\n */\nconst OrgTree: React.FC<OrgTreeProps> = ({\n nodes,\n loading = false,\n editable = false,\n className,\n selectedKeys,\n onSelect,\n onAdd,\n onEdit,\n onDelete,\n deleteConfirmTitle = '确认删除该节点?',\n deleteOkText = '删除',\n deleteOkType = 'danger',\n}) => {\n const allKeys = useMemo(() => collectAllKeys(nodes), [nodes]);\n const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);\n\n useEffect(() => {\n setExpandedKeys(allKeys);\n }, [allKeys]);\n\n const buildTreeNodes = (list: OrgTreeNode[]): DataNode[] =>\n list.map((node) => ({\n key: node.id,\n title: (\n <div className={classNames('marsun-org-tree-row', styles['marsun-org-tree-row'])}>\n <Tooltip\n title={\n node.nameExtra ? (\n <>\n {node.name}\n {node.nameExtra}\n </>\n ) : (\n node.name\n )\n }\n >\n <span className={classNames('marsun-org-tree-name', styles['marsun-org-tree-name'])}>\n {node.name}\n {node.nameExtra ? (\n <span\n className={classNames('marsun-org-tree-extra', styles['marsun-org-tree-extra'])}\n >\n {node.nameExtra}\n </span>\n ) : null}\n </span>\n </Tooltip>\n {editable ? (\n <Space\n size={0}\n className={classNames('marsun-org-tree-actions', styles['marsun-org-tree-actions'])}\n >\n {onAdd ? (\n <Button\n type=\"text\"\n size=\"small\"\n aria-label=\"添加子节点\"\n icon={<Plus size={14} />}\n onClick={(e) => {\n e.stopPropagation();\n onAdd(node.id);\n }}\n />\n ) : null}\n {onEdit ? (\n <Button\n type=\"text\"\n size=\"small\"\n aria-label=\"编辑\"\n icon={<Pencil size={14} />}\n onClick={(e) => {\n e.stopPropagation();\n onEdit({\n id: node.id,\n name: node.name,\n parentId: node.parentId ?? null,\n });\n }}\n />\n ) : null}\n {onDelete ? (\n <Popconfirm\n title={deleteConfirmTitle}\n okText={deleteOkText}\n okType={deleteOkType}\n cancelText=\"取消\"\n onConfirm={(e) => {\n e?.stopPropagation();\n return onDelete({ id: node.id, name: node.name });\n }}\n onCancel={(e) => e?.stopPropagation()}\n >\n <Button\n type=\"text\"\n size=\"small\"\n danger\n aria-label={deleteOkText}\n icon={<Trash2 size={14} />}\n onClick={(e) => e.stopPropagation()}\n />\n </Popconfirm>\n ) : null}\n </Space>\n ) : null}\n </div>\n ),\n children: node.children?.length ? buildTreeNodes(node.children) : undefined,\n }));\n\n const treeData = buildTreeNodes(nodes);\n\n return (\n <Spin spinning={loading}>\n <Tree\n className={classNames('marsun-org-tree', styles['marsun-org-tree'], className)}\n treeData={treeData}\n expandedKeys={expandedKeys}\n onExpand={(keys) => setExpandedKeys(keys)}\n selectedKeys={selectedKeys}\n onSelect={(keys) => {\n if (!onSelect) return;\n const id = keys[0] != null ? String(keys[0]) : '';\n onSelect(id ? findOrgNode(nodes, id) : null);\n }}\n showLine\n blockNode\n />\n </Spin>\n );\n};\n\nexport default OrgTree;\n"],"names":["collectAllKeys","nodes","keys","_a","findOrgNode","list","id","hit","OrgTree","loading","editable","className","selectedKeys","onSelect","onAdd","onEdit","onDelete","deleteConfirmTitle","deleteOkText","deleteOkType","allKeys","useMemo","expandedKeys","setExpandedKeys","useState","useEffect","buildTreeNodes","node","classNames","styles","jsx","Tooltip","jsxs","Fragment","Space","Button","Plus","Pencil","Popconfirm","Trash2","treeData","Spin","Tree"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OrgTree.js","sources":["../../../src/components/OrgTree/OrgTree.tsx"],"sourcesContent":["import { Pencil, Plus, Trash2 } from '../Icons';\nimport { Button, Popconfirm, Space, Spin, Tooltip, Tree } from 'antd';\nimport type { DataNode } from 'antd/es/tree';\nimport classNames from 'classnames';\nimport React, { useEffect, useMemo, useRef, useState, type Key, type ReactNode } from 'react';\nimport styles from './style.module.scss';\n\nexport type OrgTreeNode = {\n id: string;\n name: string;\n parentId?: string | null;\n children?: OrgTreeNode[];\n /** 名称旁附加文案(如 mapped) */\n nameExtra?: ReactNode;\n};\n\nexport type OrgTreeProps = {\n nodes: OrgTreeNode[];\n loading?: boolean;\n /** 展示节点内增删改操作 */\n editable?: boolean;\n className?: string;\n /**\n * 初始展开深度:0=全部折叠;1=展开根(露出一级子,默认);\n * 传很大的数或 Infinity ≈ 全展开(仅小树建议)。\n */\n defaultExpandDepth?: number;\n /** 虚拟列表可视高度(px);节点多时默认开启 */\n virtualHeight?: number | false;\n /** 受控选中(点选节点,如右侧岗位面板) */\n selectedKeys?: Key[];\n onSelect?: (node: { id: string; name: string; parentId: string | null } | null) => void;\n onAdd?: (parentId: string) => void;\n onEdit?: (node: { id: string; name: string; parentId: string | null }) => void;\n /** 确认删除后回调;由业务执行 API */\n onDelete?: (node: { id: string; name: string }) => void | Promise<void>;\n /** 删除确认文案 */\n deleteConfirmTitle?: string;\n /** 确认钮文案(软禁用场景可传「禁用」) */\n deleteOkText?: string;\n deleteOkType?: 'primary' | 'danger';\n};\n\n/** 收集需展开的 key:depth=1 只展开根,露出一级子节点 */\nfunction collectExpandedKeys(nodes: OrgTreeNode[], depth: number): string[] {\n if (depth <= 0 || !nodes.length) return [];\n const keys: string[] = [];\n for (const n of nodes) {\n if (n.children?.length) {\n keys.push(n.id);\n if (depth > 1) {\n keys.push(...collectExpandedKeys(n.children, depth - 1));\n }\n }\n }\n return keys;\n}\n\nfunction countNodes(nodes: OrgTreeNode[]): number {\n let n = 0;\n for (const node of nodes) {\n n += 1;\n if (node.children?.length) n += countNodes(node.children);\n }\n return n;\n}\n\nfunction findOrgNode(\n list: OrgTreeNode[],\n id: string,\n): { id: string; name: string; parentId: string | null } | null {\n for (const n of list) {\n if (n.id === id) {\n return { id: n.id, name: n.name, parentId: n.parentId ?? null };\n }\n if (n.children?.length) {\n const hit = findOrgNode(n.children, id);\n if (hit) return hit;\n }\n }\n return null;\n}\n\n/**\n * 组织树(对齐 Assets 组织架构行为):可配置展开深度、节点 hover 增删改。\n * 纯 UI,无业务 API。大树勿默认全展开(会卡死 DOM)。\n */\nconst OrgTree: React.FC<OrgTreeProps> = ({\n nodes,\n loading = false,\n editable = false,\n className,\n defaultExpandDepth = 1,\n virtualHeight,\n selectedKeys,\n onSelect,\n onAdd,\n onEdit,\n onDelete,\n deleteConfirmTitle = '确认删除该节点?',\n deleteOkText = '删除',\n deleteOkType = 'danger',\n}) => {\n const nodeCount = useMemo(() => countNodes(nodes), [nodes]);\n /** 树结构指纹:仅 id 拓扑变化时重置展开,避免父组件重渲染把滚动/展开打回默认 */\n const nodesStructureKey = useMemo(() => {\n const walk = (list: OrgTreeNode[]): string =>\n list.map((n) => `${n.id}:${n.children?.length ? walk(n.children) : ''}`).join('|');\n return walk(nodes);\n }, [nodes]);\n const initialExpanded = useMemo(\n () => collectExpandedKeys(nodes, defaultExpandDepth),\n // eslint-disable-next-line react-hooks/exhaustive-deps -- 故意跟 structureKey,不跟 nodes 引用\n [nodesStructureKey, defaultExpandDepth],\n );\n const [expandedKeys, setExpandedKeys] = useState<Key[]>(initialExpanded);\n\n useEffect(() => {\n setExpandedKeys(initialExpanded);\n }, [initialExpanded]);\n\n /** 回调走 ref,避免树 title 重建触发 antd virtual Tree 滚回顶部 */\n const actionRefs = useRef({ onAdd, onEdit, onDelete });\n actionRefs.current = { onAdd, onEdit, onDelete };\n const hasAdd = Boolean(onAdd);\n const hasEdit = Boolean(onEdit);\n const hasDelete = Boolean(onDelete);\n\n const treeData = useMemo(() => {\n const buildTreeNodes = (list: OrgTreeNode[]): DataNode[] =>\n list.map((node) => ({\n key: node.id,\n title: (\n <div className={classNames('marsun-org-tree-row', styles['marsun-org-tree-row'])}>\n <Tooltip\n title={\n node.nameExtra ? (\n <>\n {node.name}\n {node.nameExtra}\n </>\n ) : (\n node.name\n )\n }\n >\n <span className={classNames('marsun-org-tree-name', styles['marsun-org-tree-name'])}>\n {node.name}\n {node.nameExtra ? (\n <span\n className={classNames('marsun-org-tree-extra', styles['marsun-org-tree-extra'])}\n >\n {node.nameExtra}\n </span>\n ) : null}\n </span>\n </Tooltip>\n {editable ? (\n <Space\n size={0}\n className={classNames('marsun-org-tree-actions', styles['marsun-org-tree-actions'])}\n >\n {hasAdd ? (\n <Button\n type=\"text\"\n size=\"small\"\n aria-label=\"添加子节点\"\n icon={<Plus size={14} />}\n onClick={(e) => {\n e.stopPropagation();\n actionRefs.current.onAdd?.(node.id);\n }}\n />\n ) : null}\n {hasEdit ? (\n <Button\n type=\"text\"\n size=\"small\"\n aria-label=\"编辑\"\n icon={<Pencil size={14} />}\n onClick={(e) => {\n e.stopPropagation();\n actionRefs.current.onEdit?.({\n id: node.id,\n name: node.name,\n parentId: node.parentId ?? null,\n });\n }}\n />\n ) : null}\n {hasDelete ? (\n <Popconfirm\n title={deleteConfirmTitle}\n okText={deleteOkText}\n okType={deleteOkType}\n cancelText=\"取消\"\n onConfirm={(e) => {\n e?.stopPropagation();\n return actionRefs.current.onDelete?.({ id: node.id, name: node.name });\n }}\n onCancel={(e) => e?.stopPropagation()}\n >\n <Button\n type=\"text\"\n size=\"small\"\n danger\n aria-label={deleteOkText}\n icon={<Trash2 size={14} />}\n onClick={(e) => e.stopPropagation()}\n />\n </Popconfirm>\n ) : null}\n </Space>\n ) : null}\n </div>\n ),\n children: node.children?.length ? buildTreeNodes(node.children) : undefined,\n }));\n return buildTreeNodes(nodes);\n }, [nodes, editable, hasAdd, hasEdit, hasDelete, deleteConfirmTitle, deleteOkText, deleteOkType]);\n\n const resolvedVirtualHeight =\n virtualHeight === false ? undefined : (virtualHeight ?? (nodeCount > 80 ? 520 : undefined));\n\n return (\n <Spin spinning={loading}>\n <Tree\n className={classNames('marsun-org-tree', styles['marsun-org-tree'], className)}\n treeData={treeData}\n expandedKeys={expandedKeys}\n onExpand={(keys) => setExpandedKeys(keys)}\n selectedKeys={selectedKeys}\n onSelect={(keys) => {\n if (!onSelect) return;\n const id = keys[0] != null ? String(keys[0]) : '';\n onSelect(id ? findOrgNode(nodes, id) : null);\n }}\n showLine\n blockNode\n {...(resolvedVirtualHeight ? { virtual: true, height: resolvedVirtualHeight } : {})}\n />\n </Spin>\n );\n};\n\nexport default OrgTree;\n"],"names":["collectExpandedKeys","nodes","depth","keys","n","_a","countNodes","node","findOrgNode","list","id","hit","OrgTree","loading","editable","className","defaultExpandDepth","virtualHeight","selectedKeys","onSelect","onAdd","onEdit","onDelete","deleteConfirmTitle","deleteOkText","deleteOkType","nodeCount","useMemo","nodesStructureKey","walk","initialExpanded","expandedKeys","setExpandedKeys","useState","useEffect","actionRefs","useRef","hasAdd","hasEdit","hasDelete","treeData","buildTreeNodes","classNames","styles","jsx","Tooltip","jsxs","Fragment","Space","Button","Plus","e","_b","Pencil","Popconfirm","Trash2","resolvedVirtualHeight","Spin","Tree"],"mappings":"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"}
|
|
@@ -8,6 +8,11 @@ export interface VirtualScrollbarProps extends React.HTMLAttributes<HTMLDivEleme
|
|
|
8
8
|
autoHide?: boolean;
|
|
9
9
|
/** 外层容器 className */
|
|
10
10
|
wrapperClassName?: string;
|
|
11
|
+
/**
|
|
12
|
+
* 子树重渲染 / Modal 关窗 focus 回写等导致 scrollTop 被清零时,恢复上次滚动位置。
|
|
13
|
+
* 默认 true。
|
|
14
|
+
*/
|
|
15
|
+
preserveScroll?: boolean;
|
|
11
16
|
}
|
|
12
17
|
/** 覆盖式虚拟滚动条:隐藏原生滚动条,thumb 悬浮不占布局宽度 */
|
|
13
18
|
declare const VirtualScrollbar: React.ForwardRefExoticComponent<VirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,86 +1,110 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { useVirtualScrollbar as
|
|
1
|
+
import { jsxs as S, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as j, useRef as h, useImperativeHandle as A, useLayoutEffect as C } from "react";
|
|
3
|
+
import { useVirtualScrollbar as F } from "../useVirtualScrollbar.js";
|
|
4
4
|
import l from "./style.module.scss.js";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import t from "classnames";
|
|
6
|
+
const H = j(
|
|
7
7
|
({
|
|
8
|
-
children:
|
|
9
|
-
direction:
|
|
10
|
-
autoHide:
|
|
11
|
-
className:
|
|
12
|
-
wrapperClassName:
|
|
13
|
-
style:
|
|
14
|
-
onScroll:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
children: b,
|
|
9
|
+
direction: a = "vertical",
|
|
10
|
+
autoHide: p = !0,
|
|
11
|
+
className: d,
|
|
12
|
+
wrapperClassName: w,
|
|
13
|
+
style: z,
|
|
14
|
+
onScroll: c,
|
|
15
|
+
preserveScroll: M = !0,
|
|
16
|
+
...N
|
|
17
|
+
}, k) => {
|
|
18
|
+
const i = h(null), n = h({ top: 0, left: 0 });
|
|
19
|
+
A(k, () => i.current);
|
|
19
20
|
const {
|
|
20
|
-
metrics:
|
|
21
|
-
active:
|
|
22
|
-
handleScroll:
|
|
23
|
-
handleMouseEnter:
|
|
24
|
-
handleMouseLeave:
|
|
25
|
-
startDrag:
|
|
21
|
+
metrics: o,
|
|
22
|
+
active: L,
|
|
23
|
+
handleScroll: x,
|
|
24
|
+
handleMouseEnter: y,
|
|
25
|
+
handleMouseLeave: D,
|
|
26
|
+
startDrag: u,
|
|
26
27
|
handleTrackClick: v
|
|
27
|
-
} =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
} = F(i, a, p), T = a === "vertical" || a === "both", V = a === "horizontal" || a === "both", R = (r) => {
|
|
29
|
+
const e = r.currentTarget;
|
|
30
|
+
n.current = { top: e.scrollTop, left: e.scrollLeft }, x(), c == null || c(r);
|
|
31
|
+
};
|
|
32
|
+
C(() => {
|
|
33
|
+
if (!M) return;
|
|
34
|
+
const r = i.current;
|
|
35
|
+
if (!r) return;
|
|
36
|
+
const { top: e, left: f } = n.current, m = () => {
|
|
37
|
+
e > 0 && r.scrollTop === 0 && (r.scrollTop = e), f > 0 && r.scrollLeft === 0 && (r.scrollLeft = f);
|
|
38
|
+
};
|
|
39
|
+
m();
|
|
40
|
+
const E = window.requestAnimationFrame(m);
|
|
41
|
+
return () => window.cancelAnimationFrame(E);
|
|
42
|
+
});
|
|
43
|
+
const g = t(
|
|
44
|
+
t("virtual-scrollbar-root", l["virtual-scrollbar-root"]),
|
|
45
|
+
L && t("virtual-scrollbar-root-active", l["virtual-scrollbar-root-active"]),
|
|
46
|
+
w
|
|
33
47
|
);
|
|
34
|
-
return /* @__PURE__ */
|
|
48
|
+
return /* @__PURE__ */ S(
|
|
35
49
|
"div",
|
|
36
50
|
{
|
|
37
|
-
className:
|
|
38
|
-
style:
|
|
39
|
-
onMouseEnter:
|
|
40
|
-
onMouseLeave:
|
|
51
|
+
className: g,
|
|
52
|
+
style: z,
|
|
53
|
+
onMouseEnter: y,
|
|
54
|
+
onMouseLeave: D,
|
|
41
55
|
children: [
|
|
42
56
|
/* @__PURE__ */ s(
|
|
43
57
|
"div",
|
|
44
58
|
{
|
|
45
59
|
ref: i,
|
|
46
|
-
className:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
className: t(
|
|
61
|
+
"virtual-scrollbar-viewport",
|
|
62
|
+
l["virtual-scrollbar-viewport"],
|
|
63
|
+
d
|
|
64
|
+
),
|
|
65
|
+
onScroll: R,
|
|
66
|
+
...N,
|
|
67
|
+
children: b
|
|
50
68
|
}
|
|
51
69
|
),
|
|
52
|
-
|
|
70
|
+
T && o.vertical.visible && /* @__PURE__ */ s(
|
|
53
71
|
"div",
|
|
54
72
|
{
|
|
55
|
-
className:
|
|
73
|
+
className: t(
|
|
74
|
+
"virtual-scrollbar-track-vertical",
|
|
75
|
+
l["virtual-scrollbar-track-vertical"]
|
|
76
|
+
),
|
|
56
77
|
onMouseDown: (r) => v("vertical", r),
|
|
57
78
|
children: /* @__PURE__ */ s(
|
|
58
79
|
"div",
|
|
59
80
|
{
|
|
60
|
-
className:
|
|
81
|
+
className: t("virtual-scrollbar-thumb", l["virtual-scrollbar-thumb"]),
|
|
61
82
|
style: {
|
|
62
|
-
height:
|
|
63
|
-
transform: `translateY(${
|
|
83
|
+
height: o.vertical.size,
|
|
84
|
+
transform: `translateY(${o.vertical.offset}px)`
|
|
64
85
|
},
|
|
65
|
-
onMouseDown: (r) =>
|
|
86
|
+
onMouseDown: (r) => u("vertical", r)
|
|
66
87
|
}
|
|
67
88
|
)
|
|
68
89
|
}
|
|
69
90
|
),
|
|
70
|
-
|
|
91
|
+
V && o.horizontal.visible && /* @__PURE__ */ s(
|
|
71
92
|
"div",
|
|
72
93
|
{
|
|
73
|
-
className:
|
|
94
|
+
className: t(
|
|
95
|
+
"virtual-scrollbar-track-horizontal",
|
|
96
|
+
l["virtual-scrollbar-track-horizontal"]
|
|
97
|
+
),
|
|
74
98
|
onMouseDown: (r) => v("horizontal", r),
|
|
75
99
|
children: /* @__PURE__ */ s(
|
|
76
100
|
"div",
|
|
77
101
|
{
|
|
78
|
-
className:
|
|
102
|
+
className: t("virtual-scrollbar-thumb", l["virtual-scrollbar-thumb"]),
|
|
79
103
|
style: {
|
|
80
|
-
width:
|
|
81
|
-
transform: `translateX(${
|
|
104
|
+
width: o.horizontal.size,
|
|
105
|
+
transform: `translateX(${o.horizontal.offset}px)`
|
|
82
106
|
},
|
|
83
|
-
onMouseDown: (r) =>
|
|
107
|
+
onMouseDown: (r) => u("horizontal", r)
|
|
84
108
|
}
|
|
85
109
|
)
|
|
86
110
|
}
|
|
@@ -90,8 +114,8 @@ const C = y(
|
|
|
90
114
|
);
|
|
91
115
|
}
|
|
92
116
|
);
|
|
93
|
-
|
|
117
|
+
H.displayName = "VirtualScrollbar";
|
|
94
118
|
export {
|
|
95
|
-
|
|
119
|
+
H as default
|
|
96
120
|
};
|
|
97
121
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/VirtualScrollbar/VirtualScrollbar/index.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useVirtualScrollbar, type ScrollDirection } from '../useVirtualScrollbar';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface VirtualScrollbarProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n /** 滚动方向,默认 vertical */\n direction?: ScrollDirection;\n /** 滚动/悬停后自动隐藏 thumb,默认 true */\n autoHide?: boolean;\n /** 外层容器 className */\n wrapperClassName?: string;\n}\n\n/** 覆盖式虚拟滚动条:隐藏原生滚动条,thumb 悬浮不占布局宽度 */\nconst VirtualScrollbar = forwardRef<HTMLDivElement, VirtualScrollbarProps>(\n (\n {\n children,\n direction = 'vertical',\n autoHide = true,\n className,\n wrapperClassName,\n style,\n onScroll,\n ...rest\n },\n ref,\n ) => {\n const viewportRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => viewportRef.current as HTMLDivElement);\n\n const {\n metrics,\n active,\n handleScroll,\n handleMouseEnter,\n handleMouseLeave,\n startDrag,\n handleTrackClick,\n } = useVirtualScrollbar(viewportRef, direction, autoHide);\n\n const showVertical = direction === 'vertical' || direction === 'both';\n const showHorizontal = direction === 'horizontal' || direction === 'both';\n\n const handleViewportScroll = (event: React.UIEvent<HTMLDivElement>) => {\n handleScroll();\n onScroll?.(event);\n };\n\n const rootClass = classNames(\n classNames('virtual-scrollbar-root', styles['virtual-scrollbar-root']),\n active
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/VirtualScrollbar/VirtualScrollbar/index.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport { useVirtualScrollbar, type ScrollDirection } from '../useVirtualScrollbar';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface VirtualScrollbarProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n /** 滚动方向,默认 vertical */\n direction?: ScrollDirection;\n /** 滚动/悬停后自动隐藏 thumb,默认 true */\n autoHide?: boolean;\n /** 外层容器 className */\n wrapperClassName?: string;\n /**\n * 子树重渲染 / Modal 关窗 focus 回写等导致 scrollTop 被清零时,恢复上次滚动位置。\n * 默认 true。\n */\n preserveScroll?: boolean;\n}\n\n/** 覆盖式虚拟滚动条:隐藏原生滚动条,thumb 悬浮不占布局宽度 */\nconst VirtualScrollbar = forwardRef<HTMLDivElement, VirtualScrollbarProps>(\n (\n {\n children,\n direction = 'vertical',\n autoHide = true,\n className,\n wrapperClassName,\n style,\n onScroll,\n preserveScroll = true,\n ...rest\n },\n ref,\n ) => {\n const viewportRef = useRef<HTMLDivElement>(null);\n const savedScrollRef = useRef({ top: 0, left: 0 });\n\n useImperativeHandle(ref, () => viewportRef.current as HTMLDivElement);\n\n const {\n metrics,\n active,\n handleScroll,\n handleMouseEnter,\n handleMouseLeave,\n startDrag,\n handleTrackClick,\n } = useVirtualScrollbar(viewportRef, direction, autoHide);\n\n const showVertical = direction === 'vertical' || direction === 'both';\n const showHorizontal = direction === 'horizontal' || direction === 'both';\n\n const handleViewportScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const t = event.currentTarget;\n savedScrollRef.current = { top: t.scrollTop, left: t.scrollLeft };\n handleScroll();\n onScroll?.(event);\n };\n\n /**\n * Modal 关闭 focusTriggerAfterClose / 子树高度瞬间塌缩时,浏览器常把 scrollTop 打成 0。\n * 在 layout 与下一帧各恢复一次,盖住 focus scrollIntoView。\n */\n useLayoutEffect(() => {\n if (!preserveScroll) return;\n const el = viewportRef.current;\n if (!el) return;\n const { top, left } = savedScrollRef.current;\n const restore = () => {\n if (top > 0 && el.scrollTop === 0) el.scrollTop = top;\n if (left > 0 && el.scrollLeft === 0) el.scrollLeft = left;\n };\n restore();\n const id = window.requestAnimationFrame(restore);\n return () => window.cancelAnimationFrame(id);\n });\n\n const rootClass = classNames(\n classNames('virtual-scrollbar-root', styles['virtual-scrollbar-root']),\n active &&\n classNames('virtual-scrollbar-root-active', styles['virtual-scrollbar-root-active']),\n wrapperClassName,\n );\n\n return (\n <div\n className={rootClass}\n style={style}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <div\n ref={viewportRef}\n className={classNames(\n 'virtual-scrollbar-viewport',\n styles['virtual-scrollbar-viewport'],\n className,\n )}\n onScroll={handleViewportScroll}\n {...rest}\n >\n {children}\n </div>\n\n {showVertical && metrics.vertical.visible && (\n <div\n className={classNames(\n 'virtual-scrollbar-track-vertical',\n styles['virtual-scrollbar-track-vertical'],\n )}\n onMouseDown={(event) => handleTrackClick('vertical', event)}\n >\n <div\n className={classNames('virtual-scrollbar-thumb', styles['virtual-scrollbar-thumb'])}\n style={{\n height: metrics.vertical.size,\n transform: `translateY(${metrics.vertical.offset}px)`,\n }}\n onMouseDown={(event) => startDrag('vertical', event)}\n />\n </div>\n )}\n\n {showHorizontal && metrics.horizontal.visible && (\n <div\n className={classNames(\n 'virtual-scrollbar-track-horizontal',\n styles['virtual-scrollbar-track-horizontal'],\n )}\n onMouseDown={(event) => handleTrackClick('horizontal', event)}\n >\n <div\n className={classNames('virtual-scrollbar-thumb', styles['virtual-scrollbar-thumb'])}\n style={{\n width: metrics.horizontal.size,\n transform: `translateX(${metrics.horizontal.offset}px)`,\n }}\n onMouseDown={(event) => startDrag('horizontal', event)}\n />\n </div>\n )}\n </div>\n );\n },\n);\n\nVirtualScrollbar.displayName = 'VirtualScrollbar';\n\nexport default VirtualScrollbar;\n"],"names":["VirtualScrollbar","forwardRef","children","direction","autoHide","className","wrapperClassName","style","onScroll","preserveScroll","rest","ref","viewportRef","useRef","savedScrollRef","useImperativeHandle","metrics","active","handleScroll","handleMouseEnter","handleMouseLeave","startDrag","handleTrackClick","useVirtualScrollbar","showVertical","showHorizontal","handleViewportScroll","event","t","useLayoutEffect","el","top","left","restore","id","rootClass","classNames","styles","jsxs","jsx"],"mappings":"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"}
|