@react-aria/dnd 3.10.0 → 3.11.0
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 +9 -6
- package/dist/DragManager.main.js.map +1 -1
- package/dist/DragManager.mjs +9 -6
- package/dist/DragManager.module.js +9 -6
- package/dist/DragManager.module.js.map +1 -1
- package/dist/DragPreview.main.js +11 -2
- package/dist/DragPreview.main.js.map +1 -1
- package/dist/DragPreview.mjs +11 -2
- package/dist/DragPreview.module.js +11 -2
- package/dist/DragPreview.module.js.map +1 -1
- package/dist/constants.main.js +0 -1
- package/dist/constants.main.js.map +1 -1
- package/dist/constants.mjs +1 -2
- package/dist/constants.module.js +1 -2
- package/dist/constants.module.js.map +1 -1
- package/dist/types.d.ts +11 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/useDrag.main.js +38 -19
- package/dist/useDrag.main.js.map +1 -1
- package/dist/useDrag.mjs +40 -21
- package/dist/useDrag.module.js +40 -21
- package/dist/useDrag.module.js.map +1 -1
- package/dist/utils.main.js.map +1 -1
- package/dist/utils.module.js.map +1 -1
- package/package.json +11 -11
- package/src/DragManager.ts +23 -23
- package/src/DragPreview.tsx +26 -5
- package/src/constants.ts +37 -10
- package/src/useDrag.ts +44 -22
- package/src/utils.ts +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;
|
|
1
|
+
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAeM,MAAM,0DAEb,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAAuB,EAAE,GAA6C;IAC1G,IAAI,SAAS,MAAM,QAAQ;IAC3B,IAAI,CAAC,UAAU,YAAY,GAAG,CAAA,GAAA,eAAO,EAAsB;IAC3D,IAAI,SAAS,CAAA,GAAA,aAAK,EAAyB;IAC3C,IAAI,MAAM,CAAA,GAAA,aAAK,EAAwD;IAEvE,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAM,CAAC,OAAmB;YACjD,qFAAqF;YACrF,kGAAkG;YAElG,IAAI,SAAS,OAAO;YACpB,IAAI;YACJ,IAAI;YACJ,IAAI;YAEJ,IAAI,UAAU,OAAO,WAAW,YAAY,aAAa,QAAQ;gBAC/D,UAAU,OAAO,OAAO;gBACxB,UAAU,OAAO,CAAC;gBAClB,UAAU,OAAO,CAAC;YACpB,OACE,UAAU;YAGZ,CAAA,GAAA,gBAAQ,EAAE;gBACR,YAAY;YACd;YAEA,+CAA+C;YAC/C,SAAS,OAAO,OAAO,EAAE,SAAS;YAElC,kFAAkF;YAClF,IAAI,OAAO,GAAG,sBAAsB;gBAClC,YAAY;YACd;QACF,GAAG;QAAC;KAAO;IAEX,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,IAAI,OAAO,EACb,qBAAqB,IAAI,OAAO;QAEpC;IACF,GAAG,EAAE;IAEL,IAAI,CAAC,UACH,OAAO;IAGT,qBACE,gCAAC;QAAI,OAAO;YAAC,QAAQ;YAAM,UAAU;YAAY,KAAK;YAAG,MAAM;QAAO;QAAG,KAAK;OAC3E;AAGP","sources":["packages/@react-aria/dnd/src/DragPreview.tsx"],"sourcesContent":["/*\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\nimport {DragItem, DragPreviewRenderer} from '@react-types/shared';\nimport {flushSync} from 'react-dom';\nimport React, {ForwardedRef, JSX, useEffect, useImperativeHandle, useRef, useState} from 'react';\n\nexport interface DragPreviewProps {\n /**\n * A render function which returns a preview element, or an object containing the element\n * and a custom offset. If an object is returned, the provided `x` and `y` values will be\n * used as the drag preview offset instead of the default calculation.\n */\n children: (items: DragItem[]) => JSX.Element | {element: JSX.Element, x: number, y: number} | null\n}\n\nexport const DragPreview:\n React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer | null>> =\nReact.forwardRef(function DragPreview(props: DragPreviewProps, ref: ForwardedRef<DragPreviewRenderer | null>) {\n let render = props.children;\n let [children, setChildren] = useState<JSX.Element | null>(null);\n let domRef = useRef<HTMLDivElement | null>(null);\n let raf = useRef<ReturnType<typeof requestAnimationFrame> | undefined>(undefined);\n\n useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => {\n // This will be called during the onDragStart event by useDrag. We need to render the\n // preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.\n\n let result = render(items);\n let element: JSX.Element | null;\n let offsetX: number | undefined;\n let offsetY: number | undefined;\n\n if (result && typeof result === 'object' && 'element' in result) {\n element = result.element;\n offsetX = result.x;\n offsetY = result.y;\n } else {\n element = result as JSX.Element | null;\n }\n\n flushSync(() => {\n setChildren(element);\n });\n\n // Yield back to useDrag to set the drag image.\n callback(domRef.current, offsetX, offsetY);\n\n // Remove the preview from the DOM after a frame so the browser has time to paint.\n raf.current = requestAnimationFrame(() => {\n setChildren(null);\n });\n }, [render]);\n\n useEffect(() => {\n return () => {\n if (raf.current) {\n cancelAnimationFrame(raf.current);\n }\n };\n }, []);\n\n if (!children) {\n return null;\n }\n\n return (\n <div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>\n {children}\n </div>\n );\n});\n"],"names":[],"version":3,"file":"DragPreview.module.js.map"}
|
package/dist/constants.main.js
CHANGED
|
@@ -40,7 +40,6 @@ const $76b1e110a27b1ccd$export$9bbdfc78cf083e16 = {
|
|
|
40
40
|
};
|
|
41
41
|
const $76b1e110a27b1ccd$export$dd0165308d8bff45 = $76b1e110a27b1ccd$var$invert($76b1e110a27b1ccd$export$9bbdfc78cf083e16);
|
|
42
42
|
$76b1e110a27b1ccd$export$dd0165308d8bff45[7] = 'all'; // ensure we don't map to 'uninitialized'.
|
|
43
|
-
const $76b1e110a27b1ccd$export$d7ebf00f36b7a95e = $76b1e110a27b1ccd$var$invert($76b1e110a27b1ccd$export$60b7b4bcf3903d8e);
|
|
44
43
|
const $76b1e110a27b1ccd$export$608ecc6f1b23c35d = {
|
|
45
44
|
none: 'cancel',
|
|
46
45
|
link: 'link',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAaM,IAAA,AAAK,mEAAA;;;;;;;WAAA;;AAgBL,MAAM,4CAA+C;IAC1D,GAAG,yCAAc;IACjB,UAAU;IACV,UAAU;IACV,UAAU;IACV,GAAG;IACH,aAAa;AACf;AAaO,MAAM,4CAAgC,6BAAO;AACpD,yCAAc,GAAoB,GAAG,OAAO,0CAA0C;AAI/E,MAAM,4CAAoE;IAC/E,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;AACR;AAEO,MAAM,4CAAoE,6BAAO;AAExF,SAAS,6BAA6D,MAAoB;IACxF,IAAI,MAAoB,CAAC;IACzB,IAAK,IAAI,OAAO,OACd,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG;IAGrB,OAAO;AACT;AAEO,MAAM,4CAAiC,IAAI,IAAI;IAAC;IAAc;IAAiB;CAAY;AAC3F,MAAM,4CAAmB;AACzB,MAAM,4CAAe","sources":["packages/@react-aria/dnd/src/constants.ts"],"sourcesContent":["/*\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\nimport {DropOperation} from '@react-types/shared';\n\nexport interface IDropOperation {\n readonly none: 0,\n readonly cancel: 0,\n readonly move: number,\n readonly copy: number,\n readonly link: number,\n readonly all: number\n}\n\nexport enum DROP_OPERATION {\n none = 0,\n cancel = 0,\n move = 1 << 0,\n copy = 1 << 1,\n link = 1 << 2,\n all = move | copy | link\n}\ninterface DropOperationAllowed extends IDropOperation {\n readonly copyMove: number,\n readonly copyLink: number,\n readonly linkMove: number,\n readonly all: number,\n readonly uninitialized: number\n}\n// See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed\nexport const DROP_OPERATION_ALLOWED: DropOperationAllowed = {\n ...DROP_OPERATION,\n copyMove: DROP_OPERATION.copy | DROP_OPERATION.move,\n copyLink: DROP_OPERATION.copy | DROP_OPERATION.link,\n linkMove: DROP_OPERATION.link | DROP_OPERATION.move,\n all: DROP_OPERATION.all,\n uninitialized: DROP_OPERATION.all\n};\n\ninterface EffectAllowed {\n 0: 'none' | 'cancel',\n 1: 'move',\n 2: 'copy',\n 3: 'copyMove',\n 4: 'link',\n 5: 'linkMove',\n 6: 'copyLink',\n 7: 'all'\n}\n\nexport const EFFECT_ALLOWED: EffectAllowed = invert(DROP_OPERATION_ALLOWED) as unknown as EffectAllowed;\nEFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.\n\ntype DropEffect = 'none' | 'link' | 'copy' | 'move';\n\nexport const DROP_EFFECT_TO_DROP_OPERATION: {[K in DropEffect]: DropOperation} = {\n none: 'cancel',\n link: 'link',\n copy: 'copy',\n move: 'move'\n};\n\nexport const DROP_OPERATION_TO_DROP_EFFECT: {[K in DropOperation]: DropEffect} = invert(DROP_EFFECT_TO_DROP_OPERATION);\n\nfunction invert<T extends string | number, C extends string | number>(object: Record<T, C>): Record<C, T> {\n let res: Record<C, T> = {} as Record<C, T>;\n for (let key in object) {\n res[object[key]] = key as T;\n }\n\n return res;\n}\n\nexport const NATIVE_DRAG_TYPES: Set<string> = new Set(['text/plain', 'text/uri-list', 'text/html']);\nexport const CUSTOM_DRAG_TYPE = 'application/vnd.react-aria.items+json';\nexport const GENERIC_TYPE = 'application/octet-stream';\n"],"names":[],"version":3,"file":"constants.main.js.map"}
|
package/dist/constants.mjs
CHANGED
|
@@ -27,7 +27,6 @@ const $103790afe9474d1c$export$9bbdfc78cf083e16 = {
|
|
|
27
27
|
};
|
|
28
28
|
const $103790afe9474d1c$export$dd0165308d8bff45 = $103790afe9474d1c$var$invert($103790afe9474d1c$export$9bbdfc78cf083e16);
|
|
29
29
|
$103790afe9474d1c$export$dd0165308d8bff45[7] = 'all'; // ensure we don't map to 'uninitialized'.
|
|
30
|
-
const $103790afe9474d1c$export$d7ebf00f36b7a95e = $103790afe9474d1c$var$invert($103790afe9474d1c$export$60b7b4bcf3903d8e);
|
|
31
30
|
const $103790afe9474d1c$export$608ecc6f1b23c35d = {
|
|
32
31
|
none: 'cancel',
|
|
33
32
|
link: 'link',
|
|
@@ -49,5 +48,5 @@ const $103790afe9474d1c$export$fd9f9fc120c5402d = 'application/vnd.react-aria.it
|
|
|
49
48
|
const $103790afe9474d1c$export$f8fc6581787339b3 = 'application/octet-stream';
|
|
50
49
|
|
|
51
50
|
|
|
52
|
-
export {$103790afe9474d1c$export$60b7b4bcf3903d8e as DROP_OPERATION, $103790afe9474d1c$export$9bbdfc78cf083e16 as DROP_OPERATION_ALLOWED, $103790afe9474d1c$export$dd0165308d8bff45 as EFFECT_ALLOWED, $103790afe9474d1c$export$
|
|
51
|
+
export {$103790afe9474d1c$export$60b7b4bcf3903d8e as DROP_OPERATION, $103790afe9474d1c$export$9bbdfc78cf083e16 as DROP_OPERATION_ALLOWED, $103790afe9474d1c$export$dd0165308d8bff45 as EFFECT_ALLOWED, $103790afe9474d1c$export$608ecc6f1b23c35d as DROP_EFFECT_TO_DROP_OPERATION, $103790afe9474d1c$export$5eacb0769d26d3b2 as DROP_OPERATION_TO_DROP_EFFECT, $103790afe9474d1c$export$4a7729b856e9a690 as NATIVE_DRAG_TYPES, $103790afe9474d1c$export$fd9f9fc120c5402d as CUSTOM_DRAG_TYPE, $103790afe9474d1c$export$f8fc6581787339b3 as GENERIC_TYPE};
|
|
53
52
|
//# sourceMappingURL=constants.module.js.map
|
package/dist/constants.module.js
CHANGED
|
@@ -27,7 +27,6 @@ const $103790afe9474d1c$export$9bbdfc78cf083e16 = {
|
|
|
27
27
|
};
|
|
28
28
|
const $103790afe9474d1c$export$dd0165308d8bff45 = $103790afe9474d1c$var$invert($103790afe9474d1c$export$9bbdfc78cf083e16);
|
|
29
29
|
$103790afe9474d1c$export$dd0165308d8bff45[7] = 'all'; // ensure we don't map to 'uninitialized'.
|
|
30
|
-
const $103790afe9474d1c$export$d7ebf00f36b7a95e = $103790afe9474d1c$var$invert($103790afe9474d1c$export$60b7b4bcf3903d8e);
|
|
31
30
|
const $103790afe9474d1c$export$608ecc6f1b23c35d = {
|
|
32
31
|
none: 'cancel',
|
|
33
32
|
link: 'link',
|
|
@@ -49,5 +48,5 @@ const $103790afe9474d1c$export$fd9f9fc120c5402d = 'application/vnd.react-aria.it
|
|
|
49
48
|
const $103790afe9474d1c$export$f8fc6581787339b3 = 'application/octet-stream';
|
|
50
49
|
|
|
51
50
|
|
|
52
|
-
export {$103790afe9474d1c$export$60b7b4bcf3903d8e as DROP_OPERATION, $103790afe9474d1c$export$9bbdfc78cf083e16 as DROP_OPERATION_ALLOWED, $103790afe9474d1c$export$dd0165308d8bff45 as EFFECT_ALLOWED, $103790afe9474d1c$export$
|
|
51
|
+
export {$103790afe9474d1c$export$60b7b4bcf3903d8e as DROP_OPERATION, $103790afe9474d1c$export$9bbdfc78cf083e16 as DROP_OPERATION_ALLOWED, $103790afe9474d1c$export$dd0165308d8bff45 as EFFECT_ALLOWED, $103790afe9474d1c$export$608ecc6f1b23c35d as DROP_EFFECT_TO_DROP_OPERATION, $103790afe9474d1c$export$5eacb0769d26d3b2 as DROP_OPERATION_TO_DROP_EFFECT, $103790afe9474d1c$export$4a7729b856e9a690 as NATIVE_DRAG_TYPES, $103790afe9474d1c$export$fd9f9fc120c5402d as CUSTOM_DRAG_TYPE, $103790afe9474d1c$export$f8fc6581787339b3 as GENERIC_TYPE};
|
|
53
52
|
//# sourceMappingURL=constants.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA;;;;;;;;;;CAUC,
|
|
1
|
+
{"mappings":"AAAA;;;;;;;;;;CAUC,GAaM,IAAA,AAAK,mEAAA;;;;;;;WAAA;;AAgBL,MAAM,4CAA+C;IAC1D,GAAG,yCAAc;IACjB,UAAU;IACV,UAAU;IACV,UAAU;IACV,GAAG;IACH,aAAa;AACf;AAaO,MAAM,4CAAgC,6BAAO;AACpD,yCAAc,GAAoB,GAAG,OAAO,0CAA0C;AAI/E,MAAM,4CAAoE;IAC/E,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;AACR;AAEO,MAAM,4CAAoE,6BAAO;AAExF,SAAS,6BAA6D,MAAoB;IACxF,IAAI,MAAoB,CAAC;IACzB,IAAK,IAAI,OAAO,OACd,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG;IAGrB,OAAO;AACT;AAEO,MAAM,4CAAiC,IAAI,IAAI;IAAC;IAAc;IAAiB;CAAY;AAC3F,MAAM,4CAAmB;AACzB,MAAM,4CAAe","sources":["packages/@react-aria/dnd/src/constants.ts"],"sourcesContent":["/*\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\nimport {DropOperation} from '@react-types/shared';\n\nexport interface IDropOperation {\n readonly none: 0,\n readonly cancel: 0,\n readonly move: number,\n readonly copy: number,\n readonly link: number,\n readonly all: number\n}\n\nexport enum DROP_OPERATION {\n none = 0,\n cancel = 0,\n move = 1 << 0,\n copy = 1 << 1,\n link = 1 << 2,\n all = move | copy | link\n}\ninterface DropOperationAllowed extends IDropOperation {\n readonly copyMove: number,\n readonly copyLink: number,\n readonly linkMove: number,\n readonly all: number,\n readonly uninitialized: number\n}\n// See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed\nexport const DROP_OPERATION_ALLOWED: DropOperationAllowed = {\n ...DROP_OPERATION,\n copyMove: DROP_OPERATION.copy | DROP_OPERATION.move,\n copyLink: DROP_OPERATION.copy | DROP_OPERATION.link,\n linkMove: DROP_OPERATION.link | DROP_OPERATION.move,\n all: DROP_OPERATION.all,\n uninitialized: DROP_OPERATION.all\n};\n\ninterface EffectAllowed {\n 0: 'none' | 'cancel',\n 1: 'move',\n 2: 'copy',\n 3: 'copyMove',\n 4: 'link',\n 5: 'linkMove',\n 6: 'copyLink',\n 7: 'all'\n}\n\nexport const EFFECT_ALLOWED: EffectAllowed = invert(DROP_OPERATION_ALLOWED) as unknown as EffectAllowed;\nEFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.\n\ntype DropEffect = 'none' | 'link' | 'copy' | 'move';\n\nexport const DROP_EFFECT_TO_DROP_OPERATION: {[K in DropEffect]: DropOperation} = {\n none: 'cancel',\n link: 'link',\n copy: 'copy',\n move: 'move'\n};\n\nexport const DROP_OPERATION_TO_DROP_EFFECT: {[K in DropOperation]: DropEffect} = invert(DROP_EFFECT_TO_DROP_OPERATION);\n\nfunction invert<T extends string | number, C extends string | number>(object: Record<T, C>): Record<C, T> {\n let res: Record<C, T> = {} as Record<C, T>;\n for (let key in object) {\n res[object[key]] = key as T;\n }\n\n return res;\n}\n\nexport const NATIVE_DRAG_TYPES: Set<string> = new Set(['text/plain', 'text/uri-list', 'text/html']);\nexport const CUSTOM_DRAG_TYPE = 'application/vnd.react-aria.items+json';\nexport const GENERIC_TYPE = 'application/octet-stream';\n"],"names":[],"version":3,"file":"constants.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { DirectoryDropItem, DropItem, FileDropItem, TextDropItem, DOMAttributes,
|
|
|
2
2
|
import { AriaButtonProps } from "@react-types/button";
|
|
3
3
|
import { DroppableCollectionState, DraggableCollectionState } from "@react-stately/dnd";
|
|
4
4
|
import React, { HTMLAttributes, JSX } from "react";
|
|
5
|
-
export const DIRECTORY_DRAG_TYPE:
|
|
5
|
+
export const DIRECTORY_DRAG_TYPE: symbol;
|
|
6
6
|
/** Returns whether a drop item contains text data. */
|
|
7
7
|
export function isTextDropItem(dropItem: DropItem): dropItem is TextDropItem;
|
|
8
8
|
/** Returns whether a drop item is a file. */
|
|
@@ -181,7 +181,16 @@ export interface DraggableCollectionOptions {
|
|
|
181
181
|
*/
|
|
182
182
|
export function useDraggableCollection(props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>): void;
|
|
183
183
|
export interface DragPreviewProps {
|
|
184
|
-
|
|
184
|
+
/**
|
|
185
|
+
* A render function which returns a preview element, or an object containing the element
|
|
186
|
+
* and a custom offset. If an object is returned, the provided `x` and `y` values will be
|
|
187
|
+
* used as the drag preview offset instead of the default calculation.
|
|
188
|
+
*/
|
|
189
|
+
children: (items: DragItem[]) => JSX.Element | {
|
|
190
|
+
element: JSX.Element;
|
|
191
|
+
x: number;
|
|
192
|
+
y: number;
|
|
193
|
+
} | null;
|
|
185
194
|
}
|
|
186
195
|
export const DragPreview: React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer | null>>;
|
|
187
196
|
export interface ClipboardProps {
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;ACuBA,OAAO,MAAM,
|
|
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/DropTargetKeyboardNavigation.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.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/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/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/ListDropTargetDelegate.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,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 type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';\nexport type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';\nexport type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';\nexport type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';\nexport type {DraggableCollectionOptions} from './useDraggableCollection';\nexport type {DragPreviewProps} from './DragPreview';\nexport type {DragOptions, DragResult} from './useDrag';\nexport type {DropOptions, DropResult} from './useDrop';\nexport type {ClipboardProps, ClipboardResult} from './useClipboard';\nexport type {\n DirectoryDropItem,\n DragEndEvent,\n DraggableCollectionEndEvent,\n DraggableCollectionMoveEvent,\n DraggableCollectionStartEvent,\n DragItem,\n DragMoveEvent,\n DragPreviewRenderer,\n DragStartEvent,\n DragTypes,\n DropEnterEvent,\n DropEvent,\n DropExitEvent,\n DropItem,\n DropMoveEvent,\n DropOperation,\n DroppableCollectionDropEvent,\n DroppableCollectionEnterEvent,\n DroppableCollectionExitEvent,\n DroppableCollectionInsertDropEvent,\n DroppableCollectionMoveEvent,\n DroppableCollectionOnItemDropEvent,\n DroppableCollectionReorderEvent,\n DroppableCollectionRootDropEvent,\n DropPosition,\n DropTarget,\n DropTargetDelegate,\n FileDropItem,\n ItemDropTarget,\n RootDropTarget,\n TextDropItem\n} from '@react-types/shared';\n\nexport {DIRECTORY_DRAG_TYPE} from './utils';\nexport {useDrag} from './useDrag';\nexport {useDrop} from './useDrop';\nexport {useDroppableCollection} from './useDroppableCollection';\nexport {useDroppableItem} from './useDroppableItem';\nexport {useDropIndicator} from './useDropIndicator';\nexport {useDraggableItem} from './useDraggableItem';\nexport {useDraggableCollection} from './useDraggableCollection';\nexport {useClipboard} from './useClipboard';\nexport {DragPreview} from './DragPreview';\nexport {ListDropTargetDelegate} from './ListDropTargetDelegate';\nexport {isVirtualDragging} from './DragManager';\nexport {isDirectoryDropItem, isFileDropItem, isTextDropItem} from './utils';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/dist/useDrag.main.js
CHANGED
|
@@ -56,11 +56,11 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
56
56
|
y: 0
|
|
57
57
|
}).current;
|
|
58
58
|
state.options = options;
|
|
59
|
-
let isDraggingRef = (0, $3w36N$react.useRef)(
|
|
59
|
+
let isDraggingRef = (0, $3w36N$react.useRef)(null);
|
|
60
60
|
let [isDragging, setDraggingState] = (0, $3w36N$react.useState)(false);
|
|
61
|
-
let setDragging = (
|
|
62
|
-
isDraggingRef.current =
|
|
63
|
-
setDraggingState(
|
|
61
|
+
let setDragging = (element)=>{
|
|
62
|
+
isDraggingRef.current = element;
|
|
63
|
+
setDraggingState(!!element);
|
|
64
64
|
};
|
|
65
65
|
let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $3w36N$reactariautils.useGlobalListeners)();
|
|
66
66
|
let modalityOnPointerDown = (0, $3w36N$react.useRef)(null);
|
|
@@ -90,26 +90,41 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
90
90
|
for (let operation of allowedOperations)allowed |= (0, $76b1e110a27b1ccd$exports.DROP_OPERATION)[operation] || (0, $76b1e110a27b1ccd$exports.DROP_OPERATION).none;
|
|
91
91
|
}
|
|
92
92
|
(0, $4620ae0dc40f0031$exports.setGlobalAllowedDropOperations)(allowed);
|
|
93
|
-
|
|
93
|
+
let effectAllowed = (0, $76b1e110a27b1ccd$exports.EFFECT_ALLOWED)[allowed] || 'none';
|
|
94
|
+
e.dataTransfer.effectAllowed = effectAllowed === 'cancel' ? 'none' : effectAllowed;
|
|
94
95
|
// If there is a preview option, use it to render a custom preview image that will
|
|
95
96
|
// appear under the pointer while dragging. If not, the element itself is dragged by the browser.
|
|
96
|
-
if (typeof ((_options_preview = options.preview) === null || _options_preview === void 0 ? void 0 : _options_preview.current) === 'function') options.preview.current(items, (node)=>{
|
|
97
|
+
if (typeof ((_options_preview = options.preview) === null || _options_preview === void 0 ? void 0 : _options_preview.current) === 'function') options.preview.current(items, (node, userX, userY)=>{
|
|
97
98
|
if (!node) return;
|
|
98
99
|
// Compute the offset that the preview will appear under the mouse.
|
|
99
100
|
// If possible, this is based on the point the user clicked on the target.
|
|
100
101
|
// If the preview is much smaller, then just use the center point of the preview.
|
|
101
102
|
let size = node.getBoundingClientRect();
|
|
102
103
|
let rect = e.currentTarget.getBoundingClientRect();
|
|
103
|
-
let
|
|
104
|
-
let
|
|
105
|
-
if (
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
let defaultX = e.clientX - rect.x;
|
|
105
|
+
let defaultY = e.clientY - rect.y;
|
|
106
|
+
if (defaultX > size.width || defaultY > size.height) {
|
|
107
|
+
defaultX = size.width / 2;
|
|
108
|
+
defaultY = size.height / 2;
|
|
108
109
|
}
|
|
110
|
+
// Start with default offsets.
|
|
111
|
+
let offsetX = defaultX;
|
|
112
|
+
let offsetY = defaultY;
|
|
113
|
+
// If the preview renderer supplied explicit offsets, use those.
|
|
114
|
+
if (typeof userX === 'number' && typeof userY === 'number') {
|
|
115
|
+
offsetX = userX;
|
|
116
|
+
offsetY = userY;
|
|
117
|
+
}
|
|
118
|
+
// Clamp the offset so it stays within the preview bounds. Browsers
|
|
119
|
+
// automatically clamp out-of-range values, but doing it ourselves
|
|
120
|
+
// prevents the visible "snap" that can occur when the browser adjusts
|
|
121
|
+
// them after the first drag update.
|
|
122
|
+
offsetX = Math.max(0, Math.min(offsetX, size.width));
|
|
123
|
+
offsetY = Math.max(0, Math.min(offsetY, size.height));
|
|
109
124
|
// Rounding height to an even number prevents blurry preview seen on some screens
|
|
110
125
|
let height = 2 * Math.round(size.height / 2);
|
|
111
126
|
node.style.height = `${height}px`;
|
|
112
|
-
e.dataTransfer.setDragImage(node,
|
|
127
|
+
e.dataTransfer.setDragImage(node, offsetX, offsetY);
|
|
113
128
|
});
|
|
114
129
|
// Enforce that drops are handled by useDrop.
|
|
115
130
|
addGlobalListener(window, 'drop', (e)=>{
|
|
@@ -123,8 +138,9 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
123
138
|
state.y = e.clientY;
|
|
124
139
|
// Wait a frame before we set dragging to true so that the browser has time to
|
|
125
140
|
// render the preview image before we update the element that has been dragged.
|
|
141
|
+
let target = e.target;
|
|
126
142
|
requestAnimationFrame(()=>{
|
|
127
|
-
setDragging(
|
|
143
|
+
setDragging(target);
|
|
128
144
|
});
|
|
129
145
|
};
|
|
130
146
|
let onDrag = (e)=>{
|
|
@@ -154,16 +170,19 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
154
170
|
if (0, $4620ae0dc40f0031$exports.globalDropEffect) event.dropOperation = (0, $76b1e110a27b1ccd$exports.DROP_EFFECT_TO_DROP_OPERATION)[0, $4620ae0dc40f0031$exports.globalDropEffect];
|
|
155
171
|
options.onDragEnd(event);
|
|
156
172
|
}
|
|
157
|
-
setDragging(
|
|
173
|
+
setDragging(null);
|
|
158
174
|
removeAllGlobalListeners();
|
|
159
175
|
(0, $4620ae0dc40f0031$exports.setGlobalAllowedDropOperations)((0, $76b1e110a27b1ccd$exports.DROP_OPERATION).none);
|
|
160
176
|
(0, $4620ae0dc40f0031$exports.setGlobalDropEffect)(undefined);
|
|
161
177
|
};
|
|
162
178
|
// If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801
|
|
163
179
|
// In this case, we need to manually call onDragEnd on cleanup
|
|
164
|
-
(0, $3w36N$
|
|
180
|
+
(0, $3w36N$react.useEffect)(()=>{
|
|
165
181
|
return ()=>{
|
|
166
|
-
|
|
182
|
+
// Check that the dragged element has actually unmounted from the DOM and not a React Strict Mode false positive.
|
|
183
|
+
// https://github.com/facebook/react/issues/29585
|
|
184
|
+
// React 16 ran effect cleanups before removing elements from the DOM but did not have this issue.
|
|
185
|
+
if (isDraggingRef.current && (!isDraggingRef.current.isConnected || parseInt((0, $3w36N$react.version), 10) < 17)) {
|
|
167
186
|
if (typeof state.options.onDragEnd === 'function') {
|
|
168
187
|
let event = {
|
|
169
188
|
type: 'dragend',
|
|
@@ -173,7 +192,7 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
173
192
|
};
|
|
174
193
|
state.options.onDragEnd(event);
|
|
175
194
|
}
|
|
176
|
-
setDragging(
|
|
195
|
+
setDragging(null);
|
|
177
196
|
(0, $4620ae0dc40f0031$exports.setGlobalAllowedDropOperations)((0, $76b1e110a27b1ccd$exports.DROP_OPERATION).none);
|
|
178
197
|
(0, $4620ae0dc40f0031$exports.setGlobalDropEffect)(undefined);
|
|
179
198
|
}
|
|
@@ -203,11 +222,11 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
|
|
|
203
222
|
'link'
|
|
204
223
|
],
|
|
205
224
|
onDragEnd (e) {
|
|
206
|
-
setDragging(
|
|
225
|
+
setDragging(null);
|
|
207
226
|
if (typeof state.options.onDragEnd === 'function') state.options.onDragEnd(e);
|
|
208
227
|
}
|
|
209
228
|
}, stringFormatter);
|
|
210
|
-
setDragging(
|
|
229
|
+
setDragging(target);
|
|
211
230
|
};
|
|
212
231
|
let modality = (0, $4620ae0dc40f0031$exports.useDragModality)();
|
|
213
232
|
let message = !isDragging ? $dc204e8ec58447a6$var$MESSAGES[modality].start : $dc204e8ec58447a6$var$MESSAGES[modality].end;
|
package/dist/useDrag.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/dnd/src/useDrag.ts"],"sourcesContent":["/*\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\nimport {AriaButtonProps} from '@react-types/button';\nimport {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared';\nimport {DragEvent, HTMLAttributes, useRef, useState} from 'react';\nimport * as DragManager from './DragManager';\nimport {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';\nimport {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface DragOptions {\n /** Handler that is called when a drag operation is started. */\n onDragStart?: (e: DragStartEvent) => void,\n /** Handler that is called when the drag is moved. */\n onDragMove?: (e: DragMoveEvent) => void,\n /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */\n onDragEnd?: (e: DragEndEvent) => void,\n /** A function that returns the items being dragged. */\n getItems: () => DragItem[],\n /** The ref of the element that will be rendered as the drag preview while dragging. */\n preview?: RefObject<DragPreviewRenderer | null>,\n /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */\n getAllowedDropOperations?: () => DropOperation[],\n /**\n * Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode.\n * If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.\n */\n hasDragButton?: boolean,\n /**\n * Whether the drag operation is disabled. If true, the element will not be draggable.\n */\n isDisabled?: boolean\n}\n\nexport interface DragResult {\n /** Props for the draggable element. */\n dragProps: HTMLAttributes<HTMLElement>,\n /** Props for the explicit drag button affordance, if any. */\n dragButtonProps: AriaButtonProps,\n /** Whether the element is currently being dragged. */\n isDragging: boolean\n}\n\nconst MESSAGES = {\n keyboard: {\n start: 'dragDescriptionKeyboard',\n end: 'endDragKeyboard'\n },\n touch: {\n start: 'dragDescriptionTouch',\n end: 'endDragTouch'\n },\n virtual: {\n start: 'dragDescriptionVirtual',\n end: 'endDragVirtual'\n }\n};\n\n/**\n * Handles drag interactions for an element, with support for traditional mouse and touch\n * based drag and drop, in addition to full parity for keyboard and screen reader users.\n */\nexport function useDrag(options: DragOptions): DragResult {\n let {hasDragButton, isDisabled} = options;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');\n let state = useRef({\n options,\n x: 0,\n y: 0\n }).current;\n state.options = options;\n let isDraggingRef = useRef(false);\n let [isDragging, setDraggingState] = useState(false);\n let setDragging = (isDragging) => {\n isDraggingRef.current = isDragging;\n setDraggingState(isDragging);\n };\n let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n let modalityOnPointerDown = useRef<string>(null);\n\n let onDragStart = (e: DragEvent) => {\n if (e.defaultPrevented) {\n return;\n }\n\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n // If this drag was initiated by a mobile screen reader (e.g. VoiceOver or TalkBack), enter virtual dragging mode.\n if (modalityOnPointerDown.current === 'virtual') {\n e.preventDefault();\n startDragging(e.target as HTMLElement);\n modalityOnPointerDown.current = null;\n return;\n }\n\n if (typeof options.onDragStart === 'function') {\n options.onDragStart({\n type: 'dragstart',\n x: e.clientX,\n y: e.clientY\n });\n }\n\n let items = options.getItems();\n writeToDataTransfer(e.dataTransfer, items);\n\n let allowed = DROP_OPERATION.all;\n if (typeof options.getAllowedDropOperations === 'function') {\n let allowedOperations = options.getAllowedDropOperations();\n allowed = DROP_OPERATION.none;\n for (let operation of allowedOperations) {\n allowed |= DROP_OPERATION[operation] || DROP_OPERATION.none;\n }\n }\n\n setGlobalAllowedDropOperations(allowed);\n e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';\n\n // If there is a preview option, use it to render a custom preview image that will\n // appear under the pointer while dragging. If not, the element itself is dragged by the browser.\n if (typeof options.preview?.current === 'function') {\n options.preview.current(items, node => {\n if (!node) {\n return;\n }\n // Compute the offset that the preview will appear under the mouse.\n // If possible, this is based on the point the user clicked on the target.\n // If the preview is much smaller, then just use the center point of the preview.\n let size = node.getBoundingClientRect();\n let rect = e.currentTarget.getBoundingClientRect();\n let x = e.clientX - rect.x;\n let y = e.clientY - rect.y;\n if (x > size.width || y > size.height) {\n x = size.width / 2;\n y = size.height / 2;\n }\n\n // Rounding height to an even number prevents blurry preview seen on some screens\n let height = 2 * Math.round(size.height / 2);\n node.style.height = `${height}px`;\n\n e.dataTransfer.setDragImage(node, x, y);\n });\n }\n\n // Enforce that drops are handled by useDrop.\n addGlobalListener(window, 'drop', e => {\n e.preventDefault();\n e.stopPropagation();\n console.warn('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');\n }, {once: true});\n state.x = e.clientX;\n state.y = e.clientY;\n\n // Wait a frame before we set dragging to true so that the browser has time to\n // render the preview image before we update the element that has been dragged.\n requestAnimationFrame(() => {\n setDragging(true);\n });\n };\n\n let onDrag = (e: DragEvent) => {\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n if (e.clientX === state.x && e.clientY === state.y) {\n return;\n }\n\n if (typeof options.onDragMove === 'function') {\n options.onDragMove({\n type: 'dragmove',\n x: e.clientX,\n y: e.clientY\n });\n }\n\n state.x = e.clientX;\n state.y = e.clientY;\n };\n\n let onDragEnd = (e: DragEvent) => {\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n if (typeof options.onDragEnd === 'function') {\n let event: DragEndEvent = {\n type: 'dragend',\n x: e.clientX,\n y: e.clientY,\n dropOperation: DROP_EFFECT_TO_DROP_OPERATION[e.dataTransfer.dropEffect]\n };\n\n // Chrome Android always returns none as its dropEffect so we use the drop effect set in useDrop via\n // onDragEnter/onDragOver instead. https://bugs.chromium.org/p/chromium/issues/detail?id=1353951\n if (globalDropEffect) {\n event.dropOperation = DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect];\n }\n options.onDragEnd(event);\n }\n\n setDragging(false);\n removeAllGlobalListeners();\n setGlobalAllowedDropOperations(DROP_OPERATION.none);\n setGlobalDropEffect(undefined);\n };\n\n // If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801\n // In this case, we need to manually call onDragEnd on cleanup\n \n useLayoutEffect(() => {\n return () => {\n if (isDraggingRef.current) {\n if (typeof state.options.onDragEnd === 'function') {\n let event: DragEndEvent = {\n type: 'dragend',\n x: 0,\n y: 0,\n dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect || 'none']\n };\n state.options.onDragEnd(event);\n }\n\n setDragging(false);\n setGlobalAllowedDropOperations(DROP_OPERATION.none);\n setGlobalDropEffect(undefined);\n }\n };\n }, [state]);\n\n let onPress = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard' && e.pointerType !== 'virtual') {\n return;\n }\n\n startDragging(e.target as HTMLElement);\n };\n\n let startDragging = (target: HTMLElement) => {\n if (typeof state.options.onDragStart === 'function') {\n let rect = target.getBoundingClientRect();\n state.options.onDragStart({\n type: 'dragstart',\n x: rect.x + (rect.width / 2),\n y: rect.y + (rect.height / 2)\n });\n }\n\n DragManager.beginDragging({\n element: target,\n items: state.options.getItems(),\n allowedDropOperations: typeof state.options.getAllowedDropOperations === 'function'\n ? state.options.getAllowedDropOperations()\n : ['move', 'copy', 'link'],\n onDragEnd(e) {\n setDragging(false);\n if (typeof state.options.onDragEnd === 'function') {\n state.options.onDragEnd(e);\n }\n }\n }, stringFormatter);\n\n setDragging(true);\n };\n\n let modality = useDragModality();\n let message = !isDragging ? MESSAGES[modality].start : MESSAGES[modality].end;\n\n let descriptionProps = useDescription(stringFormatter.format(message));\n\n let interactions: HTMLAttributes<HTMLElement> = {};\n if (!hasDragButton) {\n // If there's no separate button to trigger accessible drag and drop mode,\n // then add event handlers to the draggable element itself to start dragging.\n // For keyboard, we use the Enter key in a capturing listener to prevent other\n // events such as selection from also occurring. We attempt to infer whether a\n // pointer event (e.g. long press) came from a touch screen reader, and then initiate\n // dragging in the native onDragStart listener above.\n\n interactions = {\n ...descriptionProps,\n onPointerDown(e) {\n modalityOnPointerDown.current = isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;\n\n // Try to detect virtual drag passthrough gestures.\n if (e.width < 1 && e.height < 1) {\n // iOS VoiceOver.\n modalityOnPointerDown.current = 'virtual';\n } else {\n let rect = e.currentTarget.getBoundingClientRect();\n let offsetX = e.clientX - rect.x;\n let offsetY = e.clientY - rect.y;\n let centerX = rect.width / 2;\n let centerY = rect.height / 2;\n\n if (Math.abs(offsetX - centerX) <= 0.5 && Math.abs(offsetY - centerY) <= 0.5) {\n // Android TalkBack.\n modalityOnPointerDown.current = 'virtual';\n } else {\n modalityOnPointerDown.current = e.pointerType;\n }\n }\n },\n onKeyDownCapture(e) {\n if (e.target === e.currentTarget && e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n },\n onKeyUpCapture(e) {\n if (e.target === e.currentTarget && e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n startDragging(e.target as HTMLElement);\n }\n },\n onClick(e) {\n // Handle NVDA/JAWS in browse mode, and touch screen readers. In this case, no keyboard events are fired.\n if (isVirtualClick(e.nativeEvent) || modalityOnPointerDown.current === 'virtual') {\n e.preventDefault();\n e.stopPropagation();\n startDragging(e.target as HTMLElement);\n }\n }\n };\n }\n\n if (isDisabled) {\n return {\n dragProps: {\n draggable: 'false'\n },\n dragButtonProps: {},\n isDragging: false\n };\n }\n\n return {\n dragProps: {\n ...interactions,\n draggable: 'true',\n onDragStart,\n onDrag,\n onDragEnd\n },\n dragButtonProps: {\n ...descriptionProps,\n onPress\n },\n isDragging\n };\n}\n"],"names":[],"version":3,"file":"useDrag.main.js.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA8CD,MAAM,iCAAW;IACf,UAAU;QACR,OAAO;QACP,KAAK;IACP;IACA,OAAO;QACL,OAAO;QACP,KAAK;IACP;IACA,SAAS;QACP,OAAO;QACP,KAAK;IACP;AACF;AAMO,SAAS,0CAAQ,OAAoB;IAC1C,IAAI,iBAAC,aAAa,cAAE,UAAU,EAAC,GAAG;IAClC,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,QAAQ,CAAA,GAAA,mBAAK,EAAE;iBACjB;QACA,GAAG;QACH,GAAG;IACL,GAAG,OAAO;IACV,MAAM,OAAO,GAAG;IAChB,IAAI,gBAAgB,CAAA,GAAA,mBAAK,EAAkB;IAC3C,IAAI,CAAC,YAAY,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC9C,IAAI,cAAc,CAAC;QACjB,cAAc,OAAO,GAAG;QACxB,iBAAiB,CAAC,CAAC;IACrB;IACA,IAAI,qBAAC,iBAAiB,4BAAE,wBAAwB,EAAC,GAAG,CAAA,GAAA,wCAAiB;IACrE,IAAI,wBAAwB,CAAA,GAAA,mBAAK,EAAU;IAE3C,IAAI,cAAc,CAAC;YA0CN;QAzCX,IAAI,EAAE,gBAAgB,EACpB;QAGF,mEAAmE;QACnE,EAAE,eAAe;QAEjB,kHAAkH;QAClH,IAAI,sBAAsB,OAAO,KAAK,WAAW;YAC/C,EAAE,cAAc;YAChB,cAAc,EAAE,MAAM;YACtB,sBAAsB,OAAO,GAAG;YAChC;QACF;QAEA,IAAI,OAAO,QAAQ,WAAW,KAAK,YACjC,QAAQ,WAAW,CAAC;YAClB,MAAM;YACN,GAAG,EAAE,OAAO;YACZ,GAAG,EAAE,OAAO;QACd;QAGF,IAAI,QAAQ,QAAQ,QAAQ;QAC5B,CAAA,GAAA,6CAAkB,EAAE,EAAE,YAAY,EAAE;QAEpC,IAAI,UAAU,CAAA,GAAA,wCAAa,EAAE,GAAG;QAChC,IAAI,OAAO,QAAQ,wBAAwB,KAAK,YAAY;YAC1D,IAAI,oBAAoB,QAAQ,wBAAwB;YACxD,UAAU,CAAA,GAAA,wCAAa,EAAE,IAAI;YAC7B,KAAK,IAAI,aAAa,kBACpB,WAAW,CAAA,GAAA,wCAAa,CAAC,CAAC,UAAU,IAAI,CAAA,GAAA,wCAAa,EAAE,IAAI;QAE/D;QAEA,CAAA,GAAA,wDAA6B,EAAE;QAC/B,IAAI,gBAAgB,CAAA,GAAA,wCAAa,CAAC,CAAC,QAAQ,IAAI;QAC/C,EAAE,YAAY,CAAC,aAAa,GAAG,kBAAkB,WAAW,SAAS;QAErE,kFAAkF;QAClF,iGAAiG;QACjG,IAAI,SAAO,mBAAA,QAAQ,OAAO,cAAf,uCAAA,iBAAiB,OAAO,MAAK,YACtC,QAAQ,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,OAAO;YAC3C,IAAI,CAAC,MACH;YAEF,mEAAmE;YACnE,0EAA0E;YAC1E,iFAAiF;YACjF,IAAI,OAAO,KAAK,qBAAqB;YACrC,IAAI,OAAO,EAAE,aAAa,CAAC,qBAAqB;YAChD,IAAI,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC;YACjC,IAAI,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC;YACjC,IAAI,WAAW,KAAK,KAAK,IAAI,WAAW,KAAK,MAAM,EAAE;gBACnD,WAAW,KAAK,KAAK,GAAG;gBACxB,WAAW,KAAK,MAAM,GAAG;YAC3B;YAEA,8BAA8B;YAC9B,IAAI,UAAU;YACd,IAAI,UAAU;YAEd,gEAAgE;YAChE,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;gBAC1D,UAAU;gBACV,UAAU;YACZ;YAEA,mEAAmE;YACnE,kEAAkE;YAClE,sEAAsE;YACtE,oCAAoC;YACpC,UAAU,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,KAAK,KAAK;YAClD,UAAU,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,KAAK,MAAM;YAEnD,iFAAiF;YACjF,IAAI,SAAS,IAAI,KAAK,KAAK,CAAC,KAAK,MAAM,GAAG;YAC1C,KAAK,KAAK,CAAC,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;YAEjC,EAAE,YAAY,CAAC,YAAY,CAAC,MAAM,SAAS;QAC7C;QAGF,6CAA6C;QAC7C,kBAAkB,QAAQ,QAAQ,CAAA;YAChC,EAAE,cAAc;YAChB,EAAE,eAAe;YACjB,QAAQ,IAAI,CAAC;QACf,GAAG;YAAC,MAAM;QAAI;QACd,MAAM,CAAC,GAAG,EAAE,OAAO;QACnB,MAAM,CAAC,GAAG,EAAE,OAAO;QAEnB,8EAA8E;QAC9E,+EAA+E;QAC/E,IAAI,SAAS,EAAE,MAAM;QACrB,sBAAsB;YACpB,YAAY;QACd;IACF;IAEA,IAAI,SAAS,CAAC;QACZ,mEAAmE;QACnE,EAAE,eAAe;QAEjB,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC,EAChD;QAGF,IAAI,OAAO,QAAQ,UAAU,KAAK,YAChC,QAAQ,UAAU,CAAC;YACjB,MAAM;YACN,GAAG,EAAE,OAAO;YACZ,GAAG,EAAE,OAAO;QACd;QAGF,MAAM,CAAC,GAAG,EAAE,OAAO;QACnB,MAAM,CAAC,GAAG,EAAE,OAAO;IACrB;IAEA,IAAI,YAAY,CAAC;QACf,mEAAmE;QACnE,EAAE,eAAe;QAEjB,IAAI,OAAO,QAAQ,SAAS,KAAK,YAAY;YAC3C,IAAI,QAAsB;gBACxB,MAAM;gBACN,GAAG,EAAE,OAAO;gBACZ,GAAG,EAAE,OAAO;gBACZ,eAAe,CAAA,GAAA,uDAA4B,CAAC,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC;YACzE;YAEA,oGAAoG;YACpG,gGAAgG;YAChG,IAAI,GAAA,4CACF,MAAM,aAAa,GAAG,CAAA,GAAA,uDAA4B,CAAC,CAAC,GAAA,2CAAiB;YAEvE,QAAQ,SAAS,CAAC;QACpB;QAEA,YAAY;QACZ;QACA,CAAA,GAAA,wDAA6B,EAAE,CAAA,GAAA,wCAAa,EAAE,IAAI;QAClD,CAAA,GAAA,6CAAkB,EAAE;IACtB;IAEA,uIAAuI;IACvI,8DAA8D;IAE9D,CAAA,GAAA,sBAAQ,EAAE;QACR,OAAO;YACL,iHAAiH;YACjH,iDAAiD;YACjD,kGAAkG;YAClG,IAAI,cAAc,OAAO,IAAK,CAAA,CAAC,cAAc,OAAO,CAAC,WAAW,IAAI,SAAS,CAAA,GAAA,oBAAW,GAAG,MAAM,EAAC,GAAI;gBACpG,IAAI,OAAO,MAAM,OAAO,CAAC,SAAS,KAAK,YAAY;oBACjD,IAAI,QAAsB;wBACxB,MAAM;wBACN,GAAG;wBACH,GAAG;wBACH,eAAe,CAAA,GAAA,uDAA4B,CAAC,CAAC,CAAA,GAAA,0CAAe,KAAK,OAAO;oBAC1E;oBACA,MAAM,OAAO,CAAC,SAAS,CAAC;gBAC1B;gBAEA,YAAY;gBACZ,CAAA,GAAA,wDAA6B,EAAE,CAAA,GAAA,wCAAa,EAAE,IAAI;gBAClD,CAAA,GAAA,6CAAkB,EAAE;YACtB;QACF;IACF,GAAG;QAAC;KAAM;IAEV,IAAI,UAAU,CAAC;QACb,IAAI,EAAE,WAAW,KAAK,cAAc,EAAE,WAAW,KAAK,WACpD;QAGF,cAAc,EAAE,MAAM;IACxB;IAEA,IAAI,gBAAgB,CAAC;QACnB,IAAI,OAAO,MAAM,OAAO,CAAC,WAAW,KAAK,YAAY;YACnD,IAAI,OAAO,OAAO,qBAAqB;YACvC,MAAM,OAAO,CAAC,WAAW,CAAC;gBACxB,MAAM;gBACN,GAAG,KAAK,CAAC,GAAI,KAAK,KAAK,GAAG;gBAC1B,GAAG,KAAK,CAAC,GAAI,KAAK,MAAM,GAAG;YAC7B;QACF;QAEA,wCAA0B;YACxB,SAAS;YACT,OAAO,MAAM,OAAO,CAAC,QAAQ;YAC7B,uBAAuB,OAAO,MAAM,OAAO,CAAC,wBAAwB,KAAK,aACrE,MAAM,OAAO,CAAC,wBAAwB,KACtC;gBAAC;gBAAQ;gBAAQ;aAAO;YAC5B,WAAU,CAAC;gBACT,YAAY;gBACZ,IAAI,OAAO,MAAM,OAAO,CAAC,SAAS,KAAK,YACrC,MAAM,OAAO,CAAC,SAAS,CAAC;YAE5B;QACF,GAAG;QAEH,YAAY;IACd;IAEA,IAAI,WAAW,CAAA,GAAA,yCAAc;IAC7B,IAAI,UAAU,CAAC,aAAa,8BAAQ,CAAC,SAAS,CAAC,KAAK,GAAG,8BAAQ,CAAC,SAAS,CAAC,GAAG;IAE7E,IAAI,mBAAmB,CAAA,GAAA,oCAAa,EAAE,gBAAgB,MAAM,CAAC;IAE7D,IAAI,eAA4C,CAAC;IACjD,IAAI,CAAC,eACH,0EAA0E;IAC1E,6EAA6E;IAC7E,8EAA8E;IAC9E,8EAA8E;IAC9E,qFAAqF;IACrF,qDAAqD;IAErD,eAAe;QACb,GAAG,gBAAgB;QACnB,eAAc,CAAC;YACb,sBAAsB,OAAO,GAAG,CAAA,GAAA,2CAAoB,EAAE,EAAE,WAAW,IAAI,YAAY,EAAE,WAAW;YAEhG,mDAAmD;YACnD,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,MAAM,GAAG,GAC5B,iBAAiB;YACjB,sBAAsB,OAAO,GAAG;iBAC3B;gBACL,IAAI,OAAO,EAAE,aAAa,CAAC,qBAAqB;gBAChD,IAAI,UAAU,EAAE,OAAO,GAAG,KAAK,CAAC;gBAChC,IAAI,UAAU,EAAE,OAAO,GAAG,KAAK,CAAC;gBAChC,IAAI,UAAU,KAAK,KAAK,GAAG;gBAC3B,IAAI,UAAU,KAAK,MAAM,GAAG;gBAE5B,IAAI,KAAK,GAAG,CAAC,UAAU,YAAY,OAAO,KAAK,GAAG,CAAC,UAAU,YAAY,KACvE,oBAAoB;gBACpB,sBAAsB,OAAO,GAAG;qBAEhC,sBAAsB,OAAO,GAAG,EAAE,WAAW;YAEjD;QACF;QACA,kBAAiB,CAAC;YAChB,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,IAAI,EAAE,GAAG,KAAK,SAAS;gBACrD,EAAE,cAAc;gBAChB,EAAE,eAAe;YACnB;QACF;QACA,gBAAe,CAAC;YACd,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,IAAI,EAAE,GAAG,KAAK,SAAS;gBACrD,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,cAAc,EAAE,MAAM;YACxB;QACF;QACA,SAAQ,CAAC;YACP,yGAAyG;YACzG,IAAI,CAAA,GAAA,oCAAa,EAAE,EAAE,WAAW,KAAK,sBAAsB,OAAO,KAAK,WAAW;gBAChF,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,cAAc,EAAE,MAAM;YACxB;QACF;IACF;IAGF,IAAI,YACF,OAAO;QACL,WAAW;YACT,WAAW;QACb;QACA,iBAAiB,CAAC;QAClB,YAAY;IACd;IAGF,OAAO;QACL,WAAW;YACT,GAAG,YAAY;YACf,WAAW;yBACX;oBACA;uBACA;QACF;QACA,iBAAiB;YACf,GAAG,gBAAgB;qBACnB;QACF;oBACA;IACF;AACF","sources":["packages/@react-aria/dnd/src/useDrag.ts"],"sourcesContent":["/*\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\nimport {AriaButtonProps} from '@react-types/button';\nimport {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent, RefObject} from '@react-types/shared';\nimport {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react';\nimport * as DragManager from './DragManager';\nimport {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';\nimport {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface DragOptions {\n /** Handler that is called when a drag operation is started. */\n onDragStart?: (e: DragStartEvent) => void,\n /** Handler that is called when the drag is moved. */\n onDragMove?: (e: DragMoveEvent) => void,\n /** Handler that is called when the drag operation is ended, either as a result of a drop or a cancellation. */\n onDragEnd?: (e: DragEndEvent) => void,\n /** A function that returns the items being dragged. */\n getItems: () => DragItem[],\n /** The ref of the element that will be rendered as the drag preview while dragging. */\n preview?: RefObject<DragPreviewRenderer | null>,\n /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */\n getAllowedDropOperations?: () => DropOperation[],\n /**\n * Whether the item has an explicit focusable drag affordance to initiate accessible drag and drop mode.\n * If true, the dragProps will omit these event handlers, and they will be applied to dragButtonProps instead.\n */\n hasDragButton?: boolean,\n /**\n * Whether the drag operation is disabled. If true, the element will not be draggable.\n */\n isDisabled?: boolean\n}\n\nexport interface DragResult {\n /** Props for the draggable element. */\n dragProps: HTMLAttributes<HTMLElement>,\n /** Props for the explicit drag button affordance, if any. */\n dragButtonProps: AriaButtonProps,\n /** Whether the element is currently being dragged. */\n isDragging: boolean\n}\n\nconst MESSAGES = {\n keyboard: {\n start: 'dragDescriptionKeyboard',\n end: 'endDragKeyboard'\n },\n touch: {\n start: 'dragDescriptionTouch',\n end: 'endDragTouch'\n },\n virtual: {\n start: 'dragDescriptionVirtual',\n end: 'endDragVirtual'\n }\n};\n\n/**\n * Handles drag interactions for an element, with support for traditional mouse and touch\n * based drag and drop, in addition to full parity for keyboard and screen reader users.\n */\nexport function useDrag(options: DragOptions): DragResult {\n let {hasDragButton, isDisabled} = options;\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');\n let state = useRef({\n options,\n x: 0,\n y: 0\n }).current;\n state.options = options;\n let isDraggingRef = useRef<Element | null>(null);\n let [isDragging, setDraggingState] = useState(false);\n let setDragging = (element: Element | null) => {\n isDraggingRef.current = element;\n setDraggingState(!!element);\n };\n let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n let modalityOnPointerDown = useRef<string>(null);\n\n let onDragStart = (e: DragEvent) => {\n if (e.defaultPrevented) {\n return;\n }\n\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n // If this drag was initiated by a mobile screen reader (e.g. VoiceOver or TalkBack), enter virtual dragging mode.\n if (modalityOnPointerDown.current === 'virtual') {\n e.preventDefault();\n startDragging(e.target as HTMLElement);\n modalityOnPointerDown.current = null;\n return;\n }\n\n if (typeof options.onDragStart === 'function') {\n options.onDragStart({\n type: 'dragstart',\n x: e.clientX,\n y: e.clientY\n });\n }\n\n let items = options.getItems();\n writeToDataTransfer(e.dataTransfer, items);\n\n let allowed = DROP_OPERATION.all;\n if (typeof options.getAllowedDropOperations === 'function') {\n let allowedOperations = options.getAllowedDropOperations();\n allowed = DROP_OPERATION.none;\n for (let operation of allowedOperations) {\n allowed |= DROP_OPERATION[operation] || DROP_OPERATION.none;\n }\n }\n\n setGlobalAllowedDropOperations(allowed);\n let effectAllowed = EFFECT_ALLOWED[allowed] || 'none';\n e.dataTransfer.effectAllowed = effectAllowed === 'cancel' ? 'none' : effectAllowed;\n\n // If there is a preview option, use it to render a custom preview image that will\n // appear under the pointer while dragging. If not, the element itself is dragged by the browser.\n if (typeof options.preview?.current === 'function') {\n options.preview.current(items, (node, userX, userY) => {\n if (!node) {\n return;\n }\n // Compute the offset that the preview will appear under the mouse.\n // If possible, this is based on the point the user clicked on the target.\n // If the preview is much smaller, then just use the center point of the preview.\n let size = node.getBoundingClientRect();\n let rect = e.currentTarget.getBoundingClientRect();\n let defaultX = e.clientX - rect.x;\n let defaultY = e.clientY - rect.y;\n if (defaultX > size.width || defaultY > size.height) {\n defaultX = size.width / 2;\n defaultY = size.height / 2;\n }\n\n // Start with default offsets.\n let offsetX = defaultX;\n let offsetY = defaultY;\n\n // If the preview renderer supplied explicit offsets, use those.\n if (typeof userX === 'number' && typeof userY === 'number') {\n offsetX = userX;\n offsetY = userY;\n }\n\n // Clamp the offset so it stays within the preview bounds. Browsers\n // automatically clamp out-of-range values, but doing it ourselves\n // prevents the visible \"snap\" that can occur when the browser adjusts\n // them after the first drag update.\n offsetX = Math.max(0, Math.min(offsetX, size.width));\n offsetY = Math.max(0, Math.min(offsetY, size.height));\n\n // Rounding height to an even number prevents blurry preview seen on some screens\n let height = 2 * Math.round(size.height / 2);\n node.style.height = `${height}px`;\n\n e.dataTransfer.setDragImage(node, offsetX, offsetY);\n });\n }\n\n // Enforce that drops are handled by useDrop.\n addGlobalListener(window, 'drop', e => {\n e.preventDefault();\n e.stopPropagation();\n console.warn('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');\n }, {once: true});\n state.x = e.clientX;\n state.y = e.clientY;\n\n // Wait a frame before we set dragging to true so that the browser has time to\n // render the preview image before we update the element that has been dragged.\n let target = e.target;\n requestAnimationFrame(() => {\n setDragging(target as Element);\n });\n };\n\n let onDrag = (e: DragEvent) => {\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n if (e.clientX === state.x && e.clientY === state.y) {\n return;\n }\n\n if (typeof options.onDragMove === 'function') {\n options.onDragMove({\n type: 'dragmove',\n x: e.clientX,\n y: e.clientY\n });\n }\n\n state.x = e.clientX;\n state.y = e.clientY;\n };\n\n let onDragEnd = (e: DragEvent) => {\n // Prevent the drag event from propagating to any parent draggables\n e.stopPropagation();\n\n if (typeof options.onDragEnd === 'function') {\n let event: DragEndEvent = {\n type: 'dragend',\n x: e.clientX,\n y: e.clientY,\n dropOperation: DROP_EFFECT_TO_DROP_OPERATION[e.dataTransfer.dropEffect]\n };\n\n // Chrome Android always returns none as its dropEffect so we use the drop effect set in useDrop via\n // onDragEnter/onDragOver instead. https://bugs.chromium.org/p/chromium/issues/detail?id=1353951\n if (globalDropEffect) {\n event.dropOperation = DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect];\n }\n options.onDragEnd(event);\n }\n\n setDragging(null);\n removeAllGlobalListeners();\n setGlobalAllowedDropOperations(DROP_OPERATION.none);\n setGlobalDropEffect(undefined);\n };\n\n // If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801\n // In this case, we need to manually call onDragEnd on cleanup\n\n useEffect(() => {\n return () => {\n // Check that the dragged element has actually unmounted from the DOM and not a React Strict Mode false positive.\n // https://github.com/facebook/react/issues/29585\n // React 16 ran effect cleanups before removing elements from the DOM but did not have this issue.\n if (isDraggingRef.current && (!isDraggingRef.current.isConnected || parseInt(ReactVersion, 10) < 17)) {\n if (typeof state.options.onDragEnd === 'function') {\n let event: DragEndEvent = {\n type: 'dragend',\n x: 0,\n y: 0,\n dropOperation: DROP_EFFECT_TO_DROP_OPERATION[globalDropEffect || 'none']\n };\n state.options.onDragEnd(event);\n }\n\n setDragging(null);\n setGlobalAllowedDropOperations(DROP_OPERATION.none);\n setGlobalDropEffect(undefined);\n }\n };\n }, [state]);\n\n let onPress = (e: PressEvent) => {\n if (e.pointerType !== 'keyboard' && e.pointerType !== 'virtual') {\n return;\n }\n\n startDragging(e.target as HTMLElement);\n };\n\n let startDragging = (target: HTMLElement) => {\n if (typeof state.options.onDragStart === 'function') {\n let rect = target.getBoundingClientRect();\n state.options.onDragStart({\n type: 'dragstart',\n x: rect.x + (rect.width / 2),\n y: rect.y + (rect.height / 2)\n });\n }\n\n DragManager.beginDragging({\n element: target,\n items: state.options.getItems(),\n allowedDropOperations: typeof state.options.getAllowedDropOperations === 'function'\n ? state.options.getAllowedDropOperations()\n : ['move', 'copy', 'link'],\n onDragEnd(e) {\n setDragging(null);\n if (typeof state.options.onDragEnd === 'function') {\n state.options.onDragEnd(e);\n }\n }\n }, stringFormatter);\n\n setDragging(target);\n };\n\n let modality = useDragModality();\n let message = !isDragging ? MESSAGES[modality].start : MESSAGES[modality].end;\n\n let descriptionProps = useDescription(stringFormatter.format(message));\n\n let interactions: HTMLAttributes<HTMLElement> = {};\n if (!hasDragButton) {\n // If there's no separate button to trigger accessible drag and drop mode,\n // then add event handlers to the draggable element itself to start dragging.\n // For keyboard, we use the Enter key in a capturing listener to prevent other\n // events such as selection from also occurring. We attempt to infer whether a\n // pointer event (e.g. long press) came from a touch screen reader, and then initiate\n // dragging in the native onDragStart listener above.\n\n interactions = {\n ...descriptionProps,\n onPointerDown(e) {\n modalityOnPointerDown.current = isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;\n\n // Try to detect virtual drag passthrough gestures.\n if (e.width < 1 && e.height < 1) {\n // iOS VoiceOver.\n modalityOnPointerDown.current = 'virtual';\n } else {\n let rect = e.currentTarget.getBoundingClientRect();\n let offsetX = e.clientX - rect.x;\n let offsetY = e.clientY - rect.y;\n let centerX = rect.width / 2;\n let centerY = rect.height / 2;\n\n if (Math.abs(offsetX - centerX) <= 0.5 && Math.abs(offsetY - centerY) <= 0.5) {\n // Android TalkBack.\n modalityOnPointerDown.current = 'virtual';\n } else {\n modalityOnPointerDown.current = e.pointerType;\n }\n }\n },\n onKeyDownCapture(e) {\n if (e.target === e.currentTarget && e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n }\n },\n onKeyUpCapture(e) {\n if (e.target === e.currentTarget && e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n startDragging(e.target as HTMLElement);\n }\n },\n onClick(e) {\n // Handle NVDA/JAWS in browse mode, and touch screen readers. In this case, no keyboard events are fired.\n if (isVirtualClick(e.nativeEvent) || modalityOnPointerDown.current === 'virtual') {\n e.preventDefault();\n e.stopPropagation();\n startDragging(e.target as HTMLElement);\n }\n }\n };\n }\n\n if (isDisabled) {\n return {\n dragProps: {\n draggable: 'false'\n },\n dragButtonProps: {},\n isDragging: false\n };\n }\n\n return {\n dragProps: {\n ...interactions,\n draggable: 'true',\n onDragStart,\n onDrag,\n onDragEnd\n },\n dragButtonProps: {\n ...descriptionProps,\n onPress\n },\n isDragging\n };\n}\n"],"names":[],"version":3,"file":"useDrag.main.js.map"}
|
package/dist/useDrag.mjs
CHANGED
|
@@ -2,8 +2,8 @@ import {beginDragging as $67560de7c78cb232$export$549dbcf8649bf3b2} from "./Drag
|
|
|
2
2
|
import {DROP_EFFECT_TO_DROP_OPERATION as $103790afe9474d1c$export$608ecc6f1b23c35d, DROP_OPERATION as $103790afe9474d1c$export$60b7b4bcf3903d8e, EFFECT_ALLOWED as $103790afe9474d1c$export$dd0165308d8bff45} from "./constants.mjs";
|
|
3
3
|
import {globalDropEffect as $7252cd45fc48c07c$export$8e6636520ac15722, setGlobalAllowedDropOperations as $7252cd45fc48c07c$export$6539bc8c3a0a2d67, setGlobalDropEffect as $7252cd45fc48c07c$export$64f52ed7349ddb84, useDragModality as $7252cd45fc48c07c$export$49bac5d6d4b352ea, writeToDataTransfer as $7252cd45fc48c07c$export$f9c1490890ddd063} from "./utils.mjs";
|
|
4
4
|
import $72Evg$intlStringsmodulejs from "./intlStrings.mjs";
|
|
5
|
-
import {useRef as $72Evg$useRef, useState as $72Evg$useState} from "react";
|
|
6
|
-
import {useGlobalListeners as $72Evg$useGlobalListeners,
|
|
5
|
+
import {useRef as $72Evg$useRef, useState as $72Evg$useState, useEffect as $72Evg$useEffect, version as $72Evg$version} from "react";
|
|
6
|
+
import {useGlobalListeners as $72Evg$useGlobalListeners, useDescription as $72Evg$useDescription, isVirtualPointerEvent as $72Evg$isVirtualPointerEvent, isVirtualClick as $72Evg$isVirtualClick} from "@react-aria/utils";
|
|
7
7
|
import {useLocalizedStringFormatter as $72Evg$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
8
8
|
|
|
9
9
|
|
|
@@ -50,11 +50,11 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
50
50
|
y: 0
|
|
51
51
|
}).current;
|
|
52
52
|
state.options = options;
|
|
53
|
-
let isDraggingRef = (0, $72Evg$useRef)(
|
|
53
|
+
let isDraggingRef = (0, $72Evg$useRef)(null);
|
|
54
54
|
let [isDragging, setDraggingState] = (0, $72Evg$useState)(false);
|
|
55
|
-
let setDragging = (
|
|
56
|
-
isDraggingRef.current =
|
|
57
|
-
setDraggingState(
|
|
55
|
+
let setDragging = (element)=>{
|
|
56
|
+
isDraggingRef.current = element;
|
|
57
|
+
setDraggingState(!!element);
|
|
58
58
|
};
|
|
59
59
|
let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $72Evg$useGlobalListeners)();
|
|
60
60
|
let modalityOnPointerDown = (0, $72Evg$useRef)(null);
|
|
@@ -84,26 +84,41 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
84
84
|
for (let operation of allowedOperations)allowed |= (0, $103790afe9474d1c$export$60b7b4bcf3903d8e)[operation] || (0, $103790afe9474d1c$export$60b7b4bcf3903d8e).none;
|
|
85
85
|
}
|
|
86
86
|
(0, $7252cd45fc48c07c$export$6539bc8c3a0a2d67)(allowed);
|
|
87
|
-
|
|
87
|
+
let effectAllowed = (0, $103790afe9474d1c$export$dd0165308d8bff45)[allowed] || 'none';
|
|
88
|
+
e.dataTransfer.effectAllowed = effectAllowed === 'cancel' ? 'none' : effectAllowed;
|
|
88
89
|
// If there is a preview option, use it to render a custom preview image that will
|
|
89
90
|
// appear under the pointer while dragging. If not, the element itself is dragged by the browser.
|
|
90
|
-
if (typeof ((_options_preview = options.preview) === null || _options_preview === void 0 ? void 0 : _options_preview.current) === 'function') options.preview.current(items, (node)=>{
|
|
91
|
+
if (typeof ((_options_preview = options.preview) === null || _options_preview === void 0 ? void 0 : _options_preview.current) === 'function') options.preview.current(items, (node, userX, userY)=>{
|
|
91
92
|
if (!node) return;
|
|
92
93
|
// Compute the offset that the preview will appear under the mouse.
|
|
93
94
|
// If possible, this is based on the point the user clicked on the target.
|
|
94
95
|
// If the preview is much smaller, then just use the center point of the preview.
|
|
95
96
|
let size = node.getBoundingClientRect();
|
|
96
97
|
let rect = e.currentTarget.getBoundingClientRect();
|
|
97
|
-
let
|
|
98
|
-
let
|
|
99
|
-
if (
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
let defaultX = e.clientX - rect.x;
|
|
99
|
+
let defaultY = e.clientY - rect.y;
|
|
100
|
+
if (defaultX > size.width || defaultY > size.height) {
|
|
101
|
+
defaultX = size.width / 2;
|
|
102
|
+
defaultY = size.height / 2;
|
|
102
103
|
}
|
|
104
|
+
// Start with default offsets.
|
|
105
|
+
let offsetX = defaultX;
|
|
106
|
+
let offsetY = defaultY;
|
|
107
|
+
// If the preview renderer supplied explicit offsets, use those.
|
|
108
|
+
if (typeof userX === 'number' && typeof userY === 'number') {
|
|
109
|
+
offsetX = userX;
|
|
110
|
+
offsetY = userY;
|
|
111
|
+
}
|
|
112
|
+
// Clamp the offset so it stays within the preview bounds. Browsers
|
|
113
|
+
// automatically clamp out-of-range values, but doing it ourselves
|
|
114
|
+
// prevents the visible "snap" that can occur when the browser adjusts
|
|
115
|
+
// them after the first drag update.
|
|
116
|
+
offsetX = Math.max(0, Math.min(offsetX, size.width));
|
|
117
|
+
offsetY = Math.max(0, Math.min(offsetY, size.height));
|
|
103
118
|
// Rounding height to an even number prevents blurry preview seen on some screens
|
|
104
119
|
let height = 2 * Math.round(size.height / 2);
|
|
105
120
|
node.style.height = `${height}px`;
|
|
106
|
-
e.dataTransfer.setDragImage(node,
|
|
121
|
+
e.dataTransfer.setDragImage(node, offsetX, offsetY);
|
|
107
122
|
});
|
|
108
123
|
// Enforce that drops are handled by useDrop.
|
|
109
124
|
addGlobalListener(window, 'drop', (e)=>{
|
|
@@ -117,8 +132,9 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
117
132
|
state.y = e.clientY;
|
|
118
133
|
// Wait a frame before we set dragging to true so that the browser has time to
|
|
119
134
|
// render the preview image before we update the element that has been dragged.
|
|
135
|
+
let target = e.target;
|
|
120
136
|
requestAnimationFrame(()=>{
|
|
121
|
-
setDragging(
|
|
137
|
+
setDragging(target);
|
|
122
138
|
});
|
|
123
139
|
};
|
|
124
140
|
let onDrag = (e)=>{
|
|
@@ -148,16 +164,19 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
148
164
|
if (0, $7252cd45fc48c07c$export$8e6636520ac15722) event.dropOperation = (0, $103790afe9474d1c$export$608ecc6f1b23c35d)[0, $7252cd45fc48c07c$export$8e6636520ac15722];
|
|
149
165
|
options.onDragEnd(event);
|
|
150
166
|
}
|
|
151
|
-
setDragging(
|
|
167
|
+
setDragging(null);
|
|
152
168
|
removeAllGlobalListeners();
|
|
153
169
|
(0, $7252cd45fc48c07c$export$6539bc8c3a0a2d67)((0, $103790afe9474d1c$export$60b7b4bcf3903d8e).none);
|
|
154
170
|
(0, $7252cd45fc48c07c$export$64f52ed7349ddb84)(undefined);
|
|
155
171
|
};
|
|
156
172
|
// If the dragged element is removed from the DOM via onDrop, onDragEnd won't fire: https://bugzilla.mozilla.org/show_bug.cgi?id=460801
|
|
157
173
|
// In this case, we need to manually call onDragEnd on cleanup
|
|
158
|
-
(0, $72Evg$
|
|
174
|
+
(0, $72Evg$useEffect)(()=>{
|
|
159
175
|
return ()=>{
|
|
160
|
-
|
|
176
|
+
// Check that the dragged element has actually unmounted from the DOM and not a React Strict Mode false positive.
|
|
177
|
+
// https://github.com/facebook/react/issues/29585
|
|
178
|
+
// React 16 ran effect cleanups before removing elements from the DOM but did not have this issue.
|
|
179
|
+
if (isDraggingRef.current && (!isDraggingRef.current.isConnected || parseInt((0, $72Evg$version), 10) < 17)) {
|
|
161
180
|
if (typeof state.options.onDragEnd === 'function') {
|
|
162
181
|
let event = {
|
|
163
182
|
type: 'dragend',
|
|
@@ -167,7 +186,7 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
167
186
|
};
|
|
168
187
|
state.options.onDragEnd(event);
|
|
169
188
|
}
|
|
170
|
-
setDragging(
|
|
189
|
+
setDragging(null);
|
|
171
190
|
(0, $7252cd45fc48c07c$export$6539bc8c3a0a2d67)((0, $103790afe9474d1c$export$60b7b4bcf3903d8e).none);
|
|
172
191
|
(0, $7252cd45fc48c07c$export$64f52ed7349ddb84)(undefined);
|
|
173
192
|
}
|
|
@@ -197,11 +216,11 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
|
|
|
197
216
|
'link'
|
|
198
217
|
],
|
|
199
218
|
onDragEnd (e) {
|
|
200
|
-
setDragging(
|
|
219
|
+
setDragging(null);
|
|
201
220
|
if (typeof state.options.onDragEnd === 'function') state.options.onDragEnd(e);
|
|
202
221
|
}
|
|
203
222
|
}, stringFormatter);
|
|
204
|
-
setDragging(
|
|
223
|
+
setDragging(target);
|
|
205
224
|
};
|
|
206
225
|
let modality = (0, $7252cd45fc48c07c$export$49bac5d6d4b352ea)();
|
|
207
226
|
let message = !isDragging ? $8253ed7ece74b463$var$MESSAGES[modality].start : $8253ed7ece74b463$var$MESSAGES[modality].end;
|