@elliemae/ds-data-table 2.0.0-rc.9 → 2.1.0-rc.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.
- package/cjs/DataTable.js +2 -2
- package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +2 -2
- package/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +2 -2
- package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
- package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +6 -3
- package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
- package/cjs/addons/Filters/Components/NumberRangeFilter/index.js +6 -3
- package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
- package/cjs/addons/Pagination/Pagination.js +2 -2
- package/cjs/configs/useTableColsWithAddons.js +2 -2
- package/cjs/exported-related/EditableCell.js +11 -5
- package/cjs/exported-related/FilterPopover.js +3 -3
- package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js +2 -2
- package/cjs/exported-related/RowRenderer/index.js +2 -2
- package/cjs/exported-related/RowRenderer/useRowRendererProperties.js +2 -2
- package/cjs/parts/Cells/Cell.js +2 -2
- package/cjs/parts/DnDHandle.js +2 -2
- package/cjs/parts/Filters/index.js +2 -2
- package/cjs/parts/Headers/HeaderCell.js +2 -2
- package/cjs/parts/Headers/HeaderResizer.js +2 -2
- package/cjs/parts/Headers/useHeaderCellHandlers.js +2 -2
- package/cjs/parts/HoC/withConditionalDnDColumnContext.js +22 -5
- package/cjs/parts/HoC/withConditionalDnDRowContext.js +4 -4
- package/cjs/parts/HoC/withConditionalDnDSortableContext.js +2 -2
- package/cjs/parts/HoC/withDnDSortableColumnContext.js +2 -2
- package/cjs/parts/HoC/withDnDSortableRowContext.js +2 -2
- package/cjs/parts/RowVariants/index.js +2 -2
- package/cjs/parts/Rows.js +2 -2
- package/cjs/parts/SortableHeaderCell.js +2 -2
- package/cjs/parts/TableContent.js +2 -2
- package/cjs/prop-types.js +2 -2
- package/cjs/redux/reducers/headersReducers/logic.js +2 -2
- package/cjs/styled.js +16 -11
- package/esm/DataTable.js +2 -2
- package/esm/addons/Columns/ColumnExpand/ColumnExpand.js +2 -2
- package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +2 -2
- package/esm/addons/Editables/TextEditableCell/TextEditableCell.js +16 -0
- package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +6 -3
- package/esm/addons/Filters/Components/DateSwitcherFilter/index.js +4 -1
- package/esm/addons/Filters/Components/NumberRangeFilter/index.js +6 -3
- package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +3 -3
- package/esm/addons/Pagination/Pagination.js +2 -2
- package/esm/configs/useTableColsWithAddons.js +2 -2
- package/esm/exported-related/EditableCell.js +11 -5
- package/esm/exported-related/FilterPopover.js +3 -3
- package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js +2 -2
- package/esm/exported-related/RowRenderer/index.js +2 -2
- package/esm/exported-related/RowRenderer/useRowRendererProperties.js +2 -2
- package/esm/parts/Cells/Cell.js +2 -2
- package/esm/parts/DnDHandle.js +2 -2
- package/esm/parts/Filters/index.js +2 -2
- package/esm/parts/Headers/HeaderCell.js +2 -2
- package/esm/parts/Headers/HeaderResizer.js +2 -2
- package/esm/parts/Headers/useHeaderCellHandlers.js +2 -2
- package/esm/parts/HoC/withConditionalDnDColumnContext.js +21 -4
- package/esm/parts/HoC/withConditionalDnDRowContext.js +3 -3
- package/esm/parts/HoC/withConditionalDnDSortableContext.js +2 -2
- package/esm/parts/HoC/withDnDSortableColumnContext.js +2 -2
- package/esm/parts/HoC/withDnDSortableRowContext.js +2 -2
- package/esm/parts/RowVariants/index.js +2 -2
- package/esm/parts/Rows.js +2 -2
- package/esm/parts/SortableHeaderCell.js +2 -2
- package/esm/parts/TableContent.js +2 -2
- package/esm/prop-types.js +2 -2
- package/esm/redux/reducers/headersReducers/logic.js +2 -2
- package/esm/styled.js +16 -11
- package/package.json +18 -81
- package/types/DataTable.d.ts +79 -79
- package/types/DataTableSchema.d.ts +79 -79
- package/types/parts/FilterBar/styled.d.ts +52 -52
- package/types/styled.d.ts +3 -1
- package/cjs/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -89
- package/cjs/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -143
- package/cjs/helpers/dndkit/hierarchy/types.js +0 -2
- package/cjs/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -55
- package/cjs/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -36
- package/cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -111
- package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -87
- package/cjs/helpers/dndkit/tree/customCollisionDetection.js +0 -118
- package/cjs/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -134
- package/cjs/helpers/dndkit/tree/types.js +0 -2
- package/cjs/helpers/dndkit/tree/useTreeActionHandlers.js +0 -75
- package/cjs/helpers/dndkit/tree/useTreeAnnouncements.js +0 -55
- package/cjs/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -141
- package/cjs/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -54
- package/cjs/helpers/dndkit/types.js +0 -2
- package/cjs/helpers/dndkit/utilities.js +0 -52
- package/esm/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -85
- package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -135
- package/esm/helpers/dndkit/hierarchy/types.js +0 -1
- package/esm/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -51
- package/esm/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -32
- package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -105
- package/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -83
- package/esm/helpers/dndkit/tree/customCollisionDetection.js +0 -114
- package/esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -126
- package/esm/helpers/dndkit/tree/types.js +0 -1
- package/esm/helpers/dndkit/tree/useTreeActionHandlers.js +0 -71
- package/esm/helpers/dndkit/tree/useTreeAnnouncements.js +0 -51
- package/esm/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -135
- package/esm/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -50
- package/esm/helpers/dndkit/types.js +0 -1
- package/esm/helpers/dndkit/utilities.js +0 -47
- package/types/helpers/dndkit/hierarchy/customCollisionDetection.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/types.d.ts +0 -66
- package/types/helpers/dndkit/hierarchy/useHierarchyActionHandlers.d.ts +0 -2
- package/types/helpers/dndkit/hierarchy/useHierarchyAnnouncements.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.d.ts +0 -2
- package/types/helpers/dndkit/tree/customCollisionDetection.d.ts +0 -4
- package/types/helpers/dndkit/tree/getTreeKeyboardCoordinates.d.ts +0 -3
- package/types/helpers/dndkit/tree/types.d.ts +0 -82
- package/types/helpers/dndkit/tree/useTreeActionHandlers.d.ts +0 -2
- package/types/helpers/dndkit/tree/useTreeAnnouncements.d.ts +0 -4
- package/types/helpers/dndkit/tree/useTreeDndkitConfig.d.ts +0 -3
- package/types/helpers/dndkit/tree/useTreePreviewHandlers.d.ts +0 -2
- package/types/helpers/dndkit/types.d.ts +0 -20
- package/types/helpers/dndkit/utilities.d.ts +0 -7
|
@@ -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 };
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, Over, Active } from '@dnd-kit/core';
|
|
2
|
-
import { DroppableContainers } from '@dnd-kit/core/dist/store';
|
|
3
|
-
import { Coordinates, DragCancelEvent, ViewRect } from '@dnd-kit/core/dist/types';
|
|
4
|
-
import { MutableRefObject } from 'react';
|
|
5
|
-
import { TypescriptRow } from '../../../types/props';
|
|
6
|
-
import { dndContextPropsType } from '../types';
|
|
7
|
-
export declare type Item = {
|
|
8
|
-
id: string;
|
|
9
|
-
depth: number;
|
|
10
|
-
parentId: string;
|
|
11
|
-
index: number;
|
|
12
|
-
};
|
|
13
|
-
export declare type useHierarchyPreviewHandlersReturn = {
|
|
14
|
-
handlePreviewDragStart: (e: DragStartEvent) => void;
|
|
15
|
-
handlePreviewDragMove: (e: DragMoveEvent) => void;
|
|
16
|
-
handlePreviewDragOver: (e: DragOverEvent) => void;
|
|
17
|
-
handlePreviewDragEnd: (e: DragEndEvent) => void;
|
|
18
|
-
handlePreviewDragCancel: (e: DragCancelEvent) => void;
|
|
19
|
-
};
|
|
20
|
-
export declare type useHierarchyPreviewHandlersArgs = {
|
|
21
|
-
setOverId: React.Dispatch<React.SetStateAction<string>>;
|
|
22
|
-
setActiveId: React.Dispatch<React.SetStateAction<string>>;
|
|
23
|
-
};
|
|
24
|
-
export declare type useHierarchyActionHandlersArgs = useHierarchyPreviewHandlersReturn & {
|
|
25
|
-
dndItems: Item[];
|
|
26
|
-
onReorder: (movedItem: Item, indexes: {
|
|
27
|
-
targetIndex: number;
|
|
28
|
-
fromIndex: number;
|
|
29
|
-
}) => void;
|
|
30
|
-
};
|
|
31
|
-
export declare type useHierarchyActionHandlersReturn = {
|
|
32
|
-
onDragStart: (e: DragStartEvent) => void;
|
|
33
|
-
onDragMove: (e: DragMoveEvent) => void;
|
|
34
|
-
onDragOver: (e: DragOverEvent) => void;
|
|
35
|
-
onDragEnd: (e: DragEndEvent) => void;
|
|
36
|
-
onDragCancel: (e: DragCancelEvent) => void;
|
|
37
|
-
};
|
|
38
|
-
export declare type useHierarchyDndkitConfigArgs = {
|
|
39
|
-
indentationWidth?: number;
|
|
40
|
-
flattenedItems: [Item, TypescriptRow][];
|
|
41
|
-
isHorizontalDnD?: boolean;
|
|
42
|
-
onReorder: (movedItem: Item, indexes: {
|
|
43
|
-
targetIndex: number;
|
|
44
|
-
fromIndex: number;
|
|
45
|
-
}) => void;
|
|
46
|
-
};
|
|
47
|
-
export declare type useHierarchyDndkitConfigType = (args: useHierarchyDndkitConfigArgs) => useHierarchyDndkitConfigReturn;
|
|
48
|
-
export declare type useHierarchyDndkitConfigReturn = {
|
|
49
|
-
dndContextProps: dndContextPropsType;
|
|
50
|
-
activeId: string;
|
|
51
|
-
overId: string;
|
|
52
|
-
activeIndex: number;
|
|
53
|
-
};
|
|
54
|
-
export declare type getKeyboardCoordinatesArgs = {
|
|
55
|
-
items: Item[];
|
|
56
|
-
active: Active;
|
|
57
|
-
over: Over;
|
|
58
|
-
event: KeyboardEvent;
|
|
59
|
-
currentCoordinates: Coordinates;
|
|
60
|
-
droppableContainers: DroppableContainers;
|
|
61
|
-
collisionRect: ViewRect;
|
|
62
|
-
};
|
|
63
|
-
export declare type SensorContext = MutableRefObject<{
|
|
64
|
-
items: Item[];
|
|
65
|
-
offset?: number;
|
|
66
|
-
}>;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { useHierarchyActionHandlersReturn, useHierarchyActionHandlersArgs } from './types';
|
|
2
|
-
export declare const useHierarchyActionHandlers: ({ handlePreviewDragStart, handlePreviewDragMove, handlePreviewDragOver, handlePreviewDragEnd, handlePreviewDragCancel, onReorder, dndItems, }: useHierarchyActionHandlersArgs) => useHierarchyActionHandlersReturn;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { CollisionDetection } from '@dnd-kit/core';
|
|
2
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext';
|
|
3
|
-
import { Item } from './types';
|
|
4
|
-
export declare const customCollisionDetection: (activeId: string, visibleItemsDictionary: Record<string, Item>, setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>, maxDragAndDropLevel: number, lastPosition: string, setLastPosition: React.Dispatch<React.SetStateAction<string>>) => CollisionDetection;
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, Over, DroppableContainers, Active } from '@dnd-kit/core';
|
|
2
|
-
import { Coordinates, DragCancelEvent, ViewRect } from '@dnd-kit/core/dist/types';
|
|
3
|
-
import React, { MutableRefObject } from 'react';
|
|
4
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext';
|
|
5
|
-
import { dndContextPropsType, sortableContextPropsType } from '../types';
|
|
6
|
-
export declare type Item = {
|
|
7
|
-
uid: string;
|
|
8
|
-
depth: number;
|
|
9
|
-
parentId: string;
|
|
10
|
-
realIndex: number;
|
|
11
|
-
original: Record<string, Record<string, any>>;
|
|
12
|
-
};
|
|
13
|
-
export declare type useTreePreviewHandlersReturn = {
|
|
14
|
-
handlePreviewDragStart: (e: DragStartEvent) => void;
|
|
15
|
-
handlePreviewDragMove: (e: DragMoveEvent) => void;
|
|
16
|
-
handlePreviewDragOver: (e: DragOverEvent) => void;
|
|
17
|
-
handlePreviewDragEnd: (e: DragEndEvent) => void;
|
|
18
|
-
handlePreviewDragCancel: (e: DragCancelEvent) => void;
|
|
19
|
-
};
|
|
20
|
-
export declare type useTreePreviewHandlersArgs = {
|
|
21
|
-
setOverId: React.Dispatch<React.SetStateAction<string>>;
|
|
22
|
-
setActiveId: React.Dispatch<React.SetStateAction<string>>;
|
|
23
|
-
setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;
|
|
24
|
-
};
|
|
25
|
-
export declare type useTreeActionHandlersArgs = useTreePreviewHandlersReturn & {
|
|
26
|
-
dropIndicatorPosition: DropIndicatorPosition;
|
|
27
|
-
flattenedItems: Item[];
|
|
28
|
-
projected: {
|
|
29
|
-
depth: number;
|
|
30
|
-
parentId: string;
|
|
31
|
-
};
|
|
32
|
-
onReorder: (newData: Item[], indexes: {
|
|
33
|
-
targetIndex: number;
|
|
34
|
-
fromIndex: number;
|
|
35
|
-
}, considerExpanding: string) => void;
|
|
36
|
-
};
|
|
37
|
-
export declare type useTreeActionHandlersReturn = {
|
|
38
|
-
onDragStart: (e: DragStartEvent) => void;
|
|
39
|
-
onDragMove: (e: DragMoveEvent) => void;
|
|
40
|
-
onDragOver: (e: DragOverEvent) => void;
|
|
41
|
-
onDragEnd: (e: DragEndEvent) => void;
|
|
42
|
-
onDragCancel: (e: DragCancelEvent) => void;
|
|
43
|
-
};
|
|
44
|
-
export declare type useTreeDndkitConfigArgs = {
|
|
45
|
-
flattenedItems: Item[];
|
|
46
|
-
visibleItems: Item[];
|
|
47
|
-
isHorizontalDnD?: boolean;
|
|
48
|
-
isExpandable: boolean;
|
|
49
|
-
onReorder: (newData: Item[], indexes: {
|
|
50
|
-
targetIndex: number;
|
|
51
|
-
fromIndex: number;
|
|
52
|
-
}, considerExpanding: string) => void;
|
|
53
|
-
maxDragAndDropLevel: number;
|
|
54
|
-
};
|
|
55
|
-
export declare type useTreeDndkitConfigReturn = {
|
|
56
|
-
dndContextProps: dndContextPropsType;
|
|
57
|
-
sortableContextProps: sortableContextPropsType;
|
|
58
|
-
activeId: string;
|
|
59
|
-
activeIndex: number;
|
|
60
|
-
overId: string;
|
|
61
|
-
depth: number;
|
|
62
|
-
dropIndicatorPosition: DropIndicatorPosition;
|
|
63
|
-
visibleItems: Item[];
|
|
64
|
-
};
|
|
65
|
-
export declare type useTreeDndkitConfigType = (args: useTreeDndkitConfigArgs) => useTreeDndkitConfigReturn;
|
|
66
|
-
export declare type getKeyboardCoordinatesArgs = {
|
|
67
|
-
items: Item[];
|
|
68
|
-
active: Active;
|
|
69
|
-
over: Over;
|
|
70
|
-
event: KeyboardEvent;
|
|
71
|
-
currentCoordinates: Coordinates;
|
|
72
|
-
droppableContainers: DroppableContainers;
|
|
73
|
-
collisionRect: ViewRect;
|
|
74
|
-
dropIndicatorPosition: DropIndicatorPosition;
|
|
75
|
-
maxDragAndDropLevel: number;
|
|
76
|
-
};
|
|
77
|
-
export declare type SensorContext = MutableRefObject<{
|
|
78
|
-
items: Item[];
|
|
79
|
-
offset?: number;
|
|
80
|
-
dropIndicatorPosition?: DropIndicatorPosition;
|
|
81
|
-
setDropIndicatorPosition?: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;
|
|
82
|
-
}>;
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { useTreeActionHandlersReturn, useTreeActionHandlersArgs } from './types';
|
|
2
|
-
export declare const useTreeActionHandlers: ({ handlePreviewDragStart, handlePreviewDragMove, handlePreviewDragOver, handlePreviewDragEnd, handlePreviewDragCancel, onReorder, flattenedItems, projected, dropIndicatorPosition, }: useTreeActionHandlersArgs) => useTreeActionHandlersReturn;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { Announcements } from '@dnd-kit/core';
|
|
2
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext';
|
|
3
|
-
import { Item } from './types';
|
|
4
|
-
export declare const useTreeAnnouncements: (visibleItemsDictionary: Record<string, Item>, dropIndicatorPosition: DropIndicatorPosition) => Announcements;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Announcements, closestCenter, DragCancelEvent } from '@dnd-kit/core';
|
|
2
|
-
import type { Modifier, DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, MeasuringConfiguration } from '@dnd-kit/core';
|
|
3
|
-
import type { SensorDescriptor, SensorOptions } from '@dnd-kit/core/dist/sensors';
|
|
4
|
-
import type { SortingStrategy } from '@dnd-kit/sortable';
|
|
5
|
-
export declare type dndContextPropsType = {
|
|
6
|
-
announcements: Announcements;
|
|
7
|
-
modifiers: Modifier[];
|
|
8
|
-
sensors: SensorDescriptor<SensorOptions>[];
|
|
9
|
-
measuring: Partial<MeasuringConfiguration>;
|
|
10
|
-
collisionDetection: typeof closestCenter;
|
|
11
|
-
onDragStart: (e: DragStartEvent) => void;
|
|
12
|
-
onDragMove: (e: DragMoveEvent) => void;
|
|
13
|
-
onDragOver: (e: DragOverEvent) => void;
|
|
14
|
-
onDragEnd: (e: DragEndEvent) => void;
|
|
15
|
-
onDragCancel: (e: DragCancelEvent) => void;
|
|
16
|
-
};
|
|
17
|
-
export declare type sortableContextPropsType = {
|
|
18
|
-
items: string[];
|
|
19
|
-
strategy: SortingStrategy;
|
|
20
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { DropIndicatorPosition } from '../../parts/HoC/SortableItemContext';
|
|
2
|
-
import { Item } from './tree/types';
|
|
3
|
-
export declare const getProjection: (items: Item[], visibleItemsDictionary: Record<string, Item>, overId: string, dropIndicatorPosition: DropIndicatorPosition, isExpandable: boolean) => {
|
|
4
|
-
depth: number;
|
|
5
|
-
parentId: string;
|
|
6
|
-
};
|
|
7
|
-
export declare const removeChildrenOf: (items: Item[], id: string) => Item[];
|