@elliemae/ds-drag-and-drop 3.1.0-next.9 → 3.1.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/dist/cjs/tree/getTreeKeyboardCoordinates.js +37 -26
- package/dist/cjs/tree/getTreeKeyboardCoordinates.js.map +2 -2
- package/dist/cjs/tree/types.js.map +1 -1
- package/dist/cjs/tree/useTreeDndkitConfig.js +15 -6
- package/dist/cjs/tree/useTreeDndkitConfig.js.map +2 -2
- package/dist/esm/tree/getTreeKeyboardCoordinates.js +37 -26
- package/dist/esm/tree/getTreeKeyboardCoordinates.js.map +2 -2
- package/dist/esm/tree/useTreeDndkitConfig.js +15 -6
- package/dist/esm/tree/useTreeDndkitConfig.js.map +2 -2
- package/package.json +1 -1
|
@@ -91,40 +91,51 @@ const getVerticalKeyboardCoordinates = ({
|
|
|
91
91
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
|
+
if (closestId === active.id && dropIndicatorPosition === import_constants.DropIndicatorPosition.After) {
|
|
95
|
+
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
96
|
+
y: closestRect.top + collisionRect.height
|
|
97
|
+
});
|
|
98
|
+
}
|
|
94
99
|
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
95
100
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
96
|
-
y: closestRect.top +
|
|
101
|
+
y: closestRect.top + closestRect.height / 2
|
|
97
102
|
});
|
|
98
103
|
}
|
|
99
104
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
100
105
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
101
106
|
});
|
|
102
107
|
};
|
|
103
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) =>
|
|
104
|
-
|
|
105
|
-
if (
|
|
106
|
-
|
|
108
|
+
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => {
|
|
109
|
+
const func = (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
|
|
110
|
+
if (directions.includes(event.code)) {
|
|
111
|
+
if (!translatedRect) {
|
|
112
|
+
return void 0;
|
|
113
|
+
}
|
|
114
|
+
const {
|
|
115
|
+
current: { items, dropIndicatorPosition, keyboardTranslate }
|
|
116
|
+
} = context;
|
|
117
|
+
if (!over || !active || !collisionRect)
|
|
118
|
+
return void 0;
|
|
119
|
+
const args = {
|
|
120
|
+
items,
|
|
121
|
+
active,
|
|
122
|
+
over,
|
|
123
|
+
event,
|
|
124
|
+
currentCoordinates,
|
|
125
|
+
droppableContainers,
|
|
126
|
+
collisionRect,
|
|
127
|
+
dropIndicatorPosition,
|
|
128
|
+
maxDragAndDropLevel
|
|
129
|
+
};
|
|
130
|
+
if (isHorizontalDnD)
|
|
131
|
+
return void 0;
|
|
132
|
+
const newCoords = getVerticalKeyboardCoordinates(args);
|
|
133
|
+
if (newCoords)
|
|
134
|
+
return __spreadProps(__spreadValues({}, newCoords), { y: newCoords.y - keyboardTranslate });
|
|
135
|
+
return newCoords;
|
|
107
136
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (!over || !active || !collisionRect)
|
|
112
|
-
return void 0;
|
|
113
|
-
const args = {
|
|
114
|
-
items,
|
|
115
|
-
active,
|
|
116
|
-
over,
|
|
117
|
-
event,
|
|
118
|
-
currentCoordinates,
|
|
119
|
-
droppableContainers,
|
|
120
|
-
collisionRect,
|
|
121
|
-
dropIndicatorPosition,
|
|
122
|
-
maxDragAndDropLevel
|
|
123
|
-
};
|
|
124
|
-
if (isHorizontalDnD)
|
|
125
|
-
return void 0;
|
|
126
|
-
return getVerticalKeyboardCoordinates(args);
|
|
127
|
-
}
|
|
128
|
-
return void 0;
|
|
137
|
+
return void 0;
|
|
138
|
+
};
|
|
139
|
+
return func;
|
|
129
140
|
};
|
|
130
141
|
//# sourceMappingURL=getTreeKeyboardCoordinates.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/getTreeKeyboardCoordinates.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { GetKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nconst getVerticalKeyboardCoordinates = ({\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n}: GetKeyboardCoordinatesArgs): Coordinates | undefined => {\n if (horizontal.includes(event.code)) return undefined;\n\n const overRect = over.rect;\n\n const layoutRects: DroppableContainer[] = [];\n\n // Get the reacheable rects depending on the arrow key pressed\n droppableContainers.forEach((container) => {\n if (container?.disabled || !overRect) {\n return;\n }\n const rect = container.rect.current;\n\n // We add and substract 2 just for the sake of avoiding edge cases\n if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n layoutRects.push(container);\n } else if (rect && event.code === KeyboardCode.Up && collisionRect.top + 2 >= rect.offsetTop) {\n layoutRects.push(container);\n }\n });\n\n // Get the closest rect based on dnd-kit closest-corners algorithm\n const closestId = closestCorners({\n collisionRect,\n droppableContainers: layoutRects,\n active,\n });\n\n const closestItem = items.find((item) => item.uid === closestId);\n\n const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n // If no rect is closest, do nothing\n if (!closestId || !closestItem || !closestElement) return undefined;\n\n const closestRect = getViewRect(closestElement);\n\n if (event.code === KeyboardCode.Up) {\n // If the drop indicator is inside (or over ourselves)\n // We are gonna go to the before position\n // Else we are gonna go inside the over rect\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top - collisionRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n }\n // If the drop indicator is
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\nimport { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { GetKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nconst getVerticalKeyboardCoordinates = ({\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n}: GetKeyboardCoordinatesArgs): Coordinates | undefined => {\n if (horizontal.includes(event.code)) return undefined;\n\n const overRect = over.rect;\n\n const layoutRects: DroppableContainer[] = [];\n\n // Get the reacheable rects depending on the arrow key pressed\n droppableContainers.forEach((container) => {\n if (container?.disabled || !overRect) {\n return;\n }\n const rect = container.rect.current;\n\n // We add and substract 2 just for the sake of avoiding edge cases\n if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n layoutRects.push(container);\n } else if (rect && event.code === KeyboardCode.Up && collisionRect.top + 2 >= rect.offsetTop) {\n layoutRects.push(container);\n }\n });\n\n // Get the closest rect based on dnd-kit closest-corners algorithm\n const closestId = closestCorners({\n collisionRect,\n droppableContainers: layoutRects,\n active,\n });\n\n const closestItem = items.find((item) => item.uid === closestId);\n\n const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n // If no rect is closest, do nothing\n if (!closestId || !closestItem || !closestElement) return undefined;\n\n const closestRect = getViewRect(closestElement);\n\n if (event.code === KeyboardCode.Up) {\n // If the drop indicator is inside (or over ourselves)\n // We are gonna go to the before position\n // Else we are gonna go inside the over rect\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top - collisionRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n }\n\n // If the drop indicator is over ourselves and after\n // We need to go inside the next one\n if (closestId === active.id && dropIndicatorPosition === DropIndicatorPosition.After) {\n return {\n ...currentCoordinates,\n y: closestRect.top + collisionRect.height,\n };\n }\n // If the drop indicator is inside, or over ourselves\n // We are gonna go to the after position\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top + closestRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n};\n\nexport const getTreeKeyboardCoordinates: (\n context: SensorContext,\n isHorizontalDnD: boolean,\n maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter = (context, isHorizontalDnD, maxDragAndDropLevel) => {\n const func = (\n event,\n { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } },\n ) => {\n if (directions.includes(event.code)) {\n if (!translatedRect) {\n return undefined;\n }\n\n const {\n current: { items, dropIndicatorPosition, keyboardTranslate },\n } = context;\n\n if (!over || !active || !collisionRect) return undefined;\n\n const args = {\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n };\n\n if (isHorizontalDnD) return undefined;\n\n const newCoords = getVerticalKeyboardCoordinates(args);\n\n if (newCoords) return { ...newCoords, y: newCoords.y - keyboardTranslate };\n return newCoords;\n }\n return undefined;\n };\n return func;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import {\n Active,\n Announcements,\n CollisionDetection,\n DragCancelEvent,\n DragEndEvent,\n DragMoveEvent,\n DragOverEvent,\n DragStartEvent,\n DroppableContainers,\n MeasuringConfiguration,\n Modifier,\n Over,\n ViewRect,\n} from '@dnd-kit/core';\nimport type { SensorDescriptor, SensorOptions } from '@dnd-kit/core/dist/sensors';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport React, { MutableRefObject } from 'react';\nimport { DropIndicatorPosition } from './constants';\n\nexport type Item<T = unknown> = {\n uid: string;\n depth: number;\n parentId: string | null;\n realIndex: number;\n childrenCount: number;\n original: T;\n};\n\nexport type DndContextPropsType = {\n announcements: Announcements;\n modifiers: Modifier[];\n sensors: SensorDescriptor<SensorOptions>[];\n measuring: Partial<MeasuringConfiguration>;\n collisionDetection: CollisionDetection;\n onDragStart: (e: DragStartEvent) => void;\n onDragMove: (e: DragMoveEvent) => void;\n onDragOver: (e: DragOverEvent) => void;\n onDragEnd: (e: DragEndEvent) => void;\n onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type SortableContextPropsType = {\n items: string[];\n strategy: SortingStrategy;\n};\n\nexport type UseTreePreviewHandlersReturn = {\n handlePreviewDragStart: (e: DragStartEvent) => void;\n handlePreviewDragMove: (e: DragMoveEvent) => void;\n handlePreviewDragOver: (e: DragOverEvent) => void;\n handlePreviewDragEnd: (e: DragEndEvent) => void;\n handlePreviewDragCancel: (e: DragCancelEvent) => void;\n};\nexport type UseTreePreviewHandlersArgs = {\n setOverId: React.Dispatch<React.SetStateAction<string>>;\n setActiveId: React.Dispatch<React.SetStateAction<string>>;\n setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n};\n\ntype UseTreeActionHandlersArgs<T = unknown> = UseTreePreviewHandlersReturn & {\n dropIndicatorPosition: DropIndicatorPosition;\n flattenedItems: Item<T>[];\n projected: {\n depth: number;\n parentId: string | null;\n } | null;\n onReorder: (\n newData: Item<T>[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string,\n ) => void;\n isDropValid: boolean;\n};\n\ntype UseTreeActionHandlersReturn = {\n onDragStart: (e: DragStartEvent) => void;\n onDragMove: (e: DragMoveEvent) => void;\n onDragOver: (e: DragOverEvent) => void;\n onDragEnd: (e: DragEndEvent) => void;\n onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type UseTreeActionHandlersType = <T = unknown>(\n args: UseTreeActionHandlersArgs<T>,\n) => UseTreeActionHandlersReturn;\n\nexport type UseTreeDndkitConfigArgs<T> = {\n flattenedItems: Item<T>[];\n visibleItems: Item<T>[];\n isHorizontalDnD?: boolean;\n isExpandable: boolean;\n onReorder: (\n newData: Item<T>[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string,\n ) => void;\n getIsDropValid: (\n active: Item<T>,\n over: Item<T>,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n maxDragAndDropLevel: number;\n};\n\nexport type UseTreeDndkitConfigReturn<T> = {\n dndContextProps: DndContextPropsType;\n sortableContextProps: SortableContextPropsType;\n activeId: string;\n activeIndex: number;\n overId: string;\n depth: number;\n dropIndicatorPosition: DropIndicatorPosition;\n isDropValid: boolean;\n visibleItems: Item<T>[];\n};\n\nexport type UseTreeDndkitConfigType = <T = unknown>(args: UseTreeDndkitConfigArgs<T>) => UseTreeDndkitConfigReturn<T>;\n\nexport type GetKeyboardCoordinatesArgs = {\n items: Item[];\n active: Active;\n over: Over;\n event: KeyboardEvent;\n currentCoordinates: Coordinates;\n droppableContainers: DroppableContainers;\n collisionRect: ViewRect;\n dropIndicatorPosition: DropIndicatorPosition;\n maxDragAndDropLevel: number;\n};\n\nexport type SensorContext = MutableRefObject<{\n items: Item[];\n dropIndicatorPosition: DropIndicatorPosition;\n setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n}>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import {\n Active,\n Announcements,\n CollisionDetection,\n DragCancelEvent,\n DragEndEvent,\n DragMoveEvent,\n DragOverEvent,\n DragStartEvent,\n DroppableContainers,\n MeasuringConfiguration,\n Modifier,\n Over,\n ViewRect,\n} from '@dnd-kit/core';\nimport type { SensorDescriptor, SensorOptions } from '@dnd-kit/core/dist/sensors';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport React, { MutableRefObject } from 'react';\nimport { DropIndicatorPosition } from './constants';\n\nexport type Item<T = unknown> = {\n uid: string;\n depth: number;\n parentId: string | null;\n realIndex: number;\n childrenCount: number;\n original: T;\n};\n\nexport type DndContextPropsType = {\n announcements: Announcements;\n modifiers: Modifier[];\n sensors: SensorDescriptor<SensorOptions>[];\n measuring: Partial<MeasuringConfiguration>;\n collisionDetection: CollisionDetection;\n onDragStart: (e: DragStartEvent) => void;\n onDragMove: (e: DragMoveEvent) => void;\n onDragOver: (e: DragOverEvent) => void;\n onDragEnd: (e: DragEndEvent) => void;\n onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type SortableContextPropsType = {\n items: string[];\n strategy: SortingStrategy;\n};\n\nexport type UseTreePreviewHandlersReturn = {\n handlePreviewDragStart: (e: DragStartEvent) => void;\n handlePreviewDragMove: (e: DragMoveEvent) => void;\n handlePreviewDragOver: (e: DragOverEvent) => void;\n handlePreviewDragEnd: (e: DragEndEvent) => void;\n handlePreviewDragCancel: (e: DragCancelEvent) => void;\n};\nexport type UseTreePreviewHandlersArgs = {\n setOverId: React.Dispatch<React.SetStateAction<string>>;\n setActiveId: React.Dispatch<React.SetStateAction<string>>;\n setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n};\n\ntype UseTreeActionHandlersArgs<T = unknown> = UseTreePreviewHandlersReturn & {\n dropIndicatorPosition: DropIndicatorPosition;\n flattenedItems: Item<T>[];\n projected: {\n depth: number;\n parentId: string | null;\n } | null;\n onReorder: (\n newData: Item<T>[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string,\n ) => void;\n isDropValid: boolean;\n};\n\ntype UseTreeActionHandlersReturn = {\n onDragStart: (e: DragStartEvent) => void;\n onDragMove: (e: DragMoveEvent) => void;\n onDragOver: (e: DragOverEvent) => void;\n onDragEnd: (e: DragEndEvent) => void;\n onDragCancel: (e: DragCancelEvent) => void;\n};\n\nexport type UseTreeActionHandlersType = <T = unknown>(\n args: UseTreeActionHandlersArgs<T>,\n) => UseTreeActionHandlersReturn;\n\nexport type UseTreeDndkitConfigArgs<T> = {\n flattenedItems: Item<T>[];\n visibleItems: Item<T>[];\n isHorizontalDnD?: boolean;\n isExpandable: boolean;\n onReorder: (\n newData: Item<T>[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string,\n ) => void;\n getIsDropValid: (\n active: Item<T>,\n over: Item<T>,\n dropIndicatorPosition: 'none' | 'before' | 'after' | 'inside',\n ) => boolean;\n maxDragAndDropLevel: number;\n};\n\nexport type UseTreeDndkitConfigReturn<T> = {\n dndContextProps: DndContextPropsType;\n sortableContextProps: SortableContextPropsType;\n activeId: string;\n activeIndex: number;\n overId: string;\n depth: number;\n dropIndicatorPosition: DropIndicatorPosition;\n isDropValid: boolean;\n visibleItems: Item<T>[];\n};\n\nexport type UseTreeDndkitConfigType = <T = unknown>(args: UseTreeDndkitConfigArgs<T>) => UseTreeDndkitConfigReturn<T>;\n\nexport type GetKeyboardCoordinatesArgs = {\n items: Item[];\n active: Active;\n over: Over;\n event: KeyboardEvent;\n currentCoordinates: Coordinates;\n droppableContainers: DroppableContainers;\n collisionRect: ViewRect;\n dropIndicatorPosition: DropIndicatorPosition;\n maxDragAndDropLevel: number;\n};\n\nexport type SensorContext = MutableRefObject<{\n items: Item[];\n dropIndicatorPosition: DropIndicatorPosition;\n setDropIndicatorPosition: React.Dispatch<React.SetStateAction<DropIndicatorPosition>>;\n keyboardTranslate: number;\n}>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,13 +50,19 @@ var import_useTreeActionHandlers = require("./useTreeActionHandlers");
|
|
|
50
50
|
var import_constants = require("./constants");
|
|
51
51
|
var import_customCollisionDetection = require("./customCollisionDetection");
|
|
52
52
|
var import_useTreeAnnouncements = require("./useTreeAnnouncements");
|
|
53
|
-
const adjustTranslate = (isHorizontalDnD) => {
|
|
54
|
-
const func = ({ transform }) => {
|
|
53
|
+
const adjustTranslate = (isHorizontalDnD, sortedIds, setKeyboardTranslate) => {
|
|
54
|
+
const func = ({ transform, activatorEvent, active }) => {
|
|
55
55
|
const newTransform = __spreadValues({}, transform);
|
|
56
56
|
if (isHorizontalDnD) {
|
|
57
57
|
newTransform.x = transform.x + 25;
|
|
58
58
|
} else {
|
|
59
59
|
newTransform.x = transform.x + 15;
|
|
60
|
+
if (["Enter", "Space"].includes(activatorEvent?.code)) {
|
|
61
|
+
const isLast = active.id === sortedIds[sortedIds.length - 1];
|
|
62
|
+
const keyboardTranslate = (isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0) / 2;
|
|
63
|
+
setKeyboardTranslate(keyboardTranslate);
|
|
64
|
+
newTransform.y = transform.y + keyboardTranslate;
|
|
65
|
+
}
|
|
60
66
|
}
|
|
61
67
|
return newTransform;
|
|
62
68
|
};
|
|
@@ -77,6 +83,7 @@ const useTreeDndkitConfig = ({
|
|
|
77
83
|
maxDragAndDropLevel
|
|
78
84
|
}) => {
|
|
79
85
|
const [activeId, setActiveId] = (0, import_react.useState)("");
|
|
86
|
+
const [keyboardTranslate, setKeyboardTranslate] = (0, import_react.useState)(0);
|
|
80
87
|
const [overId, setOverId] = (0, import_react.useState)("");
|
|
81
88
|
const [dropIndicatorPosition, setDropIndicatorPosition] = (0, import_react.useState)(import_constants.DropIndicatorPosition.None);
|
|
82
89
|
const [lastPosition, setLastPosition] = (0, import_react.useState)("");
|
|
@@ -94,19 +101,21 @@ const useTreeDndkitConfig = ({
|
|
|
94
101
|
return true;
|
|
95
102
|
return getIsDropValid(visibleItemsDictionary[activeId], visibleItemsDictionary[overId], ["none", "before", "after", "inside"][dropIndicatorPosition]);
|
|
96
103
|
}, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);
|
|
97
|
-
const modifiers = (0, import_react.useMemo)(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
|
|
104
|
+
const modifiers = (0, import_react.useMemo)(() => [adjustTranslate(isHorizontalDnD, sortedIds, setKeyboardTranslate)], [isHorizontalDnD, sortedIds]);
|
|
98
105
|
const sensorContext = (0, import_react.useRef)({
|
|
99
106
|
items: visibleItems,
|
|
100
107
|
dropIndicatorPosition,
|
|
101
|
-
setDropIndicatorPosition
|
|
108
|
+
setDropIndicatorPosition,
|
|
109
|
+
keyboardTranslate
|
|
102
110
|
});
|
|
103
111
|
(0, import_react.useEffect)(() => {
|
|
104
112
|
sensorContext.current = {
|
|
105
113
|
items: visibleItems,
|
|
106
114
|
dropIndicatorPosition,
|
|
107
|
-
setDropIndicatorPosition
|
|
115
|
+
setDropIndicatorPosition,
|
|
116
|
+
keyboardTranslate
|
|
108
117
|
};
|
|
109
|
-
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
|
|
118
|
+
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition, keyboardTranslate]);
|
|
110
119
|
const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getTreeKeyboardCoordinates.getTreeKeyboardCoordinates)(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
111
120
|
const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, {
|
|
112
121
|
coordinateGetter
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/useTreeDndkitConfig.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport {\n useSensor,\n useSensors,\n KeyboardSensor,\n PointerSensor,\n MeasuringConfiguration,\n MeasuringStrategy,\n Modifier,\n} from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { UseTreeDndkitConfigType, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\nimport { customCollisionDetection } from './customCollisionDetection';\nimport { useTreeAnnouncements } from './useTreeAnnouncements';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (isHorizontalDnD: boolean): Modifier => {\n const func: Modifier = ({ transform }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useTreeDndkitConfig: UseTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\n getIsDropValid = () => true,\n maxDragAndDropLevel,\n}) => {\n const [activeId, setActiveId] = useState<string>('');\n const [overId, setOverId] = useState<string>('');\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DropIndicatorPosition>(DropIndicatorPosition.None);\n const [lastPosition, setLastPosition] = useState<string>('');\n\n // Remove activeId's children\n const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);\n\n // Sorted ids for the library\n const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)\n */\n const visibleItemsDictionary = useMemo(() => {\n // Using plain for to achieve O(#ITEMS) performance\n const dictionary: Record<string, typeof visibleItems[0]> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\n\n const isDropValid = useMemo(() => {\n if (!activeId || !overId) return true;\n return getIsDropValid(\n visibleItemsDictionary[activeId],\n visibleItemsDictionary[overId],\n ['none', 'before', 'after', 'inside'][dropIndicatorPosition] as Parameters<typeof getIsDropValid>[2],\n );\n }, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(() => [adjustTranslate(isHorizontalDnD)],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport {\n useSensor,\n useSensors,\n KeyboardSensor,\n PointerSensor,\n MeasuringConfiguration,\n MeasuringStrategy,\n Modifier,\n} from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { UseTreeDndkitConfigType, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\nimport { customCollisionDetection } from './customCollisionDetection';\nimport { useTreeAnnouncements } from './useTreeAnnouncements';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (\n isHorizontalDnD: boolean,\n sortedIds: string[],\n setKeyboardTranslate: React.Dispatch<React.SetStateAction<number>>,\n): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n // If keyboard event, we need to adjust the y coordinate too\n if (['Enter', 'Space'].includes(activatorEvent?.code)) {\n // If last element, we should move it up\n const isLast = active.id === sortedIds[sortedIds.length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n setKeyboardTranslate(keyboardTranslate);\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useTreeDndkitConfig: UseTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\n getIsDropValid = () => true,\n maxDragAndDropLevel,\n}) => {\n const [activeId, setActiveId] = useState<string>('');\n const [keyboardTranslate, setKeyboardTranslate] = useState(0);\n const [overId, setOverId] = useState<string>('');\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DropIndicatorPosition>(DropIndicatorPosition.None);\n const [lastPosition, setLastPosition] = useState<string>('');\n\n // Remove activeId's children\n const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);\n\n // Sorted ids for the library\n const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)\n */\n const visibleItemsDictionary = useMemo(() => {\n // Using plain for to achieve O(#ITEMS) performance\n const dictionary: Record<string, typeof visibleItems[0]> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\n\n const isDropValid = useMemo(() => {\n if (!activeId || !overId) return true;\n return getIsDropValid(\n visibleItemsDictionary[activeId],\n visibleItemsDictionary[overId],\n ['none', 'before', 'after', 'inside'][dropIndicatorPosition] as Parameters<typeof getIsDropValid>[2],\n );\n }, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds, setKeyboardTranslate)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: SensorContext = useRef({\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n keyboardTranslate,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n keyboardTranslate,\n };\n }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition, keyboardTranslate]);\n\n const coordinateGetter = useMemo(\n () => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel),\n [sensorContext, isHorizontalDnD, maxDragAndDropLevel],\n );\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter,\n }),\n );\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null,\n [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActiveId,\n setOverId,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n });\n\n const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);\n\n const dndContextProps = useMemo(\n () => ({\n announcements,\n modifiers,\n sensors,\n measuring,\n collisionDetection: customCollisionDetection(\n activeId,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ),\n ...dragActionHandlers,\n }),\n [\n announcements,\n modifiers,\n sensors,\n dragActionHandlers,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n activeId,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ],\n );\n\n const sortableContextProps = useMemo(\n () => ({\n items: sortedIds,\n strategy: () => null,\n }),\n [sortedIds],\n );\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n activeId,\n activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,\n overId,\n depth: projected ? projected.depth : 0,\n dropIndicatorPosition,\n visibleItems,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -68,41 +68,52 @@ const getVerticalKeyboardCoordinates = ({
|
|
|
68
68
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
69
69
|
});
|
|
70
70
|
}
|
|
71
|
+
if (closestId === active.id && dropIndicatorPosition === DropIndicatorPosition.After) {
|
|
72
|
+
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
73
|
+
y: closestRect.top + collisionRect.height
|
|
74
|
+
});
|
|
75
|
+
}
|
|
71
76
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
72
77
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
73
|
-
y: closestRect.top +
|
|
78
|
+
y: closestRect.top + closestRect.height / 2
|
|
74
79
|
});
|
|
75
80
|
}
|
|
76
81
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
77
82
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
78
83
|
});
|
|
79
84
|
};
|
|
80
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) =>
|
|
81
|
-
|
|
82
|
-
if (
|
|
83
|
-
|
|
85
|
+
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => {
|
|
86
|
+
const func = (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
|
|
87
|
+
if (directions.includes(event.code)) {
|
|
88
|
+
if (!translatedRect) {
|
|
89
|
+
return void 0;
|
|
90
|
+
}
|
|
91
|
+
const {
|
|
92
|
+
current: { items, dropIndicatorPosition, keyboardTranslate }
|
|
93
|
+
} = context;
|
|
94
|
+
if (!over || !active || !collisionRect)
|
|
95
|
+
return void 0;
|
|
96
|
+
const args = {
|
|
97
|
+
items,
|
|
98
|
+
active,
|
|
99
|
+
over,
|
|
100
|
+
event,
|
|
101
|
+
currentCoordinates,
|
|
102
|
+
droppableContainers,
|
|
103
|
+
collisionRect,
|
|
104
|
+
dropIndicatorPosition,
|
|
105
|
+
maxDragAndDropLevel
|
|
106
|
+
};
|
|
107
|
+
if (isHorizontalDnD)
|
|
108
|
+
return void 0;
|
|
109
|
+
const newCoords = getVerticalKeyboardCoordinates(args);
|
|
110
|
+
if (newCoords)
|
|
111
|
+
return __spreadProps(__spreadValues({}, newCoords), { y: newCoords.y - keyboardTranslate });
|
|
112
|
+
return newCoords;
|
|
84
113
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (!over || !active || !collisionRect)
|
|
89
|
-
return void 0;
|
|
90
|
-
const args = {
|
|
91
|
-
items,
|
|
92
|
-
active,
|
|
93
|
-
over,
|
|
94
|
-
event,
|
|
95
|
-
currentCoordinates,
|
|
96
|
-
droppableContainers,
|
|
97
|
-
collisionRect,
|
|
98
|
-
dropIndicatorPosition,
|
|
99
|
-
maxDragAndDropLevel
|
|
100
|
-
};
|
|
101
|
-
if (isHorizontalDnD)
|
|
102
|
-
return void 0;
|
|
103
|
-
return getVerticalKeyboardCoordinates(args);
|
|
104
|
-
}
|
|
105
|
-
return void 0;
|
|
114
|
+
return void 0;
|
|
115
|
+
};
|
|
116
|
+
return func;
|
|
106
117
|
};
|
|
107
118
|
export {
|
|
108
119
|
getTreeKeyboardCoordinates
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/getTreeKeyboardCoordinates.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { GetKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nconst getVerticalKeyboardCoordinates = ({\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n}: GetKeyboardCoordinatesArgs): Coordinates | undefined => {\n if (horizontal.includes(event.code)) return undefined;\n\n const overRect = over.rect;\n\n const layoutRects: DroppableContainer[] = [];\n\n // Get the reacheable rects depending on the arrow key pressed\n droppableContainers.forEach((container) => {\n if (container?.disabled || !overRect) {\n return;\n }\n const rect = container.rect.current;\n\n // We add and substract 2 just for the sake of avoiding edge cases\n if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n layoutRects.push(container);\n } else if (rect && event.code === KeyboardCode.Up && collisionRect.top + 2 >= rect.offsetTop) {\n layoutRects.push(container);\n }\n });\n\n // Get the closest rect based on dnd-kit closest-corners algorithm\n const closestId = closestCorners({\n collisionRect,\n droppableContainers: layoutRects,\n active,\n });\n\n const closestItem = items.find((item) => item.uid === closestId);\n\n const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n // If no rect is closest, do nothing\n if (!closestId || !closestItem || !closestElement) return undefined;\n\n const closestRect = getViewRect(closestElement);\n\n if (event.code === KeyboardCode.Up) {\n // If the drop indicator is inside (or over ourselves)\n // We are gonna go to the before position\n // Else we are gonna go inside the over rect\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top - collisionRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n }\n // If the drop indicator is
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-params */\n/* eslint-disable complexity */\nimport { closestCorners, getViewRect, KeyboardCode, KeyboardCoordinateGetter, DroppableContainer } from '@dnd-kit/core';\nimport { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { GetKeyboardCoordinatesArgs, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\n\nconst directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];\n\nconst horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];\n\nconst getVerticalKeyboardCoordinates = ({\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n}: GetKeyboardCoordinatesArgs): Coordinates | undefined => {\n if (horizontal.includes(event.code)) return undefined;\n\n const overRect = over.rect;\n\n const layoutRects: DroppableContainer[] = [];\n\n // Get the reacheable rects depending on the arrow key pressed\n droppableContainers.forEach((container) => {\n if (container?.disabled || !overRect) {\n return;\n }\n const rect = container.rect.current;\n\n // We add and substract 2 just for the sake of avoiding edge cases\n if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {\n layoutRects.push(container);\n } else if (rect && event.code === KeyboardCode.Up && collisionRect.top + 2 >= rect.offsetTop) {\n layoutRects.push(container);\n }\n });\n\n // Get the closest rect based on dnd-kit closest-corners algorithm\n const closestId = closestCorners({\n collisionRect,\n droppableContainers: layoutRects,\n active,\n });\n\n const closestItem = items.find((item) => item.uid === closestId);\n\n const closestElement = droppableContainers.get(closestId)?.node?.current;\n\n // If no rect is closest, do nothing\n if (!closestId || !closestItem || !closestElement) return undefined;\n\n const closestRect = getViewRect(closestElement);\n\n if (event.code === KeyboardCode.Up) {\n // If the drop indicator is inside (or over ourselves)\n // We are gonna go to the before position\n // Else we are gonna go inside the over rect\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top - collisionRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n }\n\n // If the drop indicator is over ourselves and after\n // We need to go inside the next one\n if (closestId === active.id && dropIndicatorPosition === DropIndicatorPosition.After) {\n return {\n ...currentCoordinates,\n y: closestRect.top + collisionRect.height,\n };\n }\n // If the drop indicator is inside, or over ourselves\n // We are gonna go to the after position\n if (\n dropIndicatorPosition === DropIndicatorPosition.Inside ||\n closestId === active.id ||\n closestItem.depth + 1 > maxDragAndDropLevel\n ) {\n return {\n ...currentCoordinates,\n y: closestRect.top + closestRect.height / 2,\n };\n }\n return {\n ...currentCoordinates,\n y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2,\n };\n};\n\nexport const getTreeKeyboardCoordinates: (\n context: SensorContext,\n isHorizontalDnD: boolean,\n maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter = (context, isHorizontalDnD, maxDragAndDropLevel) => {\n const func = (\n event,\n { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } },\n ) => {\n if (directions.includes(event.code)) {\n if (!translatedRect) {\n return undefined;\n }\n\n const {\n current: { items, dropIndicatorPosition, keyboardTranslate },\n } = context;\n\n if (!over || !active || !collisionRect) return undefined;\n\n const args = {\n items,\n active,\n over,\n event,\n currentCoordinates,\n droppableContainers,\n collisionRect,\n dropIndicatorPosition,\n maxDragAndDropLevel,\n };\n\n if (isHorizontalDnD) return undefined;\n\n const newCoords = getVerticalKeyboardCoordinates(args);\n\n if (newCoords) return { ...newCoords, y: newCoords.y - keyboardTranslate };\n return newCoords;\n }\n return undefined;\n };\n return func;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,13 +33,19 @@ import { useTreeActionHandlers } from "./useTreeActionHandlers";
|
|
|
33
33
|
import { DropIndicatorPosition } from "./constants";
|
|
34
34
|
import { customCollisionDetection } from "./customCollisionDetection";
|
|
35
35
|
import { useTreeAnnouncements } from "./useTreeAnnouncements";
|
|
36
|
-
const adjustTranslate = (isHorizontalDnD) => {
|
|
37
|
-
const func = ({ transform }) => {
|
|
36
|
+
const adjustTranslate = (isHorizontalDnD, sortedIds, setKeyboardTranslate) => {
|
|
37
|
+
const func = ({ transform, activatorEvent, active }) => {
|
|
38
38
|
const newTransform = __spreadValues({}, transform);
|
|
39
39
|
if (isHorizontalDnD) {
|
|
40
40
|
newTransform.x = transform.x + 25;
|
|
41
41
|
} else {
|
|
42
42
|
newTransform.x = transform.x + 15;
|
|
43
|
+
if (["Enter", "Space"].includes(activatorEvent?.code)) {
|
|
44
|
+
const isLast = active.id === sortedIds[sortedIds.length - 1];
|
|
45
|
+
const keyboardTranslate = (isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0) / 2;
|
|
46
|
+
setKeyboardTranslate(keyboardTranslate);
|
|
47
|
+
newTransform.y = transform.y + keyboardTranslate;
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
50
|
return newTransform;
|
|
45
51
|
};
|
|
@@ -60,6 +66,7 @@ const useTreeDndkitConfig = ({
|
|
|
60
66
|
maxDragAndDropLevel
|
|
61
67
|
}) => {
|
|
62
68
|
const [activeId, setActiveId] = useState("");
|
|
69
|
+
const [keyboardTranslate, setKeyboardTranslate] = useState(0);
|
|
63
70
|
const [overId, setOverId] = useState("");
|
|
64
71
|
const [dropIndicatorPosition, setDropIndicatorPosition] = useState(DropIndicatorPosition.None);
|
|
65
72
|
const [lastPosition, setLastPosition] = useState("");
|
|
@@ -77,19 +84,21 @@ const useTreeDndkitConfig = ({
|
|
|
77
84
|
return true;
|
|
78
85
|
return getIsDropValid(visibleItemsDictionary[activeId], visibleItemsDictionary[overId], ["none", "before", "after", "inside"][dropIndicatorPosition]);
|
|
79
86
|
}, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);
|
|
80
|
-
const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
|
|
87
|
+
const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD, sortedIds, setKeyboardTranslate)], [isHorizontalDnD, sortedIds]);
|
|
81
88
|
const sensorContext = useRef({
|
|
82
89
|
items: visibleItems,
|
|
83
90
|
dropIndicatorPosition,
|
|
84
|
-
setDropIndicatorPosition
|
|
91
|
+
setDropIndicatorPosition,
|
|
92
|
+
keyboardTranslate
|
|
85
93
|
});
|
|
86
94
|
useEffect(() => {
|
|
87
95
|
sensorContext.current = {
|
|
88
96
|
items: visibleItems,
|
|
89
97
|
dropIndicatorPosition,
|
|
90
|
-
setDropIndicatorPosition
|
|
98
|
+
setDropIndicatorPosition,
|
|
99
|
+
keyboardTranslate
|
|
91
100
|
};
|
|
92
|
-
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
|
|
101
|
+
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition, keyboardTranslate]);
|
|
93
102
|
const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
94
103
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
95
104
|
coordinateGetter
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeDndkitConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport {\n useSensor,\n useSensors,\n KeyboardSensor,\n PointerSensor,\n MeasuringConfiguration,\n MeasuringStrategy,\n Modifier,\n} from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { UseTreeDndkitConfigType, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\nimport { customCollisionDetection } from './customCollisionDetection';\nimport { useTreeAnnouncements } from './useTreeAnnouncements';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (isHorizontalDnD: boolean): Modifier => {\n const func: Modifier = ({ transform }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useTreeDndkitConfig: UseTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\n getIsDropValid = () => true,\n maxDragAndDropLevel,\n}) => {\n const [activeId, setActiveId] = useState<string>('');\n const [overId, setOverId] = useState<string>('');\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DropIndicatorPosition>(DropIndicatorPosition.None);\n const [lastPosition, setLastPosition] = useState<string>('');\n\n // Remove activeId's children\n const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);\n\n // Sorted ids for the library\n const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)\n */\n const visibleItemsDictionary = useMemo(() => {\n // Using plain for to achieve O(#ITEMS) performance\n const dictionary: Record<string, typeof visibleItems[0]> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\n\n const isDropValid = useMemo(() => {\n if (!activeId || !overId) return true;\n return getIsDropValid(\n visibleItemsDictionary[activeId],\n visibleItemsDictionary[overId],\n ['none', 'before', 'after', 'inside'][dropIndicatorPosition] as Parameters<typeof getIsDropValid>[2],\n );\n }, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(() => [adjustTranslate(isHorizontalDnD)],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport {\n useSensor,\n useSensors,\n KeyboardSensor,\n PointerSensor,\n MeasuringConfiguration,\n MeasuringStrategy,\n Modifier,\n} from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { UseTreeDndkitConfigType, SensorContext } from './types';\nimport { DropIndicatorPosition } from './constants';\nimport { customCollisionDetection } from './customCollisionDetection';\nimport { useTreeAnnouncements } from './useTreeAnnouncements';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (\n isHorizontalDnD: boolean,\n sortedIds: string[],\n setKeyboardTranslate: React.Dispatch<React.SetStateAction<number>>,\n): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n // If keyboard event, we need to adjust the y coordinate too\n if (['Enter', 'Space'].includes(activatorEvent?.code)) {\n // If last element, we should move it up\n const isLast = active.id === sortedIds[sortedIds.length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n setKeyboardTranslate(keyboardTranslate);\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useTreeDndkitConfig: UseTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\n getIsDropValid = () => true,\n maxDragAndDropLevel,\n}) => {\n const [activeId, setActiveId] = useState<string>('');\n const [keyboardTranslate, setKeyboardTranslate] = useState(0);\n const [overId, setOverId] = useState<string>('');\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DropIndicatorPosition>(DropIndicatorPosition.None);\n const [lastPosition, setLastPosition] = useState<string>('');\n\n // Remove activeId's children\n const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);\n\n // Sorted ids for the library\n const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)\n */\n const visibleItemsDictionary = useMemo(() => {\n // Using plain for to achieve O(#ITEMS) performance\n const dictionary: Record<string, typeof visibleItems[0]> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\n\n const isDropValid = useMemo(() => {\n if (!activeId || !overId) return true;\n return getIsDropValid(\n visibleItemsDictionary[activeId],\n visibleItemsDictionary[overId],\n ['none', 'before', 'after', 'inside'][dropIndicatorPosition] as Parameters<typeof getIsDropValid>[2],\n );\n }, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds, setKeyboardTranslate)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: SensorContext = useRef({\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n keyboardTranslate,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n keyboardTranslate,\n };\n }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition, keyboardTranslate]);\n\n const coordinateGetter = useMemo(\n () => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel),\n [sensorContext, isHorizontalDnD, maxDragAndDropLevel],\n );\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter,\n }),\n );\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null,\n [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActiveId,\n setOverId,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n });\n\n const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);\n\n const dndContextProps = useMemo(\n () => ({\n announcements,\n modifiers,\n sensors,\n measuring,\n collisionDetection: customCollisionDetection(\n activeId,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ),\n ...dragActionHandlers,\n }),\n [\n announcements,\n modifiers,\n sensors,\n dragActionHandlers,\n visibleItemsDictionary,\n setDropIndicatorPosition,\n activeId,\n maxDragAndDropLevel,\n lastPosition,\n setLastPosition,\n ],\n );\n\n const sortableContextProps = useMemo(\n () => ({\n items: sortedIds,\n strategy: () => null,\n }),\n [sortedIds],\n );\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n activeId,\n activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,\n overId,\n depth: projected ? projected.depth : 0,\n dropIndicatorPosition,\n visibleItems,\n };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|