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