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