@elliemae/ds-drag-and-drop 2.1.0 → 2.2.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/hierarchy/customCollisionDetection.js +44 -50
- package/cjs/hierarchy/customCollisionDetection.js.map +7 -0
- package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js +78 -91
- package/cjs/hierarchy/getHierarchyKeyboardCoordinates.js.map +7 -0
- package/cjs/hierarchy/index.js +28 -9
- package/cjs/hierarchy/index.js.map +7 -0
- package/cjs/hierarchy/types.js +27 -2
- package/cjs/hierarchy/types.js.map +7 -0
- package/cjs/hierarchy/useHierarchyActionHandlers.js +53 -35
- package/cjs/hierarchy/useHierarchyActionHandlers.js.map +7 -0
- package/cjs/hierarchy/useHierarchyAnnouncements.js +45 -26
- package/cjs/hierarchy/useHierarchyAnnouncements.js.map +7 -0
- package/cjs/hierarchy/useHierarchyDndkitConfig.js +77 -83
- package/cjs/hierarchy/useHierarchyDndkitConfig.js.map +7 -0
- package/cjs/hierarchy/useHierarchyPreviewHandlers.js +48 -27
- package/cjs/hierarchy/useHierarchyPreviewHandlers.js.map +7 -0
- package/cjs/index.js +29 -11
- package/cjs/index.js.map +7 -0
- package/cjs/tree/constants.js +41 -12
- package/cjs/tree/constants.js.map +7 -0
- package/cjs/tree/customCollisionDetection.js +64 -95
- package/cjs/tree/customCollisionDetection.js.map +7 -0
- package/cjs/tree/getTreeKeyboardCoordinates.js +87 -101
- package/cjs/tree/getTreeKeyboardCoordinates.js.map +7 -0
- package/cjs/tree/index.js +28 -9
- package/cjs/tree/index.js.map +7 -0
- package/cjs/tree/types.js +27 -2
- package/cjs/tree/types.js.map +7 -0
- package/cjs/tree/useTreeActionHandlers.js +66 -56
- package/cjs/tree/useTreeActionHandlers.js.map +7 -0
- package/cjs/tree/useTreeAnnouncements.js +53 -40
- package/cjs/tree/useTreeAnnouncements.js.map +7 -0
- package/cjs/tree/useTreeDndkitConfig.js +95 -91
- package/cjs/tree/useTreeDndkitConfig.js.map +7 -0
- package/cjs/tree/useTreePreviewHandlers.js +53 -37
- package/cjs/tree/useTreePreviewHandlers.js.map +7 -0
- package/cjs/tree/utilities.js +44 -30
- package/cjs/tree/utilities.js.map +7 -0
- package/esm/hierarchy/customCollisionDetection.js +15 -46
- package/esm/hierarchy/customCollisionDetection.js.map +7 -0
- package/esm/hierarchy/getHierarchyKeyboardCoordinates.js +42 -76
- package/esm/hierarchy/getHierarchyKeyboardCoordinates.js.map +7 -0
- package/esm/hierarchy/index.js +3 -1
- package/esm/hierarchy/index.js.map +7 -0
- package/esm/hierarchy/types.js +2 -1
- package/esm/hierarchy/types.js.map +7 -0
- package/esm/hierarchy/useHierarchyActionHandlers.js +24 -31
- package/esm/hierarchy/useHierarchyActionHandlers.js.map +7 -0
- package/esm/hierarchy/useHierarchyAnnouncements.js +14 -20
- package/esm/hierarchy/useHierarchyAnnouncements.js.map +7 -0
- package/esm/hierarchy/useHierarchyDndkitConfig.js +45 -66
- package/esm/hierarchy/useHierarchyDndkitConfig.js.map +7 -0
- package/esm/hierarchy/useHierarchyPreviewHandlers.js +15 -19
- package/esm/hierarchy/useHierarchyPreviewHandlers.js.map +7 -0
- package/esm/index.js +4 -2
- package/esm/index.js.map +7 -0
- package/esm/tree/constants.js +12 -10
- package/esm/tree/constants.js.map +7 -0
- package/esm/tree/customCollisionDetection.js +33 -89
- package/esm/tree/customCollisionDetection.js.map +7 -0
- package/esm/tree/getTreeKeyboardCoordinates.js +49 -84
- package/esm/tree/getTreeKeyboardCoordinates.js.map +7 -0
- package/esm/tree/index.js +3 -1
- package/esm/tree/index.js.map +7 -0
- package/esm/tree/types.js +2 -1
- package/esm/tree/types.js.map +7 -0
- package/esm/tree/useTreeActionHandlers.js +35 -50
- package/esm/tree/useTreeActionHandlers.js.map +7 -0
- package/esm/tree/useTreeAnnouncements.js +18 -30
- package/esm/tree/useTreeAnnouncements.js.map +7 -0
- package/esm/tree/useTreeDndkitConfig.js +59 -70
- package/esm/tree/useTreeDndkitConfig.js.map +7 -0
- package/esm/tree/useTreePreviewHandlers.js +19 -28
- package/esm/tree/useTreePreviewHandlers.js.map +7 -0
- package/esm/tree/utilities.js +13 -23
- package/esm/tree/utilities.js.map +7 -0
- package/package.json +1 -1
|
@@ -1,46 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
5
|
-
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
6
|
-
import 'core-js/modules/esnext.iterator.find.js';
|
|
7
|
-
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
8
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
9
|
-
import { KeyboardCode, closestCorners, getViewRect } from '@dnd-kit/core';
|
|
10
|
-
import { DropIndicatorPosition } from './constants.js';
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { closestCorners, getViewRect, KeyboardCode } from "@dnd-kit/core";
|
|
3
|
+
import { DropIndicatorPosition } from "./constants";
|
|
15
4
|
const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
|
|
16
5
|
const horizontal = [KeyboardCode.Left, KeyboardCode.Right];
|
|
17
|
-
[KeyboardCode.Up, KeyboardCode.Down];
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
maxDragAndDropLevel
|
|
32
|
-
} = _ref;
|
|
33
|
-
if (horizontal.includes(event.code)) return undefined;
|
|
6
|
+
const vertical = [KeyboardCode.Up, KeyboardCode.Down];
|
|
7
|
+
const getVerticalKeyboardCoordinates = ({
|
|
8
|
+
items,
|
|
9
|
+
active,
|
|
10
|
+
over,
|
|
11
|
+
event,
|
|
12
|
+
currentCoordinates,
|
|
13
|
+
droppableContainers,
|
|
14
|
+
collisionRect,
|
|
15
|
+
dropIndicatorPosition,
|
|
16
|
+
maxDragAndDropLevel
|
|
17
|
+
}) => {
|
|
18
|
+
if (horizontal.includes(event.code))
|
|
19
|
+
return void 0;
|
|
34
20
|
const overRect = over.rect;
|
|
35
|
-
const layoutRects = [];
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (container !== null && container !== void 0 && container.disabled || !overRect) {
|
|
21
|
+
const layoutRects = [];
|
|
22
|
+
droppableContainers.forEach((container) => {
|
|
23
|
+
if (container?.disabled || !overRect) {
|
|
39
24
|
return;
|
|
40
25
|
}
|
|
41
|
-
|
|
42
26
|
const rect = container.rect.current;
|
|
43
|
-
|
|
44
27
|
if (rect && event.code === KeyboardCode.Down && collisionRect.top - 2 <= rect.offsetTop) {
|
|
45
28
|
layoutRects.push(container);
|
|
46
29
|
} else if (rect && event.code === KeyboardCode.Up && collisionRect.top >= rect.offsetTop) {
|
|
@@ -52,64 +35,44 @@ const getVerticalKeyboardCoordinates = _ref => {
|
|
|
52
35
|
droppableContainers: layoutRects,
|
|
53
36
|
active
|
|
54
37
|
});
|
|
55
|
-
const closestItem = items.find(item => item.uid === closestId);
|
|
56
|
-
const closestElement =
|
|
57
|
-
if (!closestId || !closestItem || !closestElement)
|
|
38
|
+
const closestItem = items.find((item) => item.uid === closestId);
|
|
39
|
+
const closestElement = droppableContainers.get(closestId)?.node?.current;
|
|
40
|
+
if (!closestId || !closestItem || !closestElement)
|
|
41
|
+
return void 0;
|
|
58
42
|
const closestRect = getViewRect(closestElement);
|
|
59
|
-
|
|
60
43
|
if (event.code === KeyboardCode.Up) {
|
|
61
|
-
// If the drop indicator is inside (or over ourselves)
|
|
62
|
-
// We are gonna go to the before position
|
|
63
|
-
// Else we are gonna go inside the over rect
|
|
64
44
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
65
|
-
return
|
|
45
|
+
return {
|
|
46
|
+
...currentCoordinates,
|
|
66
47
|
y: closestRect.top - collisionRect.height / 2
|
|
67
|
-
}
|
|
48
|
+
};
|
|
68
49
|
}
|
|
69
|
-
|
|
70
|
-
|
|
50
|
+
return {
|
|
51
|
+
...currentCoordinates,
|
|
71
52
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
// We are gonna go to the after position
|
|
75
|
-
// Else we are gonna go inside the over rect
|
|
76
|
-
|
|
77
|
-
|
|
53
|
+
};
|
|
54
|
+
}
|
|
78
55
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active.id || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
79
|
-
return
|
|
56
|
+
return {
|
|
57
|
+
...currentCoordinates,
|
|
80
58
|
y: closestRect.top + collisionRect.height / 2
|
|
81
|
-
}
|
|
59
|
+
};
|
|
82
60
|
}
|
|
83
|
-
|
|
84
|
-
|
|
61
|
+
return {
|
|
62
|
+
...currentCoordinates,
|
|
85
63
|
y: closestRect.top + Math.abs(closestRect.height - collisionRect.height) / 2
|
|
86
|
-
}
|
|
64
|
+
};
|
|
87
65
|
};
|
|
88
|
-
|
|
89
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, _ref2) => {
|
|
90
|
-
let {
|
|
91
|
-
currentCoordinates,
|
|
92
|
-
context: {
|
|
93
|
-
over,
|
|
94
|
-
translatedRect,
|
|
95
|
-
droppableContainers,
|
|
96
|
-
active,
|
|
97
|
-
collisionRect
|
|
98
|
-
}
|
|
99
|
-
} = _ref2;
|
|
100
|
-
|
|
66
|
+
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, { currentCoordinates, context: { over, translatedRect, droppableContainers, active, collisionRect } }) => {
|
|
101
67
|
if (directions.includes(event.code)) {
|
|
102
68
|
if (!translatedRect) {
|
|
103
|
-
return
|
|
69
|
+
return void 0;
|
|
104
70
|
}
|
|
105
|
-
|
|
106
71
|
const {
|
|
107
|
-
current: {
|
|
108
|
-
items,
|
|
109
|
-
dropIndicatorPosition
|
|
110
|
-
}
|
|
72
|
+
current: { items, dropIndicatorPosition }
|
|
111
73
|
} = context;
|
|
112
|
-
if (!over || !active || !collisionRect)
|
|
74
|
+
if (!over || !active || !collisionRect)
|
|
75
|
+
return void 0;
|
|
113
76
|
const args = {
|
|
114
77
|
items,
|
|
115
78
|
active,
|
|
@@ -121,11 +84,13 @@ const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLeve
|
|
|
121
84
|
dropIndicatorPosition,
|
|
122
85
|
maxDragAndDropLevel
|
|
123
86
|
};
|
|
124
|
-
if (isHorizontalDnD)
|
|
87
|
+
if (isHorizontalDnD)
|
|
88
|
+
return void 0;
|
|
125
89
|
return getVerticalKeyboardCoordinates(args);
|
|
126
90
|
}
|
|
127
|
-
|
|
128
|
-
|
|
91
|
+
return void 0;
|
|
92
|
+
};
|
|
93
|
+
export {
|
|
94
|
+
getTreeKeyboardCoordinates
|
|
129
95
|
};
|
|
130
|
-
|
|
131
|
-
export { getTreeKeyboardCoordinates };
|
|
96
|
+
//# sourceMappingURL=getTreeKeyboardCoordinates.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/getTreeKeyboardCoordinates.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { 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];\nconst vertical: string[] = [KeyboardCode.Up, KeyboardCode.Down];\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 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 >= rect.offsetTop) {\n layoutRects.push(container);\n }\n });\n\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 (!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;ACAA;AAGA;AAEA,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa,OAAO,aAAa,IAAI,aAAa;AAEnG,MAAM,aAAuB,CAAC,aAAa,MAAM,aAAa;AAC9D,MAAM,WAAqB,CAAC,aAAa,IAAI,aAAa;AAE1D,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;AAAO,WAAO;AAE5C,QAAM,WAAW,KAAK;AAEtB,QAAM,cAAoC;AAG1C,sBAAoB,QAAQ,CAAC,cAAc;AACzC,QAAI,WAAW,YAAY,CAAC,UAAU;AACpC;AAAA;AAEF,UAAM,OAAO,UAAU,KAAK;AAC5B,QAAI,QAAQ,MAAM,SAAS,aAAa,QAAQ,cAAc,MAAM,KAAK,KAAK,WAAW;AACvF,kBAAY,KAAK;AAAA,eACR,QAAQ,MAAM,SAAS,aAAa,MAAM,cAAc,OAAO,KAAK,WAAW;AACxF,kBAAY,KAAK;AAAA;AAAA;AAIrB,QAAM,YAAY,eAAe;AAAA,IAC/B;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA;AAGF,QAAM,cAAc,MAAM,KAAK,CAAC,SAAS,KAAK,QAAQ;AAEtD,QAAM,iBAAiB,oBAAoB,IAAI,YAAY,MAAM;AAEjE,MAAI,CAAC,aAAa,CAAC,eAAe,CAAC;AAAgB,WAAO;AAE1D,QAAM,cAAc,YAAY;AAEhC,MAAI,MAAM,SAAS,aAAa,IAAI;AAIlC,QACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,aAAO;AAAA,WACF;AAAA,QACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAM/E,MACE,0BAA0B,sBAAsB,UAChD,cAAc,OAAO,MACrB,YAAY,QAAQ,IAAI,qBACxB;AACA,WAAO;AAAA,SACF;AAAA,MACH,GAAG,YAAY,MAAM,cAAc,SAAS;AAAA;AAAA;AAGhD,SAAO;AAAA,OACF;AAAA,IACH,GAAG,YAAY,MAAM,KAAK,IAAI,YAAY,SAAS,cAAc,UAAU;AAAA;AAAA;AAIxE,MAAM,6BAKX,CAAC,SAAS,iBAAiB,wBAC3B,CAAC,OAAO,EAAE,oBAAoB,SAAS,EAAE,MAAM,gBAAgB,qBAAqB,QAAQ,sBAAsB;AAChH,MAAI,WAAW,SAAS,MAAM,OAAO;AACnC,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA;AAGT,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;AAGF,QAAI;AAAiB,aAAO;AAC5B,WAAO,+BAA+B;AAAA;AAExC,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/tree/index.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './useTreeDndkitConfig';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/tree/types.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -1,71 +1,56 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
const useTreeActionHandlers =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const onDragStart = useCallback(e => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { arrayMove } from "@dnd-kit/sortable";
|
|
3
|
+
import { cloneDeep } from "lodash";
|
|
4
|
+
import { useCallback } from "react";
|
|
5
|
+
import { DropIndicatorPosition } from "./constants";
|
|
6
|
+
const useTreeActionHandlers = ({
|
|
7
|
+
handlePreviewDragStart,
|
|
8
|
+
handlePreviewDragMove,
|
|
9
|
+
handlePreviewDragOver,
|
|
10
|
+
handlePreviewDragEnd,
|
|
11
|
+
handlePreviewDragCancel,
|
|
12
|
+
onReorder,
|
|
13
|
+
flattenedItems,
|
|
14
|
+
projected,
|
|
15
|
+
dropIndicatorPosition
|
|
16
|
+
}) => {
|
|
17
|
+
const onDragStart = useCallback((e) => {
|
|
19
18
|
handlePreviewDragStart(e);
|
|
20
19
|
}, [handlePreviewDragStart]);
|
|
21
|
-
const onDragMove = useCallback(e => {
|
|
20
|
+
const onDragMove = useCallback((e) => {
|
|
22
21
|
handlePreviewDragMove(e);
|
|
23
22
|
}, [handlePreviewDragMove]);
|
|
24
|
-
const onDragOver = useCallback(e => {
|
|
23
|
+
const onDragOver = useCallback((e) => {
|
|
25
24
|
handlePreviewDragOver(e);
|
|
26
25
|
}, [handlePreviewDragOver]);
|
|
27
|
-
const onDragEnd = useCallback(e => {
|
|
26
|
+
const onDragEnd = useCallback((e) => {
|
|
28
27
|
handlePreviewDragEnd(e);
|
|
29
|
-
const {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (over === null) return;
|
|
34
|
-
const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
|
|
28
|
+
const { active, over } = e;
|
|
29
|
+
if (over === null)
|
|
30
|
+
return;
|
|
31
|
+
const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);
|
|
35
32
|
let considerExpanding = null;
|
|
36
|
-
let overIndex = flattenedItems.findIndex(item => item.uid === over.id);
|
|
37
|
-
// It will be reconstructed well later
|
|
38
|
-
|
|
33
|
+
let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);
|
|
39
34
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
40
|
-
var _flattenedItems$overI, _flattenedItems$overI2;
|
|
41
|
-
|
|
42
35
|
considerExpanding = over.id;
|
|
43
|
-
overIndex = flattenedItems[overIndex].realIndex + (
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
36
|
+
overIndex = flattenedItems[overIndex].realIndex + (flattenedItems[overIndex].original.subRows?.length ?? 0) + 1;
|
|
37
|
+
}
|
|
47
38
|
if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {
|
|
48
|
-
// Change parent and depth from projected data
|
|
49
39
|
flattenedItems[activeIndex].parentId = projected.parentId;
|
|
50
|
-
flattenedItems[activeIndex].depth = projected.depth;
|
|
51
|
-
|
|
40
|
+
flattenedItems[activeIndex].depth = projected.depth;
|
|
52
41
|
const newFlattenedData = activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);
|
|
53
42
|
onReorder(newFlattenedData, {
|
|
54
43
|
targetIndex: overIndex,
|
|
55
44
|
fromIndex: activeIndex
|
|
56
|
-
}, considerExpanding ||
|
|
45
|
+
}, considerExpanding || "");
|
|
57
46
|
}
|
|
58
47
|
}, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
|
|
59
|
-
const onDragCancel = useCallback(e => {
|
|
48
|
+
const onDragCancel = useCallback((e) => {
|
|
60
49
|
handlePreviewDragCancel(e);
|
|
61
50
|
}, [handlePreviewDragCancel]);
|
|
62
|
-
return {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
onDragEnd,
|
|
67
|
-
onDragCancel
|
|
68
|
-
};
|
|
51
|
+
return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };
|
|
52
|
+
};
|
|
53
|
+
export {
|
|
54
|
+
useTreeActionHandlers
|
|
69
55
|
};
|
|
70
|
-
|
|
71
|
-
export { useTreeActionHandlers };
|
|
56
|
+
//# sourceMappingURL=useTreeActionHandlers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeActionHandlers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants';\nimport type { useTreeActionHandlersReturn, useTreeActionHandlersArgs } from './types';\n\nexport const useTreeActionHandlers = ({\n handlePreviewDragStart,\n handlePreviewDragMove,\n handlePreviewDragOver,\n handlePreviewDragEnd,\n handlePreviewDragCancel,\n onReorder,\n flattenedItems,\n projected,\n dropIndicatorPosition,\n}: useTreeActionHandlersArgs): useTreeActionHandlersReturn => {\n const onDragStart = useCallback(\n (e: DragStartEvent) => {\n handlePreviewDragStart(e);\n },\n [handlePreviewDragStart],\n );\n\n const onDragMove = useCallback(\n (e: DragMoveEvent) => {\n handlePreviewDragMove(e);\n },\n [handlePreviewDragMove],\n );\n\n const onDragOver = useCallback(\n (e: DragOverEvent) => {\n handlePreviewDragOver(e);\n },\n [handlePreviewDragOver],\n );\n\n const onDragEnd = useCallback(\n (e: DragEndEvent) => {\n handlePreviewDragEnd(e);\n const { active, over } = e;\n\n if (over === null) return;\n\n const activeIndex = flattenedItems.findIndex((item) => item.uid === active.id);\n\n let considerExpanding = null;\n\n let overIndex = flattenedItems.findIndex((item) => item.uid === over.id);\n // If drop indicator is inside, then put it last,\n // It will be reconstructed well later\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n considerExpanding = over.id;\n overIndex = flattenedItems[overIndex].realIndex + (flattenedItems[overIndex].original.subRows?.length ?? 0) + 1;\n }\n\n // If we are dropping the item in a new position, or new depth\n if (projected && (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth)) {\n // Change parent and depth from projected data\n flattenedItems[activeIndex].parentId = projected.parentId;\n flattenedItems[activeIndex].depth = projected.depth;\n\n // If same index, don't move the array, just copy it\n const newFlattenedData =\n activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);\n\n onReorder(\n newFlattenedData,\n {\n targetIndex: overIndex,\n fromIndex: activeIndex,\n },\n considerExpanding || '',\n );\n }\n },\n [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition],\n );\n\n const onDragCancel = useCallback(\n (e: DragCancelEvent) => {\n handlePreviewDragCancel(e);\n },\n [handlePreviewDragCancel],\n );\n\n return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAC4D;AAC5D,QAAM,cAAc,YAClB,CAAC,MAAsB;AACrB,2BAAuB;AAAA,KAEzB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,MAAqB;AACpB,0BAAsB;AAAA,KAExB,CAAC;AAGH,QAAM,YAAY,YAChB,CAAC,MAAoB;AACnB,yBAAqB;AACrB,UAAM,EAAE,QAAQ,SAAS;AAEzB,QAAI,SAAS;AAAM;AAEnB,UAAM,cAAc,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,OAAO;AAE3E,QAAI,oBAAoB;AAExB,QAAI,YAAY,eAAe,UAAU,CAAC,SAAS,KAAK,QAAQ,KAAK;AAGrE,QAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,0BAAoB,KAAK;AACzB,kBAAY,eAAe,WAAW,YAAa,gBAAe,WAAW,SAAS,SAAS,UAAU,KAAK;AAAA;AAIhH,QAAI,aAAc,iBAAgB,aAAa,eAAe,aAAa,UAAU,UAAU,QAAQ;AAErG,qBAAe,aAAa,WAAW,UAAU;AACjD,qBAAe,aAAa,QAAQ,UAAU;AAG9C,YAAM,mBACJ,gBAAgB,YAAY,UAAU,gBAAgB,aAAa,aAAa,UAAU;AAE5F,gBACE,kBACA;AAAA,QACE,aAAa;AAAA,QACb,WAAW;AAAA,SAEb,qBAAqB;AAAA;AAAA,KAI3B,CAAC,sBAAsB,gBAAgB,WAAW,WAAW;AAG/D,QAAM,eAAe,YACnB,CAAC,MAAuB;AACtB,4BAAwB;AAAA,KAE1B,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,51 +1,39 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { DropIndicatorPosition } from "./constants";
|
|
4
4
|
const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
|
|
5
|
-
const onDragStart = useCallback(id =>
|
|
5
|
+
const onDragStart = useCallback((id) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`, [visibleItemsDictionary]);
|
|
6
6
|
const onDragMove = useCallback((id, overId) => {
|
|
7
7
|
if (overId) {
|
|
8
8
|
const overIndex = visibleItemsDictionary[overId].realIndex + 1;
|
|
9
|
-
|
|
10
9
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
11
|
-
return
|
|
10
|
+
return `Draggable item was moved inside the item at position ${overIndex}.`;
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
if (dropIndicatorPosition === DropIndicatorPosition.Before) {
|
|
15
|
-
return
|
|
13
|
+
return `Draggable item was moved to position ${overIndex - 1}.`;
|
|
16
14
|
}
|
|
17
|
-
|
|
18
|
-
return "Draggable item was moved to position ".concat(overIndex, ".");
|
|
15
|
+
return `Draggable item was moved to position ${overIndex}.`;
|
|
19
16
|
}
|
|
20
|
-
|
|
21
|
-
return "Draggable item is no longer over a droppable area.";
|
|
17
|
+
return `Draggable item is no longer over a droppable area.`;
|
|
22
18
|
}, [visibleItemsDictionary, dropIndicatorPosition]);
|
|
23
19
|
const onDragOver = onDragMove;
|
|
24
20
|
const onDragEnd = useCallback((id, overId) => {
|
|
25
21
|
if (overId) {
|
|
26
22
|
const overIndex = visibleItemsDictionary[overId].realIndex + 1;
|
|
27
|
-
|
|
28
23
|
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
29
|
-
return
|
|
24
|
+
return `Draggable item was dropped inside the item at position ${overIndex}.`;
|
|
30
25
|
}
|
|
31
|
-
|
|
32
26
|
if (dropIndicatorPosition === DropIndicatorPosition.Before) {
|
|
33
|
-
return
|
|
27
|
+
return `Draggable item was dropped over position ${overIndex - 1}.`;
|
|
34
28
|
}
|
|
35
|
-
|
|
36
|
-
return "Draggable item was dropped over position ".concat(overIndex, ".");
|
|
29
|
+
return `Draggable item was dropped over position ${overIndex}.`;
|
|
37
30
|
}
|
|
38
|
-
|
|
39
|
-
return "Draggable item was dropped at it's original position.";
|
|
31
|
+
return `Draggable item was dropped at it's original position.`;
|
|
40
32
|
}, [dropIndicatorPosition, visibleItemsDictionary]);
|
|
41
|
-
const onDragCancel = useCallback(id =>
|
|
42
|
-
return {
|
|
43
|
-
onDragStart,
|
|
44
|
-
onDragOver,
|
|
45
|
-
onDragMove,
|
|
46
|
-
onDragEnd,
|
|
47
|
-
onDragCancel
|
|
48
|
-
};
|
|
33
|
+
const onDragCancel = useCallback((id) => `Dragging was cancelled. Draggable item from position ${visibleItemsDictionary[id].realIndex + 1} was dropped at it's initial position.`, [visibleItemsDictionary]);
|
|
34
|
+
return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };
|
|
49
35
|
};
|
|
50
|
-
|
|
51
|
-
|
|
36
|
+
export {
|
|
37
|
+
useTreeAnnouncements
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=useTreeAnnouncements.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useTreeAnnouncements.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Announcements } from '@dnd-kit/core';\nimport { useCallback } from 'react';\nimport { DropIndicatorPosition } from './constants';\nimport { Item } from './types';\n\nexport const useTreeAnnouncements = (\n visibleItemsDictionary: Record<string, Item>,\n dropIndicatorPosition: DropIndicatorPosition,\n): Announcements => {\n const onDragStart = useCallback(\n (id: string) => `Picked up draggable item from position ${visibleItemsDictionary[id].realIndex + 1}.`,\n [visibleItemsDictionary],\n );\n\n const onDragMove = useCallback(\n (id: string, overId: string) => {\n if (overId) {\n const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n return `Draggable item was moved inside the item at position ${overIndex}.`;\n }\n if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n return `Draggable item was moved to position ${overIndex - 1}.`;\n }\n return `Draggable item was moved to position ${overIndex}.`;\n }\n\n return `Draggable item is no longer over a droppable area.`;\n },\n [visibleItemsDictionary, dropIndicatorPosition],\n );\n\n const onDragOver = onDragMove;\n\n const onDragEnd = useCallback(\n (id: string, overId: string) => {\n if (overId) {\n const overIndex = visibleItemsDictionary[overId].realIndex + 1;\n if (dropIndicatorPosition === DropIndicatorPosition.Inside) {\n return `Draggable item was dropped inside the item at position ${overIndex}.`;\n }\n if (dropIndicatorPosition === DropIndicatorPosition.Before) {\n return `Draggable item was dropped over position ${overIndex - 1}.`;\n }\n return `Draggable item was dropped over position ${overIndex}.`;\n }\n\n return `Draggable item was dropped at it's original position.`;\n },\n [dropIndicatorPosition, visibleItemsDictionary],\n );\n\n const onDragCancel = useCallback(\n (id: string) =>\n `Dragging was cancelled. Draggable item from position ${\n visibleItemsDictionary[id].realIndex + 1\n } was dropped at it's initial position.`,\n [visibleItemsDictionary],\n );\n\n return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AAGO,MAAM,uBAAuB,CAClC,wBACA,0BACkB;AAClB,QAAM,cAAc,YAClB,CAAC,OAAe,0CAA0C,uBAAuB,IAAI,YAAY,MACjG,CAAC;AAGH,QAAM,aAAa,YACjB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wDAAwD;AAAA;AAEjE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,wCAAwC,YAAY;AAAA;AAE7D,aAAO,wCAAwC;AAAA;AAGjD,WAAO;AAAA,KAET,CAAC,wBAAwB;AAG3B,QAAM,aAAa;AAEnB,QAAM,YAAY,YAChB,CAAC,IAAY,WAAmB;AAC9B,QAAI,QAAQ;AACV,YAAM,YAAY,uBAAuB,QAAQ,YAAY;AAC7D,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,0DAA0D;AAAA;AAEnE,UAAI,0BAA0B,sBAAsB,QAAQ;AAC1D,eAAO,4CAA4C,YAAY;AAAA;AAEjE,aAAO,4CAA4C;AAAA;AAGrD,WAAO;AAAA,KAET,CAAC,uBAAuB;AAG1B,QAAM,eAAe,YACnB,CAAC,OACC,wDACE,uBAAuB,IAAI,YAAY,2CAE3C,CAAC;AAGH,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,78 +1,53 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
-
// if second parameter is true, the space will be done on the horizontal axis
|
|
25
|
-
|
|
26
|
-
const adjustTranslate = isHorizontalDnD => _ref => {
|
|
27
|
-
let {
|
|
28
|
-
transform
|
|
29
|
-
} = _ref;
|
|
30
|
-
|
|
31
|
-
const newTransform = _objectSpread({}, transform);
|
|
32
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useEffect, useMemo, useRef } from "react";
|
|
3
|
+
import {
|
|
4
|
+
useSensor,
|
|
5
|
+
useSensors,
|
|
6
|
+
KeyboardSensor,
|
|
7
|
+
PointerSensor,
|
|
8
|
+
MeasuringStrategy
|
|
9
|
+
} from "@dnd-kit/core";
|
|
10
|
+
import { horizontalListSortingStrategy, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
11
|
+
import { useTreePreviewHandlers } from "./useTreePreviewHandlers";
|
|
12
|
+
import { getTreeKeyboardCoordinates } from "./getTreeKeyboardCoordinates";
|
|
13
|
+
import { getProjection, removeChildrenOf } from "./utilities";
|
|
14
|
+
import { useTreeActionHandlers } from "./useTreeActionHandlers";
|
|
15
|
+
import { DropIndicatorPosition } from "./constants";
|
|
16
|
+
import { customCollisionDetection } from "./customCollisionDetection";
|
|
17
|
+
import { useTreeAnnouncements } from "./useTreeAnnouncements";
|
|
18
|
+
const adjustTranslate = (isHorizontalDnD) => ({ transform }) => {
|
|
19
|
+
const newTransform = {
|
|
20
|
+
...transform
|
|
21
|
+
};
|
|
33
22
|
if (isHorizontalDnD) {
|
|
34
23
|
newTransform.x = transform.x + 25;
|
|
35
24
|
} else {
|
|
36
25
|
newTransform.x = transform.x + 15;
|
|
37
26
|
}
|
|
38
|
-
|
|
39
27
|
return newTransform;
|
|
40
28
|
};
|
|
41
|
-
|
|
42
29
|
const measuring = {
|
|
43
30
|
droppable: {
|
|
44
31
|
strategy: MeasuringStrategy.BeforeDragging
|
|
45
32
|
}
|
|
46
33
|
};
|
|
47
|
-
const useTreeDndkitConfig =
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
} = _ref2;
|
|
58
|
-
const [activeId, setActiveId] = useState('');
|
|
59
|
-
const [overId, setOverId] = useState('');
|
|
34
|
+
const useTreeDndkitConfig = ({
|
|
35
|
+
flattenedItems,
|
|
36
|
+
visibleItems: preVisibleItems,
|
|
37
|
+
isHorizontalDnD = false,
|
|
38
|
+
isExpandable = false,
|
|
39
|
+
onReorder,
|
|
40
|
+
maxDragAndDropLevel
|
|
41
|
+
}) => {
|
|
42
|
+
const [activeId, setActiveId] = useState("");
|
|
43
|
+
const [overId, setOverId] = useState("");
|
|
60
44
|
const [dropIndicatorPosition, setDropIndicatorPosition] = useState(DropIndicatorPosition.None);
|
|
61
|
-
const [lastPosition, setLastPosition] = useState(
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
const sortedIds = useMemo(() => visibleItems.map(item => item.uid), [visibleItems]);
|
|
66
|
-
/**
|
|
67
|
-
* Dictionary from UID to ITEM
|
|
68
|
-
* This dictionary is computed since on every DnD move, I need to know the
|
|
69
|
-
* depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)
|
|
70
|
-
*/
|
|
71
|
-
|
|
45
|
+
const [lastPosition, setLastPosition] = useState("");
|
|
46
|
+
const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]);
|
|
47
|
+
const sortedIds = useMemo(() => visibleItems.map((item) => item.uid), [visibleItems]);
|
|
72
48
|
const visibleItemsDictionary = useMemo(() => {
|
|
73
|
-
// Using plain for to achieve O(#ITEMS) performance
|
|
74
49
|
const dictionary = {};
|
|
75
|
-
visibleItems.forEach(item => {
|
|
50
|
+
visibleItems.forEach((item) => {
|
|
76
51
|
dictionary[item.uid] = item;
|
|
77
52
|
});
|
|
78
53
|
return dictionary;
|
|
@@ -93,28 +68,40 @@ const useTreeDndkitConfig = _ref2 => {
|
|
|
93
68
|
const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
94
69
|
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
95
70
|
coordinateGetter
|
|
96
|
-
}));
|
|
97
|
-
|
|
71
|
+
}));
|
|
98
72
|
const projected = useMemo(() => overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
|
|
99
73
|
const dragPreviewHandlers = useTreePreviewHandlers({
|
|
100
74
|
setActiveId,
|
|
101
75
|
setOverId,
|
|
102
76
|
setDropIndicatorPosition
|
|
103
77
|
});
|
|
104
|
-
const dragActionHandlers = useTreeActionHandlers(
|
|
78
|
+
const dragActionHandlers = useTreeActionHandlers({
|
|
79
|
+
...dragPreviewHandlers,
|
|
105
80
|
onReorder,
|
|
106
81
|
projected,
|
|
107
82
|
flattenedItems,
|
|
108
83
|
dropIndicatorPosition
|
|
109
|
-
})
|
|
84
|
+
});
|
|
110
85
|
const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
|
|
111
|
-
const dndContextProps = useMemo(() =>
|
|
86
|
+
const dndContextProps = useMemo(() => ({
|
|
112
87
|
announcements,
|
|
113
88
|
modifiers,
|
|
114
89
|
sensors,
|
|
115
90
|
measuring,
|
|
116
|
-
collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
|
|
117
|
-
|
|
91
|
+
collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition),
|
|
92
|
+
...dragActionHandlers
|
|
93
|
+
}), [
|
|
94
|
+
announcements,
|
|
95
|
+
modifiers,
|
|
96
|
+
sensors,
|
|
97
|
+
dragActionHandlers,
|
|
98
|
+
visibleItemsDictionary,
|
|
99
|
+
setDropIndicatorPosition,
|
|
100
|
+
activeId,
|
|
101
|
+
maxDragAndDropLevel,
|
|
102
|
+
lastPosition,
|
|
103
|
+
setLastPosition
|
|
104
|
+
]);
|
|
118
105
|
const sortableContextProps = useMemo(() => ({
|
|
119
106
|
items: sortedIds,
|
|
120
107
|
strategy: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy
|
|
@@ -123,12 +110,14 @@ const useTreeDndkitConfig = _ref2 => {
|
|
|
123
110
|
dndContextProps,
|
|
124
111
|
sortableContextProps,
|
|
125
112
|
activeId,
|
|
126
|
-
activeIndex:
|
|
113
|
+
activeIndex: visibleItemsDictionary[activeId]?.realIndex ?? -1,
|
|
127
114
|
overId,
|
|
128
115
|
depth: projected ? projected.depth : 0,
|
|
129
116
|
dropIndicatorPosition,
|
|
130
117
|
visibleItems
|
|
131
118
|
};
|
|
132
119
|
};
|
|
133
|
-
|
|
134
|
-
|
|
120
|
+
export {
|
|
121
|
+
useTreeDndkitConfig
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=useTreeDndkitConfig.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates';\nimport { getProjection, removeChildrenOf } from './utilities';\nimport { useTreeActionHandlers } from './useTreeActionHandlers';\nimport type { useTreeDndkitConfigType, SensorContext, Item } 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): Modifier =>\n ({ 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\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.BeforeDragging,\n },\n};\n\nexport const useTreeDndkitConfig: useTreeDndkitConfigType = ({\n flattenedItems,\n visibleItems: preVisibleItems,\n isHorizontalDnD = false,\n isExpandable = false,\n onReorder,\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, Item> = {};\n visibleItems.forEach((item) => {\n dictionary[item.uid] = item;\n });\n return dictionary;\n }, [visibleItems]);\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 });\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: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy,\n }),\n [sortedIds, isHorizontalDnD],\n );\n\n return {\n dndContextProps,\n sortableContextProps,\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": "AAAA;ACCA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAIA,MAAM,kBACJ,CAAC,oBACD,CAAC,EAAE,gBAAgB;AACjB,QAAM,eAAe;AAAA,OAChB;AAAA;AAEL,MAAI,iBAAiB;AACnB,iBAAa,IAAI,UAAU,IAAI;AAAA,SAC1B;AACL,iBAAa,IAAI,UAAU,IAAI;AAAA;AAEjC,SAAO;AAAA;AAGX,MAAM,YAA6C;AAAA,EACjD,WAAW;AAAA,IACT,UAAU,kBAAkB;AAAA;AAAA;AAIzB,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,MACI;AACJ,QAAM,CAAC,UAAU,eAAe,SAAiB;AACjD,QAAM,CAAC,QAAQ,aAAa,SAAiB;AAC7C,QAAM,CAAC,uBAAuB,4BAA4B,SAAgC,sBAAsB;AAChH,QAAM,CAAC,cAAc,mBAAmB,SAAiB;AAGzD,QAAM,eAAe,QAAQ,MAAM,iBAAiB,iBAAiB,WAAW,CAAC,iBAAiB;AAGlG,QAAM,YAAY,QAAQ,MAAM,aAAa,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;AAOvE,QAAM,yBAAyB,QAAQ,MAAM;AAE3C,UAAM,aAAmC;AACzC,iBAAa,QAAQ,CAAC,SAAS;AAC7B,iBAAW,KAAK,OAAO;AAAA;AAEzB,WAAO;AAAA,KACN,CAAC;AAEJ,QAAM,YAAwB,QAAQ,MAAM,CAAC,gBAAgB,mBAAmB,CAAC;AAEjF,QAAM,gBAA+B,OAAO;AAAA,IAC1C,OAAO;AAAA,IACP;AAAA,IACA;AAAA;AAGF,YAAU,MAAM;AACd,kBAAc,UAAU;AAAA,MACtB,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,KAED,CAAC,cAAc,uBAAuB;AAEzC,QAAM,mBAAmB,QACvB,MAAM,2BAA2B,eAAe,iBAAiB,sBACjE,CAAC,eAAe,iBAAiB;AAGnC,QAAM,UAAU,WACd,UAAU,gBACV,UAAU,gBAAgB;AAAA,IACxB;AAAA;AAKJ,QAAM,YAAY,QAChB,MACE,SAAS,cAAc,cAAc,wBAAwB,QAAQ,uBAAuB,gBAAgB,MAC9G,CAAC,QAAQ,cAAc,wBAAwB,uBAAuB;AAGxE,QAAM,sBAAsB,uBAAuB;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,qBAAqB,sBAAsB;AAAA,OAC5C;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,gBAAgB,qBAAqB,wBAAwB;AAEnE,QAAM,kBAAkB,QACtB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,yBAClB,UACA,wBACA,0BACA,qBACA,cACA;AAAA,OAEC;AAAA,MAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,QAAM,uBAAuB,QAC3B,MAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU,kBAAkB,gCAAgC;AAAA,MAE9D,CAAC,WAAW;AAGd,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,uBAAuB,WAAW,aAAa;AAAA,IAC5D;AAAA,IACA,OAAO,YAAY,UAAU,QAAQ;AAAA,IACrC;AAAA,IACA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|