@react-aria/dnd 3.6.1-nightly.4623 → 3.6.1
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/DragManager.main.js +68 -68
- package/dist/DragManager.mjs +68 -68
- package/dist/DragManager.module.js +68 -68
- package/dist/DragPreview.main.js +1 -1
- package/dist/DragPreview.mjs +1 -1
- package/dist/DragPreview.module.js +1 -1
- package/dist/ListDropTargetDelegate.main.js +31 -31
- package/dist/ListDropTargetDelegate.mjs +31 -31
- package/dist/ListDropTargetDelegate.module.js +31 -31
- package/dist/constants.main.js +10 -10
- package/dist/constants.mjs +10 -10
- package/dist/constants.module.js +10 -10
- package/dist/useClipboard.main.js +1 -1
- package/dist/useClipboard.mjs +1 -1
- package/dist/useClipboard.module.js +1 -1
- package/dist/useDrag.main.js +38 -38
- package/dist/useDrag.mjs +38 -38
- package/dist/useDrag.module.js +38 -38
- package/dist/useDraggableItem.main.js +17 -17
- package/dist/useDraggableItem.mjs +17 -17
- package/dist/useDraggableItem.module.js +17 -17
- package/dist/useDrop.main.js +30 -30
- package/dist/useDrop.mjs +30 -30
- package/dist/useDrop.module.js +30 -30
- package/dist/useDropIndicator.main.js +17 -17
- package/dist/useDropIndicator.mjs +17 -17
- package/dist/useDropIndicator.module.js +17 -17
- package/dist/useDroppableCollection.main.js +83 -83
- package/dist/useDroppableCollection.mjs +83 -83
- package/dist/useDroppableCollection.module.js +83 -83
- package/dist/useDroppableItem.main.js +2 -2
- package/dist/useDroppableItem.mjs +2 -2
- package/dist/useDroppableItem.module.js +2 -2
- package/dist/useVirtualDrop.main.js +5 -5
- package/dist/useVirtualDrop.mjs +5 -5
- package/dist/useVirtualDrop.module.js +5 -5
- package/dist/utils.main.js +20 -20
- package/dist/utils.mjs +20 -20
- package/dist/utils.module.js +20 -20
- package/package.json +11 -11
|
@@ -32,14 +32,14 @@ $parcel$export(module.exports, "useDroppableCollection", () => $7f93a158ac20b90a
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
const $7f93a158ac20b90a$var$DROP_POSITIONS = [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
'before',
|
|
36
|
+
'on',
|
|
37
|
+
'after'
|
|
38
38
|
];
|
|
39
39
|
const $7f93a158ac20b90a$var$DROP_POSITIONS_RTL = [
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
'after',
|
|
41
|
+
'on',
|
|
42
|
+
'before'
|
|
43
43
|
];
|
|
44
44
|
function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
45
45
|
let localState = (0, $foOxf$react.useRef)({
|
|
@@ -51,40 +51,40 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
51
51
|
localState.props = props;
|
|
52
52
|
localState.state = state;
|
|
53
53
|
let defaultOnDrop = (0, $foOxf$react.useCallback)(async (e)=>{
|
|
54
|
-
let { onInsert: onInsert, onRootDrop: onRootDrop, onItemDrop: onItemDrop, onReorder: onReorder, acceptedDragTypes: acceptedDragTypes =
|
|
54
|
+
let { onInsert: onInsert, onRootDrop: onRootDrop, onItemDrop: onItemDrop, onReorder: onReorder, acceptedDragTypes: acceptedDragTypes = 'all', shouldAcceptItemDrop: shouldAcceptItemDrop } = localState.props;
|
|
55
55
|
let { draggingKeys: draggingKeys } = (0, $4620ae0dc40f0031$exports.globalDndState);
|
|
56
56
|
let isInternal = (0, $4620ae0dc40f0031$exports.isInternalDropOperation)(ref);
|
|
57
57
|
let { target: target, dropOperation: dropOperation, items: items } = e;
|
|
58
58
|
let filteredItems = items;
|
|
59
|
-
if (acceptedDragTypes !==
|
|
59
|
+
if (acceptedDragTypes !== 'all' || shouldAcceptItemDrop) filteredItems = items.filter((item)=>{
|
|
60
60
|
let itemTypes;
|
|
61
|
-
if (item.kind ===
|
|
61
|
+
if (item.kind === 'directory') itemTypes = new Set([
|
|
62
62
|
(0, $4620ae0dc40f0031$exports.DIRECTORY_DRAG_TYPE)
|
|
63
63
|
]);
|
|
64
|
-
else itemTypes = item.kind ===
|
|
64
|
+
else itemTypes = item.kind === 'file' ? new Set([
|
|
65
65
|
item.type
|
|
66
66
|
]) : item.types;
|
|
67
|
-
if (acceptedDragTypes ===
|
|
67
|
+
if (acceptedDragTypes === 'all' || acceptedDragTypes.some((type)=>itemTypes.has(type))) {
|
|
68
68
|
// If we are performing a on item drop, check if the item in question accepts the dropped item since the item may have heavier restrictions
|
|
69
69
|
// than the droppable collection itself
|
|
70
|
-
if (target.type ===
|
|
70
|
+
if (target.type === 'item' && target.dropPosition === 'on' && shouldAcceptItemDrop) return shouldAcceptItemDrop(target, itemTypes);
|
|
71
71
|
return true;
|
|
72
72
|
}
|
|
73
73
|
return false;
|
|
74
74
|
});
|
|
75
75
|
if (filteredItems.length > 0) {
|
|
76
|
-
if (target.type ===
|
|
76
|
+
if (target.type === 'root' && onRootDrop) await onRootDrop({
|
|
77
77
|
items: filteredItems,
|
|
78
78
|
dropOperation: dropOperation
|
|
79
79
|
});
|
|
80
|
-
if (target.type ===
|
|
81
|
-
if (target.dropPosition ===
|
|
80
|
+
if (target.type === 'item') {
|
|
81
|
+
if (target.dropPosition === 'on' && onItemDrop) await onItemDrop({
|
|
82
82
|
items: filteredItems,
|
|
83
83
|
dropOperation: dropOperation,
|
|
84
84
|
isInternal: isInternal,
|
|
85
85
|
target: target
|
|
86
86
|
});
|
|
87
|
-
if (target.dropPosition !==
|
|
87
|
+
if (target.dropPosition !== 'on') {
|
|
88
88
|
if (!isInternal && onInsert) await onInsert({
|
|
89
89
|
items: filteredItems,
|
|
90
90
|
dropOperation: dropOperation,
|
|
@@ -121,12 +121,12 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
121
121
|
allowedOperations: allowedOperations,
|
|
122
122
|
isInternal: isInternal,
|
|
123
123
|
draggingKeys: draggingKeys
|
|
124
|
-
}) !==
|
|
124
|
+
}) !== 'cancel';
|
|
125
125
|
let target = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
|
|
126
126
|
if (!target) {
|
|
127
|
-
localState.dropOperation =
|
|
127
|
+
localState.dropOperation = 'cancel';
|
|
128
128
|
localState.nextTarget = null;
|
|
129
|
-
return
|
|
129
|
+
return 'cancel';
|
|
130
130
|
}
|
|
131
131
|
localState.dropOperation = state.getDropOperation({
|
|
132
132
|
target: target,
|
|
@@ -136,9 +136,9 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
136
136
|
draggingKeys: draggingKeys
|
|
137
137
|
});
|
|
138
138
|
// If the target doesn't accept the drop, see if the root accepts it instead.
|
|
139
|
-
if (localState.dropOperation ===
|
|
139
|
+
if (localState.dropOperation === 'cancel') {
|
|
140
140
|
let rootTarget = {
|
|
141
|
-
type:
|
|
141
|
+
type: 'root'
|
|
142
142
|
};
|
|
143
143
|
let dropOperation = state.getDropOperation({
|
|
144
144
|
target: rootTarget,
|
|
@@ -147,15 +147,15 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
147
147
|
isInternal: isInternal,
|
|
148
148
|
draggingKeys: draggingKeys
|
|
149
149
|
});
|
|
150
|
-
if (dropOperation !==
|
|
150
|
+
if (dropOperation !== 'cancel') {
|
|
151
151
|
target = rootTarget;
|
|
152
152
|
localState.dropOperation = dropOperation;
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
// Only set dropCollectionRef if there is a valid drop target since we cleanup dropCollectionRef in onDropExit
|
|
156
156
|
// which only runs when leaving a valid drop target or if the dropEffect become none (mouse dnd only).
|
|
157
|
-
if (target && localState.dropOperation !==
|
|
158
|
-
localState.nextTarget = localState.dropOperation ===
|
|
157
|
+
if (target && localState.dropOperation !== 'cancel' && (ref === null || ref === void 0 ? void 0 : ref.current) !== (dropCollectionRef === null || dropCollectionRef === void 0 ? void 0 : dropCollectionRef.current)) (0, $4620ae0dc40f0031$exports.setDropCollectionRef)(ref);
|
|
158
|
+
localState.nextTarget = localState.dropOperation === 'cancel' ? null : target;
|
|
159
159
|
return localState.dropOperation;
|
|
160
160
|
},
|
|
161
161
|
onDropExit () {
|
|
@@ -165,8 +165,8 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
165
165
|
},
|
|
166
166
|
onDropActivate (e) {
|
|
167
167
|
var _state_target, _state_target1;
|
|
168
|
-
if (((_state_target = state.target) === null || _state_target === void 0 ? void 0 : _state_target.type) ===
|
|
169
|
-
type:
|
|
168
|
+
if (((_state_target = state.target) === null || _state_target === void 0 ? void 0 : _state_target.type) === 'item' && ((_state_target1 = state.target) === null || _state_target1 === void 0 ? void 0 : _state_target1.dropPosition) === 'on' && typeof props.onDropActivate === 'function') props.onDropActivate({
|
|
169
|
+
type: 'dropactivate',
|
|
170
170
|
x: e.x,
|
|
171
171
|
y: e.y,
|
|
172
172
|
target: state.target
|
|
@@ -202,7 +202,7 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
202
202
|
};
|
|
203
203
|
let onDropFn = localState.props.onDrop || defaultOnDrop;
|
|
204
204
|
onDropFn({
|
|
205
|
-
type:
|
|
205
|
+
type: 'drop',
|
|
206
206
|
x: e.x,
|
|
207
207
|
y: e.y,
|
|
208
208
|
target: target,
|
|
@@ -218,11 +218,11 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
218
218
|
// focus that item and show the focus ring to give the user feedback that the drop occurred.
|
|
219
219
|
// Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
|
|
220
220
|
let { state: state } = localState;
|
|
221
|
-
if (target.type ===
|
|
221
|
+
if (target.type === 'item' && target.dropPosition === 'on' && state.collection.getItem(target.key) != null) {
|
|
222
222
|
state.selectionManager.setFocusedKey(target.key);
|
|
223
223
|
state.selectionManager.setFocused(true);
|
|
224
|
-
(0, $foOxf$reactariainteractions.setInteractionModality)(
|
|
225
|
-
} else if (!state.selectionManager.isSelected(focusedKey)) (0, $foOxf$reactariainteractions.setInteractionModality)(
|
|
224
|
+
(0, $foOxf$reactariainteractions.setInteractionModality)('keyboard');
|
|
225
|
+
} else if (!state.selectionManager.isSelected(focusedKey)) (0, $foOxf$reactariainteractions.setInteractionModality)('keyboard');
|
|
226
226
|
droppingState.current = null;
|
|
227
227
|
}, 50);
|
|
228
228
|
}, [
|
|
@@ -250,9 +250,9 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
250
250
|
let first = newKeys.keys().next().value;
|
|
251
251
|
let item = state.collection.getItem(first);
|
|
252
252
|
// If this is a cell, focus the parent row.
|
|
253
|
-
if ((item === null || item === void 0 ? void 0 : item.type) ===
|
|
253
|
+
if ((item === null || item === void 0 ? void 0 : item.type) === 'cell') first = item.parentKey;
|
|
254
254
|
state.selectionManager.setFocusedKey(first);
|
|
255
|
-
if (state.selectionManager.selectionMode ===
|
|
255
|
+
if (state.selectionManager.selectionMode === 'none') (0, $foOxf$reactariainteractions.setInteractionModality)('keyboard');
|
|
256
256
|
}
|
|
257
257
|
droppingState.current = null;
|
|
258
258
|
}
|
|
@@ -261,40 +261,40 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
261
261
|
(0, $foOxf$react.useEffect)(()=>{
|
|
262
262
|
let getNextTarget = (target, wrap = true, horizontal = false)=>{
|
|
263
263
|
if (!target) return {
|
|
264
|
-
type:
|
|
264
|
+
type: 'root'
|
|
265
265
|
};
|
|
266
266
|
let { keyboardDelegate: keyboardDelegate } = localState.props;
|
|
267
267
|
let nextKey;
|
|
268
|
-
if ((target === null || target === void 0 ? void 0 : target.type) ===
|
|
269
|
-
else nextKey = horizontal && direction ===
|
|
270
|
-
let dropPositions = horizontal && direction ===
|
|
268
|
+
if ((target === null || target === void 0 ? void 0 : target.type) === 'item') nextKey = horizontal ? keyboardDelegate.getKeyRightOf(target.key) : keyboardDelegate.getKeyBelow(target.key);
|
|
269
|
+
else nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getLastKey() : keyboardDelegate.getFirstKey();
|
|
270
|
+
let dropPositions = horizontal && direction === 'rtl' ? $7f93a158ac20b90a$var$DROP_POSITIONS_RTL : $7f93a158ac20b90a$var$DROP_POSITIONS;
|
|
271
271
|
let dropPosition = dropPositions[0];
|
|
272
|
-
if (target.type ===
|
|
272
|
+
if (target.type === 'item') {
|
|
273
273
|
// If the the keyboard delegate returned the next key in the collection,
|
|
274
274
|
// first try the other positions in the current key. Otherwise (e.g. in a grid layout),
|
|
275
275
|
// jump to the same drop position in the new key.
|
|
276
|
-
let nextCollectionKey = horizontal && direction ===
|
|
276
|
+
let nextCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyBefore(target.key) : localState.state.collection.getKeyAfter(target.key);
|
|
277
277
|
if (nextKey == null || nextKey === nextCollectionKey) {
|
|
278
278
|
let positionIndex = dropPositions.indexOf(target.dropPosition);
|
|
279
279
|
let nextDropPosition = dropPositions[positionIndex + 1];
|
|
280
280
|
if (positionIndex < dropPositions.length - 1 && !(nextDropPosition === dropPositions[2] && nextKey != null)) return {
|
|
281
|
-
type:
|
|
281
|
+
type: 'item',
|
|
282
282
|
key: target.key,
|
|
283
283
|
dropPosition: nextDropPosition
|
|
284
284
|
};
|
|
285
285
|
// If the last drop position was 'after', then 'before' on the next key is equivalent.
|
|
286
286
|
// Switch to 'on' instead.
|
|
287
|
-
if (target.dropPosition === dropPositions[2]) dropPosition =
|
|
287
|
+
if (target.dropPosition === dropPositions[2]) dropPosition = 'on';
|
|
288
288
|
} else dropPosition = target.dropPosition;
|
|
289
289
|
}
|
|
290
290
|
if (nextKey == null) {
|
|
291
291
|
if (wrap) return {
|
|
292
|
-
type:
|
|
292
|
+
type: 'root'
|
|
293
293
|
};
|
|
294
294
|
return null;
|
|
295
295
|
}
|
|
296
296
|
return {
|
|
297
|
-
type:
|
|
297
|
+
type: 'item',
|
|
298
298
|
key: nextKey,
|
|
299
299
|
dropPosition: dropPosition
|
|
300
300
|
};
|
|
@@ -302,36 +302,36 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
302
302
|
let getPreviousTarget = (target, wrap = true, horizontal = false)=>{
|
|
303
303
|
let { keyboardDelegate: keyboardDelegate } = localState.props;
|
|
304
304
|
let nextKey;
|
|
305
|
-
if ((target === null || target === void 0 ? void 0 : target.type) ===
|
|
306
|
-
else nextKey = horizontal && direction ===
|
|
307
|
-
let dropPositions = horizontal && direction ===
|
|
308
|
-
let dropPosition = !target || target.type ===
|
|
309
|
-
if ((target === null || target === void 0 ? void 0 : target.type) ===
|
|
305
|
+
if ((target === null || target === void 0 ? void 0 : target.type) === 'item') nextKey = horizontal ? keyboardDelegate.getKeyLeftOf(target.key) : keyboardDelegate.getKeyAbove(target.key);
|
|
306
|
+
else nextKey = horizontal && direction === 'rtl' ? keyboardDelegate.getFirstKey() : keyboardDelegate.getLastKey();
|
|
307
|
+
let dropPositions = horizontal && direction === 'rtl' ? $7f93a158ac20b90a$var$DROP_POSITIONS_RTL : $7f93a158ac20b90a$var$DROP_POSITIONS;
|
|
308
|
+
let dropPosition = !target || target.type === 'root' ? dropPositions[2] : 'on';
|
|
309
|
+
if ((target === null || target === void 0 ? void 0 : target.type) === 'item') {
|
|
310
310
|
// If the the keyboard delegate returned the previous key in the collection,
|
|
311
311
|
// first try the other positions in the current key. Otherwise (e.g. in a grid layout),
|
|
312
312
|
// jump to the same drop position in the new key.
|
|
313
|
-
let prevCollectionKey = horizontal && direction ===
|
|
313
|
+
let prevCollectionKey = horizontal && direction === 'rtl' ? localState.state.collection.getKeyAfter(target.key) : localState.state.collection.getKeyBefore(target.key);
|
|
314
314
|
if (nextKey == null || nextKey === prevCollectionKey) {
|
|
315
315
|
let positionIndex = dropPositions.indexOf(target.dropPosition);
|
|
316
316
|
let nextDropPosition = dropPositions[positionIndex - 1];
|
|
317
317
|
if (positionIndex > 0 && nextDropPosition !== dropPositions[2]) return {
|
|
318
|
-
type:
|
|
318
|
+
type: 'item',
|
|
319
319
|
key: target.key,
|
|
320
320
|
dropPosition: nextDropPosition
|
|
321
321
|
};
|
|
322
322
|
// If the last drop position was 'before', then 'after' on the previous key is equivalent.
|
|
323
323
|
// Switch to 'on' instead.
|
|
324
|
-
if (target.dropPosition === dropPositions[0]) dropPosition =
|
|
324
|
+
if (target.dropPosition === dropPositions[0]) dropPosition = 'on';
|
|
325
325
|
} else dropPosition = target.dropPosition;
|
|
326
326
|
}
|
|
327
327
|
if (nextKey == null) {
|
|
328
328
|
if (wrap) return {
|
|
329
|
-
type:
|
|
329
|
+
type: 'root'
|
|
330
330
|
};
|
|
331
331
|
return null;
|
|
332
332
|
}
|
|
333
333
|
return {
|
|
334
|
-
type:
|
|
334
|
+
type: 'item',
|
|
335
335
|
key: nextKey,
|
|
336
336
|
dropPosition: dropPosition
|
|
337
337
|
};
|
|
@@ -352,9 +352,9 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
352
352
|
isInternal: isInternal,
|
|
353
353
|
draggingKeys: draggingKeys
|
|
354
354
|
});
|
|
355
|
-
if (target.type ===
|
|
356
|
-
}while (operation ===
|
|
357
|
-
if (operation ===
|
|
355
|
+
if (target.type === 'root') seenRoot++;
|
|
356
|
+
}while (operation === 'cancel' && !localState.state.isDropTarget(target) && seenRoot < 2);
|
|
357
|
+
if (operation === 'cancel') return null;
|
|
358
358
|
return target;
|
|
359
359
|
};
|
|
360
360
|
return $28e10663603f5ea1$exports.registerDropTarget({
|
|
@@ -374,7 +374,7 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
374
374
|
// Check if any of the targets accept the drop.
|
|
375
375
|
// TODO: should we have a faster way of doing this or e.g. for pagination?
|
|
376
376
|
let target = nextValidTarget(null, types, allowedOperations, getNextTarget);
|
|
377
|
-
return target ?
|
|
377
|
+
return target ? 'move' : 'cancel';
|
|
378
378
|
},
|
|
379
379
|
onDropEnter (e, drag) {
|
|
380
380
|
let types = (0, $4620ae0dc40f0031$exports.getTypes)(drag.items);
|
|
@@ -385,22 +385,22 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
385
385
|
// When entering the droppable collection for the first time, the default drop target
|
|
386
386
|
// is after the focused key.
|
|
387
387
|
let key = selectionManager.focusedKey;
|
|
388
|
-
let dropPosition =
|
|
388
|
+
let dropPosition = 'after';
|
|
389
389
|
// If the focused key is a cell, get the parent item instead.
|
|
390
390
|
// For now, we assume that individual cells cannot be dropped on.
|
|
391
391
|
let item = localState.state.collection.getItem(key);
|
|
392
|
-
if ((item === null || item === void 0 ? void 0 : item.type) ===
|
|
392
|
+
if ((item === null || item === void 0 ? void 0 : item.type) === 'cell') key = item.parentKey;
|
|
393
393
|
// If the focused item is also selected, the default drop target is after the last selected item.
|
|
394
394
|
// But if the focused key is the first selected item, then default to before the first selected item.
|
|
395
395
|
// This is to make reordering lists slightly easier. If you select top down, we assume you want to
|
|
396
396
|
// move the items down. If you select bottom up, we assume you want to move the items up.
|
|
397
397
|
if (selectionManager.isSelected(key)) {
|
|
398
|
-
if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) dropPosition =
|
|
398
|
+
if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) dropPosition = 'before';
|
|
399
399
|
else key = selectionManager.lastSelectedKey;
|
|
400
400
|
}
|
|
401
401
|
if (key != null) {
|
|
402
402
|
target = {
|
|
403
|
-
type:
|
|
403
|
+
type: 'item',
|
|
404
404
|
key: key,
|
|
405
405
|
dropPosition: dropPosition
|
|
406
406
|
};
|
|
@@ -414,7 +414,7 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
414
414
|
allowedOperations: drag.allowedDropOperations,
|
|
415
415
|
isInternal: isInternal,
|
|
416
416
|
draggingKeys: draggingKeys
|
|
417
|
-
}) ===
|
|
417
|
+
}) === 'cancel') target = (_nextValidTarget = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)) !== null && _nextValidTarget !== void 0 ? _nextValidTarget : nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
|
|
418
418
|
}
|
|
419
419
|
// If no focused key, then start from the root.
|
|
420
420
|
if (!target) target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
|
|
@@ -429,8 +429,8 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
429
429
|
},
|
|
430
430
|
onDropActivate (e) {
|
|
431
431
|
var _localState_state_target, _localState_state_target1;
|
|
432
|
-
if (((_localState_state_target = localState.state.target) === null || _localState_state_target === void 0 ? void 0 : _localState_state_target.type) ===
|
|
433
|
-
type:
|
|
432
|
+
if (((_localState_state_target = localState.state.target) === null || _localState_state_target === void 0 ? void 0 : _localState_state_target.type) === 'item' && ((_localState_state_target1 = localState.state.target) === null || _localState_state_target1 === void 0 ? void 0 : _localState_state_target1.dropPosition) === 'on' && typeof localState.props.onDropActivate === 'function') localState.props.onDropActivate({
|
|
433
|
+
type: 'dropactivate',
|
|
434
434
|
x: e.x,
|
|
435
435
|
y: e.y,
|
|
436
436
|
target: localState.state.target
|
|
@@ -444,57 +444,57 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
444
444
|
let { keyboardDelegate: keyboardDelegate } = localState.props;
|
|
445
445
|
let types = (0, $4620ae0dc40f0031$exports.getTypes)(drag.items);
|
|
446
446
|
switch(e.key){
|
|
447
|
-
case
|
|
447
|
+
case 'ArrowDown':
|
|
448
448
|
if (keyboardDelegate.getKeyBelow) {
|
|
449
449
|
let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getNextTarget);
|
|
450
450
|
localState.state.setTarget(target);
|
|
451
451
|
}
|
|
452
452
|
break;
|
|
453
|
-
case
|
|
453
|
+
case 'ArrowUp':
|
|
454
454
|
if (keyboardDelegate.getKeyAbove) {
|
|
455
455
|
let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getPreviousTarget);
|
|
456
456
|
localState.state.setTarget(target);
|
|
457
457
|
}
|
|
458
458
|
break;
|
|
459
|
-
case
|
|
459
|
+
case 'ArrowLeft':
|
|
460
460
|
if (keyboardDelegate.getKeyLeftOf) {
|
|
461
461
|
let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap)=>getPreviousTarget(target, wrap, true));
|
|
462
462
|
localState.state.setTarget(target);
|
|
463
463
|
}
|
|
464
464
|
break;
|
|
465
|
-
case
|
|
465
|
+
case 'ArrowRight':
|
|
466
466
|
if (keyboardDelegate.getKeyRightOf) {
|
|
467
467
|
let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap)=>getNextTarget(target, wrap, true));
|
|
468
468
|
localState.state.setTarget(target);
|
|
469
469
|
}
|
|
470
470
|
break;
|
|
471
|
-
case
|
|
471
|
+
case 'Home':
|
|
472
472
|
if (keyboardDelegate.getFirstKey) {
|
|
473
473
|
let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
|
|
474
474
|
localState.state.setTarget(target);
|
|
475
475
|
}
|
|
476
476
|
break;
|
|
477
|
-
case
|
|
477
|
+
case 'End':
|
|
478
478
|
if (keyboardDelegate.getLastKey) {
|
|
479
479
|
let target = nextValidTarget(null, types, drag.allowedDropOperations, getPreviousTarget);
|
|
480
480
|
localState.state.setTarget(target);
|
|
481
481
|
}
|
|
482
482
|
break;
|
|
483
|
-
case
|
|
483
|
+
case 'PageDown':
|
|
484
484
|
if (keyboardDelegate.getKeyPageBelow) {
|
|
485
485
|
let target = localState.state.target;
|
|
486
486
|
if (!target) target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
|
|
487
487
|
else {
|
|
488
488
|
// If on the root, go to the item a page below the top. Otherwise a page below the current item.
|
|
489
|
-
let nextKey = keyboardDelegate.getKeyPageBelow(target.type ===
|
|
490
|
-
let dropPosition = target.type ===
|
|
489
|
+
let nextKey = keyboardDelegate.getKeyPageBelow(target.type === 'item' ? target.key : keyboardDelegate.getFirstKey());
|
|
490
|
+
let dropPosition = target.type === 'item' ? target.dropPosition : 'after';
|
|
491
491
|
// If there is no next key, or we are starting on the last key, jump to the last possible position.
|
|
492
|
-
if (nextKey == null || target.type ===
|
|
492
|
+
if (nextKey == null || target.type === 'item' && target.key === keyboardDelegate.getLastKey()) {
|
|
493
493
|
nextKey = keyboardDelegate.getLastKey();
|
|
494
|
-
dropPosition =
|
|
494
|
+
dropPosition = 'after';
|
|
495
495
|
}
|
|
496
496
|
target = {
|
|
497
|
-
type:
|
|
497
|
+
type: 'item',
|
|
498
498
|
key: nextKey,
|
|
499
499
|
dropPosition: dropPosition
|
|
500
500
|
};
|
|
@@ -510,30 +510,30 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
510
510
|
draggingKeys: draggingKeys
|
|
511
511
|
});
|
|
512
512
|
var _nextValidTarget;
|
|
513
|
-
if (operation ===
|
|
513
|
+
if (operation === 'cancel') target = (_nextValidTarget = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)) !== null && _nextValidTarget !== void 0 ? _nextValidTarget : nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
|
|
514
514
|
}
|
|
515
515
|
localState.state.setTarget(target !== null && target !== void 0 ? target : localState.state.target);
|
|
516
516
|
}
|
|
517
517
|
break;
|
|
518
|
-
case
|
|
518
|
+
case 'PageUp':
|
|
519
519
|
{
|
|
520
520
|
if (!keyboardDelegate.getKeyPageAbove) break;
|
|
521
521
|
let target = localState.state.target;
|
|
522
522
|
if (!target) target = nextValidTarget(null, types, drag.allowedDropOperations, getPreviousTarget);
|
|
523
|
-
else if (target.type ===
|
|
523
|
+
else if (target.type === 'item') {
|
|
524
524
|
// If at the top already, switch to the root. Otherwise navigate a page up.
|
|
525
525
|
if (target.key === keyboardDelegate.getFirstKey()) target = {
|
|
526
|
-
type:
|
|
526
|
+
type: 'root'
|
|
527
527
|
};
|
|
528
528
|
else {
|
|
529
529
|
let nextKey = keyboardDelegate.getKeyPageAbove(target.key);
|
|
530
530
|
let dropPosition = target.dropPosition;
|
|
531
531
|
if (nextKey == null) {
|
|
532
532
|
nextKey = keyboardDelegate.getFirstKey();
|
|
533
|
-
dropPosition =
|
|
533
|
+
dropPosition = 'before';
|
|
534
534
|
}
|
|
535
535
|
target = {
|
|
536
|
-
type:
|
|
536
|
+
type: 'item',
|
|
537
537
|
key: nextKey,
|
|
538
538
|
dropPosition: dropPosition
|
|
539
539
|
};
|
|
@@ -550,7 +550,7 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
550
550
|
draggingKeys: draggingKeys
|
|
551
551
|
});
|
|
552
552
|
var _nextValidTarget1;
|
|
553
|
-
if (operation ===
|
|
553
|
+
if (operation === 'cancel') target = (_nextValidTarget1 = nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false)) !== null && _nextValidTarget1 !== void 0 ? _nextValidTarget1 : nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false);
|
|
554
554
|
}
|
|
555
555
|
localState.state.setTarget(target !== null && target !== void 0 ? target : localState.state.target);
|
|
556
556
|
break;
|
|
@@ -574,7 +574,7 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state, ref) {
|
|
|
574
574
|
id: id,
|
|
575
575
|
// Remove description from collection element. If dropping on the entire collection,
|
|
576
576
|
// there should be a drop indicator that has this description, so no need to double announce.
|
|
577
|
-
|
|
577
|
+
'aria-describedby': null
|
|
578
578
|
})
|
|
579
579
|
};
|
|
580
580
|
}
|