@progress/kendo-react-orgchart 6.1.1 → 7.0.0-develop.10
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,106 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { OrgChartGroupSubtitleProps, OrgChartGroupTitleProps } from '../server/ServerOrgChartGroup';
|
|
3
|
-
import { OrgChartItemRenderProps } from '../server/ServerOrgChartNode';
|
|
4
|
-
/**
|
|
5
|
-
* @hidden
|
|
6
|
-
*/
|
|
7
|
-
export interface ServerOrgChartProps {
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Sets additional classes to the OrgChart.
|
|
14
|
-
*/
|
|
15
|
-
className?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Sets custom id to the OrgChart.
|
|
18
|
-
*/
|
|
19
|
-
id?: string;
|
|
20
|
-
/**
|
|
21
|
-
* Sets custom aria-label to the OrgChart. The default value is "Org Chart"
|
|
22
|
-
*/
|
|
23
|
-
ariaLabel?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Specifies the name of the field which will provide a id for the item. Defaults to `id`.
|
|
26
|
-
*/
|
|
27
|
-
idField?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Specifies the name of the field which will provide an array representation of the item children.
|
|
30
|
-
*/
|
|
31
|
-
childrenField?: string;
|
|
32
|
-
/**
|
|
33
|
-
* Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
|
|
34
|
-
*/
|
|
35
|
-
expandField?: string;
|
|
36
|
-
/**
|
|
37
|
-
* Specifies the name of the field which will provide a title representation for the item. Defaults to `text`.
|
|
38
|
-
*/
|
|
39
|
-
titleField?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Specifies the name of the field which indicates to the OrgChart that an item has
|
|
42
|
-
* children even if the children are not initially passed. Used for implementing the load-on-demand feature.
|
|
43
|
-
* Defaults to `undefined`.
|
|
44
|
-
*/
|
|
45
|
-
hasChildrenField?: string;
|
|
46
|
-
/**
|
|
47
|
-
* Specifies the name of the field which will provide a subtitle representation for the item. Defaults to `text`.
|
|
48
|
-
*/
|
|
49
|
-
subtitleField?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Specifies the avatar of the field which will provide a avatar representation for the item. Defaults to `text`.
|
|
52
|
-
*/
|
|
53
|
-
avatarField?: string;
|
|
54
|
-
/**
|
|
55
|
-
* Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.
|
|
56
|
-
*/
|
|
57
|
-
cardsColors?: string[];
|
|
58
|
-
/**
|
|
59
|
-
* The styles that are applied to the OrgChart.
|
|
60
|
-
*/
|
|
61
|
-
style?: React.CSSProperties;
|
|
62
|
-
/**
|
|
63
|
-
* Sets the data of the OrgChart.
|
|
64
|
-
*/
|
|
65
|
-
data?: any[];
|
|
66
|
-
/**
|
|
67
|
-
* Specifies the field by which the OrgChart data is grouped.
|
|
68
|
-
*/
|
|
69
|
-
groupField?: string;
|
|
70
|
-
/**
|
|
71
|
-
* Specifies the height of the card of the OrgChart.
|
|
72
|
-
*/
|
|
73
|
-
cardHeight?: number;
|
|
74
|
-
/**
|
|
75
|
-
* Specifies the width of the card of the OrgChart.
|
|
76
|
-
*/
|
|
77
|
-
cardWidth?: number;
|
|
78
|
-
/**
|
|
79
|
-
* Specifies the height of the title of the grouped OrgChart.
|
|
80
|
-
*/
|
|
81
|
-
groupTitleHeight?: number;
|
|
82
|
-
/**
|
|
83
|
-
* Specifies the height of the subtitle of the grouped OrgChart.
|
|
84
|
-
*/
|
|
85
|
-
groupSubtitleHeight?: number;
|
|
86
|
-
/**
|
|
87
|
-
* Defines the component that will be used for rendering each of the OrgChart items.
|
|
88
|
-
*/
|
|
89
|
-
itemRender?: React.ComponentType<OrgChartItemRenderProps>;
|
|
90
|
-
/**
|
|
91
|
-
* Defines the component that will be used for rendering each of the grouped OrgChart title.
|
|
92
|
-
*/
|
|
93
|
-
groupTitleRender?: React.ComponentType<OrgChartGroupTitleProps>;
|
|
94
|
-
/**
|
|
95
|
-
* Defines the component that will be used for rendering each of the grouped OrgChart subtitle.
|
|
96
|
-
*/
|
|
97
|
-
groupSubtitleRender?: React.ComponentType<OrgChartGroupSubtitleProps>;
|
|
98
|
-
/**
|
|
99
|
-
* Specifies the height of the vertical line of the OrgChart.
|
|
100
|
-
*/
|
|
101
|
-
verticalLine?: number;
|
|
102
|
-
/**
|
|
103
|
-
* Specifies the width the OrgChart.
|
|
104
|
-
*/
|
|
105
|
-
height?: string | number;
|
|
106
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/es/main.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { ServerOrgChart } from './server/ServerOrgChart';
|
|
2
|
-
export { ServerOrgChartProps } from './interfaces/SeverOrgChartProps';
|
|
3
|
-
export * from './OrgChart';
|
|
4
|
-
export { OrgChartExpandChangeEvent } from './interfaces/OrgChartExpandChangeEvent';
|
|
5
|
-
export { OrgChartActionEvent } from './interfaces/OrgChartActionEvent';
|
|
6
|
-
export * from './processOrgChartItems';
|
package/dist/es/main.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export var packageMetadata = {
|
|
5
|
-
name: '@progress/kendo-react-orgchart',
|
|
6
|
-
productName: 'KendoReact',
|
|
7
|
-
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate: 1700065534,
|
|
9
|
-
version: '',
|
|
10
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
|
-
};
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
/* eslint-disable max-len */
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
import { updateItem, resolveItemsIds, getNestedValue, isArray } from '@progress/kendo-react-common';
|
|
14
|
-
import { EXPAND_FIELD, SELECT_FIELD, CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD } from './utils/consts';
|
|
15
|
-
/**
|
|
16
|
-
* A helper function which applies the specified operation descriptors to the data.
|
|
17
|
-
* * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
|
|
18
|
-
* * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
|
|
19
|
-
* * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
|
|
20
|
-
*
|
|
21
|
-
* @param data - The data that will be processed.
|
|
22
|
-
* @param operations - The operation descriptors that will be applied to the data.
|
|
23
|
-
* @returns - The processed copy of the input data.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```jsx
|
|
27
|
-
* class App extends React.Component {
|
|
28
|
-
* state = { items: tree, expand: [], select: [], check: [] };
|
|
29
|
-
* render() {
|
|
30
|
-
* const { expand, select, check } = this.state;
|
|
31
|
-
* return (
|
|
32
|
-
* <OrgChart
|
|
33
|
-
* data={processOrgChartItems(this.state.items, { expand, select, check })}
|
|
34
|
-
* expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
|
|
35
|
-
* onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
|
|
36
|
-
* onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
|
|
37
|
-
* />
|
|
38
|
-
* );
|
|
39
|
-
* }
|
|
40
|
-
* onExpandChange = (event) => {
|
|
41
|
-
* let expand = this.state.expand.slice();
|
|
42
|
-
* const index = expand.indexOf(event.itemHierarchicalIndex);
|
|
43
|
-
* index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
|
|
44
|
-
* this.setState({ expand });
|
|
45
|
-
* }
|
|
46
|
-
* }
|
|
47
|
-
*
|
|
48
|
-
* const tree = [{
|
|
49
|
-
* text: 'Item1',
|
|
50
|
-
* items: [
|
|
51
|
-
* { text: 'Item1.1' },
|
|
52
|
-
* { text: 'Item1.2' },
|
|
53
|
-
* { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
|
|
54
|
-
* }, {
|
|
55
|
-
* text: 'Item2', disabled: true,
|
|
56
|
-
* items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
|
|
57
|
-
* }, {
|
|
58
|
-
* text: 'Item3'
|
|
59
|
-
* }];
|
|
60
|
-
*
|
|
61
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
62
|
-
* ```
|
|
63
|
-
*/
|
|
64
|
-
export function processOrgChartItems(data, operations) {
|
|
65
|
-
if (!data || !data.length) {
|
|
66
|
-
return [];
|
|
67
|
-
}
|
|
68
|
-
var result = data;
|
|
69
|
-
var cloneField = operations.cloneField || 'cloned';
|
|
70
|
-
var expandField = operations.expandField || EXPAND_FIELD;
|
|
71
|
-
var selectField = operations.selectField || SELECT_FIELD;
|
|
72
|
-
var checkField = operations.checkField || CHECK_FIELD;
|
|
73
|
-
var childrenField = operations.childrenField || CHILDREN_FIELD;
|
|
74
|
-
result = handleOperation(result, expandField, operations.expand, cloneField, childrenField);
|
|
75
|
-
result = handleOperation(result, selectField, operations.select, cloneField, childrenField);
|
|
76
|
-
result = handleOperation(result, checkField, operations.check, cloneField, childrenField);
|
|
77
|
-
applyCheckIndeterminate(result, childrenField, operations.check);
|
|
78
|
-
return result;
|
|
79
|
-
}
|
|
80
|
-
function handleOperation(items, defaultField, operation, cloneField, childrenField) {
|
|
81
|
-
if (operation) {
|
|
82
|
-
var _a = parseOperation(operation, defaultField), ids = _a.ids, field = _a.field;
|
|
83
|
-
var indices = !isArray(operation) && operation.idField ? resolveItemsIds(ids, operation.idField, items, childrenField) : ids;
|
|
84
|
-
return raiseFlags(items, indices, field, cloneField, childrenField);
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
return items;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
function parseOperation(operation, defaultField) {
|
|
91
|
-
var ids;
|
|
92
|
-
var field;
|
|
93
|
-
if (isArray(operation)) {
|
|
94
|
-
ids = operation;
|
|
95
|
-
field = defaultField;
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
ids = operation.ids || [];
|
|
99
|
-
field = operation.operationField || defaultField;
|
|
100
|
-
}
|
|
101
|
-
return { ids: ids, field: field };
|
|
102
|
-
}
|
|
103
|
-
function raiseFlags(items, indices, field, cloneField, childrenField) {
|
|
104
|
-
var result = items;
|
|
105
|
-
indices.forEach(function (itemIndex) {
|
|
106
|
-
result = updateItem(result, itemIndex, function (item) { return raiseNestedFlag(field, item); }, cloneField, childrenField);
|
|
107
|
-
});
|
|
108
|
-
return result;
|
|
109
|
-
}
|
|
110
|
-
function raiseNestedFlag(fieldName, dataItem) {
|
|
111
|
-
var fields = (fieldName || '').split('.');
|
|
112
|
-
var item = dataItem;
|
|
113
|
-
for (var index = 0; index < fields.length; index++) {
|
|
114
|
-
var field = fields[index];
|
|
115
|
-
if (index === fields.length - 1) {
|
|
116
|
-
item[field] = true;
|
|
117
|
-
}
|
|
118
|
-
else if (item[field] !== undefined) {
|
|
119
|
-
item[field] = __assign({}, item[field]);
|
|
120
|
-
item = item[field];
|
|
121
|
-
}
|
|
122
|
-
else {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
function applyCheckIndeterminate(items, childrenField, check) {
|
|
128
|
-
if (check && !isArray(check) && check.applyCheckIndeterminate) {
|
|
129
|
-
var checkField = parseOperation(check, CHECK_FIELD).field;
|
|
130
|
-
var checkIndeterminateField = check.checkIndeterminateField || CHECK_INDETERMINATE_FIELD;
|
|
131
|
-
for (var i = 0; i < items.length; i++) {
|
|
132
|
-
var item = items[i];
|
|
133
|
-
var subItems = item[childrenField];
|
|
134
|
-
if (subItems) {
|
|
135
|
-
applyCheckIndeterminateHelper(subItems, getNestedValue(checkField, item) ? [] : [item], childrenField, checkField, checkIndeterminateField);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
function applyCheckIndeterminateHelper(data, parents, childrenField, checkField, checkIndeterminateField) {
|
|
141
|
-
// The updates will be direct because the corresponding items
|
|
142
|
-
// are already cloned because of their checked children.
|
|
143
|
-
var parentsAlreadyUpdated = false;
|
|
144
|
-
for (var i = 0; i < data.length; i++) {
|
|
145
|
-
var item = data[i];
|
|
146
|
-
if (getNestedValue(checkField, item)) {
|
|
147
|
-
if (!parentsAlreadyUpdated) {
|
|
148
|
-
for (var j = 0; j < parents.length; j++) {
|
|
149
|
-
raiseNestedFlag(checkIndeterminateField, parents[j]);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
parentsAlreadyUpdated = true;
|
|
153
|
-
if (item[childrenField]) {
|
|
154
|
-
applyCheckIndeterminateHelper(item[childrenField], [], childrenField, checkField, checkIndeterminateField);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
if (item[childrenField]) {
|
|
159
|
-
applyCheckIndeterminateHelper(item[childrenField], parentsAlreadyUpdated ? [item] : parents.concat([item]), childrenField, checkField, checkIndeterminateField);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}
|
|
@@ -1,235 +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 { ServerOrgChartGroup } from './ServerOrgChartGroup';
|
|
16
|
-
import { groupBy } from '@progress/kendo-data-query';
|
|
17
|
-
import { GROUP_PADDINGS, GROUP_SUBTITLE_HEIGHT, GROUP_TITLE_HEIGHT, HORIZONTAL_GAP, NODE_HEIGHT, NODE_WIDTH, VERTICAL_LINE } from '../utils/consts';
|
|
18
|
-
var setDataByGroups = function (_a) {
|
|
19
|
-
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;
|
|
20
|
-
data.forEach(function (element) {
|
|
21
|
-
var items = element[childrenField];
|
|
22
|
-
var expanded = element[expandField];
|
|
23
|
-
if (expanded && items && items.length) {
|
|
24
|
-
var hasChildren = items.some(function (it) { return it[childrenField] && it[childrenField].length
|
|
25
|
-
|| (hasChildrenField && it[hasChildrenField]); });
|
|
26
|
-
var orientation_1 = hasChildren ? 'horizontal' : 'vertical';
|
|
27
|
-
var width = hasChildren ? null : cardWidth + 2 * HORIZONTAL_GAP;
|
|
28
|
-
var alreadyAdded = dataByGroups.find(function (dbg) { return dbg.parentId === parentId; });
|
|
29
|
-
var alreadyAddedParent = dataByGroups.find(function (dbg) { return dbg.ids.includes(parentId); });
|
|
30
|
-
var haveSameGroup = false;
|
|
31
|
-
if (alreadyAdded) {
|
|
32
|
-
var addedResourseID_1 = alreadyAdded.ids[0];
|
|
33
|
-
var addedItem = alreadyAddedParent.items.find(function (i) { return i[idField] === addedResourseID_1; });
|
|
34
|
-
var newItem = alreadyAddedParent.items.find(function (i) { return i[idField] === element[idField]; });
|
|
35
|
-
haveSameGroup = addedItem[groupField] === newItem[groupField];
|
|
36
|
-
}
|
|
37
|
-
if (alreadyAdded && haveSameGroup) {
|
|
38
|
-
alreadyAdded.ids.push(element[idField]);
|
|
39
|
-
alreadyAdded.items = alreadyAdded.items.concat(items);
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
dataByGroups.push({
|
|
43
|
-
ids: [element[idField]],
|
|
44
|
-
items: items,
|
|
45
|
-
level: level,
|
|
46
|
-
parentId: parentId,
|
|
47
|
-
hasChildren: hasChildren,
|
|
48
|
-
orientation: orientation_1,
|
|
49
|
-
width: width
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
setDataByGroups({
|
|
53
|
-
dataByGroups: dataByGroups,
|
|
54
|
-
data: element[childrenField],
|
|
55
|
-
childrenField: childrenField,
|
|
56
|
-
cardWidth: cardWidth,
|
|
57
|
-
idField: idField,
|
|
58
|
-
expandField: expandField,
|
|
59
|
-
hasChildrenField: hasChildrenField,
|
|
60
|
-
groupField: groupField,
|
|
61
|
-
level: level + 1,
|
|
62
|
-
parentId: element[idField]
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
var setGroupedGroupsWidths = function (dataByGroups, cardWidth) {
|
|
68
|
-
var nodeWidth = cardWidth || NODE_WIDTH;
|
|
69
|
-
var groupsFromLeavesToRoot = dataByGroups.sort(function (a, b) { return b.level - a.level; });
|
|
70
|
-
groupsFromLeavesToRoot.forEach(function (group) {
|
|
71
|
-
if (!group.width) {
|
|
72
|
-
var childGroups = groupsFromLeavesToRoot.filter(function (gr) { return group.ids.includes(gr.parentId); });
|
|
73
|
-
if (childGroups.length) {
|
|
74
|
-
var maxChildGroupWidth = Math.max.apply(Math, childGroups.map(function (chg) { return chg.width || 0; }));
|
|
75
|
-
var maxChildGroupsLength = Math.max.apply(Math, childGroups.map(function (chg) { return chg.groupedItems.length || 0; }));
|
|
76
|
-
var maxSubItemsWidth = Math.max.apply(Math, group.groupedItems.map(function (chg) {
|
|
77
|
-
var subItemsLength = group.orientation === 'horizontal' ? chg.items.length : 1;
|
|
78
|
-
return subItemsLength * (nodeWidth + 2 * HORIZONTAL_GAP) + HORIZONTAL_GAP * (subItemsLength - 1);
|
|
79
|
-
}));
|
|
80
|
-
var newGroupWidth = maxChildGroupWidth * maxChildGroupsLength + HORIZONTAL_GAP * (maxChildGroupsLength - 1);
|
|
81
|
-
group.width = Math.max(newGroupWidth, maxSubItemsWidth);
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
var maxSubItemsWidth = Math.max.apply(Math, group.groupedItems.map(function (chg) {
|
|
85
|
-
var subItemsLength = group.orientation === 'horizontal' ? chg.items.length : 1;
|
|
86
|
-
return subItemsLength * (nodeWidth + 2 * HORIZONTAL_GAP) + HORIZONTAL_GAP * (subItemsLength - 1);
|
|
87
|
-
}));
|
|
88
|
-
group.width = maxSubItemsWidth;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
var setGroupedGroupsLeft = function (dataByGroups, idField) {
|
|
94
|
-
var groupsFromRootToLeaves = dataByGroups.sort(function (a, b) { return a.level - b.level; });
|
|
95
|
-
groupsFromRootToLeaves.forEach(function (group) {
|
|
96
|
-
var _a;
|
|
97
|
-
if (group.level === 0) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
var parentGroup = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(group.parentId); });
|
|
101
|
-
var groupIndex = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.groupedItems.findIndex(function (g) { return g.items.some(function (it) { return group.ids.includes(it[idField]); }); })) || 0;
|
|
102
|
-
var subLinks = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.groupedItems) || [];
|
|
103
|
-
var subLinkWidth = parentGroup.width
|
|
104
|
-
? (parentGroup.width - ((subLinks.length - 1) * HORIZONTAL_GAP)) / subLinks.length
|
|
105
|
-
: 0;
|
|
106
|
-
if (!group.left) {
|
|
107
|
-
var newLeft_1 = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.left) || 0;
|
|
108
|
-
subLinks.forEach(function (_subG, index) {
|
|
109
|
-
if (index < groupIndex) {
|
|
110
|
-
newLeft_1 += subLinkWidth + HORIZONTAL_GAP;
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
group.left = newLeft_1;
|
|
114
|
-
}
|
|
115
|
-
var parentWidth = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.width) || 0;
|
|
116
|
-
var parentGroupItems = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.groupedItems.length) || 1;
|
|
117
|
-
var newWidth = ((parentWidth) - ((parentGroupItems - 1) * HORIZONTAL_GAP)) / parentGroupItems;
|
|
118
|
-
group.width = newWidth;
|
|
119
|
-
if (parentGroup) {
|
|
120
|
-
var childLinewidth = group.width - ((group.width - (group.groupedItems.length - 1) * HORIZONTAL_GAP)) / (group.groupedItems.length);
|
|
121
|
-
if (!parentGroup.childLineWidths) {
|
|
122
|
-
parentGroup.childLineWidths = [childLinewidth];
|
|
123
|
-
}
|
|
124
|
-
else {
|
|
125
|
-
(_a = parentGroup.childLineWidths) === null || _a === void 0 ? void 0 : _a.push(childLinewidth);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
var setGroupsTop = function (dataByGroups, cardHeight, groupTitleHeight, groupSubtitleHeight, verticalLine) {
|
|
131
|
-
var nodeHeight = cardHeight || NODE_HEIGHT;
|
|
132
|
-
var vLineHeight = verticalLine || VERTICAL_LINE;
|
|
133
|
-
var groupNodeHeight = groupTitleHeight + groupSubtitleHeight + GROUP_PADDINGS;
|
|
134
|
-
dataByGroups.forEach(function (group) {
|
|
135
|
-
var level = group.level;
|
|
136
|
-
var newTop = ((nodeHeight + vLineHeight + groupNodeHeight) * level) + (VERTICAL_LINE * (level ? level - 1 : 0)) -
|
|
137
|
-
((vLineHeight - VERTICAL_LINE) * (level ? 1 : 0));
|
|
138
|
-
group.top = newTop;
|
|
139
|
-
});
|
|
140
|
-
};
|
|
141
|
-
var getHeight = function (dataByGroups, cardHeight, verticalLine, groupTitleHeight, groupSubtitleHeight) {
|
|
142
|
-
var nodeHeight = cardHeight || NODE_HEIGHT;
|
|
143
|
-
var vLineHeight = verticalLine || VERTICAL_LINE;
|
|
144
|
-
var groupHeight = (groupTitleHeight || GROUP_TITLE_HEIGHT) + (groupSubtitleHeight || GROUP_SUBTITLE_HEIGHT);
|
|
145
|
-
var groupNodeHeight = groupHeight + GROUP_PADDINGS;
|
|
146
|
-
var newHeight = Math.max.apply(Math, dataByGroups.map(function (group) {
|
|
147
|
-
var top = group.top || 0;
|
|
148
|
-
var maxItemsLength = Math.max.apply(Math, group.groupedItems.map(function (gr) { return gr.items.length; }));
|
|
149
|
-
var plusButtonHeight = group.hasChildren ? VERTICAL_LINE : 0;
|
|
150
|
-
var height = group.orientation === 'horizontal'
|
|
151
|
-
? nodeHeight + vLineHeight + groupNodeHeight + vLineHeight + plusButtonHeight
|
|
152
|
-
: maxItemsLength * (nodeHeight + vLineHeight) + groupNodeHeight + vLineHeight;
|
|
153
|
-
return top + height;
|
|
154
|
-
}));
|
|
155
|
-
return newHeight;
|
|
156
|
-
};
|
|
157
|
-
/**
|
|
158
|
-
* @hidden
|
|
159
|
-
*/
|
|
160
|
-
export var ServerGroupedOrgChart = function (props) {
|
|
161
|
-
var defaultProps = {
|
|
162
|
-
width: '100%',
|
|
163
|
-
data: [],
|
|
164
|
-
ariaLabel: 'Org Chart',
|
|
165
|
-
idField: 'id',
|
|
166
|
-
childrenField: 'items',
|
|
167
|
-
avatarField: 'avatar',
|
|
168
|
-
titleField: 'title',
|
|
169
|
-
subtitleField: 'subtitle',
|
|
170
|
-
expandField: 'expanded',
|
|
171
|
-
orientation: 'horizontal'
|
|
172
|
-
};
|
|
173
|
-
var _a = __assign(__assign({}, defaultProps), props), id = _a.id, width = _a.width, data = _a.data, groupField = _a.groupField, cardWidth = _a.cardWidth, cardHeight = _a.cardHeight, groupTitleHeight = _a.groupTitleHeight, groupSubtitleHeight = _a.groupSubtitleHeight, verticalLine = _a.verticalLine, idField = _a.idField, childrenField = _a.childrenField, expandField = _a.expandField, hasChildrenField = _a.hasChildrenField, avatarField = _a.avatarField, titleField = _a.titleField, subtitleField = _a.subtitleField, cardsColors = _a.cardsColors, ariaLabel = _a.ariaLabel, itemRender = _a.itemRender, groupTitleRender = _a.groupTitleRender, groupSubtitleRender = _a.groupSubtitleRender, height = _a.height;
|
|
174
|
-
var dataByGroups = [{
|
|
175
|
-
items: data,
|
|
176
|
-
level: 0,
|
|
177
|
-
hasChildren: true,
|
|
178
|
-
orientation: 'horizontal',
|
|
179
|
-
ids: [0],
|
|
180
|
-
parentId: null,
|
|
181
|
-
width: null
|
|
182
|
-
}];
|
|
183
|
-
setDataByGroups({
|
|
184
|
-
dataByGroups: dataByGroups,
|
|
185
|
-
data: data,
|
|
186
|
-
cardWidth: cardWidth,
|
|
187
|
-
expandField: expandField,
|
|
188
|
-
hasChildrenField: hasChildrenField,
|
|
189
|
-
childrenField: childrenField,
|
|
190
|
-
idField: idField,
|
|
191
|
-
groupField: groupField
|
|
192
|
-
});
|
|
193
|
-
dataByGroups.map(function (g) {
|
|
194
|
-
g.groupedItems = groupBy(g.items, [{ field: groupField }]);
|
|
195
|
-
});
|
|
196
|
-
setGroupedGroupsWidths(dataByGroups, cardWidth);
|
|
197
|
-
setGroupedGroupsLeft(dataByGroups, idField);
|
|
198
|
-
setGroupsTop(dataByGroups, cardHeight || NODE_HEIGHT, (groupTitleHeight || GROUP_TITLE_HEIGHT), (groupSubtitleHeight || GROUP_SUBTITLE_HEIGHT), verticalLine);
|
|
199
|
-
var calculatedHeight = getHeight(dataByGroups, cardHeight || NODE_HEIGHT, (groupTitleHeight || GROUP_TITLE_HEIGHT), (groupSubtitleHeight || GROUP_SUBTITLE_HEIGHT));
|
|
200
|
-
return (React.createElement("div", { className: "k-orgchart-container", style: { width: width, height: height || calculatedHeight } }, dataByGroups.map(function (group) {
|
|
201
|
-
var _a;
|
|
202
|
-
var level = group.level;
|
|
203
|
-
var groupInnerItems = group.groupedItems.map(function (grIt) {
|
|
204
|
-
var expanded = grIt.items.some(function (i) { return i[expandField]; });
|
|
205
|
-
return __assign(__assign({}, grIt), { expanded: expanded });
|
|
206
|
-
});
|
|
207
|
-
var groupedInnerExpandedItems = groupInnerItems.filter(function (gII) { return gII.expanded; });
|
|
208
|
-
var justifyContent = level === 0 ? 'center' : 'around';
|
|
209
|
-
var groupOrientation = 'horizontal';
|
|
210
|
-
var cardColor = cardsColors ? cardsColors[level] || 'green' : 'green';
|
|
211
|
-
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 = {},
|
|
212
|
-
_a["k-".concat(kendoThemeMaps.orientationMap[groupOrientation])] = groupOrientation,
|
|
213
|
-
_a["k-justify-content-".concat(justifyContent)] = justifyContent,
|
|
214
|
-
_a['k-orgchart-group-h'] = props.groupField,
|
|
215
|
-
_a)), style: {
|
|
216
|
-
width: group.width || '100%',
|
|
217
|
-
left: group.left,
|
|
218
|
-
top: group.top
|
|
219
|
-
} }, data.length > 0 &&
|
|
220
|
-
groupInnerItems.map(function (groupedNodes, gIndex) {
|
|
221
|
-
var hasChildren = groupedNodes.items.some(function (it) { return it[childrenField] && it[childrenField].length
|
|
222
|
-
|| (hasChildrenField && it[hasChildrenField]); });
|
|
223
|
-
var subGroupWidth = group.width
|
|
224
|
-
? (group.width - ((groupInnerItems.length - 1) * HORIZONTAL_GAP)) / groupInnerItems.length
|
|
225
|
-
: undefined;
|
|
226
|
-
var expandedIndex = groupedInnerExpandedItems.findIndex((function (gr) { return gr === groupedNodes; }));
|
|
227
|
-
return (React.createElement(ServerOrgChartGroup, { id: id + '-' + (level + 1) + '-' + groupedNodes.items[0][idField], style: { width: subGroupWidth }, groupTitleHeight: groupTitleHeight, groupSubtitleHeight: groupSubtitleHeight, groupTitleRender: groupTitleRender, groupSubtitleRender: groupSubtitleRender, key: gIndex, level: level, verticalLine: verticalLine || VERTICAL_LINE, title: groupedNodes.items[0][groupField || titleField], subtitle: groupField, orientation: group.orientation, childLineWidth: (hasChildren && groupedNodes.expanded && group.orientation === 'horizontal')
|
|
228
|
-
? group.childLineWidths[expandedIndex]
|
|
229
|
-
: 0, line: hasChildren, nodes: groupedNodes.items, expanded: groupedNodes.expanded, plus: hasChildren }, groupedNodes.items.map(function (node, index) {
|
|
230
|
-
return (React.createElement(ServerOrgChartNode, { cardHeight: cardHeight, cardWidth: cardWidth, itemRender: itemRender, color: cardColor, key: index, level: level, avatar: node[avatarField], title: node[titleField], subtitle: node[subtitleField], verticalLine: 0, line: false, node: node, childLineWidth: 0, plus: false }, node.text));
|
|
231
|
-
})));
|
|
232
|
-
})));
|
|
233
|
-
})));
|
|
234
|
-
};
|
|
235
|
-
ServerGroupedOrgChart.displayName = 'KendoServerGroupedOrgChart';
|