@react-aria/dnd 3.0.0-alpha.7 → 3.0.0-alpha.8
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 +35 -14
- package/dist/main.js.map +1 -1
- package/dist/module.js +35 -14
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/DragManager.ts +37 -13
- package/src/useDrag.ts +4 -0
- package/src/useDraggableItem.ts +3 -3
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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/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.8",
|
|
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.8.
|
|
23
|
-
"@react-aria/live-announcer": "^3.0.
|
|
24
|
-
"@react-aria/overlays": "^3.8.
|
|
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.9.
|
|
29
|
-
"@react-types/button": "^3.4.
|
|
30
|
-
"@react-types/shared": "^3.
|
|
21
|
+
"@react-aria/i18n": "^3.3.9",
|
|
22
|
+
"@react-aria/interactions": "^3.8.4",
|
|
23
|
+
"@react-aria/live-announcer": "^3.0.6",
|
|
24
|
+
"@react-aria/overlays": "^3.8.2",
|
|
25
|
+
"@react-aria/utils": "^3.12.0",
|
|
26
|
+
"@react-aria/visually-hidden": "^3.2.8",
|
|
27
|
+
"@react-stately/dnd": "3.0.0-alpha.6",
|
|
28
|
+
"@react-stately/selection": "^3.9.4",
|
|
29
|
+
"@react-types/button": "^3.4.5",
|
|
30
|
+
"@react-types/shared": "^3.12.0"
|
|
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": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
|
|
40
40
|
}
|
package/src/DragManager.ts
CHANGED
|
@@ -156,6 +156,7 @@ class DragSession {
|
|
|
156
156
|
private mutationImmediate: NodeJS.Immediate;
|
|
157
157
|
private restoreAriaHidden: () => void;
|
|
158
158
|
private formatMessage: (key: string) => string;
|
|
159
|
+
private isVirtualClick: boolean;
|
|
159
160
|
|
|
160
161
|
constructor(target: DragTarget, formatMessage: (key: string) => string) {
|
|
161
162
|
this.dragTarget = target;
|
|
@@ -165,6 +166,7 @@ class DragSession {
|
|
|
165
166
|
this.onFocus = this.onFocus.bind(this);
|
|
166
167
|
this.onBlur = this.onBlur.bind(this);
|
|
167
168
|
this.onClick = this.onClick.bind(this);
|
|
169
|
+
this.onPointerDown = this.onPointerDown.bind(this);
|
|
168
170
|
this.cancelEvent = this.cancelEvent.bind(this);
|
|
169
171
|
}
|
|
170
172
|
|
|
@@ -173,6 +175,7 @@ class DragSession {
|
|
|
173
175
|
window.addEventListener('focus', this.onFocus, true);
|
|
174
176
|
window.addEventListener('blur', this.onBlur, true);
|
|
175
177
|
document.addEventListener('click', this.onClick, true);
|
|
178
|
+
document.addEventListener('pointerdown', this.onPointerDown, true);
|
|
176
179
|
|
|
177
180
|
for (let event of CANCELED_EVENTS) {
|
|
178
181
|
document.addEventListener(event, this.cancelEvent, true);
|
|
@@ -191,6 +194,7 @@ class DragSession {
|
|
|
191
194
|
window.removeEventListener('focus', this.onFocus, true);
|
|
192
195
|
window.removeEventListener('blur', this.onBlur, true);
|
|
193
196
|
document.removeEventListener('click', this.onClick, true);
|
|
197
|
+
document.removeEventListener('pointerdown', this.onPointerDown, true);
|
|
194
198
|
|
|
195
199
|
for (let event of CANCELED_EVENTS) {
|
|
196
200
|
document.removeEventListener(event, this.cancelEvent, true);
|
|
@@ -276,22 +280,26 @@ class DragSession {
|
|
|
276
280
|
|
|
277
281
|
onClick(e: MouseEvent) {
|
|
278
282
|
this.cancelEvent(e);
|
|
283
|
+
if (e.detail === 0 || this.isVirtualClick) {
|
|
284
|
+
if (e.target === this.dragTarget.element) {
|
|
285
|
+
this.cancel();
|
|
286
|
+
return;
|
|
287
|
+
}
|
|
279
288
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
return;
|
|
289
|
+
let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
|
|
290
|
+
if (dropTarget) {
|
|
291
|
+
let item = dropItems.get(e.target as HTMLElement);
|
|
292
|
+
this.setCurrentDropTarget(dropTarget, item);
|
|
293
|
+
this.drop(item);
|
|
294
|
+
}
|
|
287
295
|
}
|
|
296
|
+
}
|
|
288
297
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
298
|
+
onPointerDown(e: PointerEvent) {
|
|
299
|
+
// Android Talkback double tap has e.detail = 1 for onClick. Detect the virtual click in onPointerDown before onClick fires
|
|
300
|
+
// so we can properly perform cancel and drop operations.
|
|
301
|
+
this.cancelEvent(e);
|
|
302
|
+
this.isVirtualClick = isVirtualPointerEvent(e);
|
|
295
303
|
}
|
|
296
304
|
|
|
297
305
|
cancelEvent(e: Event) {
|
|
@@ -538,3 +546,19 @@ function findValidDropTargets(options: DragTarget) {
|
|
|
538
546
|
return true;
|
|
539
547
|
});
|
|
540
548
|
}
|
|
549
|
+
|
|
550
|
+
function isVirtualPointerEvent(event: PointerEvent) {
|
|
551
|
+
// If the pointer size is zero, then we assume it's from a screen reader.
|
|
552
|
+
// Android TalkBack double tap will sometimes return a event with width and height of 1
|
|
553
|
+
// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
|
|
554
|
+
// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
|
|
555
|
+
// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
|
|
556
|
+
return (
|
|
557
|
+
(event.width === 0 && event.height === 0) ||
|
|
558
|
+
(event.width === 1 &&
|
|
559
|
+
event.height === 1 &&
|
|
560
|
+
event.pressure === 0 &&
|
|
561
|
+
event.detail === 0
|
|
562
|
+
)
|
|
563
|
+
);
|
|
564
|
+
}
|
package/src/useDrag.ts
CHANGED
|
@@ -106,6 +106,10 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
106
106
|
y = size.height / 2;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
+
// Rounding height to an even number prevents blurry preview seen on some screens
|
|
110
|
+
let height = 2 * Math.round(rect.height / 2);
|
|
111
|
+
node.style.height = `${height}px`;
|
|
112
|
+
|
|
109
113
|
e.dataTransfer.setDragImage(node, x, y);
|
|
110
114
|
|
|
111
115
|
// Remove the preview from the DOM after a frame so the browser has time to paint.
|
package/src/useDraggableItem.ts
CHANGED
|
@@ -48,11 +48,11 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
|
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
let item = state.collection.getItem(props.key);
|
|
51
|
-
let
|
|
51
|
+
let numKeysForDrag = state.getKeysForDrag(props.key).size;
|
|
52
52
|
let isSelected = state.selectionManager.isSelected(props.key);
|
|
53
53
|
let message: string;
|
|
54
|
-
if (isSelected &&
|
|
55
|
-
message = formatMessage('dragSelectedItems', {count:
|
|
54
|
+
if (isSelected && numKeysForDrag > 1) {
|
|
55
|
+
message = formatMessage('dragSelectedItems', {count: numKeysForDrag});
|
|
56
56
|
} else {
|
|
57
57
|
message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
|
|
58
58
|
}
|