@elliemae/ds-data-table 2.0.0-rc.9 → 2.0.0

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 (70) hide show
  1. package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  2. package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -1
  3. package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
  4. package/cjs/addons/Filters/Components/NumberRangeFilter/index.js +4 -1
  5. package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
  6. package/cjs/exported-related/EditableCell.js +11 -5
  7. package/cjs/exported-related/FilterPopover.js +1 -1
  8. package/cjs/parts/HoC/withConditionalDnDColumnContext.js +20 -3
  9. package/cjs/parts/HoC/withConditionalDnDRowContext.js +2 -2
  10. package/cjs/styled.js +16 -11
  11. package/esm/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
  12. package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -1
  13. package/esm/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
  14. package/esm/addons/Filters/Components/NumberRangeFilter/index.js +4 -1
  15. package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
  16. package/esm/exported-related/EditableCell.js +11 -5
  17. package/esm/exported-related/FilterPopover.js +1 -1
  18. package/esm/parts/HoC/withConditionalDnDColumnContext.js +19 -2
  19. package/esm/parts/HoC/withConditionalDnDRowContext.js +1 -1
  20. package/esm/styled.js +16 -11
  21. package/package.json +18 -81
  22. package/types/styled.d.ts +3 -1
  23. package/cjs/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -89
  24. package/cjs/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -143
  25. package/cjs/helpers/dndkit/hierarchy/types.js +0 -2
  26. package/cjs/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -55
  27. package/cjs/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -36
  28. package/cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -111
  29. package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -87
  30. package/cjs/helpers/dndkit/tree/customCollisionDetection.js +0 -118
  31. package/cjs/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -134
  32. package/cjs/helpers/dndkit/tree/types.js +0 -2
  33. package/cjs/helpers/dndkit/tree/useTreeActionHandlers.js +0 -75
  34. package/cjs/helpers/dndkit/tree/useTreeAnnouncements.js +0 -55
  35. package/cjs/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -141
  36. package/cjs/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -54
  37. package/cjs/helpers/dndkit/types.js +0 -2
  38. package/cjs/helpers/dndkit/utilities.js +0 -52
  39. package/esm/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -85
  40. package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -135
  41. package/esm/helpers/dndkit/hierarchy/types.js +0 -1
  42. package/esm/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -51
  43. package/esm/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -32
  44. package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -105
  45. package/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -83
  46. package/esm/helpers/dndkit/tree/customCollisionDetection.js +0 -114
  47. package/esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -126
  48. package/esm/helpers/dndkit/tree/types.js +0 -1
  49. package/esm/helpers/dndkit/tree/useTreeActionHandlers.js +0 -71
  50. package/esm/helpers/dndkit/tree/useTreeAnnouncements.js +0 -51
  51. package/esm/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -135
  52. package/esm/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -50
  53. package/esm/helpers/dndkit/types.js +0 -1
  54. package/esm/helpers/dndkit/utilities.js +0 -47
  55. package/types/helpers/dndkit/hierarchy/customCollisionDetection.d.ts +0 -3
  56. package/types/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.d.ts +0 -3
  57. package/types/helpers/dndkit/hierarchy/types.d.ts +0 -66
  58. package/types/helpers/dndkit/hierarchy/useHierarchyActionHandlers.d.ts +0 -2
  59. package/types/helpers/dndkit/hierarchy/useHierarchyAnnouncements.d.ts +0 -3
  60. package/types/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.d.ts +0 -3
  61. package/types/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.d.ts +0 -2
  62. package/types/helpers/dndkit/tree/customCollisionDetection.d.ts +0 -4
  63. package/types/helpers/dndkit/tree/getTreeKeyboardCoordinates.d.ts +0 -3
  64. package/types/helpers/dndkit/tree/types.d.ts +0 -82
  65. package/types/helpers/dndkit/tree/useTreeActionHandlers.d.ts +0 -2
  66. package/types/helpers/dndkit/tree/useTreeAnnouncements.d.ts +0 -4
  67. package/types/helpers/dndkit/tree/useTreeDndkitConfig.d.ts +0 -3
  68. package/types/helpers/dndkit/tree/useTreePreviewHandlers.d.ts +0 -2
  69. package/types/helpers/dndkit/types.d.ts +0 -20
  70. package/types/helpers/dndkit/utilities.d.ts +0 -7
@@ -1,118 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.find.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.find.js');
8
- require('core-js/modules/esnext.async-iterator.reduce.js');
9
- require('core-js/modules/esnext.iterator.reduce.js');
10
- require('core-js/modules/web.dom-collections.iterator.js');
11
- var SortableItemContext = require('../../../parts/HoC/SortableItemContext.js');
12
-
13
- const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
14
- const RECT_UP = {
15
- offsetTop: -Infinity,
16
- offsetLeft: 0,
17
- // Doesn't matter,
18
- width: 0,
19
- // Doesn't matter
20
- height: 0 // Doesn't matter
21
-
22
- };
23
- const RECT_DOWN = {
24
- offsetTop: Infinity,
25
- offsetLeft: 0,
26
- // Doesn't matter,
27
- width: 0,
28
- // Doesn't matter
29
- height: 0 // Doesn't matter
30
-
31
- }; // Percentage of height to take into consideration when looking for colliding rects
32
-
33
- const thresholdRatio = 0.2; // Percentage to be inside
34
-
35
- const insideThreshold = 0.7;
36
- const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => _ref => {
37
- var _originalContainer$re;
38
-
39
- let {
40
- droppableContainers,
41
- collisionRect
42
- } = _ref;
43
- const originalContainer = droppableContainers.find(_ref2 => {
44
- let {
45
- id
46
- } = _ref2;
47
- return id === activeId;
48
- });
49
- const originalRect = originalContainer === null || originalContainer === void 0 ? void 0 : (_originalContainer$re = originalContainer.rect) === null || _originalContainer$re === void 0 ? void 0 : _originalContainer$re.current; // We first check if the item was moved up or down
50
- // This modifies how to search the matching colliding rect
51
-
52
- let isUp = lastPosition === 'up';
53
-
54
- if (originalRect) {
55
- isUp = originalRect.offsetTop > collisionRect.top;
56
- } // Threshold
57
-
58
-
59
- const threshold = collisionRect.height * thresholdRatio;
60
- let collidingContainer = null;
61
-
62
- if (isUp) {
63
- // Up -- We need to find the first rectangle downwards
64
- collidingContainer = droppableContainers.reduce((acc, container) => {
65
- const rect = container.rect.current;
66
-
67
- if (rect.offsetTop + threshold > collisionRect.top && rect.offsetTop < acc.rect.current.offsetTop) {
68
- return container;
69
- }
70
-
71
- return acc;
72
- }, {
73
- id: DUMMY_ID,
74
- rect: {
75
- current: RECT_DOWN
76
- }
77
- });
78
- } else {
79
- // Down -- We need to find the first rectangle upwards
80
- collidingContainer = droppableContainers.reduce((acc, container) => {
81
- const rect = container.rect.current;
82
-
83
- if (rect.offsetTop - threshold < collisionRect.top && rect.offsetTop > acc.rect.current.offsetTop) {
84
- return container;
85
- }
86
-
87
- return acc;
88
- }, {
89
- id: DUMMY_ID,
90
- rect: {
91
- current: RECT_UP
92
- }
93
- });
94
- } // If we didn't find a match, return null
95
-
96
-
97
- if (collidingContainer.id === DUMMY_ID) {
98
- return null;
99
- }
100
-
101
- const collidingRect = collidingContainer.rect.current; // Calculate the intersection interval
102
-
103
- const [top, bottom] = [Math.max(collisionRect.top, collidingRect.offsetTop), Math.min(collisionRect.bottom, collidingRect.offsetTop + collidingRect.height)]; // Calculate the percentage of intersection
104
-
105
- const intersectionPercentage = Math.abs(bottom - top) / collidingRect.height;
106
-
107
- if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== activeId) {
108
- setDropIndicatorPosition(SortableItemContext.DropIndicatorPosition.Inside);
109
- } else {
110
- setDropIndicatorPosition(isUp ? SortableItemContext.DropIndicatorPosition.Before : SortableItemContext.DropIndicatorPosition.After);
111
- }
112
-
113
- if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
114
-
115
- return collidingContainer.id;
116
- };
117
-
118
- exports.customCollisionDetection = customCollisionDetection;
@@ -1,134 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
- require('core-js/modules/esnext.iterator.constructor.js');
8
- require('core-js/modules/esnext.iterator.for-each.js');
9
- require('core-js/modules/esnext.async-iterator.find.js');
10
- require('core-js/modules/esnext.iterator.find.js');
11
- require('core-js/modules/esnext.async-iterator.filter.js');
12
- require('core-js/modules/esnext.iterator.filter.js');
13
- var core = require('@dnd-kit/core');
14
- var SortableItemContext = require('../../../parts/HoC/SortableItemContext.js');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
19
-
20
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
21
-
22
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
23
- const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
24
- const horizontal = [core.KeyboardCode.Left, core.KeyboardCode.Right]; // const vertical: string[] = [KeyboardCode.Up, KeyboardCode.Down];
25
-
26
- const getVerticalKeyboardCoordinates = _ref => {
27
- let {
28
- items,
29
- active,
30
- over,
31
- event,
32
- currentCoordinates,
33
- droppableContainers,
34
- collisionRect,
35
- dropIndicatorPosition,
36
- maxDragAndDropLevel
37
- } = _ref;
38
- if (horizontal.includes(event.code)) return undefined;
39
- const overRect = over.rect;
40
- const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
41
-
42
- droppableContainers.forEach(container => {
43
- if (container !== null && container !== void 0 && container.disabled || !overRect) {
44
- return;
45
- }
46
-
47
- const rect = container.rect.current;
48
-
49
- if (event.code === core.KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
50
- layoutRects.push(container);
51
- } else if (event.code === core.KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
52
- layoutRects.push(container);
53
- }
54
- });
55
- const closestId = core.closestCorners({
56
- collisionRect,
57
- droppableContainers: layoutRects,
58
- active
59
- });
60
- if (!closestId) return undefined;
61
- const closestItem = items.find(item => item.uid === closestId);
62
- const closestRect = core.getViewRect(droppableContainers.get(closestId).node.current);
63
-
64
- if (event.code === core.KeyboardCode.Up) {
65
- // If the drop indicator is inside (or over ourselves)
66
- // We are gonna go to the before position
67
- // Else we are gonna go inside the over rect
68
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
69
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
70
- y: closestRect.top - collisionRect.height / 2
71
- });
72
- }
73
-
74
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
75
- y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
76
- });
77
- } // If the drop indicator is inside (or over ourselves)
78
- // We are gonna go to the after position
79
- // Else we are gonna go inside the over rect
80
-
81
-
82
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
83
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
84
- y: closestRect.top + collisionRect.height / 2
85
- });
86
- }
87
-
88
- return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
89
- y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
90
- });
91
- };
92
-
93
- const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
94
- let {
95
- currentCoordinates,
96
- context: {
97
- over,
98
- translatedRect,
99
- droppableContainers,
100
- active,
101
- collisionRect
102
- }
103
- } = _ref2;
104
-
105
- if (directions.includes(event.code)) {
106
- if (!translatedRect) {
107
- return undefined;
108
- }
109
-
110
- const {
111
- current: {
112
- items,
113
- dropIndicatorPosition
114
- }
115
- } = context;
116
- const args = {
117
- items,
118
- active,
119
- over,
120
- event,
121
- currentCoordinates,
122
- droppableContainers,
123
- collisionRect,
124
- dropIndicatorPosition,
125
- maxDragAndDropLevel
126
- };
127
- if (isHorizontalDnD) return undefined;
128
- return getVerticalKeyboardCoordinates(args);
129
- }
130
-
131
- return undefined;
132
- };
133
-
134
- exports.getTreeKeyboardCoordinates = getTreeKeyboardCoordinates;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,75 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var sortable = require('@dnd-kit/sortable');
6
- var lodash = require('lodash');
7
- var React = require('react');
8
- var SortableItemContext = require('../../../parts/HoC/SortableItemContext.js');
9
-
10
- const useTreeActionHandlers = _ref => {
11
- let {
12
- handlePreviewDragStart,
13
- handlePreviewDragMove,
14
- handlePreviewDragOver,
15
- handlePreviewDragEnd,
16
- handlePreviewDragCancel,
17
- onReorder,
18
- flattenedItems,
19
- projected,
20
- dropIndicatorPosition
21
- } = _ref;
22
- const onDragStart = React.useCallback(e => {
23
- handlePreviewDragStart(e);
24
- }, [handlePreviewDragStart]);
25
- const onDragMove = React.useCallback(e => {
26
- handlePreviewDragMove(e);
27
- }, [handlePreviewDragMove]);
28
- const onDragOver = React.useCallback(e => {
29
- handlePreviewDragOver(e);
30
- }, [handlePreviewDragOver]);
31
- const onDragEnd = React.useCallback(e => {
32
- handlePreviewDragEnd(e);
33
- const {
34
- active,
35
- over
36
- } = e;
37
- if (over === null) return;
38
- const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
39
- let considerExpanding = null;
40
- let overIndex = flattenedItems.findIndex(item => item.uid === over.id); // If drop indicator is inside, then put it last,
41
- // It will be reconstructed well later
42
-
43
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside) {
44
- var _flattenedItems$overI, _flattenedItems$overI2;
45
-
46
- considerExpanding = over.id;
47
- overIndex = flattenedItems[overIndex].realIndex + ((_flattenedItems$overI = (_flattenedItems$overI2 = flattenedItems[overIndex].original.subRows) === null || _flattenedItems$overI2 === void 0 ? void 0 : _flattenedItems$overI2.length) !== null && _flattenedItems$overI !== void 0 ? _flattenedItems$overI : 0) + 1;
48
- } // If we are dropping the item in a new position, or new depth
49
-
50
-
51
- if (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth) {
52
- // Change parent and depth from projected data
53
- flattenedItems[activeIndex].parentId = projected.parentId;
54
- flattenedItems[activeIndex].depth = projected.depth; // If same index, don't move the array, just copy it
55
-
56
- const newFlattenedData = activeIndex !== overIndex ? sortable.arrayMove(flattenedItems, activeIndex, overIndex) : lodash.cloneDeep(flattenedItems);
57
- onReorder(newFlattenedData, {
58
- targetIndex: overIndex,
59
- fromIndex: activeIndex
60
- }, considerExpanding);
61
- }
62
- }, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
63
- const onDragCancel = React.useCallback(e => {
64
- handlePreviewDragCancel(e);
65
- }, [handlePreviewDragCancel]);
66
- return {
67
- onDragStart,
68
- onDragMove,
69
- onDragOver,
70
- onDragEnd,
71
- onDragCancel
72
- };
73
- };
74
-
75
- exports.useTreeActionHandlers = useTreeActionHandlers;
@@ -1,55 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var SortableItemContext = require('../../../parts/HoC/SortableItemContext.js');
7
-
8
- const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
9
- const onDragStart = React.useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, "."), [visibleItemsDictionary]);
10
- const onDragMove = React.useCallback((id, overId) => {
11
- if (overId) {
12
- const overIndex = visibleItemsDictionary[overId].realIndex + 1;
13
-
14
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside) {
15
- return "Draggable item was moved inside the item at position ".concat(overIndex, ".");
16
- }
17
-
18
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before) {
19
- return "Draggable item was moved to position ".concat(overIndex - 1, ".");
20
- }
21
-
22
- return "Draggable item was moved to position ".concat(overIndex, ".");
23
- }
24
-
25
- return "Draggable item is no longer over a droppable area.";
26
- }, [visibleItemsDictionary, dropIndicatorPosition]);
27
- const onDragOver = onDragMove;
28
- const onDragEnd = React.useCallback((id, overId) => {
29
- if (overId) {
30
- const overIndex = visibleItemsDictionary[overId].realIndex + 1;
31
-
32
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside) {
33
- return "Draggable item was dropped inside the item at position ".concat(overIndex, ".");
34
- }
35
-
36
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before) {
37
- return "Draggable item was dropped over position ".concat(overIndex - 1, ".");
38
- }
39
-
40
- return "Draggable item was dropped over position ".concat(overIndex, ".");
41
- }
42
-
43
- return "Draggable item was dropped at it's original position.";
44
- }, [dropIndicatorPosition, visibleItemsDictionary]);
45
- const onDragCancel = React.useCallback(id => "Dragging was cancelled. Draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
46
- return {
47
- onDragStart,
48
- onDragOver,
49
- onDragMove,
50
- onDragEnd,
51
- onDragCancel
52
- };
53
- };
54
-
55
- exports.useTreeAnnouncements = useTreeAnnouncements;
@@ -1,141 +0,0 @@
1
- 'use strict';
2
-
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- require('core-js/modules/web.dom-collections.iterator.js');
5
- require('core-js/modules/esnext.async-iterator.map.js');
6
- require('core-js/modules/esnext.iterator.map.js');
7
- require('core-js/modules/esnext.async-iterator.for-each.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- require('core-js/modules/esnext.async-iterator.filter.js');
11
- require('core-js/modules/esnext.iterator.filter.js');
12
- var React = require('react');
13
- var core = require('@dnd-kit/core');
14
- var sortable = require('@dnd-kit/sortable');
15
- var useTreePreviewHandlers = require('./useTreePreviewHandlers.js');
16
- var getTreeKeyboardCoordinates = require('./getTreeKeyboardCoordinates.js');
17
- var utilities = require('../utilities.js');
18
- var useTreeActionHandlers = require('./useTreeActionHandlers.js');
19
- var customCollisionDetection = require('./customCollisionDetection.js');
20
- var useTreeAnnouncements = require('./useTreeAnnouncements.js');
21
-
22
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
-
24
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
25
-
26
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
27
-
28
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
29
- // if second parameter is true, the space will be done on the horizontal axis
30
-
31
- const adjustTranslate = function (_ref) {
32
- let {
33
- transform
34
- } = _ref;
35
- let isHorizontalDnD = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
36
-
37
- const newTransform = _objectSpread({}, transform);
38
-
39
- if (isHorizontalDnD) {
40
- newTransform.x = transform.x + 25;
41
- } else {
42
- newTransform.x = transform.x + 15;
43
- }
44
-
45
- return newTransform;
46
- };
47
-
48
- const measuring = {
49
- droppable: {
50
- strategy: core.MeasuringStrategy.BeforeDragging
51
- }
52
- };
53
-
54
- const useTreeDndkitConfig = _ref2 => {
55
- var _visibleItemsDictiona, _visibleItemsDictiona2;
56
-
57
- let {
58
- flattenedItems,
59
- visibleItems: preVisibleItems,
60
- isHorizontalDnD = false,
61
- isExpandable = false,
62
- onReorder,
63
- maxDragAndDropLevel
64
- } = _ref2;
65
- const [activeId, setActiveId] = React.useState(null);
66
- const [overId, setOverId] = React.useState(null);
67
- const [dropIndicatorPosition, setDropIndicatorPosition] = React.useState(null);
68
- const [lastPosition, setLastPosition] = React.useState(null); // Remove activeId's children
69
-
70
- const visibleItems = React.useMemo(() => utilities.removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]); // Sorted ids for the library
71
-
72
- const sortedIds = React.useMemo(() => visibleItems.map(item => item.uid), [visibleItems]);
73
- /**
74
- * Dictionary from UID to ITEM
75
- * This dictionary is computed since on every DnD move, I need to know the
76
- * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)
77
- */
78
-
79
- const visibleItemsDictionary = React.useMemo(() => {
80
- // Using plain for to achieve O(#ITEMS) performance
81
- const dictionary = {};
82
- visibleItems.forEach(item => {
83
- dictionary[item.uid] = item;
84
- });
85
- return dictionary;
86
- }, [visibleItems]);
87
- const modifiers = React.useMemo(() => [options => adjustTranslate(options, isHorizontalDnD)], [isHorizontalDnD]);
88
- const sensorContext = React.useRef({
89
- items: visibleItems,
90
- dropIndicatorPosition,
91
- setDropIndicatorPosition
92
- });
93
- React.useEffect(() => {
94
- sensorContext.current = {
95
- items: visibleItems,
96
- dropIndicatorPosition,
97
- setDropIndicatorPosition
98
- };
99
- }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
100
- const coordinateGetter = React.useMemo(() => getTreeKeyboardCoordinates.getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
101
- const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
102
- coordinateGetter
103
- })); // where is the activeItem being positioned (depth and parent)
104
-
105
- const projected = React.useMemo(() => overId ? utilities.getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
106
- const dragPreviewHandlers = useTreePreviewHandlers.useTreePreviewHandlers({
107
- setActiveId,
108
- setOverId,
109
- setDropIndicatorPosition
110
- });
111
- const dragActionHandlers = useTreeActionHandlers.useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
112
- onReorder,
113
- projected,
114
- flattenedItems,
115
- dropIndicatorPosition
116
- }));
117
- const announcements = useTreeAnnouncements.useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
118
- const dndContextProps = React.useMemo(() => _objectSpread({
119
- announcements,
120
- modifiers,
121
- sensors,
122
- measuring,
123
- collisionDetection: customCollisionDetection.customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
124
- }, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
125
- const sortableContextProps = React.useMemo(() => ({
126
- items: sortedIds,
127
- strategy: isHorizontalDnD ? sortable.horizontalListSortingStrategy : sortable.verticalListSortingStrategy
128
- }), [sortedIds, isHorizontalDnD]);
129
- return {
130
- dndContextProps,
131
- sortableContextProps,
132
- activeId,
133
- activeIndex: (_visibleItemsDictiona = (_visibleItemsDictiona2 = visibleItemsDictionary[activeId]) === null || _visibleItemsDictiona2 === void 0 ? void 0 : _visibleItemsDictiona2.realIndex) !== null && _visibleItemsDictiona !== void 0 ? _visibleItemsDictiona : -1,
134
- overId,
135
- depth: projected ? projected.depth : 0,
136
- dropIndicatorPosition,
137
- visibleItems
138
- };
139
- };
140
-
141
- module.exports = useTreeDndkitConfig;
@@ -1,54 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var SortableItemContext = require('../../../parts/HoC/SortableItemContext.js');
7
-
8
- const useTreePreviewHandlers = _ref => {
9
- let {
10
- setOverId,
11
- setActiveId,
12
- setDropIndicatorPosition
13
- } = _ref;
14
- const resetState = React.useCallback(() => {
15
- setOverId(null);
16
- setActiveId(null);
17
- document.body.style.setProperty('cursor', '');
18
- }, [setOverId, setActiveId]);
19
- const handlePreviewDragStart = React.useCallback(_ref2 => {
20
- let {
21
- active: {
22
- id
23
- }
24
- } = _ref2;
25
- setActiveId(id);
26
- setOverId(id);
27
- setDropIndicatorPosition(SortableItemContext.DropIndicatorPosition.Inside);
28
- document.body.style.setProperty('cursor', 'grabbing');
29
- }, [setActiveId, setDropIndicatorPosition, setOverId]);
30
- const handlePreviewDragMove = React.useCallback(() => null, []);
31
- const handlePreviewDragOver = React.useCallback(_ref3 => {
32
- var _over$id;
33
-
34
- let {
35
- over
36
- } = _ref3;
37
- setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
38
- }, [setOverId]);
39
- const handlePreviewDragEnd = React.useCallback(() => {
40
- resetState();
41
- }, [resetState]);
42
- const handlePreviewDragCancel = React.useCallback(() => {
43
- resetState();
44
- }, [resetState]);
45
- return {
46
- handlePreviewDragStart,
47
- handlePreviewDragMove,
48
- handlePreviewDragOver,
49
- handlePreviewDragEnd,
50
- handlePreviewDragCancel
51
- };
52
- };
53
-
54
- exports.useTreePreviewHandlers = useTreePreviewHandlers;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,52 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- var SortableItemContext = require('../../parts/HoC/SortableItemContext.js');
9
-
10
- const getMinDepth = item => {
11
- if (item) return item.depth;
12
- return 0;
13
- };
14
-
15
- const getProjection = (items, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) => {
16
- const overItemIndex = visibleItemsDictionary[overId].realIndex;
17
- const previousItem = items[overItemIndex];
18
- const nextItem = items[overItemIndex + 1];
19
-
20
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside && isExpandable) {
21
- return {
22
- depth: visibleItemsDictionary[overId].depth + 1,
23
- parentId: overId
24
- };
25
- }
26
-
27
- if (dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before) {
28
- return {
29
- depth: getMinDepth(previousItem),
30
- parentId: previousItem.parentId
31
- };
32
- }
33
-
34
- return {
35
- depth: getMinDepth(nextItem),
36
- parentId: nextItem === null || nextItem === void 0 ? void 0 : nextItem.parentId
37
- };
38
- };
39
- const removeChildrenOf = (items, id) => {
40
- const excludeParentIds = [id];
41
- return items.filter(item => {
42
- if (item.parentId !== null && excludeParentIds.includes(item.parentId)) {
43
- excludeParentIds.push(item.uid);
44
- return false;
45
- }
46
-
47
- return true;
48
- });
49
- };
50
-
51
- exports.getProjection = getProjection;
52
- exports.removeChildrenOf = removeChildrenOf;