@progress/kendo-react-sortable 6.1.1-dev.202311151536 → 7.0.0-develop.1

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 (73) hide show
  1. package/LICENSE.md +1 -1
  2. package/{dist/npm/Sortable.d.ts → Sortable.d.ts} +8 -4
  3. package/dist/cdn/js/kendo-react-sortable.js +5 -1
  4. package/events/BaseEvent.d.ts +13 -0
  5. package/{dist/es/events → events}/PreventableEvent.d.ts +4 -0
  6. package/{dist/npm/events → events}/SortableOnDragEndEvent.d.ts +4 -0
  7. package/{dist/npm/events → events}/SortableOnDragOverEvent.d.ts +4 -0
  8. package/{dist/npm/events → events}/SortableOnDragStartEvent.d.ts +4 -0
  9. package/{dist/es/events → events}/SortableOnNavigateEvent.d.ts +4 -0
  10. package/index.d.ts +13 -0
  11. package/index.js +5 -0
  12. package/index.mjs +485 -0
  13. package/{dist/es/interfaces → interfaces}/SortableDefaultProps.d.ts +4 -1
  14. package/interfaces/SortableEmptyItemUIProps.d.ts +13 -0
  15. package/{dist/npm/interfaces → interfaces}/SortableItemUIProps.d.ts +4 -1
  16. package/{dist/es/interfaces → interfaces}/SortableProps.d.ts +4 -1
  17. package/messages/index.d.ts +14 -0
  18. package/package-metadata.d.ts +9 -0
  19. package/package.json +27 -37
  20. package/{dist/npm/utils → utils}/utils.d.ts +4 -0
  21. package/about.md +0 -3
  22. package/dist/es/Sortable.d.ts +0 -206
  23. package/dist/es/Sortable.js +0 -691
  24. package/dist/es/events/BaseEvent.d.ts +0 -10
  25. package/dist/es/events/BaseEvent.js +0 -1
  26. package/dist/es/events/PreventableEvent.js +0 -28
  27. package/dist/es/events/SortableOnDragEndEvent.d.ts +0 -27
  28. package/dist/es/events/SortableOnDragEndEvent.js +0 -16
  29. package/dist/es/events/SortableOnDragOverEvent.d.ts +0 -27
  30. package/dist/es/events/SortableOnDragOverEvent.js +0 -16
  31. package/dist/es/events/SortableOnDragStartEvent.d.ts +0 -24
  32. package/dist/es/events/SortableOnDragStartEvent.js +0 -34
  33. package/dist/es/events/SortableOnNavigateEvent.js +0 -16
  34. package/dist/es/interfaces/SortableDefaultProps.js +0 -1
  35. package/dist/es/interfaces/SortableEmptyItemUIProps.d.ts +0 -9
  36. package/dist/es/interfaces/SortableEmptyItemUIProps.js +0 -1
  37. package/dist/es/interfaces/SortableItemUIProps.d.ts +0 -38
  38. package/dist/es/interfaces/SortableItemUIProps.js +0 -1
  39. package/dist/es/interfaces/SortableProps.js +0 -1
  40. package/dist/es/main.d.ts +0 -9
  41. package/dist/es/main.js +0 -6
  42. package/dist/es/messages/index.d.ts +0 -10
  43. package/dist/es/messages/index.js +0 -11
  44. package/dist/es/package-metadata.d.ts +0 -5
  45. package/dist/es/package-metadata.js +0 -11
  46. package/dist/es/utils/utils.d.ts +0 -29
  47. package/dist/es/utils/utils.js +0 -84
  48. package/dist/npm/Sortable.js +0 -694
  49. package/dist/npm/events/BaseEvent.d.ts +0 -10
  50. package/dist/npm/events/BaseEvent.js +0 -2
  51. package/dist/npm/events/PreventableEvent.d.ts +0 -18
  52. package/dist/npm/events/PreventableEvent.js +0 -31
  53. package/dist/npm/events/SortableOnDragEndEvent.js +0 -19
  54. package/dist/npm/events/SortableOnDragOverEvent.js +0 -19
  55. package/dist/npm/events/SortableOnDragStartEvent.js +0 -37
  56. package/dist/npm/events/SortableOnNavigateEvent.d.ts +0 -27
  57. package/dist/npm/events/SortableOnNavigateEvent.js +0 -19
  58. package/dist/npm/interfaces/SortableDefaultProps.d.ts +0 -25
  59. package/dist/npm/interfaces/SortableDefaultProps.js +0 -2
  60. package/dist/npm/interfaces/SortableEmptyItemUIProps.d.ts +0 -9
  61. package/dist/npm/interfaces/SortableEmptyItemUIProps.js +0 -2
  62. package/dist/npm/interfaces/SortableItemUIProps.js +0 -2
  63. package/dist/npm/interfaces/SortableProps.d.ts +0 -60
  64. package/dist/npm/interfaces/SortableProps.js +0 -2
  65. package/dist/npm/main.d.ts +0 -9
  66. package/dist/npm/main.js +0 -13
  67. package/dist/npm/messages/index.d.ts +0 -10
  68. package/dist/npm/messages/index.js +0 -14
  69. package/dist/npm/package-metadata.d.ts +0 -5
  70. package/dist/npm/package-metadata.js +0 -14
  71. package/dist/npm/utils/utils.js +0 -93
  72. package/dist/systemjs/kendo-react-sortable.js +0 -1
  73. package/e2e-next/basic.tests.ts +0 -23
@@ -1,691 +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
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
28
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
29
- if (ar || !(i in from)) {
30
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
31
- ar[i] = from[i];
32
- }
33
- }
34
- return to.concat(ar || Array.prototype.slice.call(from));
35
- };
36
- var _a;
37
- import * as React from 'react';
38
- import * as ReactDOM from 'react-dom';
39
- import * as PropTypes from 'prop-types';
40
- import { Draggable, Keys, getTabIndex, getActiveElement } from '@progress/kendo-react-common';
41
- import { SortableOnDragStartEvent } from './events/SortableOnDragStartEvent';
42
- import { SortableOnDragOverEvent } from './events/SortableOnDragOverEvent';
43
- import { SortableOnDragEndEvent } from './events/SortableOnDragEndEvent';
44
- import { SortableOnNavigateEvent } from './events/SortableOnNavigateEvent';
45
- import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
46
- import { messages, noData } from './messages';
47
- import { find, findIndex, hasClasses, isFocusable, closest, relativeContextElement } from './utils/utils';
48
- import { validatePackage } from '@progress/kendo-react-common';
49
- import { packageMetadata } from './package-metadata';
50
- import { getter } from '@progress/kendo-react-common';
51
- /**
52
- * @hidden
53
- */
54
- var ANIMATION_DURATION = 200;
55
- /**
56
- * @hidden
57
- */
58
- var SORTABLE_ITEM_ATTRIBUTE = 'data-sortable-id';
59
- /**
60
- * @hidden
61
- */
62
- var SORTABLE_COMPONENT_ATTRIBUTE = 'data-sortable-component';
63
- /**
64
- * @hidden
65
- */
66
- var SORTABLE_ATTRIBUTE_PROP = (_a = {}, _a[SORTABLE_COMPONENT_ATTRIBUTE] = true, _a);
67
- var Sortable = /** @class */ (function (_super) {
68
- __extends(Sortable, _super);
69
- function Sortable(props) {
70
- var _this = _super.call(this, props) || this;
71
- /**
72
- * @hidden
73
- */
74
- _this.state = {
75
- clientX: 0,
76
- clientY: 0,
77
- isDragging: false,
78
- activeId: '',
79
- dragCueWidth: 0,
80
- dragCueHeight: 0
81
- };
82
- _this.isRtl = false;
83
- _this.itemRefsMap = {};
84
- _this.oldSizesMap = {};
85
- _this.animatingItemMap = {};
86
- _this.draggableRef = null;
87
- _this.isUnmounted = false;
88
- _this.focusActiveId = false;
89
- _this.isKeyboardNavigated = false;
90
- _this.isDragPrevented = false;
91
- /**
92
- * @hidden
93
- */
94
- _this.swapItems = function (newState, source, destination) {
95
- var b = newState[source];
96
- newState[source] = newState[destination];
97
- newState[destination] = b;
98
- source = destination;
99
- return source;
100
- };
101
- /**
102
- * @hidden
103
- */
104
- _this.generateNewState = function (prevIndex, nextIndex) {
105
- var data = _this.props.data;
106
- var newState = __spreadArray([], data, true);
107
- var isReversed = prevIndex > nextIndex;
108
- if (isReversed) {
109
- for (var i = prevIndex - 1; i >= nextIndex; i--) {
110
- var nextItem = data[i];
111
- if (!_this.isItemDisabled(nextItem)) {
112
- prevIndex = _this.swapItems(newState, prevIndex, i);
113
- }
114
- }
115
- }
116
- else {
117
- for (var i = prevIndex + 1; i <= nextIndex; i++) {
118
- var nextItem = data[i];
119
- if (!_this.isItemDisabled(nextItem)) {
120
- prevIndex = _this.swapItems(newState, prevIndex, i);
121
- }
122
- }
123
- }
124
- return newState;
125
- };
126
- /**
127
- * @hidden
128
- */
129
- _this.closestSortableItem = function (target) {
130
- var currentTarget = target;
131
- while (currentTarget) {
132
- var id = currentTarget.getAttribute(SORTABLE_ITEM_ATTRIBUTE);
133
- if (id && _this.itemRefsMap[id] === currentTarget) {
134
- return {
135
- id: id,
136
- element: currentTarget
137
- };
138
- }
139
- currentTarget = currentTarget.parentElement;
140
- }
141
- return {
142
- id: '',
143
- element: null
144
- };
145
- };
146
- /**
147
- * @hidden
148
- */
149
- _this.isSortable = function (target) {
150
- return Boolean(target.hasAttribute(SORTABLE_COMPONENT_ATTRIBUTE));
151
- };
152
- /**
153
- * @hidden
154
- */
155
- _this.closestSortable = function (target) {
156
- var currentTarget = target;
157
- while (currentTarget) {
158
- if (_this.isSortable(currentTarget)) {
159
- return currentTarget;
160
- }
161
- currentTarget = currentTarget.parentElement;
162
- }
163
- return null;
164
- };
165
- /**
166
- * @hidden
167
- */
168
- _this.isSameSortable = function (element) {
169
- var closestSortable = _this.closestSortable(element);
170
- return closestSortable === _this.container;
171
- };
172
- /**
173
- * @hidden
174
- */
175
- _this.idComparer = function (id1, id2) {
176
- return id1 + '' === id2 + '';
177
- };
178
- /**
179
- * @hidden
180
- */
181
- _this.findItem = function (id) {
182
- var _a = _this.props, data = _a.data, idField = _a.idField;
183
- if (!(id + '')) {
184
- return;
185
- }
186
- var idGetter = getter(idField);
187
- return find(data, function (item) { return _this.idComparer(idGetter(item), id); });
188
- };
189
- /**
190
- * @hidden
191
- */
192
- _this.findIndex = function (id) {
193
- var _a = _this.props, data = _a.data, idField = _a.idField;
194
- if (!(id + '')) {
195
- return -1;
196
- }
197
- return findIndex(data, function (item) { return _this.idComparer(item[idField], id); });
198
- };
199
- /**
200
- * @hidden
201
- */
202
- _this.isItemDisabled = function (item) {
203
- return item && item[_this.props.disabledField || ''] === true;
204
- };
205
- /**
206
- * @hidden
207
- */
208
- _this.shouldResetActive = function () {
209
- var activeElement = getActiveElement(document);
210
- if (activeElement instanceof HTMLElement) {
211
- var closestItemElement = _this.closestSortableItem(activeElement).element;
212
- return !Boolean(closestItemElement);
213
- }
214
- return false;
215
- };
216
- /**
217
- * @hidden
218
- */
219
- _this.widgetTarget = function (target) {
220
- var element = closest(target, function (node) { return hasClasses(node, 'k-widget') || _this.isSortable(node); });
221
- return element && !_this.isSortable(element);
222
- };
223
- /**
224
- * @hidden
225
- */
226
- _this.allowDrag = function (target) {
227
- return target.hasAttribute(SORTABLE_ITEM_ATTRIBUTE) || !(isFocusable(target) || _this.widgetTarget(target));
228
- };
229
- /**
230
- * @hidden
231
- */
232
- _this.onDragStart = function (eventData) {
233
- var event = eventData.event;
234
- var onDragStart = _this.props.onDragStart;
235
- var targetElement = document.elementFromPoint(event.clientX, event.clientY);
236
- var _a = _this.closestSortableItem(targetElement), activeId = _a.id, activeElement = _a.element;
237
- var activeItem = _this.findItem(activeId);
238
- if (!activeId ||
239
- (activeItem && _this.isItemDisabled(activeItem)) ||
240
- !_this.allowDrag(targetElement) ||
241
- !_this.isSameSortable(targetElement)) {
242
- _this.isDragPrevented = true;
243
- return;
244
- }
245
- if (event.isTouch) {
246
- event.originalEvent.preventDefault();
247
- }
248
- var dragStartEvent = new SortableOnDragStartEvent(_this, _this.findIndex(activeId), targetElement);
249
- if (onDragStart) {
250
- onDragStart.call(undefined, dragStartEvent);
251
- }
252
- _this.isDragPrevented = dragStartEvent.isDefaultPrevented();
253
- if (_this.isDragPrevented) {
254
- event.originalEvent.preventDefault();
255
- }
256
- else {
257
- _this.offsetParent = relativeContextElement(_this.container);
258
- _this.setState({
259
- activeId: activeId,
260
- dragCueWidth: (activeElement && activeElement.clientWidth) || 0,
261
- dragCueHeight: (activeElement && activeElement.clientHeight) || 0
262
- });
263
- }
264
- };
265
- /**
266
- * @hidden
267
- */
268
- _this.onDragOver = function (eventData) {
269
- var event = eventData.event;
270
- var _a = _this.props, onDragOver = _a.onDragOver, data = _a.data;
271
- if (_this.isDragPrevented) {
272
- return;
273
- }
274
- event.originalEvent.preventDefault();
275
- var prevIndex = _this.findIndex(_this.state.activeId);
276
- if (prevIndex === -1) {
277
- _this.resetState();
278
- return;
279
- }
280
- var targetElement = document.elementFromPoint(event.clientX, event.clientY);
281
- var closestSortable = _this.closestSortableItem(targetElement);
282
- var nextIndex = _this.findIndex(closestSortable.id);
283
- var nextItem = data[nextIndex];
284
- if (onDragOver &&
285
- nextIndex > -1 &&
286
- prevIndex !== nextIndex &&
287
- !_this.isItemDisabled(nextItem) &&
288
- !_this.animatingItemMap[closestSortable.id] &&
289
- _this.shouldReorder(closestSortable.element, event.clientX, event.clientY)) {
290
- var dragOverEvent = new SortableOnDragOverEvent(_this, prevIndex, nextIndex, _this.generateNewState(prevIndex, nextIndex));
291
- onDragOver.call(undefined, dragOverEvent);
292
- }
293
- var offset = _this.parentOffset();
294
- _this.setState({
295
- clientX: event.clientX - offset.left,
296
- clientY: event.clientY - offset.top,
297
- isDragging: true
298
- });
299
- };
300
- /**
301
- * @hidden
302
- */
303
- _this.onDragEnd = function (eventData) {
304
- var event = eventData.event;
305
- var resetActive = _this.shouldResetActive();
306
- if (_this.isDragPrevented) {
307
- return;
308
- }
309
- var _a = _this.props, onDragEnd = _a.onDragEnd, data = _a.data;
310
- var targetElement = document.elementFromPoint(event.clientX, event.clientY);
311
- var closestSortableItem = _this.closestSortableItem(targetElement);
312
- var nextIndex = _this.findIndex(closestSortableItem.id);
313
- var prevIndex = _this.findIndex(_this.state.activeId);
314
- var isNextDisabled = _this.isItemDisabled(data[nextIndex]);
315
- if (nextIndex === -1 || isNextDisabled) {
316
- nextIndex = prevIndex;
317
- }
318
- if (onDragEnd) {
319
- var nextState = _this.generateNewState(prevIndex, nextIndex);
320
- if (!isNextDisabled) {
321
- var rect = _this.thresholdRect(closestSortableItem.element);
322
- if (rect && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) {
323
- var prev = prevIndex;
324
- prevIndex = nextIndex;
325
- nextIndex = prev;
326
- nextState = _this.props.data.slice();
327
- }
328
- }
329
- var dragEndEvent = new SortableOnDragEndEvent(_this, prevIndex, nextIndex, nextState);
330
- onDragEnd.call(undefined, dragEndEvent);
331
- }
332
- _this.resetState(resetActive);
333
- };
334
- /**
335
- * @hidden
336
- */
337
- _this.shouldReorder = function (draggerOverElement, clientX, clientY) {
338
- var rect = _this.thresholdRect(draggerOverElement);
339
- return rect && clientX > rect.left && clientX < rect.right && clientY > rect.top && clientY < rect.bottom;
340
- };
341
- /**
342
- * @hidden
343
- */
344
- _this.thresholdRect = function (draggerOverElement) {
345
- var activeId = _this.state.activeId;
346
- var root = _this.container;
347
- var elements = root ? Array.from(root.childNodes) : [];
348
- var activeElement = elements.find(function (e) { return e instanceof HTMLElement && e.getAttribute(SORTABLE_ITEM_ATTRIBUTE) === activeId; });
349
- if (!draggerOverElement || !activeElement) {
350
- return null;
351
- }
352
- var _a = activeElement.getBoundingClientRect(), width = _a.width, height = _a.height;
353
- var rect = draggerOverElement.getBoundingClientRect();
354
- var top = rect.top + (rect.height / 2) - (height / 2);
355
- var left = rect.left + (rect.width / 2) - (width / 2);
356
- var bottom = top + height;
357
- var right = left + width;
358
- return { top: top, left: left, bottom: bottom, right: right };
359
- };
360
- /**
361
- * @hidden
362
- */
363
- _this.onItemBlur = function () {
364
- // As IE have no support for relatedTarget
365
- window.setTimeout(function () {
366
- if (_this.isUnmounted) {
367
- return;
368
- }
369
- if (_this.shouldResetActive() && !_this.state.isDragging) {
370
- _this.setState({
371
- activeId: '' // what happends on destroyed component
372
- });
373
- }
374
- });
375
- };
376
- /**
377
- * @hidden
378
- */
379
- _this.onItemFocus = function (event) {
380
- var _a = _this.closestSortableItem(event.currentTarget), activeId = _a.id, element = _a.element;
381
- if (!_this.idComparer(activeId, _this.state.activeId) &&
382
- _this.isSameSortable(event.target) &&
383
- element === event.target) {
384
- _this.setState({
385
- activeId: activeId
386
- });
387
- }
388
- };
389
- /**
390
- * @hidden
391
- */
392
- _this.onKeyDown = function (event) {
393
- var _a = _this.props, data = _a.data, idField = _a.idField, onNavigate = _a.onNavigate, navigation = _a.navigation;
394
- var activeId = _this.state.activeId;
395
- if (!navigation || !activeId || !_this.isSameSortable(event.target)) {
396
- return;
397
- }
398
- var isRtl = _this.isRtl;
399
- var enabledItems = data.filter(function (item) { return !_this.isItemDisabled(item); });
400
- var prevIndex = findIndex(enabledItems, function (item) { return _this.idComparer(item[idField], activeId); });
401
- var maxNavIndex = enabledItems.length - 1;
402
- var nextIndex = prevIndex;
403
- if (event.keyCode === Keys.left) {
404
- if (isRtl) {
405
- event.keyCode = Keys.down;
406
- }
407
- else {
408
- event.keyCode = Keys.up;
409
- }
410
- }
411
- if (event.keyCode === Keys.right) {
412
- if (isRtl) {
413
- event.keyCode = Keys.up;
414
- }
415
- else {
416
- event.keyCode = Keys.down;
417
- }
418
- }
419
- switch (event.keyCode) {
420
- case Keys.up:
421
- if (prevIndex > 0) {
422
- nextIndex = prevIndex - 1;
423
- }
424
- break;
425
- case Keys.down:
426
- if (prevIndex < maxNavIndex) {
427
- nextIndex = prevIndex + 1;
428
- }
429
- break;
430
- default:
431
- }
432
- if (nextIndex === prevIndex) {
433
- return;
434
- }
435
- event.stopPropagation();
436
- event.preventDefault();
437
- var nextItem = enabledItems[nextIndex];
438
- var nextItemId = nextItem ? nextItem[idField] : '';
439
- var prevItem = enabledItems[prevIndex];
440
- var prevItemId = prevItem ? prevItem[idField] : '';
441
- if (event.ctrlKey) {
442
- if (onNavigate) {
443
- var actualPrevIndex = _this.findIndex(prevItemId);
444
- var actualNextIndex = _this.findIndex(nextItemId);
445
- var navigateEvent = new SortableOnNavigateEvent(_this, actualPrevIndex, actualNextIndex, _this.generateNewState(actualPrevIndex, actualNextIndex));
446
- _this.isKeyboardNavigated = true;
447
- onNavigate.call(undefined, navigateEvent);
448
- }
449
- }
450
- else {
451
- _this.focusActiveId = true;
452
- _this.setState({
453
- activeId: nextItemId + ''
454
- });
455
- }
456
- };
457
- /**
458
- * @hidden
459
- */
460
- _this.resetState = function (resetActive) {
461
- _this.isDragPrevented = false;
462
- _this.setState({
463
- clientX: 0,
464
- clientY: 0,
465
- isDragging: false,
466
- dragCueWidth: 0,
467
- dragCueHeight: 0,
468
- activeId: resetActive ? '' : _this.state.activeId
469
- });
470
- };
471
- /**
472
- * @hidden
473
- */
474
- _this.renderData = function () {
475
- var _a = _this.props, data = _a.data, UIComponent = _a.itemUI, idField = _a.idField, tabIndex = _a.tabIndex;
476
- return data.map(function (item) {
477
- var _a;
478
- var idGetter = getter(idField);
479
- var id = idGetter(item);
480
- var isDisabled = _this.isItemDisabled(item);
481
- var isActive = _this.idComparer(_this.state.activeId, id);
482
- return (React.createElement(UIComponent, { key: id, forwardRef: function (ele) { return _this.refAssign(ele, id); }, dataItem: item, isDisabled: isDisabled, isActive: isActive, isDragged: isActive && _this.state.isDragging, isDragCue: false, attributes: (_a = {},
483
- _a[SORTABLE_ITEM_ATTRIBUTE] = id,
484
- _a['aria-disabled'] = isDisabled,
485
- _a['aria-grabbed'] = isActive && _this.state.isDragging && !_this.isDragPrevented,
486
- _a['aria-dropeffect'] = isDisabled ? 'none' : 'move',
487
- _a.tabIndex = getTabIndex(tabIndex, isDisabled),
488
- _a.onFocus = _this.onItemFocus,
489
- _a.onBlur = _this.onItemBlur,
490
- _a), style: {
491
- cursor: !isDisabled ? 'move' : 'auto',
492
- MozUserSelect: 'none',
493
- msUserSelect: 'none',
494
- WebkitUserSelect: 'none',
495
- userSelect: 'none'
496
- } }));
497
- });
498
- };
499
- /**
500
- * @hidden
501
- */
502
- _this.renderNoData = function () {
503
- var UIComponent = _this.props.emptyItemUI;
504
- var localizationService = provideLocalizationService(_this);
505
- var noDataMessage = localizationService
506
- .toLanguageString(noData, messages[noData]);
507
- if (UIComponent) {
508
- return React.createElement(UIComponent, { message: noDataMessage });
509
- }
510
- };
511
- /**
512
- * @hidden
513
- */
514
- _this.renderDragCue = function () {
515
- var UIComponent = _this.props.itemUI;
516
- var _a = _this.state, isDragging = _a.isDragging, activeId = _a.activeId, clientX = _a.clientX, clientY = _a.clientY;
517
- var dataItem = _this.findItem(activeId);
518
- if (!isDragging || !dataItem) {
519
- return;
520
- }
521
- return (React.createElement(UIComponent, { dataItem: dataItem, isDisabled: false, isActive: true, isDragged: true, isDragCue: true, style: {
522
- position: 'fixed',
523
- top: clientY + 10,
524
- left: clientX + 10,
525
- width: _this.state.dragCueWidth,
526
- height: _this.state.dragCueHeight
527
- }, attributes: {} }));
528
- };
529
- /**
530
- * @hidden
531
- */
532
- _this.refAssign = function (element, id) {
533
- if (!element) {
534
- delete _this.itemRefsMap[id];
535
- }
536
- else {
537
- _this.itemRefsMap[id] = element;
538
- }
539
- };
540
- /**
541
- * @hidden
542
- */
543
- _this.draggableRefAssign = function (ref) {
544
- _this.draggableRef = ref;
545
- };
546
- validatePackage(packageMetadata);
547
- return _this;
548
- }
549
- Object.defineProperty(Sortable.prototype, "container", {
550
- get: function () {
551
- return this.draggableRef && this.draggableRef.element;
552
- },
553
- enumerable: false,
554
- configurable: true
555
- });
556
- /**
557
- * @hidden
558
- */
559
- Sortable.prototype.getSnapshotBeforeUpdate = function () {
560
- var _this = this;
561
- var _a = this.props, idField = _a.idField, animation = _a.animation;
562
- this.oldSizesMap = {};
563
- if (!animation) {
564
- return null;
565
- }
566
- this.props.data.forEach(function (item) {
567
- var id = item[idField];
568
- var ref = _this.itemRefsMap[id];
569
- var domNode = ReactDOM.findDOMNode(ref);
570
- if (domNode) {
571
- _this.oldSizesMap[id] = domNode.getBoundingClientRect();
572
- }
573
- });
574
- return null;
575
- };
576
- /**
577
- * @hidden
578
- */
579
- Sortable.prototype.componentDidUpdate = function (previousProps) {
580
- var _this = this;
581
- var _a = this.props, idField = _a.idField, animation = _a.animation;
582
- if (this.focusActiveId) {
583
- this.focusActiveId = false;
584
- this.itemRefsMap[this.state.activeId].focus();
585
- }
586
- if (!animation || (!this.state.isDragging && !this.isKeyboardNavigated)) {
587
- return;
588
- }
589
- this.isKeyboardNavigated = false;
590
- previousProps.data.forEach(function (item) {
591
- var id = item[idField];
592
- var domNode = _this.itemRefsMap[id];
593
- if (!domNode) {
594
- return;
595
- }
596
- var newBox = domNode.getBoundingClientRect();
597
- var oldBox = _this.oldSizesMap[id];
598
- var deltaX = oldBox.left - newBox.left;
599
- var deltaY = oldBox.top - newBox.top;
600
- if (deltaX === 0 && deltaY === 0) {
601
- return;
602
- }
603
- requestAnimationFrame(function () {
604
- _this.animatingItemMap[id] = true;
605
- // Before the DOM paints, Invert it to its old position
606
- // TODO: optimize - animate all items in one animation frame, not each in different
607
- // TODO: optimize - when already animated element is going to change calculate correct delta first.
608
- domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
609
- domNode.style.transition = 'transform 0s';
610
- requestAnimationFrame(function () {
611
- // Then, remove the transform reverting it to its natural
612
- // state and apply a transition so the process goes smoothly.
613
- domNode.style.transform = '';
614
- domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
615
- window.setTimeout(function () { return _this.animatingItemMap[id] = false; }, ANIMATION_DURATION);
616
- });
617
- });
618
- });
619
- };
620
- /**
621
- * @hidden
622
- */
623
- Sortable.prototype.componentDidMount = function () {
624
- this.isRtl = this.container && (getComputedStyle(this.container).direction === 'rtl') || false;
625
- };
626
- /**
627
- * @hidden
628
- */
629
- Sortable.prototype.componentWillUnmount = function () {
630
- this.isUnmounted = true;
631
- };
632
- /**
633
- * @hidden
634
- */
635
- Sortable.prototype.parentOffset = function () {
636
- var offsetParent = this.offsetParent;
637
- if (offsetParent && offsetParent.ownerDocument) {
638
- if (offsetParent !== offsetParent.ownerDocument.body) {
639
- var rect = offsetParent.getBoundingClientRect();
640
- return {
641
- left: rect.left - offsetParent.scrollLeft,
642
- top: rect.top - offsetParent.scrollTop
643
- };
644
- }
645
- }
646
- return { left: 0, top: 0 };
647
- };
648
- /**
649
- * @hidden
650
- */
651
- Sortable.prototype.render = function () {
652
- var _a = this.props, data = _a.data, style = _a.style, className = _a.className, itemsWrapUI = _a.itemsWrapUI;
653
- var Wrapper = itemsWrapUI || 'div';
654
- return (React.createElement(Draggable, { onDragStart: this.onDragStart, onDrag: this.onDragOver, onDragEnd: this.onDragEnd, ref: this.draggableRefAssign },
655
- React.createElement(Wrapper, __assign({}, SORTABLE_ATTRIBUTE_PROP, { className: className, style: __assign({ touchAction: 'none' }, style), onKeyDown: this.onKeyDown }),
656
- data && data.length ?
657
- this.renderData() : this.renderNoData(),
658
- this.renderDragCue())));
659
- };
660
- /**
661
- * @hidden
662
- */
663
- Sortable.defaultProps = {
664
- navigation: true,
665
- animation: true,
666
- emptyItemUI: function (props) { return React.createElement("div", null, props.message); }
667
- };
668
- /**
669
- * @hidden
670
- */
671
- Sortable.propTypes = {
672
- idField: PropTypes.string.isRequired,
673
- disabledField: PropTypes.string,
674
- data: PropTypes.array.isRequired,
675
- tabIndex: PropTypes.number,
676
- navigation: PropTypes.bool,
677
- animation: PropTypes.bool,
678
- itemsWrapUI: PropTypes.any,
679
- itemUI: PropTypes.func.isRequired,
680
- emptyItemUI: PropTypes.func,
681
- style: PropTypes.object,
682
- className: PropTypes.string,
683
- onDragStart: PropTypes.func,
684
- onDragOver: PropTypes.func,
685
- onDragEnd: PropTypes.func,
686
- onNavigate: PropTypes.func
687
- };
688
- return Sortable;
689
- }(React.Component));
690
- export { Sortable };
691
- registerForLocalization(Sortable);
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * @hidden
4
- */
5
- export interface BaseEvent<T extends React.Component> {
6
- /**
7
- * An event target.
8
- */
9
- target: T;
10
- }
@@ -1 +0,0 @@
1
- export {};