@progress/kendo-react-orgchart 6.1.1 → 7.0.0-develop.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +1 -1
- package/OrgChart.d.ts +10 -0
- package/{dist/npm/OrgChartOperationDescriptors.d.ts → OrgChartOperationDescriptors.d.ts} +4 -0
- package/{dist/es/client → client}/ClientOrgChart.d.ts +7 -3
- package/client/ExpandButton.d.ts +17 -0
- package/{dist/es/client → client}/OrgChartCard.d.ts +4 -0
- package/client/OrgChartCardBody.d.ts +16 -0
- package/{dist/npm/client → client}/OrgChartGroupContainer.d.ts +4 -0
- package/dist/cdn/js/kendo-react-orgchart.js +18 -1
- package/index.d.ts +12 -0
- package/index.js +18 -0
- package/index.mjs +1148 -0
- package/interfaces/ChildGroup.d.ts +20 -0
- package/{dist/npm/interfaces → interfaces}/OrgChartActionEvent.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/OrgChartExpandChangeEvent.d.ts +4 -1
- package/{dist/npm/interfaces → interfaces}/SeverOrgChartProps.d.ts +4 -1
- package/package-metadata.d.ts +9 -0
- package/package.json +29 -38
- package/{dist/es/processOrgChartItems.d.ts → processOrgChartItems.d.ts} +4 -0
- package/server/ServerGroupedOrgChart.d.ts +12 -0
- package/server/ServerOrgChart.d.ts +12 -0
- package/{dist/npm/server → server}/ServerOrgChartGroup.d.ts +4 -0
- package/{dist/npm/server → server}/ServerOrgChartNode.d.ts +5 -1
- package/theming/theme-service.d.ts +9 -0
- package/{dist/es/utils → utils}/consts.d.ts +4 -0
- package/about.md +0 -3
- package/dist/es/OrgChart.d.ts +0 -6
- package/dist/es/OrgChart.js +0 -67
- package/dist/es/OrgChartOperationDescriptors.d.ts +0 -76
- package/dist/es/OrgChartOperationDescriptors.js +0 -2
- package/dist/es/client/ClientOrgChart.js +0 -287
- package/dist/es/client/ExpandButton.d.ts +0 -13
- package/dist/es/client/ExpandButton.js +0 -23
- package/dist/es/client/OrgChartCard.js +0 -68
- package/dist/es/client/OrgChartCardBody.d.ts +0 -12
- package/dist/es/client/OrgChartCardBody.js +0 -13
- package/dist/es/client/OrgChartGroupContainer.d.ts +0 -19
- package/dist/es/client/OrgChartGroupContainer.js +0 -71
- package/dist/es/interfaces/ChildGroup.d.ts +0 -16
- package/dist/es/interfaces/ChildGroup.js +0 -1
- package/dist/es/interfaces/OrgChartActionEvent.d.ts +0 -22
- package/dist/es/interfaces/OrgChartActionEvent.js +0 -1
- package/dist/es/interfaces/OrgChartExpandChangeEvent.d.ts +0 -22
- package/dist/es/interfaces/OrgChartExpandChangeEvent.js +0 -1
- package/dist/es/interfaces/SeverOrgChartProps.d.ts +0 -106
- package/dist/es/interfaces/SeverOrgChartProps.js +0 -1
- package/dist/es/main.d.ts +0 -6
- package/dist/es/main.js +0 -3
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/processOrgChartItems.js +0 -163
- package/dist/es/server/ServerGroupedOrgChart.d.ts +0 -9
- package/dist/es/server/ServerGroupedOrgChart.js +0 -235
- package/dist/es/server/ServerOrgChart.d.ts +0 -9
- package/dist/es/server/ServerOrgChart.js +0 -192
- package/dist/es/server/ServerOrgChartGroup.d.ts +0 -96
- package/dist/es/server/ServerOrgChartGroup.js +0 -59
- package/dist/es/server/ServerOrgChartNode.d.ts +0 -75
- package/dist/es/server/ServerOrgChartNode.js +0 -57
- package/dist/es/theming/theme-service.d.ts +0 -5
- package/dist/es/theming/theme-service.js +0 -62
- package/dist/es/utils/consts.js +0 -72
- package/dist/npm/OrgChart.d.ts +0 -6
- package/dist/npm/OrgChart.js +0 -71
- package/dist/npm/OrgChartOperationDescriptors.js +0 -3
- package/dist/npm/client/ClientOrgChart.d.ts +0 -94
- package/dist/npm/client/ClientOrgChart.js +0 -291
- package/dist/npm/client/ExpandButton.d.ts +0 -13
- package/dist/npm/client/ExpandButton.js +0 -27
- package/dist/npm/client/OrgChartCard.d.ts +0 -19
- package/dist/npm/client/OrgChartCard.js +0 -72
- package/dist/npm/client/OrgChartCardBody.d.ts +0 -12
- package/dist/npm/client/OrgChartCardBody.js +0 -17
- package/dist/npm/client/OrgChartGroupContainer.js +0 -75
- package/dist/npm/interfaces/ChildGroup.d.ts +0 -16
- package/dist/npm/interfaces/ChildGroup.js +0 -2
- package/dist/npm/interfaces/OrgChartActionEvent.js +0 -2
- package/dist/npm/interfaces/OrgChartExpandChangeEvent.js +0 -2
- package/dist/npm/interfaces/SeverOrgChartProps.js +0 -2
- package/dist/npm/main.d.ts +0 -6
- package/dist/npm/main.js +0 -21
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/processOrgChartItems.d.ts +0 -51
- package/dist/npm/processOrgChartItems.js +0 -167
- package/dist/npm/server/ServerGroupedOrgChart.d.ts +0 -9
- package/dist/npm/server/ServerGroupedOrgChart.js +0 -239
- package/dist/npm/server/ServerOrgChart.d.ts +0 -9
- package/dist/npm/server/ServerOrgChart.js +0 -196
- package/dist/npm/server/ServerOrgChartGroup.js +0 -63
- package/dist/npm/server/ServerOrgChartNode.js +0 -61
- package/dist/npm/theming/theme-service.d.ts +0 -5
- package/dist/npm/theming/theme-service.js +0 -65
- package/dist/npm/utils/consts.d.ts +0 -72
- package/dist/npm/utils/consts.js +0 -75
- package/dist/systemjs/kendo-react-orgchart.js +0 -1
package/dist/npm/OrgChart.js
DELETED
|
@@ -1,71 +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
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.OrgChart = void 0;
|
|
26
|
-
var React = require("react");
|
|
27
|
-
var PropTypes = require("prop-types");
|
|
28
|
-
var package_metadata_1 = require("./package-metadata");
|
|
29
|
-
var ServerOrgChart_1 = require("./server/ServerOrgChart");
|
|
30
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
31
|
-
var ServerGroupedOrgChart_1 = require("./server/ServerGroupedOrgChart");
|
|
32
|
-
var ClientOrgChart_1 = require("./client/ClientOrgChart");
|
|
33
|
-
/**
|
|
34
|
-
* Represents the OrgChart component.
|
|
35
|
-
*/
|
|
36
|
-
var OrgChart = function (props) {
|
|
37
|
-
var combinedProps = __assign({ tabIndex: 0, navigatable: true, expandField: 'expanded', ariaLabel: 'Org Chart', idField: 'id', childrenField: 'items', avatarField: 'avatar', titleField: 'title', subtitleField: 'subtitle' }, props);
|
|
38
|
-
var cardsColors = combinedProps.cardsColors, onExpandChange = combinedProps.onExpandChange, onKeyDown = combinedProps.onKeyDown, onItemAction = combinedProps.onItemAction, onGroupAction = combinedProps.onGroupAction, onGroupBlur = combinedProps.onGroupBlur, onGroupFocus = combinedProps.onGroupFocus, id = combinedProps.id, other = __rest(combinedProps, ["cardsColors", "onExpandChange", "onKeyDown", "onItemAction", "onGroupAction", "onGroupBlur", "onGroupFocus", "id"]);
|
|
39
|
-
var generateId = React.useRef((0, kendo_react_common_1.guid)());
|
|
40
|
-
(0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
41
|
-
return (React.createElement(ClientOrgChart_1.ClientOrgChart, __assign({}, combinedProps), props.groupField
|
|
42
|
-
? React.createElement(ServerGroupedOrgChart_1.ServerGroupedOrgChart, __assign({ id: id || generateId.current }, other), props.children)
|
|
43
|
-
: React.createElement(ServerOrgChart_1.ServerOrgChart, __assign({ id: id || generateId.current }, other), props.children)));
|
|
44
|
-
};
|
|
45
|
-
exports.OrgChart = OrgChart;
|
|
46
|
-
exports.OrgChart.propTypes = {
|
|
47
|
-
className: PropTypes.string,
|
|
48
|
-
style: PropTypes.object,
|
|
49
|
-
id: PropTypes.string,
|
|
50
|
-
ariaLabel: PropTypes.string,
|
|
51
|
-
idField: PropTypes.string,
|
|
52
|
-
childrenField: PropTypes.string,
|
|
53
|
-
expandField: PropTypes.string,
|
|
54
|
-
titleField: PropTypes.string,
|
|
55
|
-
hasChildrenField: PropTypes.string,
|
|
56
|
-
subtitleField: PropTypes.string,
|
|
57
|
-
avatarField: PropTypes.string,
|
|
58
|
-
cardsColors: PropTypes.array,
|
|
59
|
-
data: PropTypes.array,
|
|
60
|
-
groupField: PropTypes.string,
|
|
61
|
-
cardHeight: PropTypes.number,
|
|
62
|
-
cardWidth: PropTypes.number,
|
|
63
|
-
groupTitleHeight: PropTypes.number,
|
|
64
|
-
groupSubtitleHeight: PropTypes.number,
|
|
65
|
-
verticalLine: PropTypes.number,
|
|
66
|
-
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
67
|
-
onExpandChange: PropTypes.func,
|
|
68
|
-
onItemAction: PropTypes.func,
|
|
69
|
-
onGroupAction: PropTypes.func
|
|
70
|
-
};
|
|
71
|
-
exports.OrgChart.displayName = 'KendoOrgChart';
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PropTypes from 'prop-types';
|
|
3
|
-
import { ServerOrgChartProps } from '../interfaces/SeverOrgChartProps';
|
|
4
|
-
import { OrgChartActionEvent } from '../interfaces/OrgChartActionEvent';
|
|
5
|
-
import { OrgChartExpandChangeEvent } from '../main';
|
|
6
|
-
/**
|
|
7
|
-
* Represents the props of the [KendoReact OrgChart component]({% slug overview_orgchart %}).
|
|
8
|
-
*/
|
|
9
|
-
export interface OrgChartProps extends ServerOrgChartProps {
|
|
10
|
-
/**
|
|
11
|
-
* Specifies if the OrgChart can be navigatable with keyboard.
|
|
12
|
-
* Defaults to `true`.
|
|
13
|
-
*/
|
|
14
|
-
navigatable?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Fires when a node or group is expanded.
|
|
17
|
-
*/
|
|
18
|
-
onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
|
|
19
|
-
/**
|
|
20
|
-
* @hidden
|
|
21
|
-
*/
|
|
22
|
-
onKeyDown?: (ev: OrgChartActionEvent) => void;
|
|
23
|
-
/**
|
|
24
|
-
* Triggers the item action event.
|
|
25
|
-
*/
|
|
26
|
-
onItemAction?: (ev: OrgChartActionEvent) => void;
|
|
27
|
-
/**
|
|
28
|
-
* Triggers the item double click action event.
|
|
29
|
-
*/
|
|
30
|
-
onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
|
|
31
|
-
/**
|
|
32
|
-
* Triggers the item contextmenu action event.
|
|
33
|
-
*/
|
|
34
|
-
onItemContextMenu?: (ev: OrgChartActionEvent) => void;
|
|
35
|
-
/**
|
|
36
|
-
* Triggers the group action event.
|
|
37
|
-
*/
|
|
38
|
-
onGroupAction?: (ev: OrgChartActionEvent) => void;
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
onGroupBlur?: (ev: OrgChartActionEvent) => void;
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
onGroupFocus?: (ev: OrgChartActionEvent) => void;
|
|
47
|
-
}
|
|
48
|
-
declare type OrgChartEventsContextType = {
|
|
49
|
-
cardColors?: string[];
|
|
50
|
-
onExpandChange?: (ev: OrgChartExpandChangeEvent) => void;
|
|
51
|
-
onKeyDown?: (ev: OrgChartActionEvent) => void;
|
|
52
|
-
onItemAction?: (ev: OrgChartActionEvent) => void;
|
|
53
|
-
onItemContextMenu?: (ev: OrgChartActionEvent) => void;
|
|
54
|
-
onItemDoubleClick?: (ev: OrgChartActionEvent) => void;
|
|
55
|
-
onGroupAction?: (ev: OrgChartActionEvent) => void;
|
|
56
|
-
onGroupBlur?: (ev: OrgChartActionEvent) => void;
|
|
57
|
-
onGroupFocus?: (ev: OrgChartActionEvent) => void;
|
|
58
|
-
};
|
|
59
|
-
export declare const OrgChartEventsContextContext: React.Context<OrgChartEventsContextType>;
|
|
60
|
-
/**
|
|
61
|
-
* @hidden
|
|
62
|
-
*/
|
|
63
|
-
export declare const ClientOrgChart: {
|
|
64
|
-
(props: OrgChartProps): JSX.Element;
|
|
65
|
-
propTypes: {
|
|
66
|
-
className: PropTypes.Requireable<string>;
|
|
67
|
-
style: PropTypes.Requireable<object>;
|
|
68
|
-
id: PropTypes.Requireable<string>;
|
|
69
|
-
ariaLabel: PropTypes.Requireable<string>;
|
|
70
|
-
idField: PropTypes.Requireable<string>;
|
|
71
|
-
childrenField: PropTypes.Requireable<string>;
|
|
72
|
-
expandField: PropTypes.Requireable<string>;
|
|
73
|
-
titleField: PropTypes.Requireable<string>;
|
|
74
|
-
hasChildrenField: PropTypes.Requireable<string>;
|
|
75
|
-
subtitleField: PropTypes.Requireable<string>;
|
|
76
|
-
avatarField: PropTypes.Requireable<string>;
|
|
77
|
-
cardsColors: PropTypes.Requireable<any[]>;
|
|
78
|
-
data: PropTypes.Requireable<any[]>;
|
|
79
|
-
groupField: PropTypes.Requireable<string>;
|
|
80
|
-
cardHeight: PropTypes.Requireable<number>;
|
|
81
|
-
cardWidth: PropTypes.Requireable<number>;
|
|
82
|
-
groupTitleHeight: PropTypes.Requireable<number>;
|
|
83
|
-
groupSubtitleHeight: PropTypes.Requireable<number>;
|
|
84
|
-
verticalLine: PropTypes.Requireable<number>;
|
|
85
|
-
height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
86
|
-
onExpandChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
87
|
-
onItemAction: PropTypes.Requireable<(...args: any[]) => any>;
|
|
88
|
-
onItemDoubleClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
89
|
-
onItemContextMenu: PropTypes.Requireable<(...args: any[]) => any>;
|
|
90
|
-
onGroupAction: PropTypes.Requireable<(...args: any[]) => any>;
|
|
91
|
-
};
|
|
92
|
-
displayName: string;
|
|
93
|
-
};
|
|
94
|
-
export {};
|
|
@@ -1,291 +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.ClientOrgChart = exports.OrgChartEventsContextContext = void 0;
|
|
27
|
-
var React = require("react");
|
|
28
|
-
var PropTypes = require("prop-types");
|
|
29
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
30
|
-
var theme_service_1 = require("../theming/theme-service");
|
|
31
|
-
var consts_1 = require("../utils/consts");
|
|
32
|
-
exports.OrgChartEventsContextContext = React.createContext({
|
|
33
|
-
cardColors: undefined,
|
|
34
|
-
onExpandChange: undefined,
|
|
35
|
-
onKeyDown: undefined,
|
|
36
|
-
onItemAction: undefined,
|
|
37
|
-
onItemContextMenu: undefined,
|
|
38
|
-
onItemDoubleClick: undefined,
|
|
39
|
-
onGroupAction: undefined,
|
|
40
|
-
onGroupBlur: undefined,
|
|
41
|
-
onGroupFocus: undefined
|
|
42
|
-
});
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
var ClientOrgChart = function (props) {
|
|
47
|
-
var combinedProps = __assign({ tabIndex: 0, navigatable: true, expandField: 'expanded', ariaLabel: 'Org Chart', idField: 'id', childrenField: 'items', avatarField: 'avatar', titleField: 'title', subtitleField: 'subtitle' }, props);
|
|
48
|
-
var navigatable = combinedProps.navigatable, id = combinedProps.id, tabIndex = combinedProps.tabIndex, className = combinedProps.className, style = combinedProps.style, data = combinedProps.data, groupField = combinedProps.groupField, cardWidth = combinedProps.cardWidth, cardHeight = combinedProps.cardHeight, groupTitleHeight = combinedProps.groupTitleHeight, groupSubtitleHeight = combinedProps.groupSubtitleHeight, verticalLine = combinedProps.verticalLine, idField = combinedProps.idField, childrenField = combinedProps.childrenField, expandField = combinedProps.expandField, hasChildrenField = combinedProps.hasChildrenField, avatarField = combinedProps.avatarField, titleField = combinedProps.titleField, subtitleField = combinedProps.subtitleField, onExpandChange = combinedProps.onExpandChange, onItemAction = combinedProps.onItemAction, onItemDoubleClick = combinedProps.onItemDoubleClick, onItemContextMenu = combinedProps.onItemContextMenu, onKeyDown = combinedProps.onKeyDown, onGroupAction = combinedProps.onGroupAction, onGroupBlur = combinedProps.onGroupBlur, onGroupFocus = combinedProps.onGroupFocus, cardsColors = combinedProps.cardsColors, ariaLabel = combinedProps.ariaLabel, itemRender = combinedProps.itemRender, groupTitleRender = combinedProps.groupTitleRender, groupSubtitleRender = combinedProps.groupSubtitleRender, height = combinedProps.height, children = combinedProps.children, other = __rest(combinedProps, ["navigatable", "id", "tabIndex", "className", "style", "data", "groupField", "cardWidth", "cardHeight", "groupTitleHeight", "groupSubtitleHeight", "verticalLine", "idField", "childrenField", "expandField", "hasChildrenField", "avatarField", "titleField", "subtitleField", "onExpandChange", "onItemAction", "onItemDoubleClick", "onItemContextMenu", "onKeyDown", "onGroupAction", "onGroupBlur", "onGroupFocus", "cardsColors", "ariaLabel", "itemRender", "groupTitleRender", "groupSubtitleRender", "height", "children"]);
|
|
49
|
-
var orgChartRef = React.useRef(null);
|
|
50
|
-
var navigation = React.useRef(new kendo_react_common_1.Navigation({
|
|
51
|
-
tabIndex: tabIndex,
|
|
52
|
-
root: orgChartRef,
|
|
53
|
-
selectors: [combinedProps.groupField ? '.k-orgchart-node-group-container' : '.k-orgchart-card'],
|
|
54
|
-
focusOptions: {}
|
|
55
|
-
}));
|
|
56
|
-
var _a = React.useState([]), cardColorsFromTheme = _a[0], setCardColorsFromTheme = _a[1];
|
|
57
|
-
var innerNavigation = React.useRef(null);
|
|
58
|
-
var onRight = function (target, nav, ev) {
|
|
59
|
-
ev.preventDefault();
|
|
60
|
-
nav.focusNext(target);
|
|
61
|
-
};
|
|
62
|
-
var onLeft = function (target, nav, ev) {
|
|
63
|
-
ev.preventDefault();
|
|
64
|
-
nav.focusPrevious(target);
|
|
65
|
-
};
|
|
66
|
-
var onUp = function (target, nav, ev, options) {
|
|
67
|
-
var _a;
|
|
68
|
-
ev.preventDefault();
|
|
69
|
-
var expanded = combinedProps.groupField
|
|
70
|
-
? options.items.some(function (i) { return i[combinedProps.expandField]; })
|
|
71
|
-
: options.item[combinedProps.expandField];
|
|
72
|
-
if (expanded && combinedProps.onExpandChange) {
|
|
73
|
-
combinedProps.onExpandChange.call(undefined, options);
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
var parentSelector = '.k-orgchart-group';
|
|
77
|
-
var current = (_a = target.closest(parentSelector)) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
|
|
78
|
-
var next = document.querySelector("[aria-owns=\"".concat(current, "\"]"));
|
|
79
|
-
if (next) {
|
|
80
|
-
nav.focusElement(next, target);
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
nav.focusPrevious(target);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
var onDown = function (target, nav, ev, options) {
|
|
88
|
-
var _a;
|
|
89
|
-
ev.preventDefault();
|
|
90
|
-
var expanded = combinedProps.groupField
|
|
91
|
-
? options.items.some(function (i) { return i[combinedProps.expandField]; })
|
|
92
|
-
: options.item[combinedProps.expandField];
|
|
93
|
-
var subItems = combinedProps.groupField
|
|
94
|
-
? options.items.find(function (i) { return i[combinedProps.childrenField]; })
|
|
95
|
-
: options.item[combinedProps.childrenField];
|
|
96
|
-
var hasChildren = combinedProps.groupField
|
|
97
|
-
? options.items.some(function (i) { return combinedProps.hasChildrenField && i[combinedProps.hasChildrenField]; })
|
|
98
|
-
: combinedProps.hasChildrenField && options.item[combinedProps.hasChildrenField];
|
|
99
|
-
var hasSubItems = combinedProps.groupField
|
|
100
|
-
? subItems && subItems[combinedProps.childrenField] && subItems[combinedProps.childrenField].length
|
|
101
|
-
: subItems && subItems.length;
|
|
102
|
-
if ((hasChildren || hasSubItems) && !expanded && combinedProps.onExpandChange) {
|
|
103
|
-
combinedProps.onExpandChange.call(undefined, options);
|
|
104
|
-
}
|
|
105
|
-
else {
|
|
106
|
-
var selector = combinedProps.groupField ? '.k-orgchart-node-group-container' : '.k-orgchart-card';
|
|
107
|
-
var current = target.getAttribute('aria-owns');
|
|
108
|
-
var next = (_a = document.getElementById(current)) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
|
|
109
|
-
if (next) {
|
|
110
|
-
nav.focusElement(next, target);
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
nav.focusNext(target);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
var onHome = function (_target, nav, ev) {
|
|
118
|
-
ev.preventDefault();
|
|
119
|
-
nav.focusElement(nav.first, null);
|
|
120
|
-
};
|
|
121
|
-
var onEnd = function (_target, nav, ev) {
|
|
122
|
-
ev.preventDefault();
|
|
123
|
-
nav.focusElement(nav.last, null);
|
|
124
|
-
};
|
|
125
|
-
var onEnter = function (target, _nav, ev, options) {
|
|
126
|
-
ev.stopPropagation();
|
|
127
|
-
var isGroupFocused = target.className.indexOf('k-orgchart-node-group-container') !== -1;
|
|
128
|
-
if (props.groupField && isGroupFocused) {
|
|
129
|
-
if (innerNavigation.current && innerNavigation.current.first) {
|
|
130
|
-
innerNavigation.current.focusElement(innerNavigation.current.first, null);
|
|
131
|
-
}
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
if (combinedProps.onItemAction) {
|
|
135
|
-
combinedProps.onItemAction({
|
|
136
|
-
event: ev,
|
|
137
|
-
item: options.item
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
var onEscape = function (target) {
|
|
142
|
-
if (props.groupField) {
|
|
143
|
-
var parentGroup = target.closest('.k-orgchart-node-group-container');
|
|
144
|
-
if (parentGroup) {
|
|
145
|
-
navigation.current.focusElement(parentGroup, null);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
React.useEffect(function () {
|
|
150
|
-
if (navigatable) {
|
|
151
|
-
if (navigation.current.first) {
|
|
152
|
-
navigation.current.first.setAttribute('tabindex', String(tabIndex));
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
if (!cardsColors) {
|
|
156
|
-
var doc = orgChartRef.current.ownerDocument || document;
|
|
157
|
-
(0, theme_service_1.loadTheme)(function (groupsColors) {
|
|
158
|
-
setCardColorsFromTheme(groupsColors);
|
|
159
|
-
}, doc);
|
|
160
|
-
}
|
|
161
|
-
}, [navigatable, tabIndex]);
|
|
162
|
-
var handleKeyDown = function (e) {
|
|
163
|
-
if (combinedProps.navigatable) {
|
|
164
|
-
// defaulted to this one but oddly didn't work in some cases
|
|
165
|
-
// navigation.current.triggerKeyboardEvent(e.event, e);
|
|
166
|
-
var event_1 = e.event;
|
|
167
|
-
var key = event_1.key === ' ' ? 'Space' : event_1.key;
|
|
168
|
-
var currentNavigation = props.groupField
|
|
169
|
-
? event_1.target.className.indexOf('k-orgchart-card') !== -1
|
|
170
|
-
? innerNavigation.current || navigation.current
|
|
171
|
-
: navigation.current
|
|
172
|
-
: navigation.current;
|
|
173
|
-
var target = event_1.target.closest(currentNavigation.selectors.join(','));
|
|
174
|
-
switch (key) {
|
|
175
|
-
case 'ArrowUp':
|
|
176
|
-
onUp(target, currentNavigation, event_1, e);
|
|
177
|
-
break;
|
|
178
|
-
case 'ArrowDown':
|
|
179
|
-
onDown(target, currentNavigation, event_1, e);
|
|
180
|
-
break;
|
|
181
|
-
case 'ArrowLeft':
|
|
182
|
-
onLeft(target, currentNavigation, event_1);
|
|
183
|
-
break;
|
|
184
|
-
case 'ArrowRight':
|
|
185
|
-
onRight(target, currentNavigation, event_1);
|
|
186
|
-
break;
|
|
187
|
-
case 'End':
|
|
188
|
-
onEnd(target, currentNavigation, event_1);
|
|
189
|
-
break;
|
|
190
|
-
case 'Home':
|
|
191
|
-
onHome(target, currentNavigation, event_1);
|
|
192
|
-
break;
|
|
193
|
-
case 'Enter':
|
|
194
|
-
onEnter(target, currentNavigation, event_1, e);
|
|
195
|
-
break;
|
|
196
|
-
case 'Escape':
|
|
197
|
-
onEscape(target);
|
|
198
|
-
break;
|
|
199
|
-
default:
|
|
200
|
-
break;
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
};
|
|
204
|
-
var handleItemAction = function (e) {
|
|
205
|
-
e.event.stopPropagation();
|
|
206
|
-
if (onItemAction) {
|
|
207
|
-
onItemAction.call(undefined, e);
|
|
208
|
-
}
|
|
209
|
-
if (combinedProps.navigatable) {
|
|
210
|
-
var closestOrgChartCard = e.event.target.closest('.k-orgchart-card');
|
|
211
|
-
if (closestOrgChartCard) {
|
|
212
|
-
navigation.current.focusElement(closestOrgChartCard, null);
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
};
|
|
216
|
-
var handleContextMenu = function (e) {
|
|
217
|
-
e.event.stopPropagation();
|
|
218
|
-
if (onItemAction) {
|
|
219
|
-
onItemAction.call(undefined, e);
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
var handleDoubleClick = function (e) {
|
|
223
|
-
e.event.stopPropagation();
|
|
224
|
-
if (onItemAction) {
|
|
225
|
-
onItemAction.call(undefined, e);
|
|
226
|
-
}
|
|
227
|
-
};
|
|
228
|
-
var handleGroupAction = function (e) {
|
|
229
|
-
if (onGroupAction) {
|
|
230
|
-
onGroupAction.call(undefined, e);
|
|
231
|
-
}
|
|
232
|
-
if (combinedProps.navigatable) {
|
|
233
|
-
var closestOrgChartCard = e.event.target.closest('.k-orgchart-node-group-container');
|
|
234
|
-
if (closestOrgChartCard) {
|
|
235
|
-
navigation.current.focusElement(closestOrgChartCard, null);
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
};
|
|
239
|
-
var handleGroupBlur = function (_e) {
|
|
240
|
-
innerNavigation.current = null;
|
|
241
|
-
};
|
|
242
|
-
var handleGroupFocus = function (e) {
|
|
243
|
-
innerNavigation.current = new kendo_react_common_1.Navigation({
|
|
244
|
-
tabIndex: 0,
|
|
245
|
-
root: e.containerRef,
|
|
246
|
-
selectors: ['.k-orgchart-card'],
|
|
247
|
-
focusOptions: {}
|
|
248
|
-
});
|
|
249
|
-
};
|
|
250
|
-
return (React.createElement("div", { style: style, ref: orgChartRef, className: (0, kendo_react_common_1.classNames)(className, consts_1.ORGCHART_CLASSNAME) },
|
|
251
|
-
React.createElement(exports.OrgChartEventsContextContext.Provider, __assign({ value: {
|
|
252
|
-
cardColors: cardsColors || cardColorsFromTheme,
|
|
253
|
-
onExpandChange: props.onExpandChange,
|
|
254
|
-
onKeyDown: handleKeyDown,
|
|
255
|
-
onItemAction: handleItemAction,
|
|
256
|
-
onItemDoubleClick: handleDoubleClick,
|
|
257
|
-
onItemContextMenu: handleContextMenu,
|
|
258
|
-
onGroupAction: handleGroupAction,
|
|
259
|
-
onGroupBlur: handleGroupBlur,
|
|
260
|
-
onGroupFocus: handleGroupFocus
|
|
261
|
-
} }, other), props.children)));
|
|
262
|
-
};
|
|
263
|
-
exports.ClientOrgChart = ClientOrgChart;
|
|
264
|
-
exports.ClientOrgChart.propTypes = {
|
|
265
|
-
className: PropTypes.string,
|
|
266
|
-
style: PropTypes.object,
|
|
267
|
-
id: PropTypes.string,
|
|
268
|
-
ariaLabel: PropTypes.string,
|
|
269
|
-
idField: PropTypes.string,
|
|
270
|
-
childrenField: PropTypes.string,
|
|
271
|
-
expandField: PropTypes.string,
|
|
272
|
-
titleField: PropTypes.string,
|
|
273
|
-
hasChildrenField: PropTypes.string,
|
|
274
|
-
subtitleField: PropTypes.string,
|
|
275
|
-
avatarField: PropTypes.string,
|
|
276
|
-
cardsColors: PropTypes.array,
|
|
277
|
-
data: PropTypes.array,
|
|
278
|
-
groupField: PropTypes.string,
|
|
279
|
-
cardHeight: PropTypes.number,
|
|
280
|
-
cardWidth: PropTypes.number,
|
|
281
|
-
groupTitleHeight: PropTypes.number,
|
|
282
|
-
groupSubtitleHeight: PropTypes.number,
|
|
283
|
-
verticalLine: PropTypes.number,
|
|
284
|
-
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
285
|
-
onExpandChange: PropTypes.func,
|
|
286
|
-
onItemAction: PropTypes.func,
|
|
287
|
-
onItemDoubleClick: PropTypes.func,
|
|
288
|
-
onItemContextMenu: PropTypes.func,
|
|
289
|
-
onGroupAction: PropTypes.func
|
|
290
|
-
};
|
|
291
|
-
exports.ClientOrgChart.displayName = 'KendoClientOrgChart';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* @hidden
|
|
4
|
-
*/
|
|
5
|
-
export interface ExpandButtonProps {
|
|
6
|
-
node?: any;
|
|
7
|
-
nodes?: any[];
|
|
8
|
-
expanded?: boolean;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export declare const ExpandButton: React.FunctionComponent<ExpandButtonProps>;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.ExpandButton = void 0;
|
|
5
|
-
var React = require("react");
|
|
6
|
-
var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
7
|
-
var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
8
|
-
var ClientOrgChart_1 = require("./ClientOrgChart");
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
var ExpandButton = function (props) {
|
|
13
|
-
var expanded = props.expanded, node = props.node, nodes = props.nodes;
|
|
14
|
-
var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
|
|
15
|
-
var onClick = function (event) {
|
|
16
|
-
if (context.onExpandChange) {
|
|
17
|
-
context.onExpandChange.call(undefined, {
|
|
18
|
-
event: event,
|
|
19
|
-
expand: !expanded,
|
|
20
|
-
item: node,
|
|
21
|
-
items: nodes
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
return (React.createElement(kendo_react_buttons_1.Button, { className: "k-orgchart-button", icon: expanded ? 'minus' : 'plus', tabIndex: -1, svgIcon: expanded ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.plusIcon, "aria-label": expanded ? 'collapse' : 'expand', onClick: onClick }));
|
|
26
|
-
};
|
|
27
|
-
exports.ExpandButton = ExpandButton;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* @hidden
|
|
4
|
-
*/
|
|
5
|
-
export interface OrgChartCardProps {
|
|
6
|
-
/**
|
|
7
|
-
* @hidden
|
|
8
|
-
*/
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
/**
|
|
11
|
-
* The styles that are applied to the OrgChart.
|
|
12
|
-
*/
|
|
13
|
-
style?: React.CSSProperties;
|
|
14
|
-
node?: any;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export declare const OrgChartCard: React.FunctionComponent<OrgChartCardProps>;
|
|
@@ -1,72 +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.OrgChartCard = void 0;
|
|
27
|
-
var React = require("react");
|
|
28
|
-
var kendo_react_layout_1 = require("@progress/kendo-react-layout");
|
|
29
|
-
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
30
|
-
var ClientOrgChart_1 = require("./ClientOrgChart");
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
var OrgChartCard = function (props) {
|
|
35
|
-
var node = props.node, children = props.children, style = props.style, others = __rest(props, ["node", "children", "style"]);
|
|
36
|
-
var _a = React.useState(false), selected = _a[0], setSelected = _a[1];
|
|
37
|
-
var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
|
|
38
|
-
var handleKeyDown = function (event) {
|
|
39
|
-
if (context.onKeyDown) {
|
|
40
|
-
context.onKeyDown.call(undefined, {
|
|
41
|
-
event: event,
|
|
42
|
-
item: node
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
var handleClick = function (event) {
|
|
47
|
-
if (context.onItemAction) {
|
|
48
|
-
context.onItemAction.call(undefined, {
|
|
49
|
-
event: event,
|
|
50
|
-
item: node
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
var handleContextMenu = function (event) {
|
|
55
|
-
if (context.onItemContextMenu) {
|
|
56
|
-
context.onItemContextMenu.call(undefined, {
|
|
57
|
-
event: event,
|
|
58
|
-
item: node
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
var handleDoubleClick = function (event) {
|
|
63
|
-
if (context.onItemDoubleClick) {
|
|
64
|
-
context.onItemDoubleClick.call(undefined, {
|
|
65
|
-
event: event,
|
|
66
|
-
item: node
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
return (React.createElement(kendo_react_layout_1.Card, __assign({ role: "treeitem", className: (0, kendo_react_common_1.classNames)('k-orgchart-card', { 'k-focus': selected }), onClick: handleClick, onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, style: style, "aria-selected": selected, "aria-keyshortcuts": "Enter", onFocus: function () { return setSelected(true); }, onBlur: function () { return setSelected(false); } }, others), children));
|
|
71
|
-
};
|
|
72
|
-
exports.OrgChartCard = OrgChartCard;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* @hidden
|
|
4
|
-
*/
|
|
5
|
-
export interface OrgChartCardBodyProps {
|
|
6
|
-
level: number;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export declare const OrgChartCardBody: React.FunctionComponent<OrgChartCardBodyProps>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.OrgChartCardBody = void 0;
|
|
5
|
-
var React = require("react");
|
|
6
|
-
var ClientOrgChart_1 = require("./ClientOrgChart");
|
|
7
|
-
var kendo_react_layout_1 = require("@progress/kendo-react-layout");
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
var OrgChartCardBody = function (props) {
|
|
12
|
-
var level = props.level, children = props.children;
|
|
13
|
-
var context = React.useContext(ClientOrgChart_1.OrgChartEventsContextContext);
|
|
14
|
-
var cardColor = context.cardColors ? context.cardColors[level] || 'green' : 'green';
|
|
15
|
-
return (React.createElement(kendo_react_layout_1.CardBody, { className: "k-hstack", style: { borderTopColor: cardColor } }, children));
|
|
16
|
-
};
|
|
17
|
-
exports.OrgChartCardBody = OrgChartCardBody;
|