@progress/kendo-react-dialogs 6.1.1 → 7.0.0-develop.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/{dist/es/Dialog.d.ts → Dialog.d.ts} +6 -2
  2. package/{dist/npm/DialogActionsBar.d.ts → DialogActionsBar.d.ts} +4 -0
  3. package/{dist/es/DialogProps.d.ts → DialogProps.d.ts} +4 -1
  4. package/{dist/es/DialogTitleBar.d.ts → DialogTitleBar.d.ts} +4 -0
  5. package/LICENSE.md +1 -1
  6. package/{dist/es/MiddleLayerOptimization.d.ts → MiddleLayerOptimization.d.ts} +4 -0
  7. package/StageEnum.d.ts +9 -0
  8. package/{dist/es/Window.d.ts → Window.d.ts} +6 -2
  9. package/{dist/npm/WindowActionsBar.d.ts → WindowActionsBar.d.ts} +4 -0
  10. package/{dist/npm/WindowProps.d.ts → WindowProps.d.ts} +4 -1
  11. package/WindowResizeHandlers.d.ts +20 -0
  12. package/{dist/npm/WindowTitlebar.d.ts → WindowTitlebar.d.ts} +4 -0
  13. package/constants.d.ts +12 -0
  14. package/dist/cdn/js/kendo-react-dialogs.js +5 -1
  15. package/{dist/npm/events.d.ts → events.d.ts} +4 -0
  16. package/index.d.ts +13 -0
  17. package/index.js +5 -0
  18. package/index.mjs +677 -0
  19. package/{dist/npm/messages → messages}/index.d.ts +4 -0
  20. package/models/actions-layout.d.ts +8 -0
  21. package/package-metadata.d.ts +9 -0
  22. package/package.json +28 -36
  23. package/utils.d.ts +6 -0
  24. package/about.md +0 -3
  25. package/dist/es/Dialog.js +0 -203
  26. package/dist/es/DialogActionsBar.d.ts +0 -21
  27. package/dist/es/DialogActionsBar.js +0 -32
  28. package/dist/es/DialogProps.js +0 -3
  29. package/dist/es/DialogTitleBar.js +0 -13
  30. package/dist/es/MiddleLayerOptimization.js +0 -33
  31. package/dist/es/StageEnum.d.ts +0 -5
  32. package/dist/es/StageEnum.js +0 -6
  33. package/dist/es/Window.js +0 -643
  34. package/dist/es/WindowActionsBar.d.ts +0 -21
  35. package/dist/es/WindowActionsBar.js +0 -34
  36. package/dist/es/WindowProps.d.ts +0 -144
  37. package/dist/es/WindowProps.js +0 -2
  38. package/dist/es/WindowResizeHandlers.d.ts +0 -16
  39. package/dist/es/WindowResizeHandlers.js +0 -49
  40. package/dist/es/WindowTitlebar.d.ts +0 -63
  41. package/dist/es/WindowTitlebar.js +0 -47
  42. package/dist/es/constants.d.ts +0 -8
  43. package/dist/es/constants.js +0 -8
  44. package/dist/es/events.d.ts +0 -45
  45. package/dist/es/events.js +0 -2
  46. package/dist/es/main.d.ts +0 -9
  47. package/dist/es/main.js +0 -5
  48. package/dist/es/messages/index.d.ts +0 -25
  49. package/dist/es/messages/index.js +0 -26
  50. package/dist/es/models/actions-layout.d.ts +0 -4
  51. package/dist/es/models/actions-layout.js +0 -1
  52. package/dist/es/package-metadata.d.ts +0 -5
  53. package/dist/es/package-metadata.js +0 -11
  54. package/dist/es/utils.d.ts +0 -2
  55. package/dist/es/utils.js +0 -22
  56. package/dist/npm/Dialog.d.ts +0 -90
  57. package/dist/npm/Dialog.js +0 -206
  58. package/dist/npm/DialogActionsBar.js +0 -36
  59. package/dist/npm/DialogProps.d.ts +0 -74
  60. package/dist/npm/DialogProps.js +0 -4
  61. package/dist/npm/DialogTitleBar.d.ts +0 -26
  62. package/dist/npm/DialogTitleBar.js +0 -17
  63. package/dist/npm/MiddleLayerOptimization.d.ts +0 -17
  64. package/dist/npm/MiddleLayerOptimization.js +0 -36
  65. package/dist/npm/StageEnum.d.ts +0 -5
  66. package/dist/npm/StageEnum.js +0 -9
  67. package/dist/npm/Window.d.ts +0 -174
  68. package/dist/npm/Window.js +0 -646
  69. package/dist/npm/WindowActionsBar.js +0 -38
  70. package/dist/npm/WindowProps.js +0 -3
  71. package/dist/npm/WindowResizeHandlers.d.ts +0 -16
  72. package/dist/npm/WindowResizeHandlers.js +0 -52
  73. package/dist/npm/WindowTitlebar.js +0 -50
  74. package/dist/npm/constants.d.ts +0 -8
  75. package/dist/npm/constants.js +0 -11
  76. package/dist/npm/events.js +0 -3
  77. package/dist/npm/main.d.ts +0 -9
  78. package/dist/npm/main.js +0 -13
  79. package/dist/npm/messages/index.js +0 -29
  80. package/dist/npm/models/actions-layout.d.ts +0 -4
  81. package/dist/npm/models/actions-layout.js +0 -2
  82. package/dist/npm/package-metadata.d.ts +0 -5
  83. package/dist/npm/package-metadata.js +0 -14
  84. package/dist/npm/utils.d.ts +0 -2
  85. package/dist/npm/utils.js +0 -26
  86. package/dist/systemjs/kendo-react-dialogs.js +0 -1
  87. package/e2e-next/dialog.basic.tests.ts +0 -24
  88. package/e2e-next/window.basic.tests.ts +0 -24
package/dist/es/Window.js DELETED
@@ -1,643 +0,0 @@
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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
6
- return extendStatics(d, b);
7
- };
8
- return function (d, b) {
9
- if (typeof b !== "function" && b !== null)
10
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
11
- extendStatics(d, b);
12
- function __() { this.constructor = d; }
13
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14
- };
15
- })();
16
- var __assign = (this && this.__assign) || function () {
17
- __assign = Object.assign || function(t) {
18
- for (var s, i = 1, n = arguments.length; i < n; i++) {
19
- s = arguments[i];
20
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
21
- t[p] = s[p];
22
- }
23
- return t;
24
- };
25
- return __assign.apply(this, arguments);
26
- };
27
- import * as React from 'react';
28
- import * as ReactDOM from 'react-dom';
29
- import * as PropTypes from 'prop-types';
30
- import { WindowTitleBar } from './WindowTitlebar';
31
- import { dispatchEvent, Keys, classNames, guid, ZIndexContext, canUseDOM } from '@progress/kendo-react-common';
32
- import { Draggable, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
33
- import { ResizeHandlers } from './WindowResizeHandlers';
34
- import { MiddleLayerOptimization } from './MiddleLayerOptimization';
35
- import { windowStage } from './StageEnum';
36
- import { validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
37
- import { packageMetadata } from './package-metadata';
38
- import { WindowActionsBar } from './WindowActionsBar';
39
- import { DATA_DIALOGS_ID, DEFAULT_DIALOGS_ZINDEX, ZINDEX_DIALOGS_STEP } from './constants';
40
- import { getMaxZIndex } from './utils';
41
- var DEFAULT_WIDTH = 300;
42
- var DEFAULT_HEIGHT = 300;
43
- var DEFAULT_MIN_WIDTH = 120;
44
- var DEFAULT_MIN_HEIGHT = 100;
45
- var DEFAULT_STEP = 5;
46
- /** @hidden */
47
- var WindowWithoutContext = /** @class */ (function (_super) {
48
- __extends(WindowWithoutContext, _super);
49
- function WindowWithoutContext(props) {
50
- var _this = _super.call(this, props) || this;
51
- /**
52
- * @hidden
53
- */
54
- _this.context = 0;
55
- _this.draggable = null;
56
- _this.offSetCoordinates = { x: 0, y: 0 };
57
- _this._id = guid();
58
- _this.titleId = _this.generateTitleId();
59
- _this.mounted = false;
60
- _this.showLicenseWatermark = false;
61
- /**
62
- * @hidden
63
- */
64
- _this.onKeyDown = function (event) {
65
- if (event.target !== event.currentTarget) {
66
- return;
67
- }
68
- var minWidth = _this.props.minWidth || DEFAULT_MIN_WIDTH;
69
- var minHeight = _this.props.minHeight || DEFAULT_MIN_HEIGHT;
70
- if (event.ctrlKey && _this.props.resizable) {
71
- switch (event.keyCode) {
72
- case Keys.up:
73
- event.preventDefault();
74
- if (minHeight <= (_this.height - DEFAULT_STEP)) {
75
- _this.setState({ height: _this.height - DEFAULT_STEP });
76
- }
77
- break;
78
- case Keys.down:
79
- event.preventDefault();
80
- _this.setState({ height: _this.height + DEFAULT_STEP });
81
- break;
82
- case Keys.left:
83
- if (minWidth <= (_this.width - DEFAULT_STEP)) {
84
- _this.setState({ width: _this.width - DEFAULT_STEP });
85
- }
86
- break;
87
- case Keys.right:
88
- _this.setState({ width: _this.width + DEFAULT_STEP });
89
- break;
90
- default: return;
91
- }
92
- _this.dispatchMoveEvent(_this.props.onResize, event, false, undefined);
93
- return;
94
- }
95
- if (event.altKey) {
96
- switch (event.keyCode) {
97
- case Keys.up:
98
- if (_this.windowStage === windowStage.MINIMIZED) {
99
- _this.handleRestore(event);
100
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.DEFAULT });
101
- }
102
- else if (_this.windowStage === windowStage.DEFAULT) {
103
- _this.handleFullscreen(event);
104
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.FULLSCREEN });
105
- }
106
- break;
107
- case Keys.down:
108
- if (_this.windowStage === windowStage.FULLSCREEN) {
109
- _this.handleRestore(event);
110
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.DEFAULT });
111
- }
112
- else if (_this.windowStage === windowStage.DEFAULT) {
113
- _this.handleMinimize(event);
114
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.MINIMIZED });
115
- }
116
- break;
117
- default:
118
- }
119
- return;
120
- }
121
- if (!event.ctrlKey) {
122
- switch (event.keyCode) {
123
- case Keys.esc:
124
- if (_this.props.onClose) {
125
- _this.handleCloseWindow(event);
126
- }
127
- return;
128
- case Keys.up:
129
- _this.setState({ top: _this.state.top - DEFAULT_STEP });
130
- break;
131
- case Keys.down:
132
- _this.setState({ top: _this.state.top + DEFAULT_STEP });
133
- break;
134
- case Keys.left:
135
- _this.setState({ left: _this.state.left - DEFAULT_STEP });
136
- break;
137
- case Keys.right:
138
- _this.setState({ left: _this.state.left + DEFAULT_STEP });
139
- break;
140
- default: return;
141
- }
142
- }
143
- _this.dispatchMoveEvent(_this.props.onMove, event, false, undefined);
144
- };
145
- /**
146
- * @hidden
147
- */
148
- _this.onPress = function (data) {
149
- var e = data.event;
150
- _this.windowCoordinatesState.differenceLeft = e.pageX - _this.left;
151
- _this.windowCoordinatesState.differenceTop = e.pageY - _this.top;
152
- };
153
- /**
154
- * @hidden
155
- */
156
- _this.onDrag = function (data) {
157
- var e = data.event;
158
- e.originalEvent.preventDefault();
159
- if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
160
- _this.setState({
161
- top: Math.max(e.pageY - _this.windowCoordinatesState.differenceTop, 0),
162
- left: e.pageX - _this.windowCoordinatesState.differenceLeft,
163
- isDragging: true
164
- });
165
- if (_this.props.onMove) {
166
- // eslint-disable-next-line max-len
167
- _this.dispatchMoveEvent(_this.props.onMove, e, true, false);
168
- }
169
- }
170
- };
171
- /**
172
- * @hidden
173
- */
174
- _this.onRelease = function (data) {
175
- var e = data.event;
176
- if (_this.windowStage !== windowStage.FULLSCREEN && _this.props.draggable) {
177
- if (_this.props.onMove) {
178
- _this.dispatchMoveEvent(_this.props.onMove, e, true, true);
179
- }
180
- }
181
- _this.setState({
182
- isDragging: false
183
- });
184
- };
185
- /**
186
- * @hidden
187
- */
188
- _this.onFocus = function () {
189
- if (_this._blurTimeout) {
190
- clearTimeout(_this._blurTimeout);
191
- _this._blurTimeout = undefined;
192
- }
193
- else {
194
- _this.setState({
195
- focused: true,
196
- zIndex: getMaxZIndex(_this.getCurrentZIndex(), _this.getDocument(), _this._id)
197
- });
198
- }
199
- };
200
- /**
201
- * @hidden
202
- */
203
- _this.onBlur = function () {
204
- clearTimeout(_this._blurTimeout);
205
- var currentWindow = _this.getWindow();
206
- if (currentWindow) {
207
- _this._blurTimeout = currentWindow.setTimeout(function () {
208
- if (_this.mounted) {
209
- _this.setState({ focused: false });
210
- }
211
- _this._blurTimeout = undefined;
212
- });
213
- }
214
- };
215
- // Get initial coordinates of the Window
216
- _this.getInitialTop = function () {
217
- if (_this.props.top !== undefined) {
218
- return _this.props.top;
219
- }
220
- if (_this.props.initialTop !== undefined) {
221
- return _this.props.initialTop;
222
- }
223
- var height = DEFAULT_HEIGHT;
224
- if (_this.props.height !== undefined) {
225
- height = _this.props.height;
226
- }
227
- else if (_this.props.initialHeight !== undefined) {
228
- height = _this.props.initialHeight;
229
- }
230
- if (_this.props.appendTo) {
231
- return (_this.props.appendTo.offsetHeight / 2) - (height / 2);
232
- }
233
- var currentWindow = _this.getWindow();
234
- return currentWindow ? (currentWindow.innerHeight / 2) - (height / 2) : 0;
235
- };
236
- _this.getInitialLeft = function () {
237
- if (_this.props.left !== undefined) {
238
- return _this.props.left;
239
- }
240
- if (_this.props.initialLeft !== undefined) {
241
- return _this.props.initialLeft;
242
- }
243
- var width = DEFAULT_WIDTH;
244
- if (_this.props.width !== undefined) {
245
- width = _this.props.width;
246
- }
247
- else if (_this.props.initialWidth !== undefined) {
248
- width = _this.props.initialWidth;
249
- }
250
- if (_this.props.appendTo) {
251
- return (_this.props.appendTo.offsetWidth / 2) - (width / 2);
252
- }
253
- var currentWindow = _this.getWindow();
254
- return currentWindow ? (currentWindow.innerWidth / 2) - (width / 2) : 0;
255
- };
256
- _this.getInitialWidth = function () {
257
- var width = DEFAULT_WIDTH;
258
- if (_this.props.width !== undefined) {
259
- width = _this.props.width;
260
- }
261
- else if (_this.props.initialWidth !== undefined) {
262
- width = _this.props.initialWidth;
263
- }
264
- return width;
265
- };
266
- _this.getInitialHeight = function () {
267
- var height = DEFAULT_HEIGHT;
268
- if (_this.props.height !== undefined) {
269
- height = _this.props.height;
270
- }
271
- else if (_this.props.initialHeight !== undefined) {
272
- height = _this.props.initialHeight;
273
- }
274
- return height;
275
- };
276
- // Handle actions
277
- _this.handleMinimize = function (event) {
278
- event.preventDefault();
279
- _this.windowCoordinatesState.leftBeforeAction = _this.left;
280
- _this.windowCoordinatesState.topBeforeAction = _this.top;
281
- _this.windowCoordinatesState.widthBeforeAction = _this.width;
282
- _this.windowCoordinatesState.heightBeforeAction = _this.height;
283
- _this.setState({
284
- stage: windowStage.MINIMIZED,
285
- height: 0
286
- });
287
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.MINIMIZED });
288
- };
289
- _this.handleFullscreen = function (event) {
290
- event.preventDefault();
291
- _this.windowCoordinatesState.leftBeforeAction = _this.left;
292
- _this.windowCoordinatesState.topBeforeAction = _this.top;
293
- _this.windowCoordinatesState.widthBeforeAction = _this.width;
294
- _this.windowCoordinatesState.heightBeforeAction = _this.height;
295
- var currentWindow = _this.getWindow();
296
- var innerWidth = currentWindow ? currentWindow.innerWidth : 0;
297
- var innerHeight = currentWindow ? currentWindow.innerHeight : 0;
298
- _this.setState({
299
- left: 0,
300
- top: 0,
301
- width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : innerWidth,
302
- height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : innerHeight,
303
- stage: windowStage.FULLSCREEN
304
- });
305
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.FULLSCREEN });
306
- };
307
- _this.handleRestore = function (event) {
308
- event.preventDefault();
309
- if (_this.windowStage === windowStage.FULLSCREEN) {
310
- _this.setState({
311
- stage: windowStage.DEFAULT,
312
- left: _this.windowCoordinatesState.leftBeforeAction,
313
- top: _this.windowCoordinatesState.topBeforeAction,
314
- width: _this.windowCoordinatesState.widthBeforeAction,
315
- height: _this.windowCoordinatesState.heightBeforeAction
316
- });
317
- }
318
- else if (_this.windowStage === windowStage.MINIMIZED) {
319
- _this.setState({
320
- stage: windowStage.DEFAULT,
321
- height: _this.windowCoordinatesState.heightBeforeAction
322
- });
323
- }
324
- dispatchEvent(_this.props.onStageChange, event, _this, { state: windowStage.DEFAULT });
325
- };
326
- _this.handleCloseWindow = function (event) {
327
- event.preventDefault();
328
- dispatchEvent(_this.props.onClose, event, _this, { state: undefined });
329
- };
330
- _this.handleDoubleClick = function (e) {
331
- if (_this.windowStage === windowStage.FULLSCREEN || _this.windowStage === windowStage.MINIMIZED) {
332
- _this.handleRestore(e);
333
- }
334
- else {
335
- _this.handleFullscreen(e);
336
- }
337
- };
338
- // Handle resizing
339
- _this.handleResize = function (event, props) {
340
- var x = _this.props.appendTo ? event.pageX - _this.offSetCoordinates.x : event.pageX;
341
- var y = _this.props.appendTo ? event.pageY - _this.offSetCoordinates.y : event.pageY;
342
- var currentWidth = _this.width;
343
- var currentHeight = _this.height;
344
- var minWidth = _this.props.minWidth || DEFAULT_MIN_WIDTH;
345
- var minHeight = _this.props.minHeight || DEFAULT_MIN_HEIGHT;
346
- var heightDifference = _this.top - y;
347
- var widthDifference = _this.left - x;
348
- var newWidth = x - _this.left;
349
- var newHeight = y - _this.top;
350
- var newState = Object.assign({}, _this.state, { isDragging: !props.end });
351
- if (props.direction.indexOf('n') >= 0 && minHeight - (currentHeight + heightDifference) < 0) {
352
- if (_this.top > 0) {
353
- newState.height = currentHeight + heightDifference;
354
- }
355
- newState.top = y;
356
- }
357
- if (props.direction.indexOf('s') >= 0 && (minHeight - newHeight < 0)) {
358
- newState.height = newHeight;
359
- }
360
- if (props.direction.indexOf('w') >= 0 && minWidth - (currentWidth + widthDifference) < 0) {
361
- if (_this.left > 0) {
362
- newState.width = currentWidth + widthDifference;
363
- }
364
- newState.left = x;
365
- }
366
- if (props.direction.indexOf('e') >= 0 && (minWidth - newWidth < 0)) {
367
- newState.width = newWidth;
368
- }
369
- _this.setState(newState);
370
- _this.dispatchMoveEvent(_this.props.onResize, event, true, props.end);
371
- };
372
- // Dispatcher for the resize and move events
373
- _this.dispatchMoveEvent = function (callback, event, drag, end) {
374
- if (!callback) {
375
- return;
376
- }
377
- callback.call(undefined, {
378
- nativeEvent: event.nativeEvent ? event.nativeEvent : event.originalEvent,
379
- drag: drag,
380
- end: end,
381
- target: _this,
382
- left: _this.state.left,
383
- top: _this.state.top,
384
- width: _this.state.width,
385
- hight: _this.state.height,
386
- height: _this.state.height
387
- });
388
- };
389
- _this.handleBrowserWindowResize = function () {
390
- if (_this.windowStage === windowStage.FULLSCREEN) {
391
- var currentWindow = _this.getWindow();
392
- var innerWidth_1 = currentWindow ? currentWindow.innerWidth : 0;
393
- var innerHeight_1 = currentWindow ? currentWindow.innerHeight : 0;
394
- _this.setState({
395
- width: _this.props.appendTo ? _this.props.appendTo.offsetWidth : innerWidth_1,
396
- height: _this.props.appendTo ? _this.props.appendTo.offsetHeight : innerHeight_1
397
- });
398
- }
399
- };
400
- _this.getCurrentZIndex = function () {
401
- if (!_this.state || _this.context === undefined) {
402
- return _this.context ? _this.context : DEFAULT_DIALOGS_ZINDEX;
403
- }
404
- return _this.state.zIndex > (_this.context ? _this.context + ZINDEX_DIALOGS_STEP : 0) ? _this.state.zIndex : _this.context + ZINDEX_DIALOGS_STEP;
405
- };
406
- _this.getDocument = function () {
407
- return _this.props.appendTo ? _this.props.appendTo.ownerDocument : document;
408
- };
409
- _this.getWindow = function () {
410
- var currentDocument = _this.getDocument();
411
- return currentDocument && currentDocument.defaultView;
412
- };
413
- validatePackage(packageMetadata);
414
- _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
415
- _this.state = {
416
- stage: _this.props.stage || windowStage.DEFAULT,
417
- isDragging: false,
418
- top: _this.getInitialTop(),
419
- left: _this.getInitialLeft(),
420
- width: _this.getInitialWidth(),
421
- height: _this.getInitialHeight(),
422
- focused: true,
423
- zIndex: getMaxZIndex(_this.getCurrentZIndex(), _this.getDocument(), _this._id)
424
- };
425
- _this.windowCoordinatesState = {
426
- leftBeforeAction: _this.getInitialLeft(),
427
- topBeforeAction: _this.getInitialTop(),
428
- widthBeforeAction: _this.getInitialWidth(),
429
- heightBeforeAction: _this.getInitialHeight()
430
- };
431
- return _this;
432
- }
433
- /**
434
- * @hidden
435
- */
436
- WindowWithoutContext.prototype.componentDidMount = function () {
437
- var currentWindow = this.getWindow();
438
- if (currentWindow) {
439
- currentWindow.addEventListener('resize', this.handleBrowserWindowResize);
440
- }
441
- var currentDocument = this.getDocument();
442
- if (this.props.appendTo && currentDocument) {
443
- var containerCoordinates = this.props.appendTo.getBoundingClientRect();
444
- var bodyRect = currentDocument.body.getBoundingClientRect();
445
- this.offSetCoordinates.x = containerCoordinates.left - bodyRect.left;
446
- this.offSetCoordinates.y = containerCoordinates.top - bodyRect.top;
447
- }
448
- this.mounted = true;
449
- };
450
- /**
451
- * @hidden
452
- */
453
- WindowWithoutContext.prototype.componentWillUnmount = function () {
454
- var currentWindow = this.getWindow();
455
- if (currentWindow) {
456
- currentWindow.removeEventListener('resize', this.handleBrowserWindowResize);
457
- }
458
- this.mounted = false;
459
- };
460
- /**
461
- * @hidden
462
- */
463
- WindowWithoutContext.prototype.componentDidUpdate = function () {
464
- var currentDocument = this.getDocument();
465
- if (this.props.appendTo && currentDocument) {
466
- var containerCoordinates = this.props.appendTo.getBoundingClientRect();
467
- var bodyRect = currentDocument.body.getBoundingClientRect();
468
- this.offSetCoordinates.x = containerCoordinates.left - bodyRect.left;
469
- this.offSetCoordinates.y = containerCoordinates.top - bodyRect.top;
470
- }
471
- this.mounted = true;
472
- };
473
- /**
474
- * @hidden
475
- */
476
- WindowWithoutContext.prototype.render = function () {
477
- var _a, _b;
478
- var _this = this;
479
- var elementsArray = React.Children.toArray(this.props.children);
480
- var content = this.getContent(elementsArray);
481
- var actions = this.getActionBar(elementsArray);
482
- var currentZIndex = this.getCurrentZIndex();
483
- var classNamesWindow = classNames('k-window', this.props.className, (_a = {},
484
- _a["k-window-".concat(this.props.themeColor)] = this.props.themeColor,
485
- _a['k-window-minimized'] = this.state.stage === 'MINIMIZED',
486
- _a['k-window-focused'] = this.state.focused,
487
- _a));
488
- var windowElement = (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
489
- React.createElement(React.Fragment, null,
490
- this.props.modal && (React.createElement("div", { className: "k-overlay", style: __assign({ zIndex: currentZIndex }, this.props.overlayStyle) })),
491
- React.createElement("div", __assign({}, (_b = {}, _b[DATA_DIALOGS_ID] = this._id, _b), { tabIndex: 0, role: 'dialog', "aria-labelledby": this.titleId, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, ref: function (el) {
492
- _this.windowElement = el;
493
- _this.element = el;
494
- }, className: classNamesWindow, style: __assign({ top: this.top, left: this.left, width: this.width, height: this.height || '', zIndex: currentZIndex }, this.props.style) }),
495
- React.createElement(MiddleLayerOptimization, { shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || false, isDragging: this.state.isDragging },
496
- React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { return _this.draggable = component; } },
497
- React.createElement(WindowTitleBar, { stage: this.windowStage, onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : undefined, onMinimizeButtonClick: this.handleMinimize, onFullScreenButtonClick: this.handleFullscreen, onRestoreButtonClick: this.handleRestore, onCloseButtonClick: this.handleCloseWindow, closeButton: this.props.closeButton, minimizeButton: this.props.minimizeButton, maximizeButton: this.props.maximizeButton, restoreButton: this.props.restoreButton, id: this.titleId }, this.props.title)),
498
- this.windowStage !== windowStage.MINIMIZED
499
- ? (React.createElement(React.Fragment, null,
500
- React.createElement("div", { className: "k-window-content" }, content),
501
- actions))
502
- : null,
503
- this.windowStage === windowStage.DEFAULT &&
504
- this.props.resizable
505
- ? React.createElement(ResizeHandlers, { onResize: this.handleResize })
506
- : null),
507
- this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)))));
508
- if (canUseDOM) {
509
- return this.props.appendTo !== null ?
510
- ReactDOM.createPortal(windowElement, this.props.appendTo || document.body) :
511
- windowElement;
512
- }
513
- return null;
514
- };
515
- Object.defineProperty(WindowWithoutContext.prototype, "top", {
516
- // Getters
517
- get: function () {
518
- if (this.windowStage !== windowStage.FULLSCREEN) {
519
- return Math.max(this.props.top || this.state.top, 0);
520
- }
521
- return 0;
522
- },
523
- enumerable: false,
524
- configurable: true
525
- });
526
- Object.defineProperty(WindowWithoutContext.prototype, "left", {
527
- get: function () {
528
- if (this.windowStage !== windowStage.FULLSCREEN) {
529
- return Math.max(this.props.left || this.state.left, 0);
530
- }
531
- return 0;
532
- },
533
- enumerable: false,
534
- configurable: true
535
- });
536
- Object.defineProperty(WindowWithoutContext.prototype, "width", {
537
- get: function () {
538
- var width = this.props.width || this.state.width;
539
- if (this.windowStage === windowStage.FULLSCREEN) {
540
- if (this.props.appendTo) {
541
- width = this.props.appendTo.offsetWidth;
542
- return width;
543
- }
544
- var currentWindow = this.getWindow();
545
- width = currentWindow ? currentWindow.innerWidth : 0;
546
- }
547
- return width;
548
- },
549
- enumerable: false,
550
- configurable: true
551
- });
552
- Object.defineProperty(WindowWithoutContext.prototype, "height", {
553
- get: function () {
554
- var height = this.props.height || this.state.height;
555
- if (this.windowStage === windowStage.FULLSCREEN) {
556
- if (this.props.appendTo) {
557
- height = this.props.appendTo.offsetHeight;
558
- return height;
559
- }
560
- var currentWindow = this.getWindow();
561
- height = currentWindow ? currentWindow.innerHeight : 0;
562
- }
563
- else if (this.windowStage === windowStage.MINIMIZED) {
564
- height = 0;
565
- }
566
- return height;
567
- },
568
- enumerable: false,
569
- configurable: true
570
- });
571
- Object.defineProperty(WindowWithoutContext.prototype, "windowStage", {
572
- get: function () {
573
- return this.props.stage || this.state.stage;
574
- },
575
- enumerable: false,
576
- configurable: true
577
- });
578
- WindowWithoutContext.prototype.getActionBar = function (children) {
579
- return children.filter(function (child) { return child && child.type === WindowActionsBar; });
580
- };
581
- WindowWithoutContext.prototype.getContent = function (children) {
582
- return children.filter(function (child) {
583
- return child && child.type !== WindowActionsBar;
584
- });
585
- };
586
- WindowWithoutContext.prototype.generateTitleId = function () {
587
- return 'window-title-' + this._id;
588
- };
589
- WindowWithoutContext.displayName = 'Window';
590
- /**
591
- * @hidden
592
- */
593
- WindowWithoutContext.propTypes = {
594
- width: PropTypes.number,
595
- height: PropTypes.number,
596
- left: PropTypes.number,
597
- top: PropTypes.number,
598
- initialWidth: PropTypes.number,
599
- initialHeight: PropTypes.number,
600
- initialLeft: PropTypes.number,
601
- initialTop: PropTypes.number,
602
- minWidth: PropTypes.number,
603
- minHeight: PropTypes.number,
604
- resizable: PropTypes.bool,
605
- draggable: PropTypes.bool,
606
- title: PropTypes.any,
607
- shouldUpdateOnDrag: PropTypes.bool,
608
- stage: PropTypes.oneOf(['DEFAULT', 'MINIMIZED', 'FULLSCREEN']),
609
- className: PropTypes.string,
610
- style: PropTypes.object,
611
- overlayStyle: PropTypes.object
612
- };
613
- /**
614
- * @hidden
615
- */
616
- WindowWithoutContext.defaultProps = {
617
- minWidth: DEFAULT_MIN_WIDTH,
618
- minHeight: DEFAULT_MIN_HEIGHT,
619
- resizable: true,
620
- draggable: true,
621
- modal: false,
622
- doubleClickStageChange: true
623
- };
624
- /**
625
- * @hidden
626
- */
627
- WindowWithoutContext.contextType = ZIndexContext;
628
- return WindowWithoutContext;
629
- }(React.Component));
630
- /**
631
- * Represents the PropsContext of the `Window` component.
632
- * Used for global configuration of all `Window` instances.
633
- */
634
- export var WindowPropsContext = createPropsContext();
635
- /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
636
- /**
637
- * Represents the [KendoReact Window component]({% slug overview_window %}).
638
- *
639
- * Accepts properties of type [WindowProps]({% slug api_dialogs_windowprops %}).
640
- * Obtaining the `ref` returns an object of type [WindowHandle]({% slug api_dialogs_windowhandle %}).
641
- */
642
- export var Window = withPropsContext(WindowPropsContext, WindowWithoutContext);
643
- Window.displayName = 'KendoReactWindow';
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
- import { ActionsLayout } from './models/actions-layout';
3
- /**
4
- * Represents the props of the [KendoReact WindowActionsBar component]({% slug overview_dialog %}).
5
- */
6
- export interface WindowActionsBarProps {
7
- /**
8
- * Specifies the possible layouts of the action buttons ([see example]({% slug actionbuttons_window %})). Defaults to `end`.
9
- */
10
- layout?: ActionsLayout;
11
- /**
12
- * @hidden
13
- */
14
- children?: any;
15
- }
16
- /**
17
- * Returns the action bar of the Window.
18
- *
19
- * @returns React.ReactElement
20
- */
21
- export declare const WindowActionsBar: React.FunctionComponent<WindowActionsBarProps>;