@progress/kendo-react-layout 4.14.0-dev.202112151745 → 4.14.0-dev.202201111645
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/dist/cdn/js/kendo-react-layout.js +1 -1
- package/dist/es/expansionpanel/ExpansionPanel.d.ts +6 -0
- package/dist/es/expansionpanel/ExpansionPanel.js +72 -0
- package/dist/es/expansionpanel/ExpansionPanelContent.d.ts +5 -0
- package/dist/es/expansionpanel/ExpansionPanelContent.js +21 -0
- package/dist/es/expansionpanel/index.d.ts +3 -0
- package/dist/es/expansionpanel/index.js +2 -0
- package/dist/es/expansionpanel/interfaces.d.ts +77 -0
- package/dist/es/expansionpanel/interfaces.js +0 -0
- package/dist/es/main.d.ts +5 -1
- package/dist/es/main.js +1 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/panelbar/PanelBar.d.ts +10 -30
- package/dist/es/panelbar/PanelBar.js +131 -45
- package/dist/es/panelbar/PanelBarItem.d.ts +1 -89
- package/dist/es/panelbar/PanelBarItem.js +3 -1
- package/dist/es/panelbar/interfaces/NavigationAction.d.ts +8 -0
- package/dist/es/panelbar/interfaces/NavigationAction.js +9 -0
- package/dist/es/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts +8 -0
- package/dist/es/panelbar/interfaces/PanelBarItemClickEventArguments.js +0 -0
- package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts +90 -0
- package/dist/es/panelbar/interfaces/PanelBarItemProps.js +0 -0
- package/dist/es/panelbar/{PanelBarInterface.d.ts → interfaces/PanelBarProps.d.ts} +19 -23
- package/dist/es/panelbar/interfaces/PanelBarProps.js +0 -0
- package/dist/es/panelbar/interfaces/PanelBarSelectEventArguments.d.ts +15 -0
- package/dist/es/panelbar/interfaces/PanelBarSelectEventArguments.js +0 -0
- package/dist/es/panelbar/interfaces/RenderPanelBarItem.d.ts +16 -0
- package/dist/es/panelbar/interfaces/RenderPanelBarItem.js +0 -0
- package/dist/es/panelbar/util.d.ts +19 -5
- package/dist/es/panelbar/util.js +75 -21
- package/dist/npm/expansionpanel/ExpansionPanel.d.ts +6 -0
- package/dist/npm/expansionpanel/ExpansionPanel.js +74 -0
- package/dist/npm/expansionpanel/ExpansionPanelContent.d.ts +5 -0
- package/dist/npm/expansionpanel/ExpansionPanelContent.js +23 -0
- package/dist/npm/expansionpanel/index.d.ts +3 -0
- package/dist/npm/expansionpanel/index.js +7 -0
- package/dist/npm/expansionpanel/interfaces.d.ts +77 -0
- package/dist/npm/{panelbar/PanelBarInterface.js → expansionpanel/interfaces.js} +0 -1
- package/dist/npm/main.d.ts +5 -1
- package/dist/npm/main.js +1 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/panelbar/PanelBar.d.ts +10 -30
- package/dist/npm/panelbar/PanelBar.js +132 -46
- package/dist/npm/panelbar/PanelBarItem.d.ts +1 -89
- package/dist/npm/panelbar/PanelBarItem.js +3 -1
- package/dist/npm/panelbar/interfaces/NavigationAction.d.ts +8 -0
- package/dist/npm/panelbar/interfaces/NavigationAction.js +11 -0
- package/dist/npm/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts +8 -0
- package/dist/npm/panelbar/interfaces/PanelBarItemClickEventArguments.js +2 -0
- package/dist/npm/panelbar/interfaces/PanelBarItemProps.d.ts +90 -0
- package/dist/npm/panelbar/interfaces/PanelBarItemProps.js +2 -0
- package/dist/npm/panelbar/{PanelBarInterface.d.ts → interfaces/PanelBarProps.d.ts} +19 -23
- package/dist/npm/panelbar/interfaces/PanelBarProps.js +2 -0
- package/dist/npm/panelbar/interfaces/PanelBarSelectEventArguments.d.ts +15 -0
- package/dist/npm/panelbar/interfaces/PanelBarSelectEventArguments.js +2 -0
- package/dist/npm/panelbar/interfaces/RenderPanelBarItem.d.ts +16 -0
- package/dist/npm/panelbar/interfaces/RenderPanelBarItem.js +2 -0
- package/dist/npm/panelbar/util.d.ts +19 -5
- package/dist/npm/panelbar/util.js +77 -21
- package/dist/systemjs/kendo-react-layout.js +1 -1
- package/package.json +15 -14
- package/dist/es/panelbar/PanelBarInterface.js +0 -1
- package/dist/es/panelbar/services/navigationService.d.ts +0 -23
- package/dist/es/panelbar/services/navigationService.js +0 -51
- package/dist/es/panelbar/services/selectionService.d.ts +0 -23
- package/dist/es/panelbar/services/selectionService.js +0 -88
- package/dist/npm/panelbar/services/navigationService.d.ts +0 -23
- package/dist/npm/panelbar/services/navigationService.js +0 -53
- package/dist/npm/panelbar/services/selectionService.d.ts +0 -23
- package/dist/npm/panelbar/services/selectionService.js +0 -90
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { NavigationAction } from './
|
|
6
|
-
/**
|
|
7
|
-
* Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
|
|
8
|
-
*/
|
|
9
|
-
export interface PanelBarProps extends PanelBarInterface {
|
|
10
|
-
/**
|
|
11
|
-
* The child can be either a single PanelBarItem or a PanelBarItem array.
|
|
12
|
-
*/
|
|
13
|
-
children?: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* The class name that is set to the PanelBar.
|
|
16
|
-
*/
|
|
17
|
-
className?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
|
|
20
|
-
*/
|
|
21
|
-
keepItemsMounted?: boolean;
|
|
22
|
-
}
|
|
3
|
+
import { PanelBarProps } from '../main';
|
|
4
|
+
import { PanelBarItemClickEventArguments } from './interfaces/PanelBarItemClickEventArguments';
|
|
5
|
+
import { NavigationAction } from './interfaces/NavigationAction';
|
|
23
6
|
/**
|
|
24
7
|
* @hidden
|
|
25
8
|
*/
|
|
@@ -60,15 +43,12 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
|
|
|
60
43
|
readonly state: PanelBarState;
|
|
61
44
|
private activeDescendant?;
|
|
62
45
|
private _element;
|
|
63
|
-
private _selectionService;
|
|
64
|
-
private _navigationService;
|
|
65
46
|
private nextTickId;
|
|
66
|
-
private readonly
|
|
47
|
+
private readonly expandMode;
|
|
48
|
+
private readonly selectedItem;
|
|
49
|
+
private readonly expandedItems;
|
|
50
|
+
private readonly children;
|
|
67
51
|
constructor(props: PanelBarProps);
|
|
68
|
-
/**
|
|
69
|
-
* @hidden
|
|
70
|
-
*/
|
|
71
|
-
componentDidUpdate(prevProps: PanelBarProps): void;
|
|
72
52
|
/**
|
|
73
53
|
* @hidden
|
|
74
54
|
*/
|
|
@@ -76,15 +56,15 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
|
|
|
76
56
|
/**
|
|
77
57
|
* @hidden
|
|
78
58
|
*/
|
|
79
|
-
onSelect: (
|
|
59
|
+
onSelect: (event: any) => void;
|
|
80
60
|
/**
|
|
81
61
|
* @hidden
|
|
82
62
|
*/
|
|
83
|
-
onFocus: (
|
|
63
|
+
onFocus: (event: any, step?: number) => void;
|
|
84
64
|
/**
|
|
85
65
|
* @hidden
|
|
86
66
|
*/
|
|
87
|
-
onNavigate: (action: NavigationAction) => void;
|
|
67
|
+
onNavigate: (event: any, action: NavigationAction) => void;
|
|
88
68
|
/**
|
|
89
69
|
* @hidden
|
|
90
70
|
*/
|
|
@@ -28,11 +28,10 @@ var React = require("react");
|
|
|
28
28
|
var PropTypes = require("prop-types");
|
|
29
29
|
var PanelBarItem_1 = require("./PanelBarItem");
|
|
30
30
|
var util_1 = require("./util");
|
|
31
|
-
var selectionService_1 = require("./services/selectionService");
|
|
32
|
-
var navigationService_1 = require("./services/navigationService");
|
|
33
31
|
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
34
32
|
var kendo_react_common_2 = require("@progress/kendo-react-common");
|
|
35
33
|
var package_metadata_1 = require("../package-metadata");
|
|
34
|
+
var NavigationAction_1 = require("./interfaces/NavigationAction");
|
|
36
35
|
var PanelBar = /** @class */ (function (_super) {
|
|
37
36
|
__extends(PanelBar, _super);
|
|
38
37
|
function PanelBar(props) {
|
|
@@ -42,44 +41,88 @@ var PanelBar = /** @class */ (function (_super) {
|
|
|
42
41
|
* @hidden
|
|
43
42
|
*/
|
|
44
43
|
_this.handleSelect = function (event) {
|
|
45
|
-
|
|
46
|
-
_this.
|
|
47
|
-
_this._selectionService.focus(event.uniquePrivateKey, 0, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
|
|
44
|
+
_this.onSelect(event);
|
|
45
|
+
_this.onFocus(event);
|
|
48
46
|
};
|
|
49
47
|
/**
|
|
50
48
|
* @hidden
|
|
51
49
|
*/
|
|
52
|
-
_this.onSelect = function (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
_this.onSelect = function (event) {
|
|
51
|
+
var flattenChildren = util_1.flatChildren(React.Children.toArray(_this.children));
|
|
52
|
+
var selectedChild;
|
|
53
|
+
var newExpanded;
|
|
54
|
+
flattenChildren.forEach(function (child) {
|
|
55
|
+
if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
|
|
56
|
+
selectedChild = child;
|
|
59
57
|
}
|
|
60
58
|
});
|
|
59
|
+
switch (_this.expandMode) {
|
|
60
|
+
case 'single':
|
|
61
|
+
newExpanded = selectedChild.props.parentUniquePrivateKey.concat([selectedChild.props.uniquePrivateKey]);
|
|
62
|
+
if (util_1.isArrayEqual(_this.expandedItems, newExpanded)) {
|
|
63
|
+
if (selectedChild.props.parentUniquePrivateKey) {
|
|
64
|
+
newExpanded = selectedChild.props.parentUniquePrivateKey.slice();
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
newExpanded = [];
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
break;
|
|
71
|
+
case 'multiple':
|
|
72
|
+
newExpanded = _this.expandedItems.slice();
|
|
73
|
+
var index = newExpanded.indexOf(selectedChild.props.uniquePrivateKey);
|
|
74
|
+
index === -1 ? newExpanded.push(selectedChild.props.uniquePrivateKey) : newExpanded.splice(index, 1);
|
|
75
|
+
break;
|
|
76
|
+
default:
|
|
77
|
+
newExpanded = _this.expandedItems.slice();
|
|
78
|
+
break;
|
|
79
|
+
}
|
|
80
|
+
_this.setState({ selected: selectedChild.props.uniquePrivateKey, expanded: newExpanded });
|
|
81
|
+
if (_this.props.onSelect) {
|
|
82
|
+
_this.props.onSelect.call(undefined, {
|
|
83
|
+
target: selectedChild,
|
|
84
|
+
expandedItems: newExpanded
|
|
85
|
+
});
|
|
86
|
+
}
|
|
61
87
|
};
|
|
62
88
|
/**
|
|
63
89
|
* @hidden
|
|
64
90
|
*/
|
|
65
|
-
_this.onFocus = function (
|
|
66
|
-
|
|
67
|
-
|
|
91
|
+
_this.onFocus = function (event, step) {
|
|
92
|
+
if (step === void 0) { step = 0; }
|
|
93
|
+
var flattenChildren = util_1.flatVisibleChildren(React.Children.toArray(_this.children));
|
|
94
|
+
var focusedChild;
|
|
95
|
+
flattenChildren.forEach(function (child, ixd) {
|
|
96
|
+
if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
|
|
97
|
+
var index = ixd + step < 0
|
|
98
|
+
? 0
|
|
99
|
+
: ixd + step > flattenChildren.length
|
|
100
|
+
? flattenChildren.length - 1
|
|
101
|
+
: ixd + step;
|
|
102
|
+
focusedChild = flattenChildren[index];
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
if (focusedChild) {
|
|
106
|
+
_this.activeDescendant = focusedChild.props.id;
|
|
107
|
+
_this.setState({ focused: focusedChild.props.uniquePrivateKey });
|
|
108
|
+
}
|
|
68
109
|
};
|
|
69
110
|
/**
|
|
70
111
|
* @hidden
|
|
71
112
|
*/
|
|
72
|
-
_this.onNavigate = function (action) {
|
|
73
|
-
var
|
|
113
|
+
_this.onNavigate = function (event, action) {
|
|
114
|
+
var step;
|
|
74
115
|
switch (action) {
|
|
75
|
-
case
|
|
76
|
-
|
|
116
|
+
case NavigationAction_1.NavigationAction.Previous:
|
|
117
|
+
step = -1;
|
|
118
|
+
_this.onFocus(event, step);
|
|
77
119
|
break;
|
|
78
|
-
case
|
|
79
|
-
|
|
120
|
+
case NavigationAction_1.NavigationAction.Next:
|
|
121
|
+
step = 1;
|
|
122
|
+
_this.onFocus(event, step);
|
|
80
123
|
break;
|
|
81
|
-
case
|
|
82
|
-
_this.
|
|
124
|
+
case NavigationAction_1.NavigationAction.Toggle:
|
|
125
|
+
_this.onSelect(event);
|
|
83
126
|
break;
|
|
84
127
|
default:
|
|
85
128
|
}
|
|
@@ -97,18 +140,52 @@ var PanelBar = /** @class */ (function (_super) {
|
|
|
97
140
|
};
|
|
98
141
|
_this.handleKeyDown = function (event) {
|
|
99
142
|
var rtl = _this._element && (getComputedStyle(_this._element).direction === 'rtl') || false;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
143
|
+
if (event.target === event.currentTarget) {
|
|
144
|
+
var keyCode = event.keyCode;
|
|
145
|
+
var action = void 0;
|
|
146
|
+
switch (keyCode) {
|
|
147
|
+
case kendo_react_common_1.Keys.left:
|
|
148
|
+
action = !rtl ? NavigationAction_1.NavigationAction.Previous : NavigationAction_1.NavigationAction.Next;
|
|
149
|
+
break;
|
|
150
|
+
case kendo_react_common_1.Keys.up:
|
|
151
|
+
action = NavigationAction_1.NavigationAction.Previous;
|
|
152
|
+
break;
|
|
153
|
+
case kendo_react_common_1.Keys.right:
|
|
154
|
+
action = !rtl ? NavigationAction_1.NavigationAction.Next : NavigationAction_1.NavigationAction.Previous;
|
|
155
|
+
break;
|
|
156
|
+
case kendo_react_common_1.Keys.down:
|
|
157
|
+
action = NavigationAction_1.NavigationAction.Next;
|
|
158
|
+
break;
|
|
159
|
+
case kendo_react_common_1.Keys.space:
|
|
160
|
+
case kendo_react_common_1.Keys.enter:
|
|
161
|
+
action = NavigationAction_1.NavigationAction.Toggle;
|
|
162
|
+
break;
|
|
163
|
+
default:
|
|
164
|
+
action = null;
|
|
165
|
+
break;
|
|
166
|
+
}
|
|
167
|
+
if (action !== null) {
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
_this.onNavigate(event, action);
|
|
170
|
+
}
|
|
103
171
|
}
|
|
104
172
|
};
|
|
105
173
|
kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
174
|
+
var initialState = util_1.getInitialState(props, _this.expandMode);
|
|
175
|
+
if (!initialState.focused) {
|
|
176
|
+
initialState.focused = util_1.getFirstId(props);
|
|
177
|
+
}
|
|
178
|
+
_this.state = initialState;
|
|
109
179
|
return _this;
|
|
110
180
|
}
|
|
111
|
-
Object.defineProperty(PanelBar.prototype, "
|
|
181
|
+
Object.defineProperty(PanelBar.prototype, "expandMode", {
|
|
182
|
+
get: function () {
|
|
183
|
+
return this.props.expandMode || 'multiple';
|
|
184
|
+
},
|
|
185
|
+
enumerable: true,
|
|
186
|
+
configurable: true
|
|
187
|
+
});
|
|
188
|
+
Object.defineProperty(PanelBar.prototype, "selectedItem", {
|
|
112
189
|
get: function () {
|
|
113
190
|
var _a = this.props.selected, selected = _a === void 0 ? this.state.selected : _a;
|
|
114
191
|
return selected;
|
|
@@ -116,15 +193,30 @@ var PanelBar = /** @class */ (function (_super) {
|
|
|
116
193
|
enumerable: true,
|
|
117
194
|
configurable: true
|
|
118
195
|
});
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
196
|
+
Object.defineProperty(PanelBar.prototype, "expandedItems", {
|
|
197
|
+
get: function () {
|
|
198
|
+
var expanded = this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
|
|
199
|
+
return expanded;
|
|
200
|
+
},
|
|
201
|
+
enumerable: true,
|
|
202
|
+
configurable: true
|
|
203
|
+
});
|
|
204
|
+
Object.defineProperty(PanelBar.prototype, "children", {
|
|
205
|
+
get: function () {
|
|
206
|
+
var state = __assign({}, this.state, { selected: this.selectedItem });
|
|
207
|
+
var renderState = {
|
|
208
|
+
animation: this.props.animation,
|
|
209
|
+
keepItemsMounted: this.props.keepItemsMounted,
|
|
210
|
+
state: state,
|
|
211
|
+
expanded: this.expandedItems,
|
|
212
|
+
handleSelect: this.handleSelect,
|
|
213
|
+
children: this.props.children
|
|
214
|
+
};
|
|
215
|
+
return util_1.renderChildren(renderState);
|
|
216
|
+
},
|
|
217
|
+
enumerable: true,
|
|
218
|
+
configurable: true
|
|
219
|
+
});
|
|
128
220
|
/**
|
|
129
221
|
* @hidden
|
|
130
222
|
*/
|
|
@@ -133,16 +225,10 @@ var PanelBar = /** @class */ (function (_super) {
|
|
|
133
225
|
var ariaProps = {
|
|
134
226
|
'aria-activedescendant': this.activeDescendant
|
|
135
227
|
};
|
|
136
|
-
var state = __assign({}, this.state, { selected: this.selected });
|
|
137
|
-
var children = util_1.renderChildren(this.props.animation, this.props.keepItemsMounted, state, this.handleSelect, this.props.children);
|
|
138
228
|
var className = kendo_react_common_1.classNames('k-panelbar', this.props.className);
|
|
139
|
-
return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), children));
|
|
229
|
+
return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), this.children));
|
|
140
230
|
};
|
|
141
231
|
PanelBar.prototype.nextTick = function (f) {
|
|
142
|
-
// XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
|
|
143
|
-
// XXX: https://github.com/facebook/react/issues/3751
|
|
144
|
-
// Handles multiple focus events happening at the same time.
|
|
145
|
-
clearTimeout(this.nextTickId);
|
|
146
232
|
this.nextTickId = window.setTimeout(function () { return f(); });
|
|
147
233
|
};
|
|
148
234
|
/**
|
|
@@ -1,94 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as PropTypes from 'prop-types';
|
|
3
|
-
|
|
4
|
-
* Represents the props of the PanelBarItem component.
|
|
5
|
-
*/
|
|
6
|
-
export interface PanelBarItemProps {
|
|
7
|
-
/**
|
|
8
|
-
* Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
|
|
9
|
-
*/
|
|
10
|
-
animation?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Can be any of PanelBar items, an array of PanelBar items, or a custom component.
|
|
13
|
-
*/
|
|
14
|
-
children?: React.ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* The class name that is set to the PanelBarItem component.
|
|
17
|
-
*/
|
|
18
|
-
className?: string;
|
|
19
|
-
/**
|
|
20
|
-
* The class name that is set to the PanelBarItem header.
|
|
21
|
-
*/
|
|
22
|
-
headerClassName?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
|
|
25
|
-
*/
|
|
26
|
-
expanded?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
|
|
29
|
-
*/
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
onSelect?: Function;
|
|
35
|
-
/**
|
|
36
|
-
* @hidden
|
|
37
|
-
*/
|
|
38
|
-
level?: number;
|
|
39
|
-
/**
|
|
40
|
-
* Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
|
|
41
|
-
*/
|
|
42
|
-
icon?: string;
|
|
43
|
-
/**
|
|
44
|
-
* Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
|
|
45
|
-
*/
|
|
46
|
-
iconClass?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
|
|
49
|
-
*/
|
|
50
|
-
imageUrl?: string;
|
|
51
|
-
/**
|
|
52
|
-
* Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
|
|
53
|
-
*/
|
|
54
|
-
selected?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
|
|
57
|
-
*/
|
|
58
|
-
title?: React.ReactNode;
|
|
59
|
-
/**
|
|
60
|
-
* Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
|
|
61
|
-
*/
|
|
62
|
-
id?: string;
|
|
63
|
-
/**
|
|
64
|
-
* Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
|
|
65
|
-
*/
|
|
66
|
-
focused?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* @hidden
|
|
69
|
-
*/
|
|
70
|
-
parentExpanded?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* @hidden
|
|
73
|
-
*/
|
|
74
|
-
content?: any;
|
|
75
|
-
/**
|
|
76
|
-
* Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
|
|
77
|
-
*/
|
|
78
|
-
uniquePrivateKey?: string;
|
|
79
|
-
/**
|
|
80
|
-
* @hidden
|
|
81
|
-
*/
|
|
82
|
-
parentUniquePrivateKey?: string[];
|
|
83
|
-
/**
|
|
84
|
-
* @hidden
|
|
85
|
-
*/
|
|
86
|
-
keepItemsMounted?: boolean;
|
|
87
|
-
/**
|
|
88
|
-
* Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
|
|
89
|
-
*/
|
|
90
|
-
[customProp: string]: any;
|
|
91
|
-
}
|
|
3
|
+
import { PanelBarItemProps } from '../main';
|
|
92
4
|
/** @hidden */
|
|
93
5
|
interface PanelBarItemState {
|
|
94
6
|
show: boolean;
|
|
@@ -105,7 +105,9 @@ var PanelBarItem = /** @class */ (function (_super) {
|
|
|
105
105
|
var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
|
|
106
106
|
var opened = (!disabled && expanded);
|
|
107
107
|
var content = opened || keepItemsMounted
|
|
108
|
-
? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
|
|
108
|
+
? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
|
|
109
|
+
? (this.state.show ? 'block' : 'none')
|
|
110
|
+
: 'block' } }, children))
|
|
109
111
|
: null;
|
|
110
112
|
var child = ((animation !== undefined ? animation : true) && !disabled && children)
|
|
111
113
|
? (React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: 200, transitionExitDuration: 200, key: uniquePrivateKey + '_animation', style: animationStyle, children: content, childFactory: keepItemsMounted && this.childFactory, unmountOnExit: !keepItemsMounted, onBeforeEnter: function () { return keepItemsMounted && _this.setState({ show: true }); }, onAfterExited: function () { return keepItemsMounted && _this.setState({ show: false }); } }))
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/**
|
|
4
|
+
* @hidden
|
|
5
|
+
*/
|
|
6
|
+
var NavigationAction;
|
|
7
|
+
(function (NavigationAction) {
|
|
8
|
+
NavigationAction[NavigationAction["Toggle"] = 0] = "Toggle";
|
|
9
|
+
NavigationAction[NavigationAction["Next"] = 1] = "Next";
|
|
10
|
+
NavigationAction[NavigationAction["Previous"] = 2] = "Previous";
|
|
11
|
+
})(NavigationAction = exports.NavigationAction || (exports.NavigationAction = {}));
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* Represents the props of the PanelBarItem component.
|
|
4
|
+
*/
|
|
5
|
+
export interface PanelBarItemProps {
|
|
6
|
+
/**
|
|
7
|
+
* Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
|
|
8
|
+
*/
|
|
9
|
+
animation?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Can be any of PanelBar items, an array of PanelBar items, or a custom component.
|
|
12
|
+
*/
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* The class name that is set to the PanelBarItem component.
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* The class name that is set to the PanelBarItem header.
|
|
20
|
+
*/
|
|
21
|
+
headerClassName?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
|
|
24
|
+
*/
|
|
25
|
+
expanded?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
|
|
28
|
+
*/
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
33
|
+
onSelect?: Function;
|
|
34
|
+
/**
|
|
35
|
+
* @hidden
|
|
36
|
+
*/
|
|
37
|
+
level?: number;
|
|
38
|
+
/**
|
|
39
|
+
* Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
|
|
40
|
+
*/
|
|
41
|
+
icon?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
|
|
44
|
+
*/
|
|
45
|
+
iconClass?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
|
|
48
|
+
*/
|
|
49
|
+
imageUrl?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
|
|
52
|
+
*/
|
|
53
|
+
selected?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
|
|
56
|
+
*/
|
|
57
|
+
title?: React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
|
|
60
|
+
*/
|
|
61
|
+
id?: string;
|
|
62
|
+
/**
|
|
63
|
+
* Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
|
|
64
|
+
*/
|
|
65
|
+
focused?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* @hidden
|
|
68
|
+
*/
|
|
69
|
+
parentExpanded?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* @hidden
|
|
72
|
+
*/
|
|
73
|
+
content?: any;
|
|
74
|
+
/**
|
|
75
|
+
* Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
|
|
76
|
+
*/
|
|
77
|
+
uniquePrivateKey?: string;
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*/
|
|
81
|
+
parentUniquePrivateKey?: string[];
|
|
82
|
+
/**
|
|
83
|
+
* @hidden
|
|
84
|
+
*/
|
|
85
|
+
keepItemsMounted?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
|
|
88
|
+
*/
|
|
89
|
+
[customProp: string]: any;
|
|
90
|
+
}
|
|
@@ -1,33 +1,21 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
/**
|
|
4
|
-
* The arguments that are passed to the `onSelect` callback function.
|
|
5
|
-
*/
|
|
6
|
-
export interface PanelBarSelectEventArguments {
|
|
7
|
-
/**
|
|
8
|
-
* The selected PanelBar item.
|
|
9
|
-
*/
|
|
10
|
-
target: React.ReactElement<PanelBarItemProps>;
|
|
11
|
-
/**
|
|
12
|
-
* @hidden
|
|
13
|
-
*/
|
|
14
|
-
action: string;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export interface PanelBarItemClickEventArguments {
|
|
20
|
-
uniquePrivateKey: number;
|
|
21
|
-
target: PanelBarItem;
|
|
22
|
-
}
|
|
2
|
+
import { PanelBarSelectEventArguments } from '../../main';
|
|
23
3
|
/**
|
|
24
4
|
* Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
|
|
25
5
|
*/
|
|
26
6
|
export declare type PanelBarExpandMode = 'single' | 'multiple';
|
|
27
7
|
/**
|
|
28
|
-
*
|
|
8
|
+
* Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
|
|
29
9
|
*/
|
|
30
|
-
export interface
|
|
10
|
+
export interface PanelBarProps {
|
|
11
|
+
/**
|
|
12
|
+
* The child can be either a single PanelBarItem or a PanelBarItem array.
|
|
13
|
+
*/
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* The class name that is set to the PanelBar.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
31
19
|
/**
|
|
32
20
|
* Sets the animation state of the PanelBar.
|
|
33
21
|
*/
|
|
@@ -56,6 +44,14 @@ export interface PanelBarInterface {
|
|
|
56
44
|
* Sets the initial focused state of the PanelBar.
|
|
57
45
|
*/
|
|
58
46
|
focused?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
|
|
49
|
+
*/
|
|
50
|
+
keepItemsMounted?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Determines if the PanelBar is going to be used in controlled state.
|
|
53
|
+
*/
|
|
54
|
+
isControlled?: boolean;
|
|
59
55
|
/**
|
|
60
56
|
* Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
|
|
61
57
|
*/
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PanelBarItemProps } from '../interfaces/PanelBarItemProps';
|
|
3
|
+
/**
|
|
4
|
+
* The arguments that are passed to the `onSelect` callback function.
|
|
5
|
+
*/
|
|
6
|
+
export interface PanelBarSelectEventArguments {
|
|
7
|
+
/**
|
|
8
|
+
* The selected PanelBar item.
|
|
9
|
+
*/
|
|
10
|
+
target: React.ReactElement<PanelBarItemProps>;
|
|
11
|
+
/**
|
|
12
|
+
* The new expanded PanelBar items state.
|
|
13
|
+
*/
|
|
14
|
+
expandedItems: string[];
|
|
15
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PanelBarState } from '../PanelBar';
|
|
3
|
+
/**
|
|
4
|
+
* @hidden
|
|
5
|
+
*/
|
|
6
|
+
export interface RenderPanelBarItem {
|
|
7
|
+
animation?: boolean;
|
|
8
|
+
keepItemsMounted?: boolean;
|
|
9
|
+
state: PanelBarState;
|
|
10
|
+
expanded: string[];
|
|
11
|
+
handleSelect: any;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
parentExpanded?: boolean;
|
|
14
|
+
level?: number;
|
|
15
|
+
parentPrivateKey?: string[];
|
|
16
|
+
}
|