@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,75 +0,0 @@
1
- "use strict";
2
- 'use client';
3
- var __assign = (this && this.__assign) || function () {
4
- __assign = Object.assign || function(t) {
5
- for (var s, i = 1, n = arguments.length; i < n; i++) {
6
- s = arguments[i];
7
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
- t[p] = s[p];
9
- }
10
- return t;
11
- };
12
- return __assign.apply(this, arguments);
13
- };
14
- var __rest = (this && this.__rest) || function (s, e) {
15
- var t = {};
16
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
17
- t[p] = s[p];
18
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
19
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
20
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
21
- t[p[i]] = s[p[i]];
22
- }
23
- return t;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.OrgChartGroupContainer = void 0;
27
- var React = require("react");
28
- var kendo_react_common_1 = require("@progress/kendo-react-common");
29
- var ClientOrgChart_1 = require("./ClientOrgChart");
30
- /**
31
- * @hidden
32
- */
33
- var OrgChartGroupContainer = function (props) {
34
- var nodes = props.nodes, children = props.children, style = props.style, others = __rest(props, ["nodes", "children", "style"]);
35
- var _a = React.useState(false), selected = _a[0], setSelected = _a[1];
36
- var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
37
- var containerRef = React.useRef(null);
38
- var handleKeyDown = function (event) {
39
- if (context.onKeyDown) {
40
- context.onKeyDown({
41
- event: event,
42
- items: nodes
43
- });
44
- }
45
- };
46
- var handleClick = function (event) {
47
- if (context.onGroupAction) {
48
- context.onGroupAction({
49
- event: event,
50
- items: nodes
51
- });
52
- }
53
- };
54
- var handleFocus = function (event) {
55
- setSelected(true);
56
- if (context.onGroupFocus) {
57
- context.onGroupFocus({
58
- event: event,
59
- items: nodes,
60
- containerRef: containerRef
61
- });
62
- }
63
- };
64
- var handleBlur = function (event) {
65
- setSelected(false);
66
- if (context.onGroupBlur) {
67
- context.onGroupBlur({
68
- event: event,
69
- items: nodes
70
- });
71
- }
72
- };
73
- return (React.createElement("div", __assign({ role: "treeitem", "aria-selected": selected, ref: containerRef, className: (0, kendo_react_common_1.classNames)('k-orgchart-node-group-container', 'k-vstack', { 'k-focus': selected }), style: style, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur }, others), children));
74
- };
75
- exports.OrgChartGroupContainer = OrgChartGroupContainer;
@@ -1,16 +0,0 @@
1
- /**
2
- * @hidden
3
- */
4
- export interface ChildGroup {
5
- items: any[];
6
- groupedItems: any[];
7
- level: number;
8
- ids: number[];
9
- parentId: number;
10
- hasChildren: boolean;
11
- orientation: 'horizontal' | 'vertical';
12
- width: number | null;
13
- childLineWidths?: number[];
14
- left?: number;
15
- top?: number;
16
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
@@ -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/npm/main.js DELETED
@@ -1,21 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.ServerOrgChart = void 0;
18
- var ServerOrgChart_1 = require("./server/ServerOrgChart");
19
- Object.defineProperty(exports, "ServerOrgChart", { enumerable: true, get: function () { return ServerOrgChart_1.ServerOrgChart; } });
20
- __exportStar(require("./OrgChart"), exports);
21
- __exportStar(require("./processOrgChartItems"), exports);
@@ -1,5 +0,0 @@
1
- import { PackageMetadata } from '@progress/kendo-licensing';
2
- /**
3
- * @hidden
4
- */
5
- export declare const packageMetadata: PackageMetadata;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.packageMetadata = void 0;
4
- /**
5
- * @hidden
6
- */
7
- exports.packageMetadata = {
8
- name: '@progress/kendo-react-orgchart',
9
- productName: 'KendoReact',
10
- productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1700065534,
12
- version: '',
13
- 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'
14
- };
@@ -1,51 +0,0 @@
1
- import { OrgChartOperationDescriptors } from './OrgChartOperationDescriptors';
2
- /**
3
- * A helper function which applies the specified operation descriptors to the data.
4
- * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
5
- * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
6
- * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
7
- *
8
- * @param data - The data that will be processed.
9
- * @param operations - The operation descriptors that will be applied to the data.
10
- * @returns - The processed copy of the input data.
11
- *
12
- * @example
13
- * ```jsx
14
- * class App extends React.Component {
15
- * state = { items: tree, expand: [], select: [], check: [] };
16
- * render() {
17
- * const { expand, select, check } = this.state;
18
- * return (
19
- * <OrgChart
20
- * data={processOrgChartItems(this.state.items, { expand, select, check })}
21
- * expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
22
- * onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
23
- * onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
24
- * />
25
- * );
26
- * }
27
- * onExpandChange = (event) => {
28
- * let expand = this.state.expand.slice();
29
- * const index = expand.indexOf(event.itemHierarchicalIndex);
30
- * index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
31
- * this.setState({ expand });
32
- * }
33
- * }
34
- *
35
- * const tree = [{
36
- * text: 'Item1',
37
- * items: [
38
- * { text: 'Item1.1' },
39
- * { text: 'Item1.2' },
40
- * { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
41
- * }, {
42
- * text: 'Item2', disabled: true,
43
- * items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
44
- * }, {
45
- * text: 'Item3'
46
- * }];
47
- *
48
- * ReactDOM.render(<App />, document.querySelector('my-app'));
49
- * ```
50
- */
51
- export declare function processOrgChartItems(data: any[] | null | undefined, operations: OrgChartOperationDescriptors): any[];
@@ -1,167 +0,0 @@
1
- "use strict";
2
- /* eslint-disable max-len */
3
- var __assign = (this && this.__assign) || function () {
4
- __assign = Object.assign || function(t) {
5
- for (var s, i = 1, n = arguments.length; i < n; i++) {
6
- s = arguments[i];
7
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
- t[p] = s[p];
9
- }
10
- return t;
11
- };
12
- return __assign.apply(this, arguments);
13
- };
14
- Object.defineProperty(exports, "__esModule", { value: true });
15
- exports.processOrgChartItems = void 0;
16
- var kendo_react_common_1 = require("@progress/kendo-react-common");
17
- var consts_1 = require("./utils/consts");
18
- /**
19
- * A helper function which applies the specified operation descriptors to the data.
20
- * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
21
- * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
22
- * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
23
- *
24
- * @param data - The data that will be processed.
25
- * @param operations - The operation descriptors that will be applied to the data.
26
- * @returns - The processed copy of the input data.
27
- *
28
- * @example
29
- * ```jsx
30
- * class App extends React.Component {
31
- * state = { items: tree, expand: [], select: [], check: [] };
32
- * render() {
33
- * const { expand, select, check } = this.state;
34
- * return (
35
- * <OrgChart
36
- * data={processOrgChartItems(this.state.items, { expand, select, check })}
37
- * expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
38
- * onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
39
- * onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
40
- * />
41
- * );
42
- * }
43
- * onExpandChange = (event) => {
44
- * let expand = this.state.expand.slice();
45
- * const index = expand.indexOf(event.itemHierarchicalIndex);
46
- * index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
47
- * this.setState({ expand });
48
- * }
49
- * }
50
- *
51
- * const tree = [{
52
- * text: 'Item1',
53
- * items: [
54
- * { text: 'Item1.1' },
55
- * { text: 'Item1.2' },
56
- * { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
57
- * }, {
58
- * text: 'Item2', disabled: true,
59
- * items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
60
- * }, {
61
- * text: 'Item3'
62
- * }];
63
- *
64
- * ReactDOM.render(<App />, document.querySelector('my-app'));
65
- * ```
66
- */
67
- function processOrgChartItems(data, operations) {
68
- if (!data || !data.length) {
69
- return [];
70
- }
71
- var result = data;
72
- var cloneField = operations.cloneField || 'cloned';
73
- var expandField = operations.expandField || consts_1.EXPAND_FIELD;
74
- var selectField = operations.selectField || consts_1.SELECT_FIELD;
75
- var checkField = operations.checkField || consts_1.CHECK_FIELD;
76
- var childrenField = operations.childrenField || consts_1.CHILDREN_FIELD;
77
- result = handleOperation(result, expandField, operations.expand, cloneField, childrenField);
78
- result = handleOperation(result, selectField, operations.select, cloneField, childrenField);
79
- result = handleOperation(result, checkField, operations.check, cloneField, childrenField);
80
- applyCheckIndeterminate(result, childrenField, operations.check);
81
- return result;
82
- }
83
- exports.processOrgChartItems = processOrgChartItems;
84
- function handleOperation(items, defaultField, operation, cloneField, childrenField) {
85
- if (operation) {
86
- var _a = parseOperation(operation, defaultField), ids = _a.ids, field = _a.field;
87
- var indices = !(0, kendo_react_common_1.isArray)(operation) && operation.idField ? (0, kendo_react_common_1.resolveItemsIds)(ids, operation.idField, items, childrenField) : ids;
88
- return raiseFlags(items, indices, field, cloneField, childrenField);
89
- }
90
- else {
91
- return items;
92
- }
93
- }
94
- function parseOperation(operation, defaultField) {
95
- var ids;
96
- var field;
97
- if ((0, kendo_react_common_1.isArray)(operation)) {
98
- ids = operation;
99
- field = defaultField;
100
- }
101
- else {
102
- ids = operation.ids || [];
103
- field = operation.operationField || defaultField;
104
- }
105
- return { ids: ids, field: field };
106
- }
107
- function raiseFlags(items, indices, field, cloneField, childrenField) {
108
- var result = items;
109
- indices.forEach(function (itemIndex) {
110
- result = (0, kendo_react_common_1.updateItem)(result, itemIndex, function (item) { return raiseNestedFlag(field, item); }, cloneField, childrenField);
111
- });
112
- return result;
113
- }
114
- function raiseNestedFlag(fieldName, dataItem) {
115
- var fields = (fieldName || '').split('.');
116
- var item = dataItem;
117
- for (var index = 0; index < fields.length; index++) {
118
- var field = fields[index];
119
- if (index === fields.length - 1) {
120
- item[field] = true;
121
- }
122
- else if (item[field] !== undefined) {
123
- item[field] = __assign({}, item[field]);
124
- item = item[field];
125
- }
126
- else {
127
- return;
128
- }
129
- }
130
- }
131
- function applyCheckIndeterminate(items, childrenField, check) {
132
- if (check && !(0, kendo_react_common_1.isArray)(check) && check.applyCheckIndeterminate) {
133
- var checkField = parseOperation(check, consts_1.CHECK_FIELD).field;
134
- var checkIndeterminateField = check.checkIndeterminateField || consts_1.CHECK_INDETERMINATE_FIELD;
135
- for (var i = 0; i < items.length; i++) {
136
- var item = items[i];
137
- var subItems = item[childrenField];
138
- if (subItems) {
139
- applyCheckIndeterminateHelper(subItems, (0, kendo_react_common_1.getNestedValue)(checkField, item) ? [] : [item], childrenField, checkField, checkIndeterminateField);
140
- }
141
- }
142
- }
143
- }
144
- function applyCheckIndeterminateHelper(data, parents, childrenField, checkField, checkIndeterminateField) {
145
- // The updates will be direct because the corresponding items
146
- // are already cloned because of their checked children.
147
- var parentsAlreadyUpdated = false;
148
- for (var i = 0; i < data.length; i++) {
149
- var item = data[i];
150
- if ((0, kendo_react_common_1.getNestedValue)(checkField, item)) {
151
- if (!parentsAlreadyUpdated) {
152
- for (var j = 0; j < parents.length; j++) {
153
- raiseNestedFlag(checkIndeterminateField, parents[j]);
154
- }
155
- }
156
- parentsAlreadyUpdated = true;
157
- if (item[childrenField]) {
158
- applyCheckIndeterminateHelper(item[childrenField], [], childrenField, checkField, checkIndeterminateField);
159
- }
160
- }
161
- else {
162
- if (item[childrenField]) {
163
- applyCheckIndeterminateHelper(item[childrenField], parentsAlreadyUpdated ? [item] : parents.concat([item]), childrenField, checkField, checkIndeterminateField);
164
- }
165
- }
166
- }
167
- }
@@ -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,239 +0,0 @@
1
- "use strict";
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
- Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.ServerGroupedOrgChart = void 0;
15
- var React = require("react");
16
- var kendo_react_common_1 = require("@progress/kendo-react-common");
17
- var ServerOrgChartNode_1 = require("./ServerOrgChartNode");
18
- var ServerOrgChartGroup_1 = require("./ServerOrgChartGroup");
19
- var kendo_data_query_1 = require("@progress/kendo-data-query");
20
- var consts_1 = require("../utils/consts");
21
- var setDataByGroups = function (_a) {
22
- 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;
23
- data.forEach(function (element) {
24
- var items = element[childrenField];
25
- var expanded = element[expandField];
26
- if (expanded && items && items.length) {
27
- var hasChildren = items.some(function (it) { return it[childrenField] && it[childrenField].length
28
- || (hasChildrenField && it[hasChildrenField]); });
29
- var orientation_1 = hasChildren ? 'horizontal' : 'vertical';
30
- var width = hasChildren ? null : cardWidth + 2 * consts_1.HORIZONTAL_GAP;
31
- var alreadyAdded = dataByGroups.find(function (dbg) { return dbg.parentId === parentId; });
32
- var alreadyAddedParent = dataByGroups.find(function (dbg) { return dbg.ids.includes(parentId); });
33
- var haveSameGroup = false;
34
- if (alreadyAdded) {
35
- var addedResourseID_1 = alreadyAdded.ids[0];
36
- var addedItem = alreadyAddedParent.items.find(function (i) { return i[idField] === addedResourseID_1; });
37
- var newItem = alreadyAddedParent.items.find(function (i) { return i[idField] === element[idField]; });
38
- haveSameGroup = addedItem[groupField] === newItem[groupField];
39
- }
40
- if (alreadyAdded && haveSameGroup) {
41
- alreadyAdded.ids.push(element[idField]);
42
- alreadyAdded.items = alreadyAdded.items.concat(items);
43
- }
44
- else {
45
- dataByGroups.push({
46
- ids: [element[idField]],
47
- items: items,
48
- level: level,
49
- parentId: parentId,
50
- hasChildren: hasChildren,
51
- orientation: orientation_1,
52
- width: width
53
- });
54
- }
55
- setDataByGroups({
56
- dataByGroups: dataByGroups,
57
- data: element[childrenField],
58
- childrenField: childrenField,
59
- cardWidth: cardWidth,
60
- idField: idField,
61
- expandField: expandField,
62
- hasChildrenField: hasChildrenField,
63
- groupField: groupField,
64
- level: level + 1,
65
- parentId: element[idField]
66
- });
67
- }
68
- });
69
- };
70
- var setGroupedGroupsWidths = function (dataByGroups, cardWidth) {
71
- var nodeWidth = cardWidth || consts_1.NODE_WIDTH;
72
- var groupsFromLeavesToRoot = dataByGroups.sort(function (a, b) { return b.level - a.level; });
73
- groupsFromLeavesToRoot.forEach(function (group) {
74
- if (!group.width) {
75
- var childGroups = groupsFromLeavesToRoot.filter(function (gr) { return group.ids.includes(gr.parentId); });
76
- if (childGroups.length) {
77
- var maxChildGroupWidth = Math.max.apply(Math, childGroups.map(function (chg) { return chg.width || 0; }));
78
- var maxChildGroupsLength = Math.max.apply(Math, childGroups.map(function (chg) { return chg.groupedItems.length || 0; }));
79
- var maxSubItemsWidth = Math.max.apply(Math, group.groupedItems.map(function (chg) {
80
- var subItemsLength = group.orientation === 'horizontal' ? chg.items.length : 1;
81
- return subItemsLength * (nodeWidth + 2 * consts_1.HORIZONTAL_GAP) + consts_1.HORIZONTAL_GAP * (subItemsLength - 1);
82
- }));
83
- var newGroupWidth = maxChildGroupWidth * maxChildGroupsLength + consts_1.HORIZONTAL_GAP * (maxChildGroupsLength - 1);
84
- group.width = Math.max(newGroupWidth, maxSubItemsWidth);
85
- }
86
- else {
87
- var maxSubItemsWidth = Math.max.apply(Math, group.groupedItems.map(function (chg) {
88
- var subItemsLength = group.orientation === 'horizontal' ? chg.items.length : 1;
89
- return subItemsLength * (nodeWidth + 2 * consts_1.HORIZONTAL_GAP) + consts_1.HORIZONTAL_GAP * (subItemsLength - 1);
90
- }));
91
- group.width = maxSubItemsWidth;
92
- }
93
- }
94
- });
95
- };
96
- var setGroupedGroupsLeft = function (dataByGroups, idField) {
97
- var groupsFromRootToLeaves = dataByGroups.sort(function (a, b) { return a.level - b.level; });
98
- groupsFromRootToLeaves.forEach(function (group) {
99
- var _a;
100
- if (group.level === 0) {
101
- return;
102
- }
103
- var parentGroup = groupsFromRootToLeaves.find(function (gr) { return gr.ids.includes(group.parentId); });
104
- 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;
105
- var subLinks = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.groupedItems) || [];
106
- var subLinkWidth = parentGroup.width
107
- ? (parentGroup.width - ((subLinks.length - 1) * consts_1.HORIZONTAL_GAP)) / subLinks.length
108
- : 0;
109
- if (!group.left) {
110
- var newLeft_1 = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.left) || 0;
111
- subLinks.forEach(function (_subG, index) {
112
- if (index < groupIndex) {
113
- newLeft_1 += subLinkWidth + consts_1.HORIZONTAL_GAP;
114
- }
115
- });
116
- group.left = newLeft_1;
117
- }
118
- var parentWidth = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.width) || 0;
119
- var parentGroupItems = (parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.groupedItems.length) || 1;
120
- var newWidth = ((parentWidth) - ((parentGroupItems - 1) * consts_1.HORIZONTAL_GAP)) / parentGroupItems;
121
- group.width = newWidth;
122
- if (parentGroup) {
123
- var childLinewidth = group.width - ((group.width - (group.groupedItems.length - 1) * consts_1.HORIZONTAL_GAP)) / (group.groupedItems.length);
124
- if (!parentGroup.childLineWidths) {
125
- parentGroup.childLineWidths = [childLinewidth];
126
- }
127
- else {
128
- (_a = parentGroup.childLineWidths) === null || _a === void 0 ? void 0 : _a.push(childLinewidth);
129
- }
130
- }
131
- });
132
- };
133
- var setGroupsTop = function (dataByGroups, cardHeight, groupTitleHeight, groupSubtitleHeight, verticalLine) {
134
- var nodeHeight = cardHeight || consts_1.NODE_HEIGHT;
135
- var vLineHeight = verticalLine || consts_1.VERTICAL_LINE;
136
- var groupNodeHeight = groupTitleHeight + groupSubtitleHeight + consts_1.GROUP_PADDINGS;
137
- dataByGroups.forEach(function (group) {
138
- var level = group.level;
139
- var newTop = ((nodeHeight + vLineHeight + groupNodeHeight) * level) + (consts_1.VERTICAL_LINE * (level ? level - 1 : 0)) -
140
- ((vLineHeight - consts_1.VERTICAL_LINE) * (level ? 1 : 0));
141
- group.top = newTop;
142
- });
143
- };
144
- var getHeight = function (dataByGroups, cardHeight, verticalLine, groupTitleHeight, groupSubtitleHeight) {
145
- var nodeHeight = cardHeight || consts_1.NODE_HEIGHT;
146
- var vLineHeight = verticalLine || consts_1.VERTICAL_LINE;
147
- var groupHeight = (groupTitleHeight || consts_1.GROUP_TITLE_HEIGHT) + (groupSubtitleHeight || consts_1.GROUP_SUBTITLE_HEIGHT);
148
- var groupNodeHeight = groupHeight + consts_1.GROUP_PADDINGS;
149
- var newHeight = Math.max.apply(Math, dataByGroups.map(function (group) {
150
- var top = group.top || 0;
151
- var maxItemsLength = Math.max.apply(Math, group.groupedItems.map(function (gr) { return gr.items.length; }));
152
- var plusButtonHeight = group.hasChildren ? consts_1.VERTICAL_LINE : 0;
153
- var height = group.orientation === 'horizontal'
154
- ? nodeHeight + vLineHeight + groupNodeHeight + vLineHeight + plusButtonHeight
155
- : maxItemsLength * (nodeHeight + vLineHeight) + groupNodeHeight + vLineHeight;
156
- return top + height;
157
- }));
158
- return newHeight;
159
- };
160
- /**
161
- * @hidden
162
- */
163
- var ServerGroupedOrgChart = function (props) {
164
- var defaultProps = {
165
- width: '100%',
166
- data: [],
167
- ariaLabel: 'Org Chart',
168
- idField: 'id',
169
- childrenField: 'items',
170
- avatarField: 'avatar',
171
- titleField: 'title',
172
- subtitleField: 'subtitle',
173
- expandField: 'expanded',
174
- orientation: 'horizontal'
175
- };
176
- 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;
177
- var dataByGroups = [{
178
- items: data,
179
- level: 0,
180
- hasChildren: true,
181
- orientation: 'horizontal',
182
- ids: [0],
183
- parentId: null,
184
- width: null
185
- }];
186
- setDataByGroups({
187
- dataByGroups: dataByGroups,
188
- data: data,
189
- cardWidth: cardWidth,
190
- expandField: expandField,
191
- hasChildrenField: hasChildrenField,
192
- childrenField: childrenField,
193
- idField: idField,
194
- groupField: groupField
195
- });
196
- dataByGroups.map(function (g) {
197
- g.groupedItems = (0, kendo_data_query_1.groupBy)(g.items, [{ field: groupField }]);
198
- });
199
- setGroupedGroupsWidths(dataByGroups, cardWidth);
200
- setGroupedGroupsLeft(dataByGroups, idField);
201
- setGroupsTop(dataByGroups, cardHeight || consts_1.NODE_HEIGHT, (groupTitleHeight || consts_1.GROUP_TITLE_HEIGHT), (groupSubtitleHeight || consts_1.GROUP_SUBTITLE_HEIGHT), verticalLine);
202
- var calculatedHeight = getHeight(dataByGroups, cardHeight || consts_1.NODE_HEIGHT, (groupTitleHeight || consts_1.GROUP_TITLE_HEIGHT), (groupSubtitleHeight || consts_1.GROUP_SUBTITLE_HEIGHT));
203
- return (React.createElement("div", { className: "k-orgchart-container", style: { width: width, height: height || calculatedHeight } }, dataByGroups.map(function (group) {
204
- var _a;
205
- var level = group.level;
206
- var groupInnerItems = group.groupedItems.map(function (grIt) {
207
- var expanded = grIt.items.some(function (i) { return i[expandField]; });
208
- return __assign(__assign({}, grIt), { expanded: expanded });
209
- });
210
- var groupedInnerExpandedItems = groupInnerItems.filter(function (gII) { return gII.expanded; });
211
- var justifyContent = level === 0 ? 'center' : 'around';
212
- var groupOrientation = 'horizontal';
213
- var cardColor = cardsColors ? cardsColors[level] || 'green' : 'green';
214
- 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: (0, kendo_react_common_1.classNames)('k-orgchart-group', "k-orgchart-level-".concat(level), 'k-pos-absolute', (_a = {},
215
- _a["k-".concat(kendo_react_common_1.kendoThemeMaps.orientationMap[groupOrientation])] = groupOrientation,
216
- _a["k-justify-content-".concat(justifyContent)] = justifyContent,
217
- _a['k-orgchart-group-h'] = props.groupField,
218
- _a)), style: {
219
- width: group.width || '100%',
220
- left: group.left,
221
- top: group.top
222
- } }, data.length > 0 &&
223
- groupInnerItems.map(function (groupedNodes, gIndex) {
224
- var hasChildren = groupedNodes.items.some(function (it) { return it[childrenField] && it[childrenField].length
225
- || (hasChildrenField && it[hasChildrenField]); });
226
- var subGroupWidth = group.width
227
- ? (group.width - ((groupInnerItems.length - 1) * consts_1.HORIZONTAL_GAP)) / groupInnerItems.length
228
- : undefined;
229
- var expandedIndex = groupedInnerExpandedItems.findIndex((function (gr) { return gr === groupedNodes; }));
230
- return (React.createElement(ServerOrgChartGroup_1.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 || consts_1.VERTICAL_LINE, title: groupedNodes.items[0][groupField || titleField], subtitle: groupField, orientation: group.orientation, childLineWidth: (hasChildren && groupedNodes.expanded && group.orientation === 'horizontal')
231
- ? group.childLineWidths[expandedIndex]
232
- : 0, line: hasChildren, nodes: groupedNodes.items, expanded: groupedNodes.expanded, plus: hasChildren }, groupedNodes.items.map(function (node, index) {
233
- return (React.createElement(ServerOrgChartNode_1.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));
234
- })));
235
- })));
236
- })));
237
- };
238
- exports.ServerGroupedOrgChart = ServerGroupedOrgChart;
239
- exports.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
- };