@progress/kendo-react-orgchart 6.1.1 → 7.0.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.
Files changed (96) hide show
  1. package/LICENSE.md +1 -1
  2. package/OrgChart.d.ts +10 -0
  3. package/{dist/npm/OrgChartOperationDescriptors.d.ts → OrgChartOperationDescriptors.d.ts} +4 -0
  4. package/{dist/es/client → client}/ClientOrgChart.d.ts +7 -3
  5. package/client/ExpandButton.d.ts +17 -0
  6. package/{dist/es/client → client}/OrgChartCard.d.ts +4 -0
  7. package/client/OrgChartCardBody.d.ts +16 -0
  8. package/{dist/npm/client → client}/OrgChartGroupContainer.d.ts +4 -0
  9. package/dist/cdn/js/kendo-react-orgchart.js +18 -1
  10. package/index.d.ts +12 -0
  11. package/index.js +18 -0
  12. package/index.mjs +1148 -0
  13. package/interfaces/ChildGroup.d.ts +20 -0
  14. package/{dist/npm/interfaces → interfaces}/OrgChartActionEvent.d.ts +4 -1
  15. package/{dist/npm/interfaces → interfaces}/OrgChartExpandChangeEvent.d.ts +4 -1
  16. package/{dist/npm/interfaces → interfaces}/SeverOrgChartProps.d.ts +4 -1
  17. package/package-metadata.d.ts +9 -0
  18. package/package.json +29 -38
  19. package/{dist/es/processOrgChartItems.d.ts → processOrgChartItems.d.ts} +4 -0
  20. package/server/ServerGroupedOrgChart.d.ts +12 -0
  21. package/server/ServerOrgChart.d.ts +12 -0
  22. package/{dist/npm/server → server}/ServerOrgChartGroup.d.ts +4 -0
  23. package/{dist/npm/server → server}/ServerOrgChartNode.d.ts +5 -1
  24. package/theming/theme-service.d.ts +9 -0
  25. package/{dist/es/utils → utils}/consts.d.ts +4 -0
  26. package/about.md +0 -3
  27. package/dist/es/OrgChart.d.ts +0 -6
  28. package/dist/es/OrgChart.js +0 -67
  29. package/dist/es/OrgChartOperationDescriptors.d.ts +0 -76
  30. package/dist/es/OrgChartOperationDescriptors.js +0 -2
  31. package/dist/es/client/ClientOrgChart.js +0 -287
  32. package/dist/es/client/ExpandButton.d.ts +0 -13
  33. package/dist/es/client/ExpandButton.js +0 -23
  34. package/dist/es/client/OrgChartCard.js +0 -68
  35. package/dist/es/client/OrgChartCardBody.d.ts +0 -12
  36. package/dist/es/client/OrgChartCardBody.js +0 -13
  37. package/dist/es/client/OrgChartGroupContainer.d.ts +0 -19
  38. package/dist/es/client/OrgChartGroupContainer.js +0 -71
  39. package/dist/es/interfaces/ChildGroup.d.ts +0 -16
  40. package/dist/es/interfaces/ChildGroup.js +0 -1
  41. package/dist/es/interfaces/OrgChartActionEvent.d.ts +0 -22
  42. package/dist/es/interfaces/OrgChartActionEvent.js +0 -1
  43. package/dist/es/interfaces/OrgChartExpandChangeEvent.d.ts +0 -22
  44. package/dist/es/interfaces/OrgChartExpandChangeEvent.js +0 -1
  45. package/dist/es/interfaces/SeverOrgChartProps.d.ts +0 -106
  46. package/dist/es/interfaces/SeverOrgChartProps.js +0 -1
  47. package/dist/es/main.d.ts +0 -6
  48. package/dist/es/main.js +0 -3
  49. package/dist/es/package-metadata.d.ts +0 -5
  50. package/dist/es/package-metadata.js +0 -11
  51. package/dist/es/processOrgChartItems.js +0 -163
  52. package/dist/es/server/ServerGroupedOrgChart.d.ts +0 -9
  53. package/dist/es/server/ServerGroupedOrgChart.js +0 -235
  54. package/dist/es/server/ServerOrgChart.d.ts +0 -9
  55. package/dist/es/server/ServerOrgChart.js +0 -192
  56. package/dist/es/server/ServerOrgChartGroup.d.ts +0 -96
  57. package/dist/es/server/ServerOrgChartGroup.js +0 -59
  58. package/dist/es/server/ServerOrgChartNode.d.ts +0 -75
  59. package/dist/es/server/ServerOrgChartNode.js +0 -57
  60. package/dist/es/theming/theme-service.d.ts +0 -5
  61. package/dist/es/theming/theme-service.js +0 -62
  62. package/dist/es/utils/consts.js +0 -72
  63. package/dist/npm/OrgChart.d.ts +0 -6
  64. package/dist/npm/OrgChart.js +0 -71
  65. package/dist/npm/OrgChartOperationDescriptors.js +0 -3
  66. package/dist/npm/client/ClientOrgChart.d.ts +0 -94
  67. package/dist/npm/client/ClientOrgChart.js +0 -291
  68. package/dist/npm/client/ExpandButton.d.ts +0 -13
  69. package/dist/npm/client/ExpandButton.js +0 -27
  70. package/dist/npm/client/OrgChartCard.d.ts +0 -19
  71. package/dist/npm/client/OrgChartCard.js +0 -72
  72. package/dist/npm/client/OrgChartCardBody.d.ts +0 -12
  73. package/dist/npm/client/OrgChartCardBody.js +0 -17
  74. package/dist/npm/client/OrgChartGroupContainer.js +0 -75
  75. package/dist/npm/interfaces/ChildGroup.d.ts +0 -16
  76. package/dist/npm/interfaces/ChildGroup.js +0 -2
  77. package/dist/npm/interfaces/OrgChartActionEvent.js +0 -2
  78. package/dist/npm/interfaces/OrgChartExpandChangeEvent.js +0 -2
  79. package/dist/npm/interfaces/SeverOrgChartProps.js +0 -2
  80. package/dist/npm/main.d.ts +0 -6
  81. package/dist/npm/main.js +0 -21
  82. package/dist/npm/package-metadata.d.ts +0 -5
  83. package/dist/npm/package-metadata.js +0 -14
  84. package/dist/npm/processOrgChartItems.d.ts +0 -51
  85. package/dist/npm/processOrgChartItems.js +0 -167
  86. package/dist/npm/server/ServerGroupedOrgChart.d.ts +0 -9
  87. package/dist/npm/server/ServerGroupedOrgChart.js +0 -239
  88. package/dist/npm/server/ServerOrgChart.d.ts +0 -9
  89. package/dist/npm/server/ServerOrgChart.js +0 -196
  90. package/dist/npm/server/ServerOrgChartGroup.js +0 -63
  91. package/dist/npm/server/ServerOrgChartNode.js +0 -61
  92. package/dist/npm/theming/theme-service.d.ts +0 -5
  93. package/dist/npm/theming/theme-service.js +0 -65
  94. package/dist/npm/utils/consts.d.ts +0 -72
  95. package/dist/npm/utils/consts.js +0 -75
  96. 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,3 +0,0 @@
1
- export { ServerOrgChart } from './server/ServerOrgChart';
2
- export * from './OrgChart';
3
- export * from './processOrgChartItems';
@@ -1,5 +0,0 @@
1
- import { PackageMetadata } from '@progress/kendo-licensing';
2
- /**
3
- * @hidden
4
- */
5
- export declare const packageMetadata: PackageMetadata;
@@ -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,9 +0,0 @@
1
- /// <reference types="react" />
2
- import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
3
- /**
4
- * @hidden
5
- */
6
- export declare const ServerGroupedOrgChart: {
7
- (props: ServerOrgChartProps): JSX.Element;
8
- displayName: string;
9
- };
@@ -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';
@@ -1,9 +0,0 @@
1
- /// <reference types="react" />
2
- import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
3
- /**
4
- * @hidden
5
- */
6
- export declare const ServerOrgChart: {
7
- (props: ServerOrgChartProps): JSX.Element;
8
- displayName: string;
9
- };