@progress/kendo-react-popup 4.14.0-dev.202201140931 → 4.14.1-dev.202201181415
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-popup.js +1 -1
- package/dist/es/Popup.d.ts +16 -157
- package/dist/es/Popup.js +20 -380
- package/dist/es/PopupWithoutContext.d.ts +174 -0
- package/dist/es/PopupWithoutContext.js +449 -0
- package/dist/es/animation.d.ts +1 -1
- package/dist/es/main.d.ts +5 -3
- package/dist/es/main.js +1 -1
- package/dist/es/models/CollisionType.d.ts +3 -1
- package/dist/es/models/Events.d.ts +17 -0
- package/dist/es/models/PopupProps.d.ts +91 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/util.d.ts +0 -7
- package/dist/es/util.js +0 -7
- package/dist/npm/Popup.d.ts +16 -157
- package/dist/npm/Popup.js +20 -380
- package/dist/npm/PopupWithoutContext.d.ts +174 -0
- package/dist/npm/PopupWithoutContext.js +451 -0
- package/dist/npm/animation.d.ts +1 -1
- package/dist/npm/main.d.ts +5 -3
- package/dist/npm/main.js +3 -3
- package/dist/npm/models/CollisionType.d.ts +3 -1
- package/dist/npm/models/Events.d.ts +17 -0
- package/dist/npm/models/PopupProps.d.ts +91 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/util.d.ts +0 -7
- package/dist/npm/util.js +0 -7
- package/dist/systemjs/kendo-react-popup.js +1 -1
- package/package.json +2 -2
- package/dist/es/PopupWithContext.d.ts +0 -19
- package/dist/es/PopupWithContext.js +0 -33
- package/dist/npm/PopupWithContext.d.ts +0 -19
- package/dist/npm/PopupWithContext.js +0 -35
|
@@ -0,0 +1,449 @@
|
|
|
1
|
+
var __extends = (this && this.__extends) || (function () {
|
|
2
|
+
var extendStatics = function (d, b) {
|
|
3
|
+
extendStatics = Object.setPrototypeOf ||
|
|
4
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
+
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
6
|
+
return extendStatics(d, b);
|
|
7
|
+
};
|
|
8
|
+
return function (d, b) {
|
|
9
|
+
extendStatics(d, b);
|
|
10
|
+
function __() { this.constructor = d; }
|
|
11
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
+
};
|
|
13
|
+
})();
|
|
14
|
+
var __assign = (this && this.__assign) || function () {
|
|
15
|
+
__assign = Object.assign || function(t) {
|
|
16
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
17
|
+
s = arguments[i];
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
19
|
+
t[p] = s[p];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
return __assign.apply(this, arguments);
|
|
24
|
+
};
|
|
25
|
+
import * as React from 'react';
|
|
26
|
+
import * as ReactDOM from 'react-dom';
|
|
27
|
+
import * as PropTypes from 'prop-types';
|
|
28
|
+
import { slide } from './animation';
|
|
29
|
+
import { canUseDOM, ZIndexContext, validatePackage, classNames } from '@progress/kendo-react-common';
|
|
30
|
+
import { AlignPoint, alignElement, domUtils, positionElement, Collision as CollisionEnum } from '@progress/kendo-popup-common';
|
|
31
|
+
import { throttle, FRAME_DURATION } from './util';
|
|
32
|
+
import { packageMetadata } from './package-metadata';
|
|
33
|
+
var DEFAULT_POPUP_ZINDEX = 100;
|
|
34
|
+
var ZINDEX_POPUP_STEP = 1;
|
|
35
|
+
function isEquivalent(a, b) {
|
|
36
|
+
if (a === b) {
|
|
37
|
+
return true;
|
|
38
|
+
}
|
|
39
|
+
if (!!a !== !!b) {
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
var aProps = Object.getOwnPropertyNames(a);
|
|
43
|
+
var bProps = Object.getOwnPropertyNames(b);
|
|
44
|
+
if (aProps.length !== bProps.length) {
|
|
45
|
+
return false;
|
|
46
|
+
}
|
|
47
|
+
for (var i = 0; i < aProps.length; i++) {
|
|
48
|
+
var propName = aProps[i];
|
|
49
|
+
if (a[propName] !== b[propName]) {
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return true;
|
|
54
|
+
}
|
|
55
|
+
var DEFAULT_OFFSET = {
|
|
56
|
+
left: -1000,
|
|
57
|
+
top: 0
|
|
58
|
+
};
|
|
59
|
+
var Status;
|
|
60
|
+
(function (Status) {
|
|
61
|
+
Status["hiding"] = "hiding";
|
|
62
|
+
Status["hidden"] = "hidden";
|
|
63
|
+
Status["showing"] = "showing";
|
|
64
|
+
Status["shown"] = "shown";
|
|
65
|
+
Status["reposition"] = "reposition";
|
|
66
|
+
})(Status || (Status = {}));
|
|
67
|
+
var ANIMATION_CONTAINER = 'k-animation-container';
|
|
68
|
+
var ANIMATION_CONTAINER_SHOWN = 'k-animation-container-shown';
|
|
69
|
+
var ANIMATION_CONTAINER_RELATIVE = 'k-animation-container-relative';
|
|
70
|
+
var ANIMATION_CONTAINER_CHILD = 'k-child-animation-container';
|
|
71
|
+
var K_POPUP = 'k-popup';
|
|
72
|
+
/**
|
|
73
|
+
* @hidden
|
|
74
|
+
*/
|
|
75
|
+
var PopupWithoutContext = /** @class */ (function (_super) {
|
|
76
|
+
__extends(PopupWithoutContext, _super);
|
|
77
|
+
function PopupWithoutContext(props) {
|
|
78
|
+
var _this = _super.call(this, props) || this;
|
|
79
|
+
/**
|
|
80
|
+
* @hidden
|
|
81
|
+
*/
|
|
82
|
+
_this.state = { current: Status.hidden, previous: Status.hidden, props: {} };
|
|
83
|
+
_this._popup = null;
|
|
84
|
+
_this.show = function (popup) {
|
|
85
|
+
_this.setPosition(popup);
|
|
86
|
+
_this.animate(popup.firstChild, 'enter', _this.onOpened);
|
|
87
|
+
_this.setState({ current: Status.shown, previous: _this.state.current });
|
|
88
|
+
};
|
|
89
|
+
_this.setPosition = function (popup) {
|
|
90
|
+
var _a = _this.props, anchorAlign = _a.anchorAlign, popupAlign = _a.popupAlign, collision = _a.collision, offset = _a.offset, anchor = _a.anchor, margin = _a.margin, scale = _a.scale, positionMode = _a.positionMode;
|
|
91
|
+
var alignedOffset = alignElement({
|
|
92
|
+
anchor: anchor,
|
|
93
|
+
anchorAlign: anchorAlign,
|
|
94
|
+
element: popup,
|
|
95
|
+
elementAlign: popupAlign,
|
|
96
|
+
offset: offset,
|
|
97
|
+
margin: margin,
|
|
98
|
+
positionMode: positionMode,
|
|
99
|
+
scale: scale
|
|
100
|
+
});
|
|
101
|
+
var position = positionElement({
|
|
102
|
+
anchor: anchor,
|
|
103
|
+
anchorAlign: anchorAlign,
|
|
104
|
+
element: popup,
|
|
105
|
+
elementAlign: popupAlign,
|
|
106
|
+
collisions: collision,
|
|
107
|
+
currentLocation: alignedOffset,
|
|
108
|
+
margin: _this.props.margin
|
|
109
|
+
});
|
|
110
|
+
popup.style.top = position.offset.top + 'px';
|
|
111
|
+
popup.style.left = position.offset.left + 'px';
|
|
112
|
+
_this._collisions = {
|
|
113
|
+
fit: position.fit,
|
|
114
|
+
fitted: position.fitted,
|
|
115
|
+
flip: position.flip,
|
|
116
|
+
flipped: position.flipped
|
|
117
|
+
};
|
|
118
|
+
if (_this.props.onPosition) {
|
|
119
|
+
var event_1 = {
|
|
120
|
+
target: _this,
|
|
121
|
+
flipped: position.flipped,
|
|
122
|
+
fitted: position.fitted
|
|
123
|
+
};
|
|
124
|
+
_this.props.onPosition.call(undefined, event_1);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
_this.onOpened = function () {
|
|
128
|
+
var element = _this._popup;
|
|
129
|
+
if (!element) {
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
if (_this.props.show) {
|
|
133
|
+
element.classList.add(ANIMATION_CONTAINER_SHOWN);
|
|
134
|
+
}
|
|
135
|
+
_this.attachRepositionHandlers(element);
|
|
136
|
+
if (_this.props.onOpen) {
|
|
137
|
+
_this.props.onOpen.call(undefined, { target: _this });
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
_this.animate = function (element, type, callback) {
|
|
141
|
+
if (!_this.props.popupAlign) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
var animationDirection;
|
|
145
|
+
var _a = _this.props.popupAlign, horizontal = _a.horizontal, vertical = _a.vertical;
|
|
146
|
+
if (horizontal === 'left' && vertical === 'center') {
|
|
147
|
+
animationDirection = 'right';
|
|
148
|
+
}
|
|
149
|
+
else if (horizontal === 'right' && vertical === 'center') {
|
|
150
|
+
animationDirection = 'left';
|
|
151
|
+
}
|
|
152
|
+
else if (vertical === 'top') {
|
|
153
|
+
animationDirection = 'down';
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
animationDirection = 'up';
|
|
157
|
+
}
|
|
158
|
+
var flipPositions = {
|
|
159
|
+
down: 'up',
|
|
160
|
+
up: 'down',
|
|
161
|
+
left: 'right',
|
|
162
|
+
right: 'left'
|
|
163
|
+
};
|
|
164
|
+
if (_this._collisions && _this._collisions.flipped) {
|
|
165
|
+
animationDirection = flipPositions[animationDirection];
|
|
166
|
+
}
|
|
167
|
+
slide(element, animationDirection, _this.animationDuration[type], type, callback);
|
|
168
|
+
};
|
|
169
|
+
_this.onClosing = function (popup) {
|
|
170
|
+
if (!_this.props.show) {
|
|
171
|
+
popup.classList.remove(ANIMATION_CONTAINER_SHOWN);
|
|
172
|
+
}
|
|
173
|
+
_this.detachRepositionHandlers();
|
|
174
|
+
};
|
|
175
|
+
_this.onClosed = function () {
|
|
176
|
+
if (_this.state.current === Status.hiding && _this.state.previous === Status.shown) {
|
|
177
|
+
_this.setState({ current: Status.hidden, previous: _this.state.current });
|
|
178
|
+
}
|
|
179
|
+
if (_this.props.onClose) {
|
|
180
|
+
_this.props.onClose.call(undefined, { target: _this });
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
_this.getCurrentZIndex = function () {
|
|
184
|
+
return _this.context ? _this.context + ZINDEX_POPUP_STEP : DEFAULT_POPUP_ZINDEX;
|
|
185
|
+
};
|
|
186
|
+
validatePackage(packageMetadata);
|
|
187
|
+
_this.reposition = throttle(_this.reposition.bind(_this), FRAME_DURATION);
|
|
188
|
+
return _this;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* @hidden
|
|
192
|
+
*/
|
|
193
|
+
PopupWithoutContext.getDerivedStateFromProps = function (props, state) {
|
|
194
|
+
var show = props.show, anchor = props.anchor, anchorAlign = props.anchorAlign, appendTo = props.appendTo, collision = props.collision, popupAlign = props.popupAlign, className = props.className, popupClass = props.popupClass, style = props.style, offset = props.offset, contentKey = props.contentKey;
|
|
195
|
+
var nextState = __assign({}, state, { props: {
|
|
196
|
+
show: show, anchor: anchor, anchorAlign: anchorAlign, appendTo: appendTo, collision: collision, popupAlign: popupAlign, className: className, popupClass: popupClass, style: style, offset: offset, contentKey: contentKey
|
|
197
|
+
} });
|
|
198
|
+
if (props.show) {
|
|
199
|
+
if (state.current === Status.hidden || state.current === Status.hiding) {
|
|
200
|
+
return __assign({}, nextState, { current: Status.showing, previous: state.current });
|
|
201
|
+
}
|
|
202
|
+
if (state.current === Status.showing) {
|
|
203
|
+
return __assign({}, nextState, { current: Status.shown, previous: state.current });
|
|
204
|
+
}
|
|
205
|
+
if (state.current === Status.shown &&
|
|
206
|
+
(!isEquivalent(offset, state.props.offset) ||
|
|
207
|
+
!isEquivalent(anchorAlign, state.props.anchorAlign) ||
|
|
208
|
+
!isEquivalent(appendTo, state.props.appendTo) ||
|
|
209
|
+
!isEquivalent(collision, state.props.collision) ||
|
|
210
|
+
!isEquivalent(popupAlign, state.props.popupAlign) ||
|
|
211
|
+
!isEquivalent(style, state.props.style) ||
|
|
212
|
+
anchor !== state.props.anchor ||
|
|
213
|
+
popupClass !== state.props.popupClass ||
|
|
214
|
+
className !== state.props.className)) {
|
|
215
|
+
return __assign({}, nextState, { current: Status.reposition, previous: state.current });
|
|
216
|
+
}
|
|
217
|
+
return nextState;
|
|
218
|
+
}
|
|
219
|
+
if (state.current === Status.hiding || state.current === Status.hidden) {
|
|
220
|
+
return __assign({}, nextState, { current: Status.hidden, previous: state.current });
|
|
221
|
+
}
|
|
222
|
+
return __assign({}, nextState, { current: Status.hiding, previous: state.current });
|
|
223
|
+
};
|
|
224
|
+
/**
|
|
225
|
+
* @hidden
|
|
226
|
+
*/
|
|
227
|
+
PopupWithoutContext.prototype.componentDidUpdate = function (prevProps) {
|
|
228
|
+
if (this.state.current === Status.showing && this._popup) {
|
|
229
|
+
this.show(this._popup);
|
|
230
|
+
}
|
|
231
|
+
else if (this.state.current === Status.hiding && this._popup) {
|
|
232
|
+
this.onClosing(this._popup);
|
|
233
|
+
this.animate(this._popup.firstChild, 'exit', this.onClosed);
|
|
234
|
+
}
|
|
235
|
+
else if (this.state.current === Status.reposition && this.state.previous === Status.shown) {
|
|
236
|
+
this.setState({ current: Status.shown, previous: this.state.current });
|
|
237
|
+
}
|
|
238
|
+
else if (this.state.current === Status.shown &&
|
|
239
|
+
prevProps.contentKey !== this.props.contentKey && this._popup) {
|
|
240
|
+
this.setPosition(this._popup);
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
/**
|
|
244
|
+
* @hidden
|
|
245
|
+
*/
|
|
246
|
+
PopupWithoutContext.prototype.componentDidMount = function () {
|
|
247
|
+
if (this.state.current === Status.showing && this._popup) {
|
|
248
|
+
this.show(this._popup);
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
/**
|
|
252
|
+
* @hidden
|
|
253
|
+
*/
|
|
254
|
+
PopupWithoutContext.prototype.componentWillUnmount = function () {
|
|
255
|
+
this.detachRepositionHandlers();
|
|
256
|
+
};
|
|
257
|
+
/**
|
|
258
|
+
* @hidden
|
|
259
|
+
*/
|
|
260
|
+
PopupWithoutContext.prototype.render = function () {
|
|
261
|
+
var _this = this;
|
|
262
|
+
var _a = this.props, children = _a.children, className = _a.className, popupClass = _a.popupClass, show = _a.show, id = _a.id, positionMode = _a.positionMode;
|
|
263
|
+
var appendTo = this.props.appendTo ?
|
|
264
|
+
this.props.appendTo :
|
|
265
|
+
canUseDOM ?
|
|
266
|
+
(this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body)
|
|
267
|
+
: undefined;
|
|
268
|
+
if (this.state.current === Status.reposition && this.state.previous === Status.shown && this._popup) {
|
|
269
|
+
this.setPosition(this._popup);
|
|
270
|
+
}
|
|
271
|
+
var style = Object.assign({}, { position: positionMode, top: 0, left: -10000 }, this.props.style || {});
|
|
272
|
+
var closing = this.state.current === Status.hiding;
|
|
273
|
+
if ((show || closing) && appendTo) {
|
|
274
|
+
var currentZIndex = this.getCurrentZIndex();
|
|
275
|
+
var popupElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
|
|
276
|
+
React.createElement("div", { className: classNames(ANIMATION_CONTAINER, ANIMATION_CONTAINER_RELATIVE, className), id: id, ref: function (e) { return _this._popup = e; }, style: __assign({ zIndex: currentZIndex }, style) },
|
|
277
|
+
React.createElement("div", { className: classNames(K_POPUP, popupClass, ANIMATION_CONTAINER_CHILD), style: { transitionDelay: '0ms' } }, children))));
|
|
278
|
+
return ReactDOM.createPortal(popupElement, appendTo);
|
|
279
|
+
}
|
|
280
|
+
return null;
|
|
281
|
+
};
|
|
282
|
+
Object.defineProperty(PopupWithoutContext.prototype, "animationDuration", {
|
|
283
|
+
get: function () {
|
|
284
|
+
var animate = this.props.animate;
|
|
285
|
+
var enter = 0;
|
|
286
|
+
var exit = 0;
|
|
287
|
+
if (animate) {
|
|
288
|
+
if (animate === true) {
|
|
289
|
+
enter = exit = 300;
|
|
290
|
+
}
|
|
291
|
+
else {
|
|
292
|
+
enter = animate.openDuration || 0;
|
|
293
|
+
exit = animate.closeDuration || 0;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
return { enter: enter, exit: exit };
|
|
297
|
+
},
|
|
298
|
+
enumerable: true,
|
|
299
|
+
configurable: true
|
|
300
|
+
});
|
|
301
|
+
PopupWithoutContext.prototype.attachRepositionHandlers = function (element) {
|
|
302
|
+
var _this = this;
|
|
303
|
+
this.detachRepositionHandlers();
|
|
304
|
+
this._scrollableParents = domUtils.scrollableParents(this.props.anchor || element);
|
|
305
|
+
this._scrollableParents.map(function (p) { return p.addEventListener('scroll', _this.reposition); });
|
|
306
|
+
window.addEventListener('resize', this.reposition);
|
|
307
|
+
};
|
|
308
|
+
PopupWithoutContext.prototype.detachRepositionHandlers = function () {
|
|
309
|
+
var _this = this;
|
|
310
|
+
if (this._scrollableParents) {
|
|
311
|
+
this._scrollableParents.map(function (p) { return p.removeEventListener('scroll', _this.reposition); });
|
|
312
|
+
this._scrollableParents = undefined;
|
|
313
|
+
}
|
|
314
|
+
window.removeEventListener('resize', this.reposition);
|
|
315
|
+
};
|
|
316
|
+
PopupWithoutContext.prototype.reposition = function () {
|
|
317
|
+
this.setState({ current: Status.reposition, previous: this.state.current });
|
|
318
|
+
};
|
|
319
|
+
/**
|
|
320
|
+
* @hidden
|
|
321
|
+
*/
|
|
322
|
+
PopupWithoutContext.propTypes = {
|
|
323
|
+
anchor: function (props) {
|
|
324
|
+
var anchor = props.anchor;
|
|
325
|
+
if (anchor && typeof anchor.nodeType !== 'number') {
|
|
326
|
+
return new Error('Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.');
|
|
327
|
+
}
|
|
328
|
+
return null;
|
|
329
|
+
},
|
|
330
|
+
appendTo: function (props) {
|
|
331
|
+
var element = props.appendTo;
|
|
332
|
+
if (element && typeof element.nodeType !== 'number') {
|
|
333
|
+
return new Error('Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.');
|
|
334
|
+
}
|
|
335
|
+
return null;
|
|
336
|
+
},
|
|
337
|
+
className: PropTypes.oneOfType([
|
|
338
|
+
PropTypes.string,
|
|
339
|
+
PropTypes.arrayOf(PropTypes.string),
|
|
340
|
+
PropTypes.object
|
|
341
|
+
]),
|
|
342
|
+
id: PropTypes.string,
|
|
343
|
+
popupClass: PropTypes.oneOfType([
|
|
344
|
+
PropTypes.string,
|
|
345
|
+
PropTypes.arrayOf(PropTypes.string),
|
|
346
|
+
PropTypes.object
|
|
347
|
+
]),
|
|
348
|
+
collision: PropTypes.shape({
|
|
349
|
+
horizontal: PropTypes.oneOf([
|
|
350
|
+
CollisionEnum.fit,
|
|
351
|
+
CollisionEnum.flip,
|
|
352
|
+
CollisionEnum.none
|
|
353
|
+
]),
|
|
354
|
+
vertical: PropTypes.oneOf([
|
|
355
|
+
CollisionEnum.fit,
|
|
356
|
+
CollisionEnum.flip,
|
|
357
|
+
CollisionEnum.none
|
|
358
|
+
])
|
|
359
|
+
}),
|
|
360
|
+
anchorAlign: PropTypes.shape({
|
|
361
|
+
horizontal: PropTypes.oneOf([
|
|
362
|
+
AlignPoint.left,
|
|
363
|
+
AlignPoint.center,
|
|
364
|
+
AlignPoint.right
|
|
365
|
+
]),
|
|
366
|
+
vertical: PropTypes.oneOf([
|
|
367
|
+
AlignPoint.top,
|
|
368
|
+
AlignPoint.center,
|
|
369
|
+
AlignPoint.bottom
|
|
370
|
+
])
|
|
371
|
+
}),
|
|
372
|
+
popupAlign: PropTypes.shape({
|
|
373
|
+
horizontal: PropTypes.oneOf([
|
|
374
|
+
AlignPoint.left,
|
|
375
|
+
AlignPoint.center,
|
|
376
|
+
AlignPoint.right
|
|
377
|
+
]),
|
|
378
|
+
vertical: PropTypes.oneOf([
|
|
379
|
+
AlignPoint.top,
|
|
380
|
+
AlignPoint.center,
|
|
381
|
+
AlignPoint.bottom
|
|
382
|
+
])
|
|
383
|
+
}),
|
|
384
|
+
offset: PropTypes.shape({
|
|
385
|
+
left: PropTypes.number,
|
|
386
|
+
top: PropTypes.number
|
|
387
|
+
}),
|
|
388
|
+
children: PropTypes.oneOfType([
|
|
389
|
+
PropTypes.element,
|
|
390
|
+
PropTypes.node
|
|
391
|
+
]),
|
|
392
|
+
show: PropTypes.bool,
|
|
393
|
+
animate: PropTypes.oneOfType([
|
|
394
|
+
PropTypes.bool,
|
|
395
|
+
PropTypes.shape({
|
|
396
|
+
openDuration: PropTypes.number,
|
|
397
|
+
closeDuration: PropTypes.number
|
|
398
|
+
})
|
|
399
|
+
]),
|
|
400
|
+
margin: PropTypes.shape({
|
|
401
|
+
horizontal: PropTypes.number,
|
|
402
|
+
vertical: PropTypes.number
|
|
403
|
+
}),
|
|
404
|
+
positionMode: PropTypes.oneOf([
|
|
405
|
+
'fixed',
|
|
406
|
+
'absolute'
|
|
407
|
+
]),
|
|
408
|
+
scale: PropTypes.number,
|
|
409
|
+
style: PropTypes.object,
|
|
410
|
+
onClose: PropTypes.func,
|
|
411
|
+
onPosition: PropTypes.func,
|
|
412
|
+
onOpen: PropTypes.func
|
|
413
|
+
};
|
|
414
|
+
/**
|
|
415
|
+
* @hidden
|
|
416
|
+
*/
|
|
417
|
+
PopupWithoutContext.defaultProps = {
|
|
418
|
+
collision: {
|
|
419
|
+
horizontal: CollisionEnum.fit,
|
|
420
|
+
vertical: CollisionEnum.flip
|
|
421
|
+
},
|
|
422
|
+
anchorAlign: {
|
|
423
|
+
horizontal: AlignPoint.left,
|
|
424
|
+
vertical: AlignPoint.bottom
|
|
425
|
+
},
|
|
426
|
+
popupAlign: {
|
|
427
|
+
horizontal: AlignPoint.left,
|
|
428
|
+
vertical: AlignPoint.top
|
|
429
|
+
},
|
|
430
|
+
offset: DEFAULT_OFFSET,
|
|
431
|
+
animate: true,
|
|
432
|
+
show: false,
|
|
433
|
+
margin: {
|
|
434
|
+
horizontal: 0,
|
|
435
|
+
vertical: 0
|
|
436
|
+
},
|
|
437
|
+
positionMode: 'absolute'
|
|
438
|
+
};
|
|
439
|
+
/**
|
|
440
|
+
* @hidden
|
|
441
|
+
*/
|
|
442
|
+
PopupWithoutContext.contextType = ZIndexContext;
|
|
443
|
+
/**
|
|
444
|
+
* @hidden
|
|
445
|
+
*/
|
|
446
|
+
PopupWithoutContext.displayName = 'PopupComponent';
|
|
447
|
+
return PopupWithoutContext;
|
|
448
|
+
}(React.Component));
|
|
449
|
+
export { PopupWithoutContext };
|
package/dist/es/animation.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @hidden
|
|
3
3
|
*/
|
|
4
|
-
export declare const slide: (element: HTMLElement, direction:
|
|
4
|
+
export declare const slide: (element: HTMLElement, direction: NavigationReason, duration: number, type: "enter" | "exit", callback: any) => any;
|
package/dist/es/main.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { Popup, PopupPropsContext } from './
|
|
1
|
+
import { Popup, PopupPropsContext } from './Popup';
|
|
2
2
|
import { PopupProps } from './models/PopupProps';
|
|
3
|
-
import { PopupSettings } from './models/PopupSettings';
|
|
4
3
|
import { Align } from './models/Align';
|
|
5
4
|
import { Collision } from './models/Collision';
|
|
6
5
|
import { Offset } from './models/Offset';
|
|
7
6
|
import { PopupAnimation } from './models/PopupAnimation';
|
|
8
7
|
import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events';
|
|
9
|
-
|
|
8
|
+
import { Margin } from './models/Margin';
|
|
9
|
+
import { CollisionType } from './models/CollisionType';
|
|
10
|
+
import { PositionMode } from './models/PositionMode';
|
|
11
|
+
export { Popup, PopupPropsContext, PopupProps, Align, Collision, Offset, PopupAnimation, Margin, PositionMode, CollisionType, PopupOpenEvent, PopupCloseEvent };
|
package/dist/es/main.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Popup, PopupPropsContext } from './
|
|
1
|
+
import { Popup, PopupPropsContext } from './Popup';
|
|
2
2
|
export { Popup, PopupPropsContext };
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { CollisionType as CollisionTypeBase } from '@progress/kendo-popup-common';
|
|
1
2
|
/**
|
|
2
3
|
* Defines the possible collision behavior when the Popup is not fully visible.
|
|
3
4
|
*
|
|
4
5
|
* The available options are:
|
|
5
6
|
* - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
|
|
6
7
|
* - `flip`—Flips the Popup position based on the origin and the position properties.
|
|
8
|
+
* - `none`—The Popup is rendered at its original position.
|
|
7
9
|
*/
|
|
8
|
-
export declare type CollisionType =
|
|
10
|
+
export declare type CollisionType = CollisionTypeBase;
|
|
@@ -17,3 +17,20 @@ export interface CloseEvent {
|
|
|
17
17
|
*/
|
|
18
18
|
target: Popup;
|
|
19
19
|
}
|
|
20
|
+
/**
|
|
21
|
+
* Represents the object of the `Position` Popup event.
|
|
22
|
+
*/
|
|
23
|
+
export interface PositionEvent {
|
|
24
|
+
/**
|
|
25
|
+
* An event target.
|
|
26
|
+
*/
|
|
27
|
+
target: Popup;
|
|
28
|
+
/**
|
|
29
|
+
* Indicates if the position is fitted.
|
|
30
|
+
*/
|
|
31
|
+
fitted: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Indicates if the position is flipped.
|
|
34
|
+
*/
|
|
35
|
+
flipped: boolean;
|
|
36
|
+
}
|
|
@@ -1,9 +1,95 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { Collision } from './Collision';
|
|
3
|
+
import { Align } from './Align';
|
|
4
|
+
import { OpenEvent, CloseEvent, PositionEvent } from './Events';
|
|
5
|
+
import { Offset } from './Offset';
|
|
6
|
+
import { PopupAnimation } from './PopupAnimation';
|
|
7
|
+
import { Margin } from './Margin';
|
|
8
|
+
import { PositionMode } from './PositionMode';
|
|
9
|
+
import { PopupSettings } from '@progress/kendo-popup-common';
|
|
3
10
|
/**
|
|
4
11
|
* Represents the props of the [KendoReact Popup component]({% slug overview_popup %}).
|
|
5
12
|
*/
|
|
6
13
|
export interface PopupProps extends PopupSettings {
|
|
14
|
+
/**
|
|
15
|
+
* Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
|
|
16
|
+
*/
|
|
17
|
+
animate?: boolean | PopupAnimation;
|
|
18
|
+
/**
|
|
19
|
+
* Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
|
|
20
|
+
*/
|
|
21
|
+
anchor?: HTMLElement | null;
|
|
22
|
+
/**
|
|
23
|
+
* Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
|
|
24
|
+
*/
|
|
25
|
+
appendTo?: HTMLElement | null;
|
|
26
|
+
/**
|
|
27
|
+
* Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
|
|
28
|
+
*/
|
|
29
|
+
anchorAlign?: Align;
|
|
30
|
+
/**
|
|
31
|
+
* Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
|
|
32
|
+
*/
|
|
33
|
+
collision?: Collision;
|
|
34
|
+
/**
|
|
35
|
+
* Configures the margin value that will be added to the popup dimensions
|
|
36
|
+
* in pixels and leaves a blank space between the popup and the anchor.
|
|
37
|
+
*/
|
|
38
|
+
margin?: Margin;
|
|
39
|
+
/**
|
|
40
|
+
* Specifies the position mode of the component. By default, the Popup uses fixed positioning.
|
|
41
|
+
* To make the Popup acquire absolute positioning, set this option to `absolute`.
|
|
42
|
+
*
|
|
43
|
+
* > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
|
|
44
|
+
*/
|
|
45
|
+
positionMode?: PositionMode;
|
|
46
|
+
/**
|
|
47
|
+
* Used to set the document scale when using a [scale transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale).
|
|
48
|
+
*
|
|
49
|
+
* The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See [Support for Document Scale]({% slug documentscale_popup %}).
|
|
50
|
+
*
|
|
51
|
+
* > Using this token is not necessary for user-applied browser zoom.
|
|
52
|
+
*
|
|
53
|
+
*/
|
|
54
|
+
scale?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
|
|
57
|
+
*/
|
|
58
|
+
popupAlign?: Align;
|
|
59
|
+
/**
|
|
60
|
+
* Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
|
|
61
|
+
*/
|
|
62
|
+
offset?: Offset;
|
|
63
|
+
/**
|
|
64
|
+
* Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
|
|
65
|
+
*/
|
|
66
|
+
popupClass?: string | Array<string> | {
|
|
67
|
+
[key: string]: boolean;
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* Specifies a list of CSS classes that will be added to the Popup element.
|
|
71
|
+
*/
|
|
72
|
+
className?: string | Array<string>;
|
|
73
|
+
/**
|
|
74
|
+
* Specifies the id that will be added to the Popup element.
|
|
75
|
+
*/
|
|
76
|
+
id?: string;
|
|
77
|
+
/**
|
|
78
|
+
* Represents the styles that are applied to the Popup.
|
|
79
|
+
*/
|
|
80
|
+
style?: React.CSSProperties;
|
|
81
|
+
/**
|
|
82
|
+
* Fires after the Popup is opened and the opening animation ends.
|
|
83
|
+
*/
|
|
84
|
+
onOpen?: (event: OpenEvent) => void;
|
|
85
|
+
/**
|
|
86
|
+
* Fires after the Popup is closed.
|
|
87
|
+
*/
|
|
88
|
+
onClose?: (event: CloseEvent) => void;
|
|
89
|
+
/**
|
|
90
|
+
* Fires after the Popup position is set.
|
|
91
|
+
*/
|
|
92
|
+
onPosition?: (event: PositionEvent) => void;
|
|
7
93
|
/**
|
|
8
94
|
* Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
|
|
9
95
|
*/
|
|
@@ -18,4 +104,8 @@ export interface PopupProps extends PopupSettings {
|
|
|
18
104
|
* @hidden
|
|
19
105
|
*/
|
|
20
106
|
children?: React.ReactNode;
|
|
107
|
+
/**
|
|
108
|
+
* @hidden
|
|
109
|
+
*/
|
|
110
|
+
useBaseStyles?: boolean;
|
|
21
111
|
}
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-popup',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1642513600,
|
|
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
|
};
|
package/dist/es/util.d.ts
CHANGED
|
@@ -11,13 +11,6 @@ export declare const hasBoundingRect: (elem: HTMLElement) => boolean;
|
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
13
13
|
export declare const FRAME_DURATION: number;
|
|
14
|
-
/**
|
|
15
|
-
* @hidden
|
|
16
|
-
*/
|
|
17
|
-
export declare const CollisionType: {
|
|
18
|
-
fit: string;
|
|
19
|
-
flip: string;
|
|
20
|
-
};
|
|
21
14
|
/**
|
|
22
15
|
* @hidden
|
|
23
16
|
*/
|
package/dist/es/util.js
CHANGED
|
@@ -14,13 +14,6 @@ export var hasBoundingRect = function (elem) { return !!elem.getBoundingClientRe
|
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
16
|
export var FRAME_DURATION = 1000 / 60; // 1000ms divided by 60fps
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
export var CollisionType = {
|
|
21
|
-
fit: 'fit',
|
|
22
|
-
flip: 'flip'
|
|
23
|
-
};
|
|
24
17
|
/**
|
|
25
18
|
* @hidden
|
|
26
19
|
*/
|