@progress/kendo-react-orgchart 7.4.0 → 7.5.0-develop.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/OrgChart.js +1 -1
- package/OrgChart.mjs +7 -6
- package/client/OrgChartCard.js +1 -1
- package/client/OrgChartCard.mjs +8 -7
- package/dist/cdn/js/kendo-react-orgchart.js +1 -1
- package/index.d.mts +12 -2
- package/index.d.ts +12 -2
- package/package-metadata.mjs +1 -1
- package/package.json +4 -4
- package/server/ServerGroupedOrgChart.js +1 -1
- package/server/ServerGroupedOrgChart.mjs +110 -107
- package/server/ServerOrgChart.js +1 -1
- package/server/ServerOrgChart.mjs +87 -81
- package/server/ServerOrgChartGroup.js +1 -1
- package/server/ServerOrgChartGroup.mjs +17 -18
- package/server/ServerOrgChartNode.js +1 -1
- package/server/ServerOrgChartNode.mjs +21 -20
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import { classNames as
|
|
11
|
-
import { ServerOrgChartNode as
|
|
12
|
-
import { VERTICAL_LINE as
|
|
13
|
-
const
|
|
9
|
+
import * as N from "react";
|
|
10
|
+
import { classNames as O, kendoThemeMaps as b } from "@progress/kendo-react-common";
|
|
11
|
+
import { ServerOrgChartNode as P } from "./ServerOrgChartNode.mjs";
|
|
12
|
+
import { VERTICAL_LINE as H, HORIZONTAL_GAP as x, NODE_WIDTH as V, NODE_HEIGHT as M } from "../utils/consts.mjs";
|
|
13
|
+
const R = ({
|
|
14
14
|
dataByGroups: d,
|
|
15
15
|
data: r = [],
|
|
16
16
|
cardWidth: l,
|
|
@@ -18,23 +18,23 @@ const _ = ({
|
|
|
18
18
|
idField: e,
|
|
19
19
|
expandField: t,
|
|
20
20
|
hasChildrenField: i,
|
|
21
|
-
groupField:
|
|
21
|
+
groupField: a,
|
|
22
22
|
level: m = 1,
|
|
23
23
|
parentId: h = 0
|
|
24
24
|
}) => {
|
|
25
25
|
r.forEach((c) => {
|
|
26
26
|
const f = c[n];
|
|
27
27
|
if (c[t] && f && f.length) {
|
|
28
|
-
const s = f.some((
|
|
28
|
+
const s = f.some((g) => g[n] && g[n].length || i && g[i]), L = s ? "horizontal" : "vertical", v = s ? null : l;
|
|
29
29
|
d.push({
|
|
30
30
|
ids: [c[e]],
|
|
31
31
|
items: f,
|
|
32
32
|
level: m,
|
|
33
33
|
parentId: h,
|
|
34
34
|
hasChildren: s,
|
|
35
|
-
orientation:
|
|
35
|
+
orientation: L,
|
|
36
36
|
width: v
|
|
37
|
-
}),
|
|
37
|
+
}), R({
|
|
38
38
|
dataByGroups: d,
|
|
39
39
|
data: c[n],
|
|
40
40
|
childrenField: n,
|
|
@@ -42,53 +42,53 @@ const _ = ({
|
|
|
42
42
|
idField: e,
|
|
43
43
|
expandField: t,
|
|
44
44
|
hasChildrenField: i,
|
|
45
|
-
groupField:
|
|
45
|
+
groupField: a,
|
|
46
46
|
level: m + 1,
|
|
47
47
|
parentId: c[e]
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
|
-
},
|
|
52
|
-
const l = r ||
|
|
51
|
+
}, j = (d, r) => {
|
|
52
|
+
const l = r || V, n = d.sort((e, t) => t.level - e.level);
|
|
53
53
|
n.forEach((e) => {
|
|
54
54
|
if (!e.width) {
|
|
55
|
-
const t = n.filter((h) => e.ids.includes(h.parentId)), i = t.length ? Math.max(...t.map((h) => h.width || 0)) : l,
|
|
55
|
+
const t = n.filter((h) => e.ids.includes(h.parentId)), i = t.length ? Math.max(...t.map((h) => h.width || 0)) : l, a = e.orientation === "horizontal" ? e.items.length : 1, m = i * a + x * (a - 1);
|
|
56
56
|
e.width = m;
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
|
-
},
|
|
59
|
+
}, B = (d, r, l) => {
|
|
60
60
|
const n = d.sort((e, t) => e.level - t.level);
|
|
61
61
|
n.forEach((e) => {
|
|
62
62
|
if (e.level === 0)
|
|
63
63
|
return;
|
|
64
|
-
const t = n.find((s) => s.ids.includes(e.parentId)), i = (t == null ? void 0 : t.items.findIndex((s) => e.ids.includes(s[l]))) || 0,
|
|
64
|
+
const t = n.find((s) => s.ids.includes(e.parentId)), i = (t == null ? void 0 : t.items.findIndex((s) => e.ids.includes(s[l]))) || 0, a = (t == null ? void 0 : t.items) || [], m = t.width ? (t.width - (a.length - 1) * x) / a.length : 0;
|
|
65
65
|
if (!e.left) {
|
|
66
66
|
let s = (t == null ? void 0 : t.left) || 0;
|
|
67
|
-
|
|
68
|
-
v < i && (s += m +
|
|
67
|
+
a.forEach((L, v) => {
|
|
68
|
+
v < i && (s += m + x);
|
|
69
69
|
}), e.left = s;
|
|
70
70
|
}
|
|
71
|
-
const h = (t == null ? void 0 : t.width) || 0, c = (t == null ? void 0 : t.items.length) || 1, f = (h - (c - 1) *
|
|
71
|
+
const h = (t == null ? void 0 : t.width) || 0, c = (t == null ? void 0 : t.items.length) || 1, f = (h - (c - 1) * x) / c;
|
|
72
72
|
e.width = f;
|
|
73
|
-
const
|
|
74
|
-
const
|
|
75
|
-
return (v == null ? void 0 : v.orientation) === "vertical" ||
|
|
73
|
+
const k = t == null ? void 0 : t.items.map((s) => {
|
|
74
|
+
const L = s[r] ? s[r].length : 0, v = n.find((u) => u.ids.includes(s[l])), g = (v == null ? void 0 : v.width) || 0;
|
|
75
|
+
return (v == null ? void 0 : v.orientation) === "vertical" || L === 0 || !s.expanded ? 0 : g - (g - (L - 1) * x) / L;
|
|
76
76
|
});
|
|
77
|
-
t && (t.childLineWidths =
|
|
77
|
+
t && (t.childLineWidths = k);
|
|
78
78
|
});
|
|
79
|
-
},
|
|
80
|
-
const n = r ||
|
|
79
|
+
}, G = (d, r, l) => {
|
|
80
|
+
const n = r || M, e = l || H;
|
|
81
81
|
d.forEach((t) => {
|
|
82
|
-
const i = t.level,
|
|
83
|
-
t.top =
|
|
82
|
+
const i = t.level, a = (n + e) * i + H * (i ? i - 1 : 0) - (e - H) * (i ? 1 : 0);
|
|
83
|
+
t.top = a;
|
|
84
84
|
});
|
|
85
|
-
},
|
|
86
|
-
const n = r ||
|
|
85
|
+
}, K = (d, r, l) => {
|
|
86
|
+
const n = r || M, e = l || H;
|
|
87
87
|
return Math.max(...d.map((i) => {
|
|
88
|
-
const
|
|
89
|
-
return
|
|
88
|
+
const a = i.top || 0, m = i.items.length, h = i.orientation === "horizontal" ? n + e + e : m * (n + e);
|
|
89
|
+
return a + h;
|
|
90
90
|
}));
|
|
91
|
-
},
|
|
91
|
+
}, Z = (d) => {
|
|
92
92
|
const r = {
|
|
93
93
|
width: "100%",
|
|
94
94
|
data: [],
|
|
@@ -98,26 +98,30 @@ const _ = ({
|
|
|
98
98
|
avatarField: "avatar",
|
|
99
99
|
titleField: "title",
|
|
100
100
|
subtitleField: "subtitle",
|
|
101
|
-
expandField: "expanded"
|
|
101
|
+
expandField: "expanded",
|
|
102
|
+
avatarType: "image",
|
|
103
|
+
showAvatar: !0
|
|
102
104
|
}, {
|
|
103
105
|
id: l,
|
|
104
106
|
width: n,
|
|
105
107
|
data: e,
|
|
106
108
|
groupField: t,
|
|
107
109
|
cardWidth: i,
|
|
108
|
-
cardHeight:
|
|
110
|
+
cardHeight: a,
|
|
109
111
|
verticalLine: m,
|
|
110
112
|
idField: h,
|
|
111
113
|
childrenField: c,
|
|
112
114
|
hasChildrenField: f,
|
|
113
|
-
expandField:
|
|
115
|
+
expandField: k,
|
|
114
116
|
avatarField: s,
|
|
115
|
-
titleField:
|
|
117
|
+
titleField: L,
|
|
116
118
|
subtitleField: v,
|
|
117
|
-
ariaLabel:
|
|
118
|
-
itemRender:
|
|
119
|
-
height:
|
|
120
|
-
|
|
119
|
+
ariaLabel: g,
|
|
120
|
+
itemRender: u,
|
|
121
|
+
height: _,
|
|
122
|
+
avatarType: z,
|
|
123
|
+
showAvatar: A
|
|
124
|
+
} = { ...r, ...d }, E = [{
|
|
121
125
|
items: e,
|
|
122
126
|
level: 0,
|
|
123
127
|
hasChildren: !0,
|
|
@@ -126,85 +130,87 @@ const _ = ({
|
|
|
126
130
|
parentId: null,
|
|
127
131
|
width: null
|
|
128
132
|
}];
|
|
129
|
-
|
|
130
|
-
dataByGroups:
|
|
133
|
+
R({
|
|
134
|
+
dataByGroups: E,
|
|
131
135
|
data: e,
|
|
132
136
|
cardWidth: i,
|
|
133
|
-
expandField:
|
|
137
|
+
expandField: k,
|
|
134
138
|
hasChildrenField: f,
|
|
135
139
|
childrenField: c,
|
|
136
140
|
idField: h,
|
|
137
141
|
groupField: t
|
|
138
|
-
}),
|
|
139
|
-
const D =
|
|
140
|
-
return /* @__PURE__ */
|
|
141
|
-
const
|
|
142
|
-
return /* @__PURE__ */
|
|
142
|
+
}), j(E, i), B(E, c, h), G(E, a, m);
|
|
143
|
+
const D = K(E, a, m);
|
|
144
|
+
return /* @__PURE__ */ N.createElement("div", { className: "k-orgchart-container", style: { width: n, height: _ || D } }, E.map((o) => {
|
|
145
|
+
const W = o.level, y = o.items, T = o.orientation;
|
|
146
|
+
return /* @__PURE__ */ N.createElement(
|
|
143
147
|
"div",
|
|
144
148
|
{
|
|
145
|
-
role:
|
|
146
|
-
id: l + "-" +
|
|
147
|
-
"aria-label":
|
|
148
|
-
"aria-orientation":
|
|
149
|
-
key:
|
|
150
|
-
className:
|
|
149
|
+
role: W === 0 ? "tree" : "group",
|
|
150
|
+
id: l + "-" + W + "-" + o.ids[0],
|
|
151
|
+
"aria-label": W === 0 ? g : void 0,
|
|
152
|
+
"aria-orientation": W === 0 ? T : void 0,
|
|
153
|
+
key: o.ids[0] + "_" + W,
|
|
154
|
+
className: O(
|
|
151
155
|
"k-orgchart-group",
|
|
152
|
-
|
|
156
|
+
// The following class is not part of the reference rendering. After a team discussion we decided to keep it as it will be useful for the end users.
|
|
157
|
+
`k-orgchart-level-${W}`,
|
|
153
158
|
"k-pos-absolute",
|
|
154
159
|
{
|
|
155
|
-
[`k-${
|
|
156
|
-
[`k-justify-content-${T}`]: T
|
|
160
|
+
[`k-${b.orientationMap[T]}`]: T
|
|
157
161
|
}
|
|
158
162
|
),
|
|
159
163
|
style: {
|
|
160
|
-
width:
|
|
161
|
-
left:
|
|
162
|
-
top:
|
|
164
|
+
width: o.width || "100%",
|
|
165
|
+
left: o.left,
|
|
166
|
+
top: o.top
|
|
163
167
|
}
|
|
164
168
|
},
|
|
165
|
-
y.length > 0 && /* @__PURE__ */
|
|
169
|
+
y.length > 0 && /* @__PURE__ */ N.createElement(
|
|
166
170
|
"div",
|
|
167
171
|
{
|
|
168
172
|
role: "group",
|
|
169
173
|
style: { width: "100%" },
|
|
170
|
-
className:
|
|
174
|
+
className: O(
|
|
171
175
|
"k-orgchart-node-container",
|
|
172
176
|
"k-justify-content-around",
|
|
173
177
|
{
|
|
174
|
-
[`k-${
|
|
178
|
+
[`k-${b.orientationMap[o.orientation]}`]: o.orientation
|
|
175
179
|
}
|
|
176
180
|
)
|
|
177
181
|
},
|
|
178
|
-
y.map((
|
|
179
|
-
const
|
|
180
|
-
return /* @__PURE__ */
|
|
181
|
-
|
|
182
|
+
y.map((w, I) => {
|
|
183
|
+
const p = w[c] && w[c].length || f && w[f], F = p || o.orientation === "vertical" && I !== y.length - 1, S = o.orientation === "vertical" && I !== 0 ? 0 : m || H, $ = o.childLineWidths ? Math.max(...o.childLineWidths) : void 0, C = w[k];
|
|
184
|
+
return /* @__PURE__ */ N.createElement(
|
|
185
|
+
P,
|
|
182
186
|
{
|
|
183
|
-
id: l + "-" + (
|
|
187
|
+
id: l + "-" + (W + 1) + "-" + w[h],
|
|
184
188
|
style: { width: $ },
|
|
185
|
-
itemRender:
|
|
186
|
-
cardHeight:
|
|
189
|
+
itemRender: u,
|
|
190
|
+
cardHeight: a,
|
|
187
191
|
cardWidth: i,
|
|
188
192
|
verticalLine: S,
|
|
189
|
-
key:
|
|
190
|
-
level:
|
|
191
|
-
avatar:
|
|
192
|
-
|
|
193
|
-
|
|
193
|
+
key: I,
|
|
194
|
+
level: W,
|
|
195
|
+
avatar: w[s],
|
|
196
|
+
avatarType: z,
|
|
197
|
+
showAvatar: A,
|
|
198
|
+
title: w[L],
|
|
199
|
+
subtitle: w[v],
|
|
194
200
|
line: F,
|
|
195
|
-
expanded:
|
|
196
|
-
node:
|
|
197
|
-
childLineWidth:
|
|
198
|
-
plus:
|
|
201
|
+
expanded: C,
|
|
202
|
+
node: w,
|
|
203
|
+
childLineWidth: p && C && o.orientation === "horizontal" ? o.childLineWidths[I] : 0,
|
|
204
|
+
plus: p
|
|
199
205
|
},
|
|
200
|
-
|
|
206
|
+
w.text
|
|
201
207
|
);
|
|
202
208
|
})
|
|
203
209
|
)
|
|
204
210
|
);
|
|
205
211
|
}));
|
|
206
212
|
};
|
|
207
|
-
|
|
213
|
+
Z.displayName = "KendoServerOrgChart";
|
|
208
214
|
export {
|
|
209
|
-
|
|
215
|
+
Z as ServerOrgChart
|
|
210
216
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),s=require("@progress/kendo-react-common"),C=require("../client/ExpandButton.js"),f=require("../client/OrgChartGroupContainer.js"),O=require("../utils/consts.js");function A(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const e=A(G),H="k-orgchart-node-group",T="k-orgchart-node-group-title",k="k-orgchart-node-group-subtitle",L=t=>{const n={orientation:"horizontal"},{id:r,title:a,subtitle:u,line:S,plus:d,focus:P,level:o,verticalLine:v,childLineWidth:g,orientation:l,expanded:c,nodes:i,groupTitleHeight:N,groupSubtitleHeight:R,groupTitleRender:_,groupSubtitleRender:y,...b}={...n,...t},m=_,h=y,p={height:N||O.GROUP_TITLE_HEIGHT},E={height:R||O.GROUP_SUBTITLE_HEIGHT};return e.createElement("div",{...b,className:s.classNames(t.className,H,"k-vstack","k-align-items-center")},o!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:v}}),e.createElement(f.OrgChartGroupContainer,{nodes:i,"aria-expanded":!!c,"aria-keyshortcuts":"Enter","aria-level":o+1,"aria-owns":r},m?e.createElement(m,{style:p,className:T,title:a,items:i,level:o,expanded:c}):e.createElement("div",{className:T,style:p},a),h?e.createElement(h,{style:E,className:k,subtitle:u,items:i,level:o,expanded:c}):e.createElement("div",{className:k,style:E},u),e.createElement("div",{role:"group",style:{width:"100%"},className:s.classNames("k-orgchart-node-container",{[`k-${s.kendoThemeMaps.orientationMap[l]||l}`]:l})},t.children)),S&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),d&&e.createElement(C.ExpandButton,{expanded:c,nodes:i}),d&&!!g&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:g,marginTop:-15}}))};exports.ServerOrgChartGroup=L;
|
|
@@ -7,17 +7,17 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as e from "react";
|
|
10
|
-
import { classNames as
|
|
10
|
+
import { classNames as E, kendoThemeMaps as y } from "@progress/kendo-react-common";
|
|
11
11
|
import { ExpandButton as A } from "../client/ExpandButton.mjs";
|
|
12
12
|
import { OrgChartGroupContainer as C } from "../client/OrgChartGroupContainer.mjs";
|
|
13
13
|
import { GROUP_TITLE_HEIGHT as H, GROUP_SUBTITLE_HEIGHT as L } from "../utils/consts.mjs";
|
|
14
|
-
const f = "k-orgchart-node-group",
|
|
15
|
-
const
|
|
14
|
+
const f = "k-orgchart-node-group", u = "k-orgchart-node-group-title", p = "k-orgchart-node-group-subtitle", x = (i) => {
|
|
15
|
+
const T = {
|
|
16
16
|
orientation: "horizontal"
|
|
17
17
|
}, {
|
|
18
|
-
id:
|
|
19
|
-
title:
|
|
20
|
-
subtitle:
|
|
18
|
+
id: k,
|
|
19
|
+
title: l,
|
|
20
|
+
subtitle: n,
|
|
21
21
|
line: N,
|
|
22
22
|
plus: s,
|
|
23
23
|
focus: U,
|
|
@@ -32,13 +32,13 @@ const f = "k-orgchart-node-group", E = "k-orgchart-node-group-title", p = "k-org
|
|
|
32
32
|
groupTitleRender: _,
|
|
33
33
|
groupSubtitleRender: G,
|
|
34
34
|
...O
|
|
35
|
-
} = { ...
|
|
35
|
+
} = { ...T, ...i }, m = _, h = G, d = { height: v || H }, g = { height: S || L };
|
|
36
36
|
return /* @__PURE__ */ e.createElement(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
...O,
|
|
40
|
-
className:
|
|
41
|
-
|
|
40
|
+
className: E(
|
|
41
|
+
i.className,
|
|
42
42
|
f,
|
|
43
43
|
"k-vstack",
|
|
44
44
|
"k-align-items-center"
|
|
@@ -58,44 +58,43 @@ const f = "k-orgchart-node-group", E = "k-orgchart-node-group-title", p = "k-org
|
|
|
58
58
|
"aria-expanded": !!r,
|
|
59
59
|
"aria-keyshortcuts": "Enter",
|
|
60
60
|
"aria-level": t + 1,
|
|
61
|
-
"aria-owns":
|
|
61
|
+
"aria-owns": k
|
|
62
62
|
},
|
|
63
63
|
m ? /* @__PURE__ */ e.createElement(
|
|
64
64
|
m,
|
|
65
65
|
{
|
|
66
66
|
style: d,
|
|
67
|
-
className:
|
|
68
|
-
title:
|
|
67
|
+
className: u,
|
|
68
|
+
title: l,
|
|
69
69
|
items: a,
|
|
70
70
|
level: t,
|
|
71
71
|
expanded: r
|
|
72
72
|
}
|
|
73
|
-
) : /* @__PURE__ */ e.createElement("div", { className:
|
|
73
|
+
) : /* @__PURE__ */ e.createElement("div", { className: u, style: d }, l),
|
|
74
74
|
h ? /* @__PURE__ */ e.createElement(
|
|
75
75
|
h,
|
|
76
76
|
{
|
|
77
77
|
style: g,
|
|
78
78
|
className: p,
|
|
79
|
-
subtitle:
|
|
79
|
+
subtitle: n,
|
|
80
80
|
items: a,
|
|
81
81
|
level: t,
|
|
82
82
|
expanded: r
|
|
83
83
|
}
|
|
84
|
-
) : /* @__PURE__ */ e.createElement("div", { className: p, style: g },
|
|
84
|
+
) : /* @__PURE__ */ e.createElement("div", { className: p, style: g }, n),
|
|
85
85
|
/* @__PURE__ */ e.createElement(
|
|
86
86
|
"div",
|
|
87
87
|
{
|
|
88
88
|
role: "group",
|
|
89
89
|
style: { width: "100%" },
|
|
90
|
-
className:
|
|
90
|
+
className: E(
|
|
91
91
|
"k-orgchart-node-container",
|
|
92
|
-
"k-justify-content-around",
|
|
93
92
|
{
|
|
94
93
|
[`k-${y.orientationMap[o] || o}`]: o
|
|
95
94
|
}
|
|
96
95
|
)
|
|
97
96
|
},
|
|
98
|
-
|
|
97
|
+
i.children
|
|
99
98
|
)
|
|
100
99
|
),
|
|
101
100
|
N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),b=require("@progress/kendo-react-common"),i=require("@progress/kendo-react-layout"),R=require("../client/ExpandButton.js"),S=require("../client/OrgChartCard.js"),T=require("../client/OrgChartCardBody.js");function q(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(r,a,c.get?c:{enumerable:!0,get:()=>t[a]})}}return r.default=t,Object.freeze(r)}const e=q(f),w="k-orgchart-node",x=t=>{const r={avatarType:"image"},{id:a,title:c,subtitle:o,level:n,childLineWidth:d,cardWidth:p,cardHeight:v,verticalLine:k,color:E,line:C,plus:m,expanded:l,node:s,avatar:g,avatarType:u,itemRender:N,showAvatar:y,...O}={...r,...t},h=N;return e.createElement("div",{...O,className:b.classNames(t.className,w,"k-vstack","k-align-items-center")},n!==0&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top",style:{height:k}}),e.createElement(S.OrgChartCard,{node:s,style:{width:p,height:v},"aria-level":n+1,"aria-expanded":!!l,"aria-owns":a},e.createElement(T.OrgChartCardBody,{level:n},h?e.createElement(h,{item:s,title:c,subtitle:o,level:n,expanded:l,color:E}):e.createElement(e.Fragment,null,y&&e.createElement(i.Avatar,{type:u,themeColor:"secondary"},u==="image"?e.createElement("img",{src:g,alt:"KendoReact Avatar Customer"}):g),e.createElement("div",{className:"k-card-title-wrap k-vstack"},e.createElement(i.CardTitle,{className:"k-text-ellipsis"},c),e.createElement("span",{className:"k-spacer"}),e.createElement(i.CardSubtitle,{className:"k-text-ellipsis"},o)),e.createElement("span",{className:"k-spacer"})))),C&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-v"}),m&&e.createElement(R.ExpandButton,{expanded:l,node:s}),m&&!!d&&e.createElement("div",{className:"k-orgchart-line k-orgchart-line-h",style:{width:d,marginTop:-15}}))};exports.ServerOrgChartNode=x;
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as e from "react";
|
|
10
|
-
import { classNames as
|
|
11
|
-
import { Avatar as
|
|
12
|
-
import { ExpandButton as
|
|
10
|
+
import { classNames as f } from "@progress/kendo-react-common";
|
|
11
|
+
import { Avatar as x, CardTitle as A, CardSubtitle as R } from "@progress/kendo-react-layout";
|
|
12
|
+
import { ExpandButton as w } from "../client/ExpandButton.mjs";
|
|
13
13
|
import { OrgChartCard as O } from "../client/OrgChartCard.mjs";
|
|
14
14
|
import { OrgChartCardBody as T } from "../client/OrgChartCardBody.mjs";
|
|
15
|
-
const
|
|
15
|
+
const S = "k-orgchart-node", D = (l) => {
|
|
16
16
|
const h = {
|
|
17
17
|
avatarType: "image"
|
|
18
18
|
}, {
|
|
@@ -20,27 +20,28 @@ const w = "k-orgchart-node", I = (l) => {
|
|
|
20
20
|
title: c,
|
|
21
21
|
subtitle: i,
|
|
22
22
|
level: t,
|
|
23
|
-
childLineWidth:
|
|
23
|
+
childLineWidth: n,
|
|
24
24
|
cardWidth: g,
|
|
25
25
|
cardHeight: v,
|
|
26
26
|
verticalLine: E,
|
|
27
27
|
color: k,
|
|
28
28
|
line: N,
|
|
29
|
-
plus:
|
|
29
|
+
plus: s,
|
|
30
30
|
expanded: a,
|
|
31
31
|
node: r,
|
|
32
|
-
avatar:
|
|
32
|
+
avatar: m,
|
|
33
33
|
avatarType: o,
|
|
34
34
|
itemRender: C,
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
showAvatar: u,
|
|
36
|
+
...y
|
|
37
|
+
} = { ...h, ...l }, d = C;
|
|
37
38
|
return /* @__PURE__ */ e.createElement(
|
|
38
39
|
"div",
|
|
39
40
|
{
|
|
40
|
-
...
|
|
41
|
-
className:
|
|
41
|
+
...y,
|
|
42
|
+
className: f(
|
|
42
43
|
l.className,
|
|
43
|
-
|
|
44
|
+
S,
|
|
44
45
|
"k-vstack",
|
|
45
46
|
"k-align-items-center"
|
|
46
47
|
)
|
|
@@ -71,25 +72,25 @@ const w = "k-orgchart-node", I = (l) => {
|
|
|
71
72
|
expanded: a,
|
|
72
73
|
color: k
|
|
73
74
|
}
|
|
74
|
-
) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
75
|
+
) : /* @__PURE__ */ e.createElement(e.Fragment, null, u && /* @__PURE__ */ e.createElement(x, { type: o, themeColor: "secondary" }, o === "image" ? /* @__PURE__ */ e.createElement(
|
|
75
76
|
"img",
|
|
76
77
|
{
|
|
77
|
-
src:
|
|
78
|
-
alt: "KendoReact Avatar Customer
|
|
78
|
+
src: m,
|
|
79
|
+
alt: "KendoReact Avatar Customer"
|
|
79
80
|
}
|
|
80
|
-
) :
|
|
81
|
+
) : m), /* @__PURE__ */ e.createElement("div", { className: "k-card-title-wrap k-vstack" }, /* @__PURE__ */ e.createElement(A, { className: "k-text-ellipsis" }, c), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement(R, { className: "k-text-ellipsis" }, i)), /* @__PURE__ */ e.createElement("span", { className: "k-spacer" })))
|
|
81
82
|
),
|
|
82
83
|
N && /* @__PURE__ */ e.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
s && /* @__PURE__ */ e.createElement(w, { expanded: a, node: r }),
|
|
85
|
+
s && !!n && /* @__PURE__ */ e.createElement(
|
|
85
86
|
"div",
|
|
86
87
|
{
|
|
87
88
|
className: "k-orgchart-line k-orgchart-line-h",
|
|
88
|
-
style: { width:
|
|
89
|
+
style: { width: n, marginTop: -15 }
|
|
89
90
|
}
|
|
90
91
|
)
|
|
91
92
|
);
|
|
92
93
|
};
|
|
93
94
|
export {
|
|
94
|
-
|
|
95
|
+
D as ServerOrgChartNode
|
|
95
96
|
};
|