@elliemae/ds-drag-and-drop 3.0.4-rc.4 → 3.1.0-next.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.
- package/dist/cjs/tree/getTreeKeyboardCoordinates.js +26 -37
- package/dist/cjs/tree/getTreeKeyboardCoordinates.js.map +2 -2
- package/dist/cjs/tree/types.js.map +1 -1
- package/dist/cjs/tree/useTreeDndkitConfig.js +6 -15
- package/dist/cjs/tree/useTreeDndkitConfig.js.map +2 -2
- package/dist/esm/tree/getTreeKeyboardCoordinates.js +26 -37
- package/dist/esm/tree/getTreeKeyboardCoordinates.js.map +2 -2
- package/dist/esm/tree/useTreeDndkitConfig.js +6 -15
- package/dist/esm/tree/useTreeDndkitConfig.js.map +2 -2
- package/package.json +1 -1
|
@@ -91,51 +91,40 @@ 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
|
-
}
|
|
99
94
|
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
100
95
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
101
|
-
y: closestRect.top +
|
|
96
|
+
y: closestRect.top + collisionRect.height / 2
|
|
102
97
|
});
|
|
103
98
|
}
|
|
104
99
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
105
100
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
106
101
|
});
|
|
107
102
|
};
|
|
108
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => {
|
|
109
|
-
|
|
110
|
-
if (
|
|
111
|
-
|
|
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;
|
|
103
|
+
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
|
|
104
|
+
if (directions.includes(event.code)) {
|
|
105
|
+
if (!translatedRect) {
|
|
106
|
+
return void 0;
|
|
136
107
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
108
|
+
const {
|
|
109
|
+
current: { items, dropIndicatorPosition }
|
|
110
|
+
} = context;
|
|
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;
|
|
140
129
|
};
|
|
141
130
|
//# 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 inside (or over ourselves)\n // We are gonna go to the after 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\nexport const getTreeKeyboardCoordinates: (\n context: SensorContext,\n isHorizontalDnD: boolean,\n maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter =\n (context, isHorizontalDnD, maxDragAndDropLevel) =>\n (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {\n if (directions.includes(event.code)) {\n if (!translatedRect) {\n return undefined;\n }\n\n const {\n current: { items, dropIndicatorPosition },\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 return getVerticalKeyboardCoordinates(args);\n }\n return undefined;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,kBAAwG;AAGxG,uBAAsC;AAEtC,MAAM,aAAuB,CAAC,yBAAa,MAAM,yBAAa,OAAO,yBAAa,IAAI,yBAAa,IAAI;AAEvG,MAAM,aAAuB,CAAC,yBAAa,MAAM,yBAAa,KAAK;AAEnE,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyD;AACzD,MAAI,WAAW,SAAS,MAAM,IAAI;AAAG,WAAO;AAE5C,QAAM,WAAW,KAAK;AAEtB,QAAM,cAAoC,CAAC;AAG3C,sBAAoB,QAAQ,CAAC,cAAc;AACzC,QAAI,WAAW,YAAY,CAAC,UAAU;AACpC;AAAA,IACF;AACA,UAAM,OAAO,UAAU,KAAK;AAG5B,QAAI,QAAQ,MAAM,SAAS,yBAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK,SAAS;AAAA,IAC5B,WAAW,QAAQ,MAAM,SAAS,yBAAa,MAAM,cAAc,MAAM,KAAK,KAAK,WAAW;AAC5F,kBAAY,KAAK,SAAS;AAAA,IAC5B;AAAA,EACF,CAAC;AAGD,QAAM,YAAY,gCAAe;AAAA,IAC/B;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ,SAAS;AAE/D,QAAM,iBAAiB,oBAAoB,IAAI,SAAS,GAAG,MAAM;AAGjE,MAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AAAgB,WAAO;AAE1D,QAAM,cAAc,6BAAY,cAAc;AAE9C,MAAI,MAAM,SAAS,yBAAa,IAAI;AAIlC,QACE,0BAA0B,uCAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,aAAO,iCACF,qBADE;AAAA,QAEL,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA,MAC9C;AAAA,IACF;AACA,WAAO,iCACF,qBADE;AAAA,MAEL,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,MAAM,IAAI;AAAA,IAC7E;AAAA,EACF;AAIA,MACE,0BAA0B,uCAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,WAAO,iCACF,qBADE;AAAA,MAEL,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA,IAC9C;AAAA,EACF;AACA,SAAO,iCACF,qBADE;AAAA,IAEL,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,MAAM,IAAI;AAAA,EAC7E;AACF;AAEO,MAAM,6BAKX,CAAC,SAAS,iBAAiB,wBAC3B,CAAC,OAAO,EAAE,oBAAoB,SAAS,EAAE,MAAM,gBAAgB,qBAAqB,QAAQ,sBAAsB;AAChH,MAAI,WAAW,SAAS,MAAM,IAAI,GAAG;AACnC,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA,IACT;AAEA,UAAM;AAAA,MACJ,SAAS,EAAE,OAAO;AAAA,QAChB;AAEJ,QAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AAAe,aAAO;AAE/C,UAAM,OAAO;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI;AAAiB,aAAO;AAC5B,WAAO,+BAA+B,IAAI;AAAA,EAC5C;AACA,SAAO;AACT;",
|
|
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
|
|
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"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,19 +50,13 @@ 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) => {
|
|
54
|
+
const func = ({ transform }) => {
|
|
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
|
-
}
|
|
66
60
|
}
|
|
67
61
|
return newTransform;
|
|
68
62
|
};
|
|
@@ -83,7 +77,6 @@ const useTreeDndkitConfig = ({
|
|
|
83
77
|
maxDragAndDropLevel
|
|
84
78
|
}) => {
|
|
85
79
|
const [activeId, setActiveId] = (0, import_react.useState)("");
|
|
86
|
-
const [keyboardTranslate, setKeyboardTranslate] = (0, import_react.useState)(0);
|
|
87
80
|
const [overId, setOverId] = (0, import_react.useState)("");
|
|
88
81
|
const [dropIndicatorPosition, setDropIndicatorPosition] = (0, import_react.useState)(import_constants.DropIndicatorPosition.None);
|
|
89
82
|
const [lastPosition, setLastPosition] = (0, import_react.useState)("");
|
|
@@ -101,21 +94,19 @@ const useTreeDndkitConfig = ({
|
|
|
101
94
|
return true;
|
|
102
95
|
return getIsDropValid(visibleItemsDictionary[activeId], visibleItemsDictionary[overId], ["none", "before", "after", "inside"][dropIndicatorPosition]);
|
|
103
96
|
}, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);
|
|
104
|
-
const modifiers = (0, import_react.useMemo)(() => [adjustTranslate(isHorizontalDnD
|
|
97
|
+
const modifiers = (0, import_react.useMemo)(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
|
|
105
98
|
const sensorContext = (0, import_react.useRef)({
|
|
106
99
|
items: visibleItems,
|
|
107
100
|
dropIndicatorPosition,
|
|
108
|
-
setDropIndicatorPosition
|
|
109
|
-
keyboardTranslate
|
|
101
|
+
setDropIndicatorPosition
|
|
110
102
|
});
|
|
111
103
|
(0, import_react.useEffect)(() => {
|
|
112
104
|
sensorContext.current = {
|
|
113
105
|
items: visibleItems,
|
|
114
106
|
dropIndicatorPosition,
|
|
115
|
-
setDropIndicatorPosition
|
|
116
|
-
keyboardTranslate
|
|
107
|
+
setDropIndicatorPosition
|
|
117
108
|
};
|
|
118
|
-
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition
|
|
109
|
+
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
|
|
119
110
|
const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getTreeKeyboardCoordinates.getTreeKeyboardCoordinates)(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
120
111
|
const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, {
|
|
121
112
|
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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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)], [isHorizontalDnD]);\n\n const sensorContext: SensorContext = useRef({\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n };\n }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqD;AACrD,kBAQO;AACP,oCAAuC;AACvC,wCAA2C;AAC3C,uBAAgD;AAChD,mCAAsC;AAEtC,uBAAsC;AACtC,sCAAyC;AACzC,kCAAqC;AAIrC,MAAM,kBAAkB,CAAC,oBAAuC;AAC9D,QAAM,OAAiB,CAAC,EAAE,gBAAgB;AACxC,UAAM,eAAe,mBAChB;AAEL,QAAI,iBAAiB;AACnB,mBAAa,IAAI,UAAU,IAAI;AAAA,IACjC,OAAO;AACL,mBAAa,IAAI,UAAU,IAAI;AAAA,IACjC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,YAA6C;AAAA,EACjD,WAAW;AAAA,IACT,UAAU,8BAAkB;AAAA,EAC9B;AACF;AAEO,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB;AAAA,MACI;AACJ,QAAM,CAAC,UAAU,eAAe,2BAAiB,EAAE;AACnD,QAAM,CAAC,QAAQ,aAAa,2BAAiB,EAAE;AAC/C,QAAM,CAAC,uBAAuB,4BAA4B,2BAAgC,uCAAsB,IAAI;AACpH,QAAM,CAAC,cAAc,mBAAmB,2BAAiB,EAAE;AAG3D,QAAM,eAAe,0BAAQ,MAAM,uCAAiB,iBAAiB,QAAQ,GAAG,CAAC,iBAAiB,QAAQ,CAAC;AAG3G,QAAM,YAAY,0BAAQ,MAAM,aAAa,IAAI,CAAC,SAAS,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;AAOpF,QAAM,yBAAyB,0BAAQ,MAAM;AAE3C,UAAM,aAAqD,CAAC;AAC5D,iBAAa,QAAQ,CAAC,SAAS;AAC7B,iBAAW,KAAK,OAAO;AAAA,IACzB,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,cAAc,0BAAQ,MAAM;AAChC,QAAI,CAAC,YAAY,CAAC;AAAQ,aAAO;AACjC,WAAO,eACL,uBAAuB,WACvB,uBAAuB,SACvB,CAAC,QAAQ,UAAU,SAAS,QAAQ,EAAE,sBACxC;AAAA,EACF,GAAG,CAAC,gBAAgB,wBAAwB,UAAU,QAAQ,qBAAqB,CAAC;AAEpF,QAAM,YAAwB,0BAAQ,MAAM,CAAC,gBAAgB,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC;AAEjG,QAAM,gBAA+B,yBAAO;AAAA,IAC1C,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,kBAAc,UAAU;AAAA,MACtB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,uBAAuB,wBAAwB,CAAC;AAElE,QAAM,mBAAmB,0BACvB,MAAM,kEAA2B,eAAe,iBAAiB,mBAAmB,GACpF,CAAC,eAAe,iBAAiB,mBAAmB,CACtD;AAEA,QAAM,UAAU,4BACd,2BAAU,yBAAa,GACvB,2BAAU,4BAAgB;AAAA,IACxB;AAAA,EACF,CAAC,CACH;AAGA,QAAM,YAAY,0BAChB,MACE,SAAS,oCAAc,cAAc,wBAAwB,QAAQ,uBAAuB,YAAY,IAAI,MAC9G,CAAC,QAAQ,cAAc,wBAAwB,uBAAuB,YAAY,CACpF;AAEA,QAAM,sBAAsB,0DAAuB;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,qBAAqB,wDAAsB,iCAC5C,sBAD4C;AAAA,IAE/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAC;AAED,QAAM,gBAAgB,sDAAqB,wBAAwB,qBAAqB;AAExF,QAAM,kBAAkB,0BACtB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,8DAClB,UACA,wBACA,0BACA,qBACA,cACA,eACF;AAAA,KACG,qBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,QAAM,uBAAuB,0BAC3B,MAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU,MAAM;AAAA,EAClB,IACA,CAAC,SAAS,CACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,uBAAuB,WAAW,aAAa;AAAA,IAC5D;AAAA,IACA,OAAO,YAAY,UAAU,QAAQ;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -68,52 +68,41 @@ 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
|
-
}
|
|
76
71
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
77
72
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
78
|
-
y: closestRect.top +
|
|
73
|
+
y: closestRect.top + collisionRect.height / 2
|
|
79
74
|
});
|
|
80
75
|
}
|
|
81
76
|
return __spreadProps(__spreadValues({}, currentCoordinates), {
|
|
82
77
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
83
78
|
});
|
|
84
79
|
};
|
|
85
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => {
|
|
86
|
-
|
|
87
|
-
if (
|
|
88
|
-
|
|
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;
|
|
80
|
+
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
|
|
81
|
+
if (directions.includes(event.code)) {
|
|
82
|
+
if (!translatedRect) {
|
|
83
|
+
return void 0;
|
|
113
84
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
85
|
+
const {
|
|
86
|
+
current: { items, dropIndicatorPosition }
|
|
87
|
+
} = context;
|
|
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;
|
|
117
106
|
};
|
|
118
107
|
export {
|
|
119
108
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;
|
|
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 inside (or over ourselves)\n // We are gonna go to the after 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\nexport const getTreeKeyboardCoordinates: (\n context: SensorContext,\n isHorizontalDnD: boolean,\n maxDragAndDropLevel: number,\n) => KeyboardCoordinateGetter =\n (context, isHorizontalDnD, maxDragAndDropLevel) =>\n (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {\n if (directions.includes(event.code)) {\n if (!translatedRect) {\n return undefined;\n }\n\n const {\n current: { items, dropIndicatorPosition },\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 return getVerticalKeyboardCoordinates(args);\n }\n return undefined;\n };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AAGA;AAEA,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa,OAAO,aAAa,IAAI,aAAa,IAAI;AAEvG,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa,KAAK;AAEnE,MAAM,iCAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyD;AACzD,MAAI,WAAW,SAAS,MAAM,IAAI;AAAG,WAAO;AAE5C,QAAM,WAAW,KAAK;AAEtB,QAAM,cAAoC,CAAC;AAG3C,sBAAoB,QAAQ,CAAC,cAAc;AACzC,QAAI,WAAW,YAAY,CAAC,UAAU;AACpC;AAAA,IACF;AACA,UAAM,OAAO,UAAU,KAAK;AAG5B,QAAI,QAAQ,MAAM,SAAS,aAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK,SAAS;AAAA,IAC5B,WAAW,QAAQ,MAAM,SAAS,aAAa,MAAM,cAAc,MAAM,KAAK,KAAK,WAAW;AAC5F,kBAAY,KAAK,SAAS;AAAA,IAC5B;AAAA,EACF,CAAC;AAGD,QAAM,YAAY,eAAe;AAAA,IAC/B;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ,SAAS;AAE/D,QAAM,iBAAiB,oBAAoB,IAAI,SAAS,GAAG,MAAM;AAGjE,MAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AAAgB,WAAO;AAE1D,QAAM,cAAc,YAAY,cAAc;AAE9C,MAAI,MAAM,SAAS,aAAa,IAAI;AAIlC,QACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,aAAO,iCACF,qBADE;AAAA,QAEL,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA,MAC9C;AAAA,IACF;AACA,WAAO,iCACF,qBADE;AAAA,MAEL,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,MAAM,IAAI;AAAA,IAC7E;AAAA,EACF;AAIA,MACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,WAAO,iCACF,qBADE;AAAA,MAEL,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA,IAC9C;AAAA,EACF;AACA,SAAO,iCACF,qBADE;AAAA,IAEL,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,MAAM,IAAI;AAAA,EAC7E;AACF;AAEO,MAAM,6BAKX,CAAC,SAAS,iBAAiB,wBAC3B,CAAC,OAAO,EAAE,oBAAoB,SAAS,EAAE,MAAM,gBAAgB,qBAAqB,QAAQ,sBAAsB;AAChH,MAAI,WAAW,SAAS,MAAM,IAAI,GAAG;AACnC,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA,IACT;AAEA,UAAM;AAAA,MACJ,SAAS,EAAE,OAAO;AAAA,QAChB;AAEJ,QAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;AAAe,aAAO;AAE/C,UAAM,OAAO;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI;AAAiB,aAAO;AAC5B,WAAO,+BAA+B,IAAI;AAAA,EAC5C;AACA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,19 +33,13 @@ 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) => {
|
|
37
|
+
const func = ({ transform }) => {
|
|
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
|
-
}
|
|
49
43
|
}
|
|
50
44
|
return newTransform;
|
|
51
45
|
};
|
|
@@ -66,7 +60,6 @@ const useTreeDndkitConfig = ({
|
|
|
66
60
|
maxDragAndDropLevel
|
|
67
61
|
}) => {
|
|
68
62
|
const [activeId, setActiveId] = useState("");
|
|
69
|
-
const [keyboardTranslate, setKeyboardTranslate] = useState(0);
|
|
70
63
|
const [overId, setOverId] = useState("");
|
|
71
64
|
const [dropIndicatorPosition, setDropIndicatorPosition] = useState(DropIndicatorPosition.None);
|
|
72
65
|
const [lastPosition, setLastPosition] = useState("");
|
|
@@ -84,21 +77,19 @@ const useTreeDndkitConfig = ({
|
|
|
84
77
|
return true;
|
|
85
78
|
return getIsDropValid(visibleItemsDictionary[activeId], visibleItemsDictionary[overId], ["none", "before", "after", "inside"][dropIndicatorPosition]);
|
|
86
79
|
}, [getIsDropValid, visibleItemsDictionary, activeId, overId, dropIndicatorPosition]);
|
|
87
|
-
const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD
|
|
80
|
+
const modifiers = useMemo(() => [adjustTranslate(isHorizontalDnD)], [isHorizontalDnD]);
|
|
88
81
|
const sensorContext = useRef({
|
|
89
82
|
items: visibleItems,
|
|
90
83
|
dropIndicatorPosition,
|
|
91
|
-
setDropIndicatorPosition
|
|
92
|
-
keyboardTranslate
|
|
84
|
+
setDropIndicatorPosition
|
|
93
85
|
});
|
|
94
86
|
useEffect(() => {
|
|
95
87
|
sensorContext.current = {
|
|
96
88
|
items: visibleItems,
|
|
97
89
|
dropIndicatorPosition,
|
|
98
|
-
setDropIndicatorPosition
|
|
99
|
-
keyboardTranslate
|
|
90
|
+
setDropIndicatorPosition
|
|
100
91
|
};
|
|
101
|
-
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition
|
|
92
|
+
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
|
|
102
93
|
const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
103
94
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
104
95
|
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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;
|
|
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)], [isHorizontalDnD]);\n\n const sensorContext: SensorContext = useRef({\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: visibleItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n };\n }, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);\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
|
}
|