@progress/kendo-react-layout 5.12.0-dev.202302211107 → 5.12.0-dev.202302271006
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/actionsheet/ActionSheet.d.ts +32 -20
- package/dist/es/actionsheet/ActionSheet.js +91 -52
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/actionsheet/ActionSheet.d.ts +32 -20
- package/dist/npm/actionsheet/ActionSheet.js +90 -51
- package/dist/npm/package-metadata.js +1 -1
- package/dist/systemjs/kendo-react-layout.js +1 -1
- package/package.json +13 -13
|
@@ -62,18 +62,33 @@ export interface ActionSheetProps {
|
|
|
62
62
|
* Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
|
|
63
63
|
*/
|
|
64
64
|
navigatableElements: string[];
|
|
65
|
+
/**
|
|
66
|
+
* Controls the popup animation. By default, the open and close animations are disabled.
|
|
67
|
+
*/
|
|
68
|
+
animation?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* The CSS classes that will be rendered on the inner ActionSheet element.
|
|
71
|
+
*/
|
|
72
|
+
className?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Specifies the state of the ActionSheet.
|
|
75
|
+
*/
|
|
76
|
+
expand?: boolean;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*/
|
|
81
|
+
export interface ActionSheetState {
|
|
82
|
+
show?: boolean;
|
|
83
|
+
slide?: boolean;
|
|
65
84
|
}
|
|
66
85
|
/**
|
|
67
86
|
* Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
|
|
68
87
|
*/
|
|
69
|
-
export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
70
|
-
/**
|
|
71
|
-
* @hidden
|
|
72
|
-
*/
|
|
88
|
+
export declare class ActionSheet extends React.Component<ActionSheetProps, ActionSheetState> {
|
|
89
|
+
/** @hidden */
|
|
73
90
|
static displayName: string;
|
|
74
|
-
/**
|
|
75
|
-
* @hidden
|
|
76
|
-
*/
|
|
91
|
+
/** @hidden */
|
|
77
92
|
static propTypes: {
|
|
78
93
|
items: PropTypes.Requireable<any[]>;
|
|
79
94
|
subTitle: PropTypes.Requireable<string>;
|
|
@@ -81,28 +96,24 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
|
81
96
|
navigatable: PropTypes.Requireable<boolean>;
|
|
82
97
|
navigatableElements: PropTypes.Requireable<any[]>;
|
|
83
98
|
};
|
|
84
|
-
/**
|
|
85
|
-
* @hidden
|
|
86
|
-
*/
|
|
99
|
+
/** @hidden */
|
|
87
100
|
static defaultProps: {
|
|
88
101
|
navigatable: boolean;
|
|
89
102
|
navigatableElements: never[];
|
|
90
103
|
};
|
|
91
|
-
private
|
|
104
|
+
private actionSheetRef;
|
|
92
105
|
private actionSheetTitleClass;
|
|
93
106
|
private ariaLabeledBy;
|
|
94
107
|
private navigation?;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
108
|
+
private animationDuration;
|
|
109
|
+
private bottomPosition;
|
|
110
|
+
/** @hidden */
|
|
98
111
|
constructor(props: ActionSheetProps);
|
|
99
|
-
/**
|
|
100
|
-
* @hidden
|
|
101
|
-
*/
|
|
112
|
+
/** @hidden */
|
|
102
113
|
componentDidMount(): void;
|
|
103
|
-
/**
|
|
104
|
-
|
|
105
|
-
|
|
114
|
+
/** @hidden */
|
|
115
|
+
componentDidUpdate(_prevProps: Readonly<ActionSheetProps>, prevState: Readonly<ActionSheetState>): void;
|
|
116
|
+
/** @hidden */
|
|
106
117
|
render(): JSX.Element;
|
|
107
118
|
private handleKeyDown;
|
|
108
119
|
private onTab;
|
|
@@ -110,5 +121,6 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
|
110
121
|
private handleItemClick;
|
|
111
122
|
private onEnter;
|
|
112
123
|
private onEscape;
|
|
124
|
+
private hideActionSheet;
|
|
113
125
|
private children;
|
|
114
126
|
}
|
|
@@ -35,7 +35,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
35
35
|
};
|
|
36
36
|
import * as React from 'react';
|
|
37
37
|
import * as PropTypes from 'prop-types';
|
|
38
|
-
import {
|
|
38
|
+
import { Animation } from '@progress/kendo-react-animation';
|
|
39
|
+
import { validatePackage, Navigation, FOCUSABLE_ELEMENTS, classNames } from '@progress/kendo-react-common';
|
|
39
40
|
import { packageMetadata } from '../package-metadata';
|
|
40
41
|
import { ActionSheetItem } from './ActionSheetItem';
|
|
41
42
|
import { headerDisplayName } from './ActionSheetHeader';
|
|
@@ -46,14 +47,14 @@ import { contentDisplayName } from './ActionSheetContent';
|
|
|
46
47
|
*/
|
|
47
48
|
var ActionSheet = /** @class */ (function (_super) {
|
|
48
49
|
__extends(ActionSheet, _super);
|
|
49
|
-
/**
|
|
50
|
-
* @hidden
|
|
51
|
-
*/
|
|
50
|
+
/** @hidden */
|
|
52
51
|
function ActionSheet(props) {
|
|
53
52
|
var _this = _super.call(this, props) || this;
|
|
54
|
-
_this.
|
|
53
|
+
_this.actionSheetRef = React.createRef();
|
|
55
54
|
_this.actionSheetTitleClass = 'k-actionsheet-title';
|
|
56
55
|
_this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
|
|
56
|
+
_this.animationDuration = 300;
|
|
57
|
+
_this.bottomPosition = { bottom: '0', width: '100%' };
|
|
57
58
|
_this.handleKeyDown = function (e) {
|
|
58
59
|
if (_this.props.navigatable) {
|
|
59
60
|
_this.navigation.triggerKeyboardEvent(e);
|
|
@@ -69,24 +70,36 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
69
70
|
}
|
|
70
71
|
};
|
|
71
72
|
_this.handleOverlayClick = function (ev) {
|
|
73
|
+
/** Deprecated */
|
|
72
74
|
if (_this.props.onOverlayClick) {
|
|
73
75
|
_this.props.onOverlayClick.call(undefined, ev);
|
|
74
76
|
}
|
|
75
77
|
if (_this.props.onClose) {
|
|
76
78
|
_this.props.onClose.call(undefined, ev);
|
|
77
79
|
}
|
|
80
|
+
if (!_this.props.animation) {
|
|
81
|
+
_this.hideActionSheet();
|
|
82
|
+
}
|
|
78
83
|
};
|
|
79
84
|
_this.handleItemClick = function (ev) {
|
|
85
|
+
/** Deprecated */
|
|
80
86
|
if (_this.props.onItemClick) {
|
|
81
87
|
_this.props.onItemClick.call(undefined, ev);
|
|
82
88
|
}
|
|
83
89
|
if (_this.props.onItemSelect) {
|
|
84
90
|
_this.props.onItemSelect.call(undefined, ev);
|
|
85
91
|
}
|
|
92
|
+
if (!_this.props.animation) {
|
|
93
|
+
_this.hideActionSheet();
|
|
94
|
+
}
|
|
86
95
|
};
|
|
87
96
|
_this.onEnter = function (target, nav, ev) {
|
|
97
|
+
if (target.ariaDisabled) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
88
100
|
var isItem = target.className && target.className.indexOf('k-actionsheet-item') !== -1;
|
|
89
101
|
var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
|
|
102
|
+
/** Deprecated */
|
|
90
103
|
if (isItem && _this.props.onItemClick) {
|
|
91
104
|
ev.preventDefault();
|
|
92
105
|
var item = _this.props.items[allItems.indexOf(target)];
|
|
@@ -105,8 +118,12 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
105
118
|
title: item && item.title
|
|
106
119
|
});
|
|
107
120
|
}
|
|
121
|
+
if (!_this.props.animation) {
|
|
122
|
+
_this.hideActionSheet();
|
|
123
|
+
}
|
|
108
124
|
};
|
|
109
125
|
_this.onEscape = function (_target, _nav, ev) {
|
|
126
|
+
/** Deprecated */
|
|
110
127
|
if (_this.props.onOverlayClick) {
|
|
111
128
|
ev.preventDefault();
|
|
112
129
|
_this.props.onOverlayClick.call(undefined, ev);
|
|
@@ -115,22 +132,55 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
115
132
|
ev.preventDefault();
|
|
116
133
|
_this.props.onClose.call(undefined, ev);
|
|
117
134
|
}
|
|
135
|
+
if (!_this.props.animation) {
|
|
136
|
+
_this.hideActionSheet();
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
_this.hideActionSheet = function () {
|
|
140
|
+
_this.setState({ show: false });
|
|
141
|
+
};
|
|
142
|
+
_this.children = function (children) {
|
|
143
|
+
var components = {};
|
|
144
|
+
React.Children.forEach(children, function (child) {
|
|
145
|
+
components[child.type.displayName] = child;
|
|
146
|
+
});
|
|
147
|
+
return components;
|
|
148
|
+
};
|
|
149
|
+
_this.state = {
|
|
150
|
+
show: false,
|
|
151
|
+
slide: false
|
|
118
152
|
};
|
|
119
153
|
validatePackage(packageMetadata);
|
|
120
154
|
return _this;
|
|
121
155
|
}
|
|
122
|
-
/**
|
|
123
|
-
* @hidden
|
|
124
|
-
*/
|
|
156
|
+
/** @hidden */
|
|
125
157
|
ActionSheet.prototype.componentDidMount = function () {
|
|
158
|
+
if (this.props.expand && !this.state.show) {
|
|
159
|
+
this.setState({ show: true });
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
/** @hidden */
|
|
163
|
+
ActionSheet.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
126
164
|
var _this = this;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
this.
|
|
165
|
+
var currentRef = this.actionSheetRef.current;
|
|
166
|
+
if (this.props.expand && !this.state.show) {
|
|
167
|
+
this.setState({ show: true });
|
|
168
|
+
}
|
|
169
|
+
if (this.props.expand && this.state.show && !this.state.slide) {
|
|
170
|
+
this.setState({ slide: true });
|
|
171
|
+
}
|
|
172
|
+
if (!this.props.expand && this.state.show && this.state.slide) {
|
|
173
|
+
this.setState({ slide: false });
|
|
174
|
+
}
|
|
175
|
+
if (prevState !== this.state && this.state.slide && currentRef && !this.props.className) {
|
|
176
|
+
currentRef.style.setProperty('--kendo-actionsheet-height', 'auto');
|
|
177
|
+
currentRef.style.setProperty('--kendo-actionsheet-max-height', 'none');
|
|
178
|
+
}
|
|
179
|
+
if (currentRef) {
|
|
130
180
|
if (this.props.navigatable) {
|
|
131
181
|
this.navigation = new Navigation({
|
|
132
182
|
tabIndex: this.props.tabIndex || 0,
|
|
133
|
-
root: this.
|
|
183
|
+
root: this.actionSheetRef,
|
|
134
184
|
rovingTabIndex: false,
|
|
135
185
|
selectors: __spreadArray([
|
|
136
186
|
'.k-actionsheet-item'
|
|
@@ -153,9 +203,8 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
153
203
|
}
|
|
154
204
|
}
|
|
155
205
|
};
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
*/
|
|
206
|
+
;
|
|
207
|
+
/** @hidden */
|
|
159
208
|
ActionSheet.prototype.render = function () {
|
|
160
209
|
var _this = this;
|
|
161
210
|
var _a, _b;
|
|
@@ -163,43 +212,35 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
163
212
|
var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
|
|
164
213
|
var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
|
|
165
214
|
var children = this.children(this.props.children);
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
React.Children.forEach(children, function (child) {
|
|
191
|
-
components[child.type.displayName] = child;
|
|
192
|
-
});
|
|
193
|
-
return components;
|
|
215
|
+
var actionSheetPanel = this.state.slide && React.createElement("div", { className: classNames('k-actionsheet', this.props.className, {
|
|
216
|
+
'k-actionsheet-bottom': !this.props.className
|
|
217
|
+
}), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
|
|
218
|
+
(children[headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
|
|
219
|
+
React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
|
|
220
|
+
React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[headerDisplayName] ||
|
|
221
|
+
React.createElement(React.Fragment, null,
|
|
222
|
+
React.createElement("div", { className: "k-text-center" }, this.props.title),
|
|
223
|
+
this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
|
|
224
|
+
children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
|
|
225
|
+
React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
|
|
226
|
+
return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
|
|
227
|
+
})),
|
|
228
|
+
shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
|
|
229
|
+
React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
|
|
230
|
+
return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
|
|
231
|
+
}))),
|
|
232
|
+
children[footerDisplayName]);
|
|
233
|
+
return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
|
|
234
|
+
React.createElement("div", { className: "k-actionsheet-container" },
|
|
235
|
+
React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
|
|
236
|
+
this.props.animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
|
|
237
|
+
: actionSheetPanel)))
|
|
238
|
+
: null));
|
|
194
239
|
};
|
|
195
240
|
;
|
|
196
|
-
/**
|
|
197
|
-
* @hidden
|
|
198
|
-
*/
|
|
241
|
+
/** @hidden */
|
|
199
242
|
ActionSheet.displayName = 'KendoReactActionSheet';
|
|
200
|
-
/**
|
|
201
|
-
* @hidden
|
|
202
|
-
*/
|
|
243
|
+
/** @hidden */
|
|
203
244
|
ActionSheet.propTypes = {
|
|
204
245
|
items: PropTypes.array,
|
|
205
246
|
subTitle: PropTypes.string,
|
|
@@ -207,9 +248,7 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
207
248
|
navigatable: PropTypes.bool,
|
|
208
249
|
navigatableElements: PropTypes.array
|
|
209
250
|
};
|
|
210
|
-
/**
|
|
211
|
-
* @hidden
|
|
212
|
-
*/
|
|
251
|
+
/** @hidden */
|
|
213
252
|
ActionSheet.defaultProps = {
|
|
214
253
|
navigatable: true,
|
|
215
254
|
navigatableElements: []
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-layout',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1677491005,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -62,18 +62,33 @@ export interface ActionSheetProps {
|
|
|
62
62
|
* Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
|
|
63
63
|
*/
|
|
64
64
|
navigatableElements: string[];
|
|
65
|
+
/**
|
|
66
|
+
* Controls the popup animation. By default, the open and close animations are disabled.
|
|
67
|
+
*/
|
|
68
|
+
animation?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* The CSS classes that will be rendered on the inner ActionSheet element.
|
|
71
|
+
*/
|
|
72
|
+
className?: string;
|
|
73
|
+
/**
|
|
74
|
+
* Specifies the state of the ActionSheet.
|
|
75
|
+
*/
|
|
76
|
+
expand?: boolean;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* @hidden
|
|
80
|
+
*/
|
|
81
|
+
export interface ActionSheetState {
|
|
82
|
+
show?: boolean;
|
|
83
|
+
slide?: boolean;
|
|
65
84
|
}
|
|
66
85
|
/**
|
|
67
86
|
* Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
|
|
68
87
|
*/
|
|
69
|
-
export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
70
|
-
/**
|
|
71
|
-
* @hidden
|
|
72
|
-
*/
|
|
88
|
+
export declare class ActionSheet extends React.Component<ActionSheetProps, ActionSheetState> {
|
|
89
|
+
/** @hidden */
|
|
73
90
|
static displayName: string;
|
|
74
|
-
/**
|
|
75
|
-
* @hidden
|
|
76
|
-
*/
|
|
91
|
+
/** @hidden */
|
|
77
92
|
static propTypes: {
|
|
78
93
|
items: PropTypes.Requireable<any[]>;
|
|
79
94
|
subTitle: PropTypes.Requireable<string>;
|
|
@@ -81,28 +96,24 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
|
81
96
|
navigatable: PropTypes.Requireable<boolean>;
|
|
82
97
|
navigatableElements: PropTypes.Requireable<any[]>;
|
|
83
98
|
};
|
|
84
|
-
/**
|
|
85
|
-
* @hidden
|
|
86
|
-
*/
|
|
99
|
+
/** @hidden */
|
|
87
100
|
static defaultProps: {
|
|
88
101
|
navigatable: boolean;
|
|
89
102
|
navigatableElements: never[];
|
|
90
103
|
};
|
|
91
|
-
private
|
|
104
|
+
private actionSheetRef;
|
|
92
105
|
private actionSheetTitleClass;
|
|
93
106
|
private ariaLabeledBy;
|
|
94
107
|
private navigation?;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
108
|
+
private animationDuration;
|
|
109
|
+
private bottomPosition;
|
|
110
|
+
/** @hidden */
|
|
98
111
|
constructor(props: ActionSheetProps);
|
|
99
|
-
/**
|
|
100
|
-
* @hidden
|
|
101
|
-
*/
|
|
112
|
+
/** @hidden */
|
|
102
113
|
componentDidMount(): void;
|
|
103
|
-
/**
|
|
104
|
-
|
|
105
|
-
|
|
114
|
+
/** @hidden */
|
|
115
|
+
componentDidUpdate(_prevProps: Readonly<ActionSheetProps>, prevState: Readonly<ActionSheetState>): void;
|
|
116
|
+
/** @hidden */
|
|
106
117
|
render(): JSX.Element;
|
|
107
118
|
private handleKeyDown;
|
|
108
119
|
private onTab;
|
|
@@ -110,5 +121,6 @@ export declare class ActionSheet extends React.Component<ActionSheetProps> {
|
|
|
110
121
|
private handleItemClick;
|
|
111
122
|
private onEnter;
|
|
112
123
|
private onEscape;
|
|
124
|
+
private hideActionSheet;
|
|
113
125
|
private children;
|
|
114
126
|
}
|
|
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
38
38
|
exports.ActionSheet = void 0;
|
|
39
39
|
var React = require("react");
|
|
40
40
|
var PropTypes = require("prop-types");
|
|
41
|
+
var kendo_react_animation_1 = require("@progress/kendo-react-animation");
|
|
41
42
|
var kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
42
43
|
var package_metadata_1 = require("../package-metadata");
|
|
43
44
|
var ActionSheetItem_1 = require("./ActionSheetItem");
|
|
@@ -49,14 +50,14 @@ var ActionSheetContent_1 = require("./ActionSheetContent");
|
|
|
49
50
|
*/
|
|
50
51
|
var ActionSheet = /** @class */ (function (_super) {
|
|
51
52
|
__extends(ActionSheet, _super);
|
|
52
|
-
/**
|
|
53
|
-
* @hidden
|
|
54
|
-
*/
|
|
53
|
+
/** @hidden */
|
|
55
54
|
function ActionSheet(props) {
|
|
56
55
|
var _this = _super.call(this, props) || this;
|
|
57
|
-
_this.
|
|
56
|
+
_this.actionSheetRef = React.createRef();
|
|
58
57
|
_this.actionSheetTitleClass = 'k-actionsheet-title';
|
|
59
58
|
_this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
|
|
59
|
+
_this.animationDuration = 300;
|
|
60
|
+
_this.bottomPosition = { bottom: '0', width: '100%' };
|
|
60
61
|
_this.handleKeyDown = function (e) {
|
|
61
62
|
if (_this.props.navigatable) {
|
|
62
63
|
_this.navigation.triggerKeyboardEvent(e);
|
|
@@ -72,24 +73,36 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
72
73
|
}
|
|
73
74
|
};
|
|
74
75
|
_this.handleOverlayClick = function (ev) {
|
|
76
|
+
/** Deprecated */
|
|
75
77
|
if (_this.props.onOverlayClick) {
|
|
76
78
|
_this.props.onOverlayClick.call(undefined, ev);
|
|
77
79
|
}
|
|
78
80
|
if (_this.props.onClose) {
|
|
79
81
|
_this.props.onClose.call(undefined, ev);
|
|
80
82
|
}
|
|
83
|
+
if (!_this.props.animation) {
|
|
84
|
+
_this.hideActionSheet();
|
|
85
|
+
}
|
|
81
86
|
};
|
|
82
87
|
_this.handleItemClick = function (ev) {
|
|
88
|
+
/** Deprecated */
|
|
83
89
|
if (_this.props.onItemClick) {
|
|
84
90
|
_this.props.onItemClick.call(undefined, ev);
|
|
85
91
|
}
|
|
86
92
|
if (_this.props.onItemSelect) {
|
|
87
93
|
_this.props.onItemSelect.call(undefined, ev);
|
|
88
94
|
}
|
|
95
|
+
if (!_this.props.animation) {
|
|
96
|
+
_this.hideActionSheet();
|
|
97
|
+
}
|
|
89
98
|
};
|
|
90
99
|
_this.onEnter = function (target, nav, ev) {
|
|
100
|
+
if (target.ariaDisabled) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
91
103
|
var isItem = target.className && target.className.indexOf('k-actionsheet-item') !== -1;
|
|
92
104
|
var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
|
|
105
|
+
/** Deprecated */
|
|
93
106
|
if (isItem && _this.props.onItemClick) {
|
|
94
107
|
ev.preventDefault();
|
|
95
108
|
var item = _this.props.items[allItems.indexOf(target)];
|
|
@@ -108,8 +121,12 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
108
121
|
title: item && item.title
|
|
109
122
|
});
|
|
110
123
|
}
|
|
124
|
+
if (!_this.props.animation) {
|
|
125
|
+
_this.hideActionSheet();
|
|
126
|
+
}
|
|
111
127
|
};
|
|
112
128
|
_this.onEscape = function (_target, _nav, ev) {
|
|
129
|
+
/** Deprecated */
|
|
113
130
|
if (_this.props.onOverlayClick) {
|
|
114
131
|
ev.preventDefault();
|
|
115
132
|
_this.props.onOverlayClick.call(undefined, ev);
|
|
@@ -118,22 +135,55 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
118
135
|
ev.preventDefault();
|
|
119
136
|
_this.props.onClose.call(undefined, ev);
|
|
120
137
|
}
|
|
138
|
+
if (!_this.props.animation) {
|
|
139
|
+
_this.hideActionSheet();
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
_this.hideActionSheet = function () {
|
|
143
|
+
_this.setState({ show: false });
|
|
144
|
+
};
|
|
145
|
+
_this.children = function (children) {
|
|
146
|
+
var components = {};
|
|
147
|
+
React.Children.forEach(children, function (child) {
|
|
148
|
+
components[child.type.displayName] = child;
|
|
149
|
+
});
|
|
150
|
+
return components;
|
|
151
|
+
};
|
|
152
|
+
_this.state = {
|
|
153
|
+
show: false,
|
|
154
|
+
slide: false
|
|
121
155
|
};
|
|
122
156
|
(0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
123
157
|
return _this;
|
|
124
158
|
}
|
|
125
|
-
/**
|
|
126
|
-
* @hidden
|
|
127
|
-
*/
|
|
159
|
+
/** @hidden */
|
|
128
160
|
ActionSheet.prototype.componentDidMount = function () {
|
|
161
|
+
if (this.props.expand && !this.state.show) {
|
|
162
|
+
this.setState({ show: true });
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
/** @hidden */
|
|
166
|
+
ActionSheet.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
129
167
|
var _this = this;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
this.
|
|
168
|
+
var currentRef = this.actionSheetRef.current;
|
|
169
|
+
if (this.props.expand && !this.state.show) {
|
|
170
|
+
this.setState({ show: true });
|
|
171
|
+
}
|
|
172
|
+
if (this.props.expand && this.state.show && !this.state.slide) {
|
|
173
|
+
this.setState({ slide: true });
|
|
174
|
+
}
|
|
175
|
+
if (!this.props.expand && this.state.show && this.state.slide) {
|
|
176
|
+
this.setState({ slide: false });
|
|
177
|
+
}
|
|
178
|
+
if (prevState !== this.state && this.state.slide && currentRef && !this.props.className) {
|
|
179
|
+
currentRef.style.setProperty('--kendo-actionsheet-height', 'auto');
|
|
180
|
+
currentRef.style.setProperty('--kendo-actionsheet-max-height', 'none');
|
|
181
|
+
}
|
|
182
|
+
if (currentRef) {
|
|
133
183
|
if (this.props.navigatable) {
|
|
134
184
|
this.navigation = new kendo_react_common_1.Navigation({
|
|
135
185
|
tabIndex: this.props.tabIndex || 0,
|
|
136
|
-
root: this.
|
|
186
|
+
root: this.actionSheetRef,
|
|
137
187
|
rovingTabIndex: false,
|
|
138
188
|
selectors: __spreadArray([
|
|
139
189
|
'.k-actionsheet-item'
|
|
@@ -156,9 +206,8 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
156
206
|
}
|
|
157
207
|
}
|
|
158
208
|
};
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
*/
|
|
209
|
+
;
|
|
210
|
+
/** @hidden */
|
|
162
211
|
ActionSheet.prototype.render = function () {
|
|
163
212
|
var _this = this;
|
|
164
213
|
var _a, _b;
|
|
@@ -166,43 +215,35 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
166
215
|
var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
|
|
167
216
|
var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
|
|
168
217
|
var children = this.children(this.props.children);
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
React.Children.forEach(children, function (child) {
|
|
194
|
-
components[child.type.displayName] = child;
|
|
195
|
-
});
|
|
196
|
-
return components;
|
|
218
|
+
var actionSheetPanel = this.state.slide && React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet', this.props.className, {
|
|
219
|
+
'k-actionsheet-bottom': !this.props.className
|
|
220
|
+
}), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
|
|
221
|
+
(children[ActionSheetHeader_1.headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
|
|
222
|
+
React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
|
|
223
|
+
React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[ActionSheetHeader_1.headerDisplayName] ||
|
|
224
|
+
React.createElement(React.Fragment, null,
|
|
225
|
+
React.createElement("div", { className: "k-text-center" }, this.props.title),
|
|
226
|
+
this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
|
|
227
|
+
children[ActionSheetContent_1.contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
|
|
228
|
+
React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
|
|
229
|
+
return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
|
|
230
|
+
})),
|
|
231
|
+
shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
|
|
232
|
+
React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
|
|
233
|
+
return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
|
|
234
|
+
}))),
|
|
235
|
+
children[ActionSheetFooter_1.footerDisplayName]);
|
|
236
|
+
return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
|
|
237
|
+
React.createElement("div", { className: "k-actionsheet-container" },
|
|
238
|
+
React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
|
|
239
|
+
this.props.animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
|
|
240
|
+
: actionSheetPanel)))
|
|
241
|
+
: null));
|
|
197
242
|
};
|
|
198
243
|
;
|
|
199
|
-
/**
|
|
200
|
-
* @hidden
|
|
201
|
-
*/
|
|
244
|
+
/** @hidden */
|
|
202
245
|
ActionSheet.displayName = 'KendoReactActionSheet';
|
|
203
|
-
/**
|
|
204
|
-
* @hidden
|
|
205
|
-
*/
|
|
246
|
+
/** @hidden */
|
|
206
247
|
ActionSheet.propTypes = {
|
|
207
248
|
items: PropTypes.array,
|
|
208
249
|
subTitle: PropTypes.string,
|
|
@@ -210,9 +251,7 @@ var ActionSheet = /** @class */ (function (_super) {
|
|
|
210
251
|
navigatable: PropTypes.bool,
|
|
211
252
|
navigatableElements: PropTypes.array
|
|
212
253
|
};
|
|
213
|
-
/**
|
|
214
|
-
* @hidden
|
|
215
|
-
*/
|
|
254
|
+
/** @hidden */
|
|
216
255
|
ActionSheet.defaultProps = {
|
|
217
256
|
navigatable: true,
|
|
218
257
|
navigatableElements: []
|