@react-aria/dnd 3.0.0-nightly.3262 → 3.0.0-nightly.3268

package/dist/main.js

@@ -1,11 +1,14 @@
 var $4vY0V$react = require("react");
-var $4vY0V$reactdom = require("react-dom");
 var $4vY0V$reactariautils = require("@react-aria/utils");
 var $4vY0V$reactariai18n = require("@react-aria/i18n");
 var $4vY0V$reactarialiveannouncer = require("@react-aria/live-announcer");
 var $4vY0V$reactariaoverlays = require("@react-aria/overlays");
 var $4vY0V$reactariainteractions = require("@react-aria/interactions");
+var $4vY0V$reactdom = require("react-dom");
 
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
@@ -25,9 +28,8 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
+
+$parcel$export(module.exports, "DragPreview", () => $2dccaca1f4baa446$export$905ab40ac2179daa);
 var $dc204e8ec58447a6$exports = {};
 
 $parcel$export($dc204e8ec58447a6$exports, "useDrag", () => $dc204e8ec58447a6$export$7941f8aafa4b6021);
@@ -833,7 +835,6 @@ $d624b4da796f302a$exports = {
 
 
 
-
 const $dc204e8ec58447a6$var$MESSAGES = {
     keyboard: {
         start: 'dragDescriptionKeyboard',
@@ -859,7 +860,13 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
     let [isDragging, setDragging] = $4vY0V$react.useState(false);
     let { addGlobalListener: addGlobalListener , removeAllGlobalListeners: removeAllGlobalListeners  } = $4vY0V$reactariautils.useGlobalListeners();
     let onDragStart = (e1)=>{
+        var ref;
         if (e1.defaultPrevented) return;
+        if (typeof options.onDragStart === 'function') options.onDragStart({
+            type: 'dragstart',
+            x: e1.clientX,
+            y: e1.clientY
+        });
         let items = options.getItems();
         $4620ae0dc40f0031$export$f9c1490890ddd063(e1.dataTransfer, items);
         if (typeof options.getAllowedDropOperations === 'function') {
@@ -868,41 +875,25 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
             for (let operation of allowedOperations)allowed |= $76b1e110a27b1ccd$export$60b7b4bcf3903d8e[operation] || $76b1e110a27b1ccd$export$60b7b4bcf3903d8e.none;
             e1.dataTransfer.effectAllowed = $76b1e110a27b1ccd$export$dd0165308d8bff45[allowed] || 'none';
         }
-        // If there is a renderPreview function, use it to render a custom preview image that will
+        // If there is a preview option, use it to render a custom preview image that will
         // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
-        if (typeof options.renderPreview === 'function') {
-            let preview = options.renderPreview(items);
-            if (preview) {
-                // Create an off-screen div to render the preview into.
-                let node = document.createElement('div');
-                node.style.zIndex = '-100';
-                node.style.position = 'absolute';
-                node.style.top = '0';
-                node.style.left = '-100000px';
-                document.body.appendChild(node);
-                // Call renderPreview to get a JSX element, and render it into the div with React DOM.
-                ($parcel$interopDefault($4vY0V$reactdom)).render(preview, node);
-                // Compute the offset that the preview will appear under the mouse.
-                // If possible, this is based on the point the user clicked on the target.
-                // If the preview is much smaller, then just use the center point of the preview.
-                let size = node.getBoundingClientRect();
-                let rect = e1.currentTarget.getBoundingClientRect();
-                let x = e1.clientX - rect.x;
-                let y = e1.clientY - rect.y;
-                if (x > size.width || y > size.height) {
-                    x = size.width / 2;
-                    y = size.height / 2;
-                }
-                // Rounding height to an even number prevents blurry preview seen on some screens
-                let height = 2 * Math.round(rect.height / 2);
-                node.style.height = `${height}px`;
-                e1.dataTransfer.setDragImage(node, x, y);
-                // Remove the preview from the DOM after a frame so the browser has time to paint.
-                requestAnimationFrame(()=>{
-                    document.body.removeChild(node);
-                });
+        if (typeof ((ref = options.preview) === null || ref === void 0 ? void 0 : ref.current) === 'function') options.preview.current(items, (node)=>{
+            // Compute the offset that the preview will appear under the mouse.
+            // If possible, this is based on the point the user clicked on the target.
+            // If the preview is much smaller, then just use the center point of the preview.
+            let size = node.getBoundingClientRect();
+            let rect = e1.currentTarget.getBoundingClientRect();
+            let x = e1.clientX - rect.x;
+            let y = e1.clientY - rect.y;
+            if (x > size.width || y > size.height) {
+                x = size.width / 2;
+                y = size.height / 2;
             }
-        }
+            // Rounding height to an even number prevents blurry preview seen on some screens
+            let height = 2 * Math.round(rect.height / 2);
+            node.style.height = `${height}px`;
+            e1.dataTransfer.setDragImage(node, x, y);
+        });
         // Enforce that drops are handled by useDrop.
         addGlobalListener(window, 'drop', (e)=>{
             if (!$28e10663603f5ea1$export$7454aff2e161f241(e.target)) {
@@ -914,11 +905,6 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
             capture: true,
             once: true
         });
-        if (typeof options.onDragStart === 'function') options.onDragStart({
-            type: 'dragstart',
-            x: e1.clientX,
-            y: e1.clientY
-        });
         state.x = e1.clientX;
         state.y = e1.clientY;
         // Wait a frame before we set dragging to true so that the browser has time to
@@ -1740,9 +1726,7 @@ function $0cbbd00cda972c67$export$b35afafff42da2d9(props, state) {
         getItems () {
             return state.getItems(props.key);
         },
-        renderPreview () {
-            return state.renderPreview(props.key);
-        },
+        preview: state.preview,
         onDragStart (e) {
             state.startDrag(props.key, e);
         },
@@ -1860,6 +1844,42 @@ function $74f3dedaa4d234b4$export$2314ca2a3e892862(options1) {
 }
 
 
+
+
+function $2dccaca1f4baa446$var$DragPreview(props, ref) {
+    let render = props.children;
+    let [children, setChildren] = $4vY0V$react.useState(null);
+    let domRef = $4vY0V$react.useRef(null);
+    $4vY0V$react.useImperativeHandle(ref, ()=>(items, callback)=>{
+            // This will be called during the onDragStart event by useDrag. We need to render the
+            // preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
+            $4vY0V$reactdom.flushSync(()=>{
+                setChildren(render(items));
+            });
+            // Yield back to useDrag to set the drag image.
+            callback(domRef.current);
+            // Remove the preview from the DOM after a frame so the browser has time to paint.
+            requestAnimationFrame(()=>{
+                setChildren(null);
+            });
+        }
+    , [
+        render
+    ]);
+    if (!children) return null;
+    return(/*#__PURE__*/ ($parcel$interopDefault($4vY0V$react)).createElement("div", {
+        style: {
+            zIndex: -100,
+            position: 'absolute',
+            top: 0,
+            left: -100000
+        },
+        ref: domRef
+    }, children));
+}
+let $2dccaca1f4baa446$export$905ab40ac2179daa = /*#__PURE__*/ ($parcel$interopDefault($4vY0V$react)).forwardRef($2dccaca1f4baa446$var$DragPreview);
+
+
 $parcel$exportWildcard(module.exports, $dc204e8ec58447a6$exports);
 $parcel$exportWildcard(module.exports, $1ca228bc9257ca16$exports);
 $parcel$exportWildcard(module.exports, $7f93a158ac20b90a$exports);