@react-aria/dnd 3.0.0-alpha.1 → 3.0.0-alpha.5
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 +1615 -1984
- package/dist/main.js.map +1 -1
- package/dist/module.js +1578 -1909
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/DragManager.ts +3 -11
- package/src/constants.ts +3 -1
- package/src/useDrop.ts +7 -2
- package/src/useDroppableCollection.ts +2 -2
- package/src/utils.ts +1 -20
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;AGyBA;IACE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,OAAO,CAAC;IACnD,wBAAwB,CAAC,EAAE,MAAM,aAAa,EAAE,CAAA;CACjD;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,OAAO,CAAA;CACpB;AAiBD,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CA8JxD;AEjMD;IACE,GAAG,EAAE,UAAU,WAAW,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,KAAK,aAAa,CAAC;IAC5F,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,CAAC;IAC1H,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAGxC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;CAChC;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,YAAY,EAAE,OAAO,CAAA;CACtB;AAID,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CAsMxD;AEvND,oCAAqC,SAAQ,wBAAwB;IACnE,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,sBAAsB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,GAAG,IAAI,CAAA;CACpE;AAED;IACE,eAAe,EAAE,eAAe,WAAW,CAAC,CAAA;CAC7C;AAWD,uCAAuC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,yBAAyB,CAkfjK;ACxgBD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAA;CACvC;AAED,iCAAiC,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,mBAAmB,CAuCjJ;AC3CD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,kBAAkB,EAAE,eAAe,WAAW,CAAC,CAAA;CAChD;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,iBAAiB,CAsD3I;ACjED;IACE,GAAG,EAAE,GAAG,CAAA;CACT;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAA;CACjC;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,GAAG,mBAAmB,CAqChH;AChDD;IACE,QAAQ,CAAC,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CACtC;AAED;IACE,cAAc,EAAE,eAAe,WAAW,CAAC,CAAA;CAC5C;AA6BD,6BAA6B,OAAO,EAAE,cAAc,GAAG,eAAe,CAkFrE","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/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[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';\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.5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/i18n": "^3.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.2.
|
|
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.3.6",
|
|
22
|
+
"@react-aria/interactions": "^3.8.1",
|
|
23
|
+
"@react-aria/live-announcer": "^3.0.3",
|
|
24
|
+
"@react-aria/overlays": "^3.7.5",
|
|
25
|
+
"@react-aria/utils": "^3.11.2",
|
|
26
|
+
"@react-aria/visually-hidden": "^3.2.5",
|
|
27
|
+
"@react-stately/dnd": "3.0.0-alpha.4",
|
|
28
|
+
"@react-stately/selection": "^3.9.2",
|
|
29
|
+
"@react-types/button": "^3.4.3",
|
|
30
|
+
"@react-types/shared": "^3.11.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "^16.8.0 || ^17.0.0-rc.1",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
|
|
40
40
|
}
|
package/src/DragManager.ts
CHANGED
|
@@ -168,17 +168,9 @@ class DragSession {
|
|
|
168
168
|
document.addEventListener(event, this.cancelEvent, true);
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
this.mutationObserver = new MutationObserver(() =>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
// the next tick to update valid drop targets.
|
|
175
|
-
// See https://github.com/jsdom/jsdom/issues/3096
|
|
176
|
-
if (typeof setImmediate === 'function') {
|
|
177
|
-
this.mutationImmediate = setImmediate(() => this.updateValidDropTargets());
|
|
178
|
-
} else {
|
|
179
|
-
this.updateValidDropTargets();
|
|
180
|
-
}
|
|
181
|
-
});
|
|
171
|
+
this.mutationObserver = new MutationObserver(() =>
|
|
172
|
+
this.updateValidDropTargets()
|
|
173
|
+
);
|
|
182
174
|
this.updateValidDropTargets();
|
|
183
175
|
|
|
184
176
|
announce(this.formatMessage(MESSAGES[getDragModality()]));
|
package/src/constants.ts
CHANGED
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {DropOperation} from '@react-types/shared';
|
|
14
|
+
|
|
13
15
|
export enum DROP_OPERATION {
|
|
14
16
|
none = 0,
|
|
15
17
|
cancel = 0,
|
|
@@ -31,7 +33,7 @@ export const DROP_OPERATION_ALLOWED = {
|
|
|
31
33
|
|
|
32
34
|
export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
|
|
33
35
|
export const DROP_EFFECT = invert(DROP_OPERATION);
|
|
34
|
-
export const DROP_EFFECT_TO_DROP_OPERATION = {
|
|
36
|
+
export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
|
|
35
37
|
none: 'cancel',
|
|
36
38
|
link: 'link',
|
|
37
39
|
copy: 'copy',
|
package/src/useDrop.ts
CHANGED
|
@@ -10,11 +10,12 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {DragEvent, HTMLAttributes, RefObject,
|
|
13
|
+
import {DragEvent, HTMLAttributes, RefObject, useRef, useState} from 'react';
|
|
14
14
|
import * as DragManager from './DragManager';
|
|
15
15
|
import {DragTypes, readFromDataTransfer} from './utils';
|
|
16
16
|
import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
|
|
17
17
|
import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes} from '@react-types/shared';
|
|
18
|
+
import {useLayoutEffect} from '@react-aria/utils';
|
|
18
19
|
import {useVirtualDrop} from './useVirtualDrop';
|
|
19
20
|
|
|
20
21
|
interface DropOptions {
|
|
@@ -43,12 +44,13 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
43
44
|
x: 0,
|
|
44
45
|
y: 0,
|
|
45
46
|
dragEnterCount: 0,
|
|
46
|
-
dropEffect: 'none',
|
|
47
|
+
dropEffect: 'none' as DataTransfer['dropEffect'],
|
|
47
48
|
dropActivateTimer: null
|
|
48
49
|
}).current;
|
|
49
50
|
|
|
50
51
|
let onDragOver = (e: DragEvent) => {
|
|
51
52
|
e.preventDefault();
|
|
53
|
+
e.stopPropagation();
|
|
52
54
|
|
|
53
55
|
if (e.clientX === state.x && e.clientY === state.y) {
|
|
54
56
|
e.dataTransfer.dropEffect = state.dropEffect;
|
|
@@ -92,6 +94,7 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
92
94
|
};
|
|
93
95
|
|
|
94
96
|
let onDragEnter = (e: DragEvent) => {
|
|
97
|
+
e.stopPropagation();
|
|
95
98
|
state.dragEnterCount++;
|
|
96
99
|
if (state.dragEnterCount > 1) {
|
|
97
100
|
return;
|
|
@@ -132,6 +135,7 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
132
135
|
};
|
|
133
136
|
|
|
134
137
|
let onDragLeave = (e: DragEvent) => {
|
|
138
|
+
e.stopPropagation();
|
|
135
139
|
state.dragEnterCount--;
|
|
136
140
|
if (state.dragEnterCount > 0) {
|
|
137
141
|
return;
|
|
@@ -152,6 +156,7 @@ export function useDrop(options: DropOptions): DropResult {
|
|
|
152
156
|
|
|
153
157
|
let onDrop = (e: DragEvent) => {
|
|
154
158
|
e.preventDefault();
|
|
159
|
+
e.stopPropagation();
|
|
155
160
|
|
|
156
161
|
if (typeof options.onDrop === 'function') {
|
|
157
162
|
let dropOperation = DROP_EFFECT_TO_DROP_OPERATION[state.dropEffect];
|
|
@@ -14,8 +14,8 @@ import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosi
|
|
|
14
14
|
import * as DragManager from './DragManager';
|
|
15
15
|
import {DroppableCollectionState} from '@react-stately/dnd';
|
|
16
16
|
import {getTypes} from './utils';
|
|
17
|
-
import {HTMLAttributes, Key, RefObject, useCallback, useEffect,
|
|
18
|
-
import {mergeProps} from '@react-aria/utils';
|
|
17
|
+
import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
|
|
18
|
+
import {mergeProps, useLayoutEffect} from '@react-aria/utils';
|
|
19
19
|
import {setInteractionModality} from '@react-aria/interactions';
|
|
20
20
|
import {useAutoScroll} from './useAutoScroll';
|
|
21
21
|
import {useDrop} from './useDrop';
|
package/src/utils.ts
CHANGED
|
@@ -277,25 +277,6 @@ function createDirectoryItem(entry: any): DirectoryItem {
|
|
|
277
277
|
};
|
|
278
278
|
}
|
|
279
279
|
|
|
280
|
-
interface FileSystemFileEntry {
|
|
281
|
-
isFile: true,
|
|
282
|
-
isDirectory: false,
|
|
283
|
-
name: string,
|
|
284
|
-
file(successCallback: (file: File) => void, errorCallback?: (error: Error) => void): void
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
interface FileSystemDirectoryEntry {
|
|
288
|
-
isDirectory: true,
|
|
289
|
-
isFile: false,
|
|
290
|
-
name: string,
|
|
291
|
-
createReader(): FileSystemDirectoryReader
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
type FileSystemEntry = FileSystemFileEntry | FileSystemDirectoryEntry;
|
|
295
|
-
interface FileSystemDirectoryReader {
|
|
296
|
-
readEntries(successCallback: (entries: FileSystemEntry[]) => void, errorCallback?: (error: Error) => void): void
|
|
297
|
-
}
|
|
298
|
-
|
|
299
280
|
async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileItem | DirectoryItem> {
|
|
300
281
|
let reader = item.createReader();
|
|
301
282
|
|
|
@@ -309,7 +290,7 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileIt
|
|
|
309
290
|
|
|
310
291
|
for (let entry of entries) {
|
|
311
292
|
if (entry.isFile) {
|
|
312
|
-
let file = await getEntryFile(entry);
|
|
293
|
+
let file = await getEntryFile(entry as FileSystemFileEntry);
|
|
313
294
|
yield createFileItem(file);
|
|
314
295
|
} else if (entry.isDirectory) {
|
|
315
296
|
yield createDirectoryItem(entry);
|