@react-aria/dnd 3.0.0-alpha.8 → 3.0.0-alpha.9
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/main.js +67 -50
- package/dist/main.js.map +1 -1
- package/dist/module.js +64 -49
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +13 -9
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/DragPreview.tsx +54 -0
- package/src/index.ts +3 -0
- package/src/useDrag.ts +20 -34
- package/src/useDraggableItem.ts +1 -3
- package/src/useDropIndicator.ts +2 -2
- package/src/useDroppableCollection.ts +2 -7
- package/src/useDroppableItem.ts +2 -2
package/dist/types.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { AriaButtonProps } from "@react-types/button";
|
|
2
|
-
import { DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
|
|
3
|
-
import { HTMLAttributes, RefObject, Key } from "react";
|
|
2
|
+
import { DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
|
|
3
|
+
import React, { HTMLAttributes, RefObject, Key } from "react";
|
|
4
4
|
import { DroppableCollectionState, DraggableCollectionState } from "@react-stately/dnd";
|
|
5
5
|
interface DragOptions {
|
|
6
6
|
onDragStart?: (e: DragStartEvent) => void;
|
|
7
7
|
onDragMove?: (e: DragMoveEvent) => void;
|
|
8
8
|
onDragEnd?: (e: DragEndEvent) => void;
|
|
9
9
|
getItems: () => DragItem[];
|
|
10
|
-
|
|
10
|
+
preview?: RefObject<DragPreviewRenderer>;
|
|
11
11
|
getAllowedDropOperations?: () => DropOperation[];
|
|
12
12
|
}
|
|
13
13
|
interface DragResult {
|
|
@@ -31,25 +31,25 @@ interface DropResult {
|
|
|
31
31
|
isDropTarget: boolean;
|
|
32
32
|
}
|
|
33
33
|
export function useDrop(options: DropOptions): DropResult;
|
|
34
|
-
interface DroppableCollectionOptions extends DroppableCollectionProps {
|
|
34
|
+
export interface DroppableCollectionOptions extends DroppableCollectionProps {
|
|
35
35
|
keyboardDelegate: KeyboardDelegate;
|
|
36
36
|
getDropTargetFromPoint: (x: number, y: number) => DropTarget | null;
|
|
37
37
|
}
|
|
38
|
-
interface DroppableCollectionResult {
|
|
38
|
+
export interface DroppableCollectionResult {
|
|
39
39
|
collectionProps: HTMLAttributes<HTMLElement>;
|
|
40
40
|
}
|
|
41
41
|
export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult;
|
|
42
|
-
interface DroppableItemOptions {
|
|
42
|
+
export interface DroppableItemOptions {
|
|
43
43
|
target: DropTarget;
|
|
44
44
|
}
|
|
45
|
-
interface DroppableItemResult {
|
|
45
|
+
export interface DroppableItemResult {
|
|
46
46
|
dropProps: HTMLAttributes<HTMLElement>;
|
|
47
47
|
}
|
|
48
48
|
export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult;
|
|
49
|
-
interface DropIndicatorProps {
|
|
49
|
+
export interface DropIndicatorProps {
|
|
50
50
|
target: DropTarget;
|
|
51
51
|
}
|
|
52
|
-
interface DropIndicatorAria {
|
|
52
|
+
export interface DropIndicatorAria {
|
|
53
53
|
dropIndicatorProps: HTMLAttributes<HTMLElement>;
|
|
54
54
|
}
|
|
55
55
|
export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria;
|
|
@@ -71,5 +71,9 @@ interface ClipboardResult {
|
|
|
71
71
|
clipboardProps: HTMLAttributes<HTMLElement>;
|
|
72
72
|
}
|
|
73
73
|
export function useClipboard(options: ClipboardProps): ClipboardResult;
|
|
74
|
+
export interface DragPreviewProps {
|
|
75
|
+
children: (items: DragItem[]) => JSX.Element;
|
|
76
|
+
}
|
|
77
|
+
export let DragPreview: React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer>>;
|
|
74
78
|
|
|
75
79
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDrag';\nexport * from './useDrop';\nexport * from './useDroppableCollection';\nexport * from './useDroppableItem';\nexport * from './useDropIndicator';\nexport * from './useDraggableItem';\nexport * from './useClipboard';\nexport {DragPreview} from './DragPreview';\n\nexport type {DragPreviewProps} from './DragPreview';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/dnd",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.9",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,23 +18,23 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/i18n": "^3.
|
|
22
|
-
"@react-aria/interactions": "^3.
|
|
23
|
-
"@react-aria/live-announcer": "^3.0
|
|
24
|
-
"@react-aria/overlays": "^3.
|
|
25
|
-
"@react-aria/utils": "^3.
|
|
26
|
-
"@react-aria/visually-hidden": "^3.
|
|
27
|
-
"@react-stately/dnd": "3.0.0-alpha.
|
|
28
|
-
"@react-stately/selection": "^3.
|
|
29
|
-
"@react-types/button": "^3.
|
|
30
|
-
"@react-types/shared": "^3.
|
|
21
|
+
"@react-aria/i18n": "^3.4.0",
|
|
22
|
+
"@react-aria/interactions": "^3.9.0",
|
|
23
|
+
"@react-aria/live-announcer": "^3.1.0",
|
|
24
|
+
"@react-aria/overlays": "^3.9.0",
|
|
25
|
+
"@react-aria/utils": "^3.13.0",
|
|
26
|
+
"@react-aria/visually-hidden": "^3.3.0",
|
|
27
|
+
"@react-stately/dnd": "3.0.0-alpha.7",
|
|
28
|
+
"@react-stately/selection": "^3.10.0",
|
|
29
|
+
"@react-types/button": "^3.5.0",
|
|
30
|
+
"@react-types/shared": "^3.13.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"react": "^16.8.0 || ^17.0.0-rc.1",
|
|
34
|
-
"react-dom": "^16.8.0 || ^17.0.0-rc.1"
|
|
33
|
+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
|
|
34
|
+
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
|
|
40
40
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import {DragItem, DragPreviewRenderer} from '@react-types/shared';
|
|
14
|
+
import {flushSync} from 'react-dom';
|
|
15
|
+
import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
|
|
16
|
+
|
|
17
|
+
export interface DragPreviewProps {
|
|
18
|
+
children: (items: DragItem[]) => JSX.Element
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
|
|
22
|
+
let render = props.children;
|
|
23
|
+
let [children, setChildren] = useState<JSX.Element>(null);
|
|
24
|
+
let domRef = useRef(null);
|
|
25
|
+
|
|
26
|
+
useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {
|
|
27
|
+
// This will be called during the onDragStart event by useDrag. We need to render the
|
|
28
|
+
// preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
|
|
29
|
+
flushSync(() => {
|
|
30
|
+
setChildren(render(items));
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// Yield back to useDrag to set the drag image.
|
|
34
|
+
callback(domRef.current);
|
|
35
|
+
|
|
36
|
+
// Remove the preview from the DOM after a frame so the browser has time to paint.
|
|
37
|
+
requestAnimationFrame(() => {
|
|
38
|
+
setChildren(null);
|
|
39
|
+
});
|
|
40
|
+
}, [render]);
|
|
41
|
+
|
|
42
|
+
if (!children) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>
|
|
48
|
+
{children}
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
let _DragPreview = React.forwardRef(DragPreview);
|
|
54
|
+
export {_DragPreview as DragPreview};
|
package/src/index.ts
CHANGED
package/src/useDrag.ts
CHANGED
|
@@ -11,13 +11,12 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {AriaButtonProps} from '@react-types/button';
|
|
14
|
-
import {DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
|
|
15
|
-
import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
|
|
14
|
+
import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
|
|
15
|
+
import {DragEvent, HTMLAttributes, RefObject, useRef, useState} from 'react';
|
|
16
16
|
import * as DragManager from './DragManager';
|
|
17
17
|
import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
|
|
18
18
|
// @ts-ignore
|
|
19
19
|
import intlMessages from '../intl/*.json';
|
|
20
|
-
import ReactDOM from 'react-dom';
|
|
21
20
|
import {useDescription, useGlobalListeners} from '@react-aria/utils';
|
|
22
21
|
import {useDragModality} from './utils';
|
|
23
22
|
import {useMessageFormatter} from '@react-aria/i18n';
|
|
@@ -28,7 +27,7 @@ interface DragOptions {
|
|
|
28
27
|
onDragMove?: (e: DragMoveEvent) => void,
|
|
29
28
|
onDragEnd?: (e: DragEndEvent) => void,
|
|
30
29
|
getItems: () => DragItem[],
|
|
31
|
-
|
|
30
|
+
preview?: RefObject<DragPreviewRenderer>,
|
|
32
31
|
getAllowedDropOperations?: () => DropOperation[]
|
|
33
32
|
}
|
|
34
33
|
|
|
@@ -65,6 +64,18 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
65
64
|
let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
|
|
66
65
|
|
|
67
66
|
let onDragStart = (e: DragEvent) => {
|
|
67
|
+
if (e.defaultPrevented) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (typeof options.onDragStart === 'function') {
|
|
72
|
+
options.onDragStart({
|
|
73
|
+
type: 'dragstart',
|
|
74
|
+
x: e.clientX,
|
|
75
|
+
y: e.clientY
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
|
|
68
79
|
let items = options.getItems();
|
|
69
80
|
writeToDataTransfer(e.dataTransfer, items);
|
|
70
81
|
|
|
@@ -78,22 +89,10 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
78
89
|
e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
|
|
79
90
|
}
|
|
80
91
|
|
|
81
|
-
// If there is a
|
|
92
|
+
// If there is a preview option, use it to render a custom preview image that will
|
|
82
93
|
// appear under the pointer while dragging. If not, the element itself is dragged by the browser.
|
|
83
|
-
if (typeof options.
|
|
84
|
-
|
|
85
|
-
if (preview) {
|
|
86
|
-
// Create an off-screen div to render the preview into.
|
|
87
|
-
let node = document.createElement('div');
|
|
88
|
-
node.style.zIndex = '-100';
|
|
89
|
-
node.style.position = 'absolute';
|
|
90
|
-
node.style.top = '0';
|
|
91
|
-
node.style.left = '-100000px';
|
|
92
|
-
document.body.appendChild(node);
|
|
93
|
-
|
|
94
|
-
// Call renderPreview to get a JSX element, and render it into the div with React DOM.
|
|
95
|
-
ReactDOM.render(preview, node);
|
|
96
|
-
|
|
94
|
+
if (typeof options.preview?.current === 'function') {
|
|
95
|
+
options.preview.current(items, node => {
|
|
97
96
|
// Compute the offset that the preview will appear under the mouse.
|
|
98
97
|
// If possible, this is based on the point the user clicked on the target.
|
|
99
98
|
// If the preview is much smaller, then just use the center point of the preview.
|
|
@@ -109,14 +108,9 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
109
108
|
// Rounding height to an even number prevents blurry preview seen on some screens
|
|
110
109
|
let height = 2 * Math.round(rect.height / 2);
|
|
111
110
|
node.style.height = `${height}px`;
|
|
112
|
-
|
|
113
|
-
e.dataTransfer.setDragImage(node, x, y);
|
|
114
111
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
document.body.removeChild(node);
|
|
118
|
-
});
|
|
119
|
-
}
|
|
112
|
+
e.dataTransfer.setDragImage(node, x, y);
|
|
113
|
+
});
|
|
120
114
|
}
|
|
121
115
|
|
|
122
116
|
// Enforce that drops are handled by useDrop.
|
|
@@ -128,14 +122,6 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
128
122
|
}
|
|
129
123
|
}, {capture: true, once: true});
|
|
130
124
|
|
|
131
|
-
if (typeof options.onDragStart === 'function') {
|
|
132
|
-
options.onDragStart({
|
|
133
|
-
type: 'dragstart',
|
|
134
|
-
x: e.clientX,
|
|
135
|
-
y: e.clientY
|
|
136
|
-
});
|
|
137
|
-
}
|
|
138
|
-
|
|
139
125
|
state.x = e.clientX;
|
|
140
126
|
state.y = e.clientY;
|
|
141
127
|
|
package/src/useDraggableItem.ts
CHANGED
|
@@ -33,9 +33,7 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
|
|
|
33
33
|
getItems() {
|
|
34
34
|
return state.getItems(props.key);
|
|
35
35
|
},
|
|
36
|
-
|
|
37
|
-
return state.renderPreview(props.key);
|
|
38
|
-
},
|
|
36
|
+
preview: state.preview,
|
|
39
37
|
onDragStart(e) {
|
|
40
38
|
state.startDrag(props.key, e);
|
|
41
39
|
},
|
package/src/useDropIndicator.ts
CHANGED
|
@@ -21,11 +21,11 @@ import {useDroppableItem} from './useDroppableItem';
|
|
|
21
21
|
import {useId} from '@react-aria/utils';
|
|
22
22
|
import {useMessageFormatter} from '@react-aria/i18n';
|
|
23
23
|
|
|
24
|
-
interface DropIndicatorProps {
|
|
24
|
+
export interface DropIndicatorProps {
|
|
25
25
|
target: DropTarget
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
interface DropIndicatorAria {
|
|
28
|
+
export interface DropIndicatorAria {
|
|
29
29
|
dropIndicatorProps: HTMLAttributes<HTMLElement>
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -21,12 +21,12 @@ import {useAutoScroll} from './useAutoScroll';
|
|
|
21
21
|
import {useDrop} from './useDrop';
|
|
22
22
|
import {useDroppableCollectionId} from './utils';
|
|
23
23
|
|
|
24
|
-
interface DroppableCollectionOptions extends DroppableCollectionProps {
|
|
24
|
+
export interface DroppableCollectionOptions extends DroppableCollectionProps {
|
|
25
25
|
keyboardDelegate: KeyboardDelegate,
|
|
26
26
|
getDropTargetFromPoint: (x: number, y: number) => DropTarget | null
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
interface DroppableCollectionResult {
|
|
29
|
+
export interface DroppableCollectionResult {
|
|
30
30
|
collectionProps: HTMLAttributes<HTMLElement>
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -68,11 +68,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
|
|
|
68
68
|
return 'cancel';
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
if (state.isDropTarget(target)) {
|
|
72
|
-
localState.nextTarget = target;
|
|
73
|
-
return localState.dropOperation;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
71
|
localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
|
|
77
72
|
|
|
78
73
|
// If the target doesn't accept the drop, see if the root accepts it instead.
|
package/src/useDroppableItem.ts
CHANGED
|
@@ -17,11 +17,11 @@ import {getTypes} from './utils';
|
|
|
17
17
|
import {HTMLAttributes, RefObject, useEffect} from 'react';
|
|
18
18
|
import {useVirtualDrop} from './useVirtualDrop';
|
|
19
19
|
|
|
20
|
-
interface DroppableItemOptions {
|
|
20
|
+
export interface DroppableItemOptions {
|
|
21
21
|
target: DropTarget
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
interface DroppableItemResult {
|
|
24
|
+
export interface DroppableItemResult {
|
|
25
25
|
dropProps: HTMLAttributes<HTMLElement>
|
|
26
26
|
}
|
|
27
27
|
|