@progress/kendo-react-orgchart 6.1.1 → 7.0.0-develop.1
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/LICENSE.md +1 -1
- package/OrgChart.d.ts +10 -0
- package/{dist/npm/OrgChartOperationDescriptors.d.ts → OrgChartOperationDescriptors.d.ts} +4 -0
- package/{dist/es/client → client}/ClientOrgChart.d.ts +7 -3
- package/client/ExpandButton.d.ts +17 -0
- package/{dist/es/client → client}/OrgChartCard.d.ts +4 -0
- package/client/OrgChartCardBody.d.ts +16 -0
- package/{dist/npm/client → client}/OrgChartGroupContainer.d.ts +4 -0
- package/dist/cdn/js/kendo-react-orgchart.js +18 -1
- package/index.d.ts +12 -0
- package/index.js +18 -0
- package/index.mjs +1148 -0
- package/interfaces/ChildGroup.d.ts +20 -0
- package/{dist/npm/interfaces → interfaces}/OrgChartActionEvent.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/OrgChartExpandChangeEvent.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/SeverOrgChartProps.d.ts +4 -1
- package/package-metadata.d.ts +9 -0
- package/package.json +29 -38
- package/{dist/es/processOrgChartItems.d.ts → processOrgChartItems.d.ts} +4 -0
- package/server/ServerGroupedOrgChart.d.ts +12 -0
- package/server/ServerOrgChart.d.ts +12 -0
- package/{dist/npm/server → server}/ServerOrgChartGroup.d.ts +4 -0
- package/{dist/npm/server → server}/ServerOrgChartNode.d.ts +5 -1
- package/theming/theme-service.d.ts +9 -0
- package/{dist/es/utils → utils}/consts.d.ts +4 -0
- package/about.md +0 -3
- package/dist/es/OrgChart.d.ts +0 -6
- package/dist/es/OrgChart.js +0 -67
- package/dist/es/OrgChartOperationDescriptors.d.ts +0 -76
- package/dist/es/OrgChartOperationDescriptors.js +0 -2
- package/dist/es/client/ClientOrgChart.js +0 -287
- package/dist/es/client/ExpandButton.d.ts +0 -13
- package/dist/es/client/ExpandButton.js +0 -23
- package/dist/es/client/OrgChartCard.js +0 -68
- package/dist/es/client/OrgChartCardBody.d.ts +0 -12
- package/dist/es/client/OrgChartCardBody.js +0 -13
- package/dist/es/client/OrgChartGroupContainer.d.ts +0 -19
- package/dist/es/client/OrgChartGroupContainer.js +0 -71
- package/dist/es/interfaces/ChildGroup.d.ts +0 -16
- package/dist/es/interfaces/ChildGroup.js +0 -1
- package/dist/es/interfaces/OrgChartActionEvent.d.ts +0 -22
- package/dist/es/interfaces/OrgChartActionEvent.js +0 -1
- package/dist/es/interfaces/OrgChartExpandChangeEvent.d.ts +0 -22
- package/dist/es/interfaces/OrgChartExpandChangeEvent.js +0 -1
- package/dist/es/interfaces/SeverOrgChartProps.d.ts +0 -106
- package/dist/es/interfaces/SeverOrgChartProps.js +0 -1
- package/dist/es/main.d.ts +0 -6
- package/dist/es/main.js +0 -3
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/processOrgChartItems.js +0 -163
- package/dist/es/server/ServerGroupedOrgChart.d.ts +0 -9
- package/dist/es/server/ServerGroupedOrgChart.js +0 -235
- package/dist/es/server/ServerOrgChart.d.ts +0 -9
- package/dist/es/server/ServerOrgChart.js +0 -192
- package/dist/es/server/ServerOrgChartGroup.d.ts +0 -96
- package/dist/es/server/ServerOrgChartGroup.js +0 -59
- package/dist/es/server/ServerOrgChartNode.d.ts +0 -75
- package/dist/es/server/ServerOrgChartNode.js +0 -57
- package/dist/es/theming/theme-service.d.ts +0 -5
- package/dist/es/theming/theme-service.js +0 -62
- package/dist/es/utils/consts.js +0 -72
- package/dist/npm/OrgChart.d.ts +0 -6
- package/dist/npm/OrgChart.js +0 -71
- package/dist/npm/OrgChartOperationDescriptors.js +0 -3
- package/dist/npm/client/ClientOrgChart.d.ts +0 -94
- package/dist/npm/client/ClientOrgChart.js +0 -291
- package/dist/npm/client/ExpandButton.d.ts +0 -13
- package/dist/npm/client/ExpandButton.js +0 -27
- package/dist/npm/client/OrgChartCard.d.ts +0 -19
- package/dist/npm/client/OrgChartCard.js +0 -72
- package/dist/npm/client/OrgChartCardBody.d.ts +0 -12
- package/dist/npm/client/OrgChartCardBody.js +0 -17
- package/dist/npm/client/OrgChartGroupContainer.js +0 -75
- package/dist/npm/interfaces/ChildGroup.d.ts +0 -16
- package/dist/npm/interfaces/ChildGroup.js +0 -2
- package/dist/npm/interfaces/OrgChartActionEvent.js +0 -2
- package/dist/npm/interfaces/OrgChartExpandChangeEvent.js +0 -2
- package/dist/npm/interfaces/SeverOrgChartProps.js +0 -2
- package/dist/npm/main.d.ts +0 -6
- package/dist/npm/main.js +0 -21
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/processOrgChartItems.d.ts +0 -51
- package/dist/npm/processOrgChartItems.js +0 -167
- package/dist/npm/server/ServerGroupedOrgChart.d.ts +0 -9
- package/dist/npm/server/ServerGroupedOrgChart.js +0 -239
- package/dist/npm/server/ServerOrgChart.d.ts +0 -9
- package/dist/npm/server/ServerOrgChart.js +0 -196
- package/dist/npm/server/ServerOrgChartGroup.js +0 -63
- package/dist/npm/server/ServerOrgChartNode.js +0 -61
- package/dist/npm/theming/theme-service.d.ts +0 -5
- package/dist/npm/theming/theme-service.js +0 -65
- package/dist/npm/utils/consts.d.ts +0 -72
- package/dist/npm/utils/consts.js +0 -75
- package/dist/systemjs/kendo-react-orgchart.js +0 -1
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import * as React from 'react';
|
|
13
|
-
import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
|
|
14
|
-
import { ServerOrgChartNode } from './ServerOrgChartNode';
|
|
15
|
-
import { HORIZONTAL_GAP, NODE_HEIGHT, NODE_WIDTH, VERTICAL_LINE } from '../utils/consts';
|
|
16
|
-
var setDataByGroups = function (_a) {
|
|
17
|
-
var dataByGroups = _a.dataByGroups, _b = _a.data, data = _b === void 0 ? [] : _b, cardWidth = _a.cardWidth, childrenField = _a.childrenField, idField = _a.idField, expandField = _a.expandField, hasChildrenField = _a.hasChildrenField, groupField = _a.groupField, _c = _a.level, level = _c === void 0 ? 1 : _c, _d = _a.parentId, parentId = _d === void 0 ? 0 : _d;
|
|
18
|
-
data.forEach(function (element) {
|
|
19
|
-
var items = element[childrenField];
|
|
20
|
-
var expanded = element[expandField];
|
|
21
|
-
if (expanded && items && items.length) {
|
|
22
|
-
var hasChildren = items.some(function (it) { return it[childrenField] && it[childrenField].length
|
|
23
|
-
|| (hasChildrenField && it[hasChildrenField]); });
|
|
24
|
-
var orientation_1 = hasChildren ? 'horizontal' : 'vertical';
|
|
25
|
-
var width = hasChildren ? null : cardWidth;
|
|
26
|
-
dataByGroups.push({
|
|
27
|
-
ids: [element[idField]],
|
|
28
|
-
items: items,
|
|
29
|
-
level: level,
|
|
30
|
-
parentId: parentId,
|
|
31
|
-
hasChildren: hasChildren,
|
|
32
|
-
orientation: orientation_1,
|
|
33
|
-
width: width
|
|
34
|
-
});
|
|
35
|
-
setDataByGroups({
|
|
36
|
-
dataByGroups: dataByGroups,
|
|
37
|
-
data: element[childrenField],
|
|
38
|
-
childrenField: childrenField,
|
|
39
|
-
cardWidth: cardWidth,
|
|
40
|
-
idField: idField,
|
|
41
|
-
expandField: expandField,
|
|
42
|
-
hasChildrenField: hasChildrenField,
|
|
43
|
-
groupField: groupField,
|
|
44
|
-
level: level + 1,
|
|
45
|
-
parentId: element[idField]
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
var setGroupsWidths = function (dataByGroups, cardWidth) {
|
|
51
|
-
var nodeWidth = cardWidth || NODE_WIDTH;
|
|
52
|
-
var groupsFromLeavesToRoot = dataByGroups.sort(function (a, b) { return b.level - a.level; });
|
|
53
|
-
groupsFromLeavesToRoot.forEach(function (group) {
|
|
54
|
-
if (!group.width) {
|
|
55
|
-
var childGroups = groupsFromLeavesToRoot.filter(function (gr) { return group.ids.includes(gr.parentId); });
|
|
56
|
-
var maxChildGroupWidth = childGroups.length
|
|
57
|
-
? Math.max.apply(Math, childGroups.map(function (chg) { return chg.width || 0; })) : nodeWidth;
|
|
58
|
-
var subItemsLength = group.orientation === 'horizontal' ? group.items.length : 1;
|
|
59
|
-
var newGroupWidth = maxChildGroupWidth * subItemsLength + HORIZONTAL_GAP * (subItemsLength - 1);
|
|
60
|
-
group.width = newGroupWidth;
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
var setGroupsLeft = function (dataByGroups, childrenField, idField) {
|
|
65
|
-
var groupsFromRootToLeaves = dataByGroups.sort(function (a, b) { return a.level - b.level; });
|
|
66
|
-
groupsFromRootToLeaves.forEach(function (group) {
|
|
67
|
-
if (group.level === 0) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
var parentGroup = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(group.parentId); });
|
|
71
|
-
var groupIndex = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.findIndex(function (g) { return group.ids.includes(g[idField]); })) || 0;
|
|
72
|
-
var subLinks = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items) || [];
|
|
73
|
-
var subLinkWidth = parentGroup.width
|
|
74
|
-
? (parentGroup.width - ((subLinks.length - 1) * HORIZONTAL_GAP)) / subLinks.length
|
|
75
|
-
: 0;
|
|
76
|
-
if (!group.left) {
|
|
77
|
-
var newLeft_1 = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.left) || 0;
|
|
78
|
-
subLinks.forEach(function (_subG, index) {
|
|
79
|
-
if (index < groupIndex) {
|
|
80
|
-
newLeft_1 += subLinkWidth + HORIZONTAL_GAP;
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
group.left = newLeft_1;
|
|
84
|
-
}
|
|
85
|
-
var parentWidth = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.width) || 0;
|
|
86
|
-
var parentGroupItems = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.length) || 1;
|
|
87
|
-
var newWidth = ((parentWidth) - ((parentGroupItems - 1) * HORIZONTAL_GAP)) / parentGroupItems;
|
|
88
|
-
group.width = newWidth;
|
|
89
|
-
var childLineWidths = parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.items.map(function (subitem) {
|
|
90
|
-
var groupNodesCount = subitem[childrenField] ? subitem[childrenField].length : 0;
|
|
91
|
-
var subItem = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(subitem[idField]); });
|
|
92
|
-
var subItemWidth = (subItem === null || subItem === void 0 ? void 0 : subItem.width) || 0;
|
|
93
|
-
if ((subItem === null || subItem === void 0 ? void 0 : subItem.orientation) === 'vertical' || groupNodesCount === 0 || !subitem.expanded) {
|
|
94
|
-
return 0;
|
|
95
|
-
}
|
|
96
|
-
return subItemWidth - ((subItemWidth - (groupNodesCount - 1) * HORIZONTAL_GAP)) / (groupNodesCount);
|
|
97
|
-
});
|
|
98
|
-
if (parentGroup) {
|
|
99
|
-
parentGroup.childLineWidths = childLineWidths;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
var setGroupsTop = function (dataByGroups, cardHeight, verticalLine) {
|
|
104
|
-
var nodeHeight = cardHeight || NODE_HEIGHT;
|
|
105
|
-
var vLineHeight = verticalLine || VERTICAL_LINE;
|
|
106
|
-
dataByGroups.forEach(function (group) {
|
|
107
|
-
var level = group.level;
|
|
108
|
-
var newTop = ((nodeHeight + vLineHeight) * level) + (VERTICAL_LINE * (level ? level - 1 : 0)) -
|
|
109
|
-
((vLineHeight - VERTICAL_LINE) * (level ? 1 : 0));
|
|
110
|
-
group.top = newTop;
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
|
-
var getHeight = function (dataByGroups, cardHeight, verticalLine) {
|
|
114
|
-
var nodeHeight = cardHeight || NODE_HEIGHT;
|
|
115
|
-
var vLineHeight = verticalLine || VERTICAL_LINE;
|
|
116
|
-
var newHeight = Math.max.apply(Math, dataByGroups.map(function (group) {
|
|
117
|
-
var top = group.top || 0;
|
|
118
|
-
var itemsLength = group.items.length;
|
|
119
|
-
var height = group.orientation === 'horizontal'
|
|
120
|
-
? nodeHeight + vLineHeight + vLineHeight
|
|
121
|
-
: itemsLength * (nodeHeight + vLineHeight);
|
|
122
|
-
return top + height;
|
|
123
|
-
}));
|
|
124
|
-
return newHeight;
|
|
125
|
-
};
|
|
126
|
-
/**
|
|
127
|
-
* @hidden
|
|
128
|
-
*/
|
|
129
|
-
export var ServerOrgChart = function (props) {
|
|
130
|
-
var defaultProps = {
|
|
131
|
-
width: '100%',
|
|
132
|
-
data: [],
|
|
133
|
-
ariaLabel: 'Org Chart',
|
|
134
|
-
idField: 'id',
|
|
135
|
-
childrenField: 'items',
|
|
136
|
-
avatarField: 'avatar',
|
|
137
|
-
titleField: 'title',
|
|
138
|
-
subtitleField: 'subtitle',
|
|
139
|
-
expandField: 'expanded'
|
|
140
|
-
};
|
|
141
|
-
var _a = __assign(__assign({}, defaultProps), props), id = _a.id, width = _a.width, data = _a.data, groupField = _a.groupField, cardWidth = _a.cardWidth, cardHeight = _a.cardHeight, verticalLine = _a.verticalLine, idField = _a.idField, childrenField = _a.childrenField, hasChildrenField = _a.hasChildrenField, expandField = _a.expandField, avatarField = _a.avatarField, titleField = _a.titleField, subtitleField = _a.subtitleField, ariaLabel = _a.ariaLabel, itemRender = _a.itemRender, height = _a.height;
|
|
142
|
-
var dataByGroups = [{
|
|
143
|
-
items: data,
|
|
144
|
-
level: 0,
|
|
145
|
-
hasChildren: true,
|
|
146
|
-
orientation: 'horizontal',
|
|
147
|
-
ids: [0],
|
|
148
|
-
parentId: null,
|
|
149
|
-
width: null
|
|
150
|
-
}];
|
|
151
|
-
setDataByGroups({
|
|
152
|
-
dataByGroups: dataByGroups,
|
|
153
|
-
data: data,
|
|
154
|
-
cardWidth: cardWidth,
|
|
155
|
-
expandField: expandField,
|
|
156
|
-
hasChildrenField: hasChildrenField,
|
|
157
|
-
childrenField: childrenField,
|
|
158
|
-
idField: idField,
|
|
159
|
-
groupField: groupField
|
|
160
|
-
});
|
|
161
|
-
setGroupsWidths(dataByGroups, cardWidth);
|
|
162
|
-
setGroupsLeft(dataByGroups, childrenField, idField);
|
|
163
|
-
setGroupsTop(dataByGroups, cardHeight, verticalLine);
|
|
164
|
-
var calculatedHeight = getHeight(dataByGroups, cardHeight, verticalLine);
|
|
165
|
-
return (React.createElement("div", { className: "k-orgchart-container", style: { width: width, height: height || calculatedHeight } }, dataByGroups.map(function (group) {
|
|
166
|
-
var _a, _b;
|
|
167
|
-
var level = group.level;
|
|
168
|
-
var groupInnerItems = group.items;
|
|
169
|
-
var justifyContent = level === 0 ? 'center' : 'around';
|
|
170
|
-
var groupOrientation = group.orientation;
|
|
171
|
-
return (React.createElement("div", { role: level === 0 ? 'tree' : 'group', id: id + '-' + level + '-' + group.ids[0], "aria-label": level === 0 ? ariaLabel : undefined, "aria-orientation": level === 0 ? groupOrientation : undefined, key: group.ids[0] + '_' + level, className: classNames('k-orgchart-group', "k-orgchart-level-".concat(level), 'k-pos-absolute', (_a = {},
|
|
172
|
-
_a["k-".concat(kendoThemeMaps.orientationMap[groupOrientation])] = groupOrientation,
|
|
173
|
-
_a["k-justify-content-".concat(justifyContent)] = justifyContent,
|
|
174
|
-
_a)), style: {
|
|
175
|
-
width: group.width || '100%',
|
|
176
|
-
left: group.left,
|
|
177
|
-
top: group.top
|
|
178
|
-
} }, groupInnerItems.length > 0 &&
|
|
179
|
-
React.createElement("div", { role: "group", style: { width: '100%' }, className: classNames('k-orgchart-node-container', 'k-justify-content-around', (_b = {},
|
|
180
|
-
_b["k-".concat(kendoThemeMaps.orientationMap[group.orientation])] = group.orientation,
|
|
181
|
-
_b)) }, groupInnerItems.map(function (node, index) {
|
|
182
|
-
var hasChildren = node[childrenField] && node[childrenField].length
|
|
183
|
-
|| (hasChildrenField && node[hasChildrenField]);
|
|
184
|
-
var hasDownLine = hasChildren || (group.orientation === 'vertical' && index !== groupInnerItems.length - 1);
|
|
185
|
-
var hasVertLine = group.orientation === 'vertical' && index !== 0 ? 0 : verticalLine || VERTICAL_LINE;
|
|
186
|
-
var maxSubGroupWidth = group.childLineWidths ? Math.max.apply(Math, group.childLineWidths) : undefined;
|
|
187
|
-
var expandedNode = node[expandField];
|
|
188
|
-
return (React.createElement(ServerOrgChartNode, { id: id + '-' + (level + 1) + '-' + node[idField], style: { width: maxSubGroupWidth }, itemRender: itemRender, cardHeight: cardHeight, cardWidth: cardWidth, verticalLine: hasVertLine, key: index, level: level, avatar: node[avatarField], title: node[titleField], subtitle: node[subtitleField], line: hasDownLine, expanded: expandedNode, node: node, childLineWidth: (hasChildren && expandedNode && group.orientation === 'horizontal') ? group.childLineWidths[index] : 0, plus: hasChildren }, node.text));
|
|
189
|
-
}))));
|
|
190
|
-
})));
|
|
191
|
-
};
|
|
192
|
-
ServerOrgChart.displayName = 'KendoServerOrgChart';
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* @hidden
|
|
4
|
-
*/
|
|
5
|
-
export interface OrgChartGroupTitleProps {
|
|
6
|
-
/**
|
|
7
|
-
* The styles that are applied to the OrgChart group title.
|
|
8
|
-
*/
|
|
9
|
-
style?: React.CSSProperties;
|
|
10
|
-
/**
|
|
11
|
-
* The default class that is applied to the OrgChart group title.
|
|
12
|
-
*/
|
|
13
|
-
className?: string;
|
|
14
|
-
/**
|
|
15
|
-
* The default title that are passed to the OrgChart group.
|
|
16
|
-
*/
|
|
17
|
-
title?: string;
|
|
18
|
-
/**
|
|
19
|
-
* The collection of inner items of the group.
|
|
20
|
-
*/
|
|
21
|
-
items?: any[];
|
|
22
|
-
/**
|
|
23
|
-
* The level of the group.
|
|
24
|
-
*/
|
|
25
|
-
level?: number;
|
|
26
|
-
/**
|
|
27
|
-
* The expanded state of the group.
|
|
28
|
-
*/
|
|
29
|
-
expanded?: boolean;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
export interface OrgChartGroupSubtitleProps {
|
|
35
|
-
/**
|
|
36
|
-
* The styles that are applied to the OrgChart.
|
|
37
|
-
*/
|
|
38
|
-
style?: React.CSSProperties;
|
|
39
|
-
/**
|
|
40
|
-
* The default class that is applied to the OrgChart group title.
|
|
41
|
-
*/
|
|
42
|
-
className?: string;
|
|
43
|
-
/**
|
|
44
|
-
* The default subtitle that are passed to the OrgChart group.
|
|
45
|
-
*/
|
|
46
|
-
subtitle?: string;
|
|
47
|
-
/**
|
|
48
|
-
* The collection of inner items of the group.
|
|
49
|
-
*/
|
|
50
|
-
items?: any[];
|
|
51
|
-
/**
|
|
52
|
-
* The level of the group.
|
|
53
|
-
*/
|
|
54
|
-
level?: number;
|
|
55
|
-
/**
|
|
56
|
-
* The expanded state of the group.
|
|
57
|
-
*/
|
|
58
|
-
expanded?: boolean;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* @hidden
|
|
62
|
-
*/
|
|
63
|
-
export interface ServerOrgChartGroupProps {
|
|
64
|
-
/**
|
|
65
|
-
* @hidden
|
|
66
|
-
*/
|
|
67
|
-
children?: React.ReactNode;
|
|
68
|
-
/**
|
|
69
|
-
* Sets additional classes to the OrgChart.
|
|
70
|
-
*/
|
|
71
|
-
className?: string;
|
|
72
|
-
id?: string;
|
|
73
|
-
/**
|
|
74
|
-
* The styles that are applied to the OrgChart.
|
|
75
|
-
*/
|
|
76
|
-
style?: React.CSSProperties;
|
|
77
|
-
title?: string;
|
|
78
|
-
subtitle?: string;
|
|
79
|
-
line?: boolean;
|
|
80
|
-
plus?: boolean;
|
|
81
|
-
focus?: boolean;
|
|
82
|
-
expanded?: boolean;
|
|
83
|
-
nodes?: any[];
|
|
84
|
-
level: number;
|
|
85
|
-
groupTitleHeight?: number;
|
|
86
|
-
groupSubtitleHeight?: number;
|
|
87
|
-
childLineWidth?: number;
|
|
88
|
-
verticalLine?: number;
|
|
89
|
-
orientation?: 'horizontal' | 'vertical';
|
|
90
|
-
groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
|
|
91
|
-
groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* @hidden
|
|
95
|
-
*/
|
|
96
|
-
export declare const ServerOrgChartGroup: React.FunctionComponent<ServerOrgChartGroupProps>;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import * as React from 'react';
|
|
24
|
-
import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
|
|
25
|
-
import { ExpandButton } from '../client/ExpandButton';
|
|
26
|
-
import { OrgChartGroupContainer } from '../client/OrgChartGroupContainer';
|
|
27
|
-
import { GROUP_SUBTITLE_HEIGHT, GROUP_TITLE_HEIGHT } from '../utils/consts';
|
|
28
|
-
var ORGCHARTGROUP_CLASSNAME = 'k-orgchart-node-group';
|
|
29
|
-
var ORGCHART_NODE_GROUP_TITLE_CLASSNAME = 'k-orgchart-node-group-title';
|
|
30
|
-
var ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME = 'k-orgchart-node-group-subtitle';
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
export var ServerOrgChartGroup = function (props) {
|
|
35
|
-
var _a;
|
|
36
|
-
var defaultProps = {
|
|
37
|
-
orientation: 'horizontal'
|
|
38
|
-
};
|
|
39
|
-
var _b = __assign(__assign({}, defaultProps), props), id = _b.id, title = _b.title, subtitle = _b.subtitle, line = _b.line, plus = _b.plus, focus = _b.focus, level = _b.level, verticalLine = _b.verticalLine, childLineWidth = _b.childLineWidth, orientation = _b.orientation, expanded = _b.expanded, nodes = _b.nodes, groupTitleHeight = _b.groupTitleHeight, groupSubtitleHeight = _b.groupSubtitleHeight, groupTitleRender = _b.groupTitleRender, groupSubtitleRender = _b.groupSubtitleRender, other = __rest(_b, ["id", "title", "subtitle", "line", "plus", "focus", "level", "verticalLine", "childLineWidth", "orientation", "expanded", "nodes", "groupTitleHeight", "groupSubtitleHeight", "groupTitleRender", "groupSubtitleRender"]);
|
|
40
|
-
var TitleRender = groupTitleRender;
|
|
41
|
-
var SubtitleRender = groupSubtitleRender;
|
|
42
|
-
var titleStyle = { height: groupTitleHeight || GROUP_TITLE_HEIGHT };
|
|
43
|
-
var subtitleStyle = { height: groupSubtitleHeight || GROUP_SUBTITLE_HEIGHT };
|
|
44
|
-
return (React.createElement("div", __assign({}, other, { className: classNames(props.className, ORGCHARTGROUP_CLASSNAME, 'k-vstack', 'k-align-items-center') }),
|
|
45
|
-
level !== 0 && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top", style: { height: verticalLine } }),
|
|
46
|
-
React.createElement(OrgChartGroupContainer, { nodes: nodes, "aria-expanded": !!expanded, "aria-keyshortcuts": "Enter", "aria-level": level + 1, "aria-owns": id },
|
|
47
|
-
TitleRender
|
|
48
|
-
? React.createElement(TitleRender, { style: titleStyle, className: ORGCHART_NODE_GROUP_TITLE_CLASSNAME, title: title, items: nodes, level: level, expanded: expanded })
|
|
49
|
-
: React.createElement("div", { className: ORGCHART_NODE_GROUP_TITLE_CLASSNAME, style: titleStyle }, title),
|
|
50
|
-
SubtitleRender
|
|
51
|
-
? React.createElement(SubtitleRender, { style: subtitleStyle, className: ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME, subtitle: subtitle, items: nodes, level: level, expanded: expanded })
|
|
52
|
-
: React.createElement("div", { className: ORGCHART_NODE_GROUP_SUBTITLE_CLASSNAME, style: subtitleStyle }, subtitle),
|
|
53
|
-
React.createElement("div", { role: "group", style: { width: '100%' }, className: classNames('k-orgchart-node-container', 'k-justify-content-around', (_a = {},
|
|
54
|
-
_a["k-".concat(kendoThemeMaps.orientationMap[orientation] || orientation)] = orientation,
|
|
55
|
-
_a)) }, props.children)),
|
|
56
|
-
line && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
57
|
-
plus && React.createElement(ExpandButton, { expanded: expanded, nodes: nodes }),
|
|
58
|
-
plus && !!childLineWidth && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: childLineWidth, marginTop: -15 } })));
|
|
59
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OrgChartActionEvent, OrgChartExpandChangeEvent } from '../main';
|
|
3
|
-
/**
|
|
4
|
-
* The props that are passed to the itemRender component.
|
|
5
|
-
*/
|
|
6
|
-
export interface OrgChartItemRenderProps {
|
|
7
|
-
/**
|
|
8
|
-
* The item passed to the ItemRender.
|
|
9
|
-
*/
|
|
10
|
-
item?: any;
|
|
11
|
-
/**
|
|
12
|
-
* The title of the item.
|
|
13
|
-
*/
|
|
14
|
-
title?: string;
|
|
15
|
-
/**
|
|
16
|
-
* The subtitle of the item.
|
|
17
|
-
*/
|
|
18
|
-
subtitle?: string;
|
|
19
|
-
/**
|
|
20
|
-
* The level of the item.
|
|
21
|
-
*/
|
|
22
|
-
level?: number;
|
|
23
|
-
/**
|
|
24
|
-
* The expanded state of the item.
|
|
25
|
-
*/
|
|
26
|
-
expanded?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* The color of the item.
|
|
29
|
-
*/
|
|
30
|
-
color?: string;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* @hidden
|
|
34
|
-
*/
|
|
35
|
-
export interface ServerOrgChartNodeProps {
|
|
36
|
-
/**
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
children?: React.ReactNode;
|
|
40
|
-
/**
|
|
41
|
-
* Sets additional classes to the OrgChart.
|
|
42
|
-
*/
|
|
43
|
-
className?: string;
|
|
44
|
-
/**
|
|
45
|
-
* Passes the OrgChart id to the node.
|
|
46
|
-
*/
|
|
47
|
-
id?: string;
|
|
48
|
-
/**
|
|
49
|
-
* The styles that are applied to the OrgChart.
|
|
50
|
-
*/
|
|
51
|
-
style?: React.CSSProperties;
|
|
52
|
-
level: number;
|
|
53
|
-
childLineWidth?: number;
|
|
54
|
-
title?: string;
|
|
55
|
-
subtitle?: string;
|
|
56
|
-
details?: boolean;
|
|
57
|
-
color?: string;
|
|
58
|
-
line?: boolean;
|
|
59
|
-
plus?: boolean;
|
|
60
|
-
expanded?: boolean;
|
|
61
|
-
avatar?: string;
|
|
62
|
-
avatarType?: string;
|
|
63
|
-
cardHeight?: number;
|
|
64
|
-
cardWidth?: number;
|
|
65
|
-
verticalLine?: number;
|
|
66
|
-
itemRender?: React.ComponentType<OrgChartItemRenderProps>;
|
|
67
|
-
onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
|
|
68
|
-
onItemAction?: (ev: OrgChartActionEvent) => void;
|
|
69
|
-
onItemKeyDown?: (ev: OrgChartActionEvent) => void;
|
|
70
|
-
node?: any;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* @hidden
|
|
74
|
-
*/
|
|
75
|
-
export declare const ServerOrgChartNode: React.FunctionComponent<ServerOrgChartNodeProps>;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import * as React from 'react';
|
|
24
|
-
import { classNames } from '@progress/kendo-react-common';
|
|
25
|
-
import { Avatar, CardTitle, CardSubtitle } from '@progress/kendo-react-layout';
|
|
26
|
-
import { ExpandButton } from '../client/ExpandButton';
|
|
27
|
-
import { OrgChartCard } from '../client/OrgChartCard';
|
|
28
|
-
import { OrgChartCardBody } from '../client/OrgChartCardBody';
|
|
29
|
-
var ORGCHARTNODE_CLASSNAME = 'k-orgchart-node';
|
|
30
|
-
;
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
export var ServerOrgChartNode = function (props) {
|
|
35
|
-
var defaultProps = {
|
|
36
|
-
avatarType: 'image'
|
|
37
|
-
};
|
|
38
|
-
var _a = __assign(__assign({}, props), defaultProps), id = _a.id, title = _a.title, subtitle = _a.subtitle, level = _a.level, childLineWidth = _a.childLineWidth, cardWidth = _a.cardWidth, cardHeight = _a.cardHeight, verticalLine = _a.verticalLine, color = _a.color, line = _a.line, plus = _a.plus, expanded = _a.expanded, node = _a.node, avatar = _a.avatar, avatarType = _a.avatarType, itemRender = _a.itemRender, other = __rest(_a, ["id", "title", "subtitle", "level", "childLineWidth", "cardWidth", "cardHeight", "verticalLine", "color", "line", "plus", "expanded", "node", "avatar", "avatarType", "itemRender"]);
|
|
39
|
-
var ItemRender = itemRender;
|
|
40
|
-
return (React.createElement("div", __assign({}, other, { className: classNames(props.className, ORGCHARTNODE_CLASSNAME, 'k-vstack', 'k-align-items-center') }),
|
|
41
|
-
level !== 0 && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v k-orgchart-line-v-top", style: { height: verticalLine } }),
|
|
42
|
-
React.createElement(OrgChartCard, { node: node, style: { width: cardWidth, height: cardHeight }, "aria-level": level + 1, "aria-expanded": !!expanded, "aria-owns": id },
|
|
43
|
-
React.createElement(OrgChartCardBody, { level: level }, ItemRender
|
|
44
|
-
? React.createElement(ItemRender, { item: node, title: title, subtitle: subtitle, level: level, expanded: expanded, color: color })
|
|
45
|
-
: React.createElement(React.Fragment, null,
|
|
46
|
-
React.createElement(Avatar, { type: avatarType, themeColor: "secondary" }, avatarType === 'image'
|
|
47
|
-
? React.createElement("img", { src: avatar, alt: "KendoReact Avatar Customer Image" })
|
|
48
|
-
: avatar),
|
|
49
|
-
React.createElement("div", { className: "k-card-title-wrap k-vstack" },
|
|
50
|
-
React.createElement(CardTitle, { className: "k-text-ellipsis" }, title),
|
|
51
|
-
React.createElement("span", { className: "k-spacer" }),
|
|
52
|
-
React.createElement(CardSubtitle, { className: "k-text-ellipsis" }, subtitle)),
|
|
53
|
-
React.createElement("span", { className: "k-spacer" })))),
|
|
54
|
-
line && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-v" }),
|
|
55
|
-
plus && React.createElement(ExpandButton, { expanded: expanded, node: node }),
|
|
56
|
-
plus && !!childLineWidth && React.createElement("div", { className: "k-orgchart-line k-orgchart-line-h", style: { width: childLineWidth, marginTop: -15 } })));
|
|
57
|
-
};
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
var computedBackgroundColor = function (element) { return window.getComputedStyle(element).backgroundColor; };
|
|
2
|
-
var letterPos = function (letter) { return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0); };
|
|
3
|
-
var seriesPos = function (name) {
|
|
4
|
-
var alpha = name.match(/series-([a-z])$/);
|
|
5
|
-
if (alpha !== null) {
|
|
6
|
-
return letterPos(alpha[1]);
|
|
7
|
-
}
|
|
8
|
-
var num = name.split('--series-')[1];
|
|
9
|
-
return parseInt(num, 10) - 1;
|
|
10
|
-
};
|
|
11
|
-
var SERIES_COLORS = 30;
|
|
12
|
-
var seriesTemplate = function () {
|
|
13
|
-
var result = "\n <div class=\"k-var--series-a\"></div>\n <div class=\"k-var--series-b\"></div>\n <div class=\"k-var--series-c\"></div>\n <div class=\"k-var--series-d\"></div>\n <div class=\"k-var--series-e\"></div>\n <div class=\"k-var--series-f\"></div>\n";
|
|
14
|
-
for (var i = 0; i < SERIES_COLORS; i++) {
|
|
15
|
-
result += "\n <div class=\"k-var--series-".concat(i + 1, "\"></div>");
|
|
16
|
-
}
|
|
17
|
-
return result;
|
|
18
|
-
};
|
|
19
|
-
var template = "\n <div class=\"k-var--series-unset\"></div>\n <div class=\"k-var--series\">\n ".concat(seriesTemplate(), "\n </div>\n");
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*/
|
|
23
|
-
var ThemeService = /** @class */ (function () {
|
|
24
|
-
function ThemeService() {
|
|
25
|
-
}
|
|
26
|
-
ThemeService.prototype.getSeriesColors = function () {
|
|
27
|
-
var element = this.element;
|
|
28
|
-
var series = [].slice.call(element.querySelectorAll('.k-var--series div'));
|
|
29
|
-
var unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
|
|
30
|
-
var seriesColors = series.reduce(function (arr, el) {
|
|
31
|
-
var pos = seriesPos(el.className);
|
|
32
|
-
var color = computedBackgroundColor(el);
|
|
33
|
-
if (color !== unsetColor) {
|
|
34
|
-
arr[pos] = color;
|
|
35
|
-
}
|
|
36
|
-
return arr;
|
|
37
|
-
}, [] // Will populate the series colors in this array
|
|
38
|
-
);
|
|
39
|
-
return seriesColors;
|
|
40
|
-
};
|
|
41
|
-
return ThemeService;
|
|
42
|
-
}());
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
var loadTheme = function (done, doc) {
|
|
47
|
-
var service = new ThemeService();
|
|
48
|
-
var container = service.element = doc.createElement('div');
|
|
49
|
-
container.style.display = 'none';
|
|
50
|
-
container.innerHTML = template;
|
|
51
|
-
doc.body.appendChild(container);
|
|
52
|
-
var seriesColors;
|
|
53
|
-
try {
|
|
54
|
-
seriesColors = service.getSeriesColors();
|
|
55
|
-
}
|
|
56
|
-
finally {
|
|
57
|
-
doc.body.removeChild(service.element);
|
|
58
|
-
delete service.element;
|
|
59
|
-
done(seriesColors);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
export { loadTheme };
|
package/dist/es/utils/consts.js
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export var EXPAND_FIELD = 'expanded';
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export var TEXT_FIELD = 'text';
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export var DISABLED_FIELD = 'disabled';
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export var CHILDREN_FIELD = 'items';
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
export var HAS_CHILDREN_FIELD = 'hasChildren';
|
|
21
|
-
/**
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
export var SELECT_FIELD = 'selected';
|
|
25
|
-
/**
|
|
26
|
-
* @hidden
|
|
27
|
-
*/
|
|
28
|
-
export var CHECK_FIELD = 'checked';
|
|
29
|
-
/**
|
|
30
|
-
* @hidden
|
|
31
|
-
*/
|
|
32
|
-
export var CHECK_INDETERMINATE_FIELD = 'checkIndeterminate';
|
|
33
|
-
/**
|
|
34
|
-
* @hidden
|
|
35
|
-
*/
|
|
36
|
-
export var DOM_KENDO_ITEM_ID_FIELD = '_kendoItemId';
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*/
|
|
40
|
-
export var DOM_KENDO_TREEVIEW_GUID_FIELD = '_kendoOrgChartGuid';
|
|
41
|
-
/**
|
|
42
|
-
* @hidden
|
|
43
|
-
*/
|
|
44
|
-
export var ORGCHART_CLASSNAME = 'k-orgchart';
|
|
45
|
-
/**
|
|
46
|
-
* @hidden
|
|
47
|
-
*/
|
|
48
|
-
export var NODE_HEIGHT = 80;
|
|
49
|
-
/**
|
|
50
|
-
* @hidden
|
|
51
|
-
*/
|
|
52
|
-
export var NODE_WIDTH = 300;
|
|
53
|
-
/**
|
|
54
|
-
* @hidden
|
|
55
|
-
*/
|
|
56
|
-
export var HORIZONTAL_GAP = 25;
|
|
57
|
-
/**
|
|
58
|
-
* @hidden
|
|
59
|
-
*/
|
|
60
|
-
export var VERTICAL_LINE = 40;
|
|
61
|
-
/**
|
|
62
|
-
* @hidden
|
|
63
|
-
*/
|
|
64
|
-
export var GROUP_TITLE_HEIGHT = 20;
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*/
|
|
68
|
-
export var GROUP_SUBTITLE_HEIGHT = 20;
|
|
69
|
-
/**
|
|
70
|
-
* @hidden
|
|
71
|
-
*/
|
|
72
|
-
export var GROUP_PADDINGS = 82;
|