🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@react-stately/dnd
Advanced tools
@react-stately/dnd - npm Package Compare versions
Comparing version 3.0.0-alpha.2 to 3.0.0-alpha.3
276
dist/main.js
@@ -1,168 +0,144 @@ | ||
| var { | ||
| useState | ||
| } = require("react"); | ||
| var $4zSno$react = require("react"); | ||
| var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends")); | ||
| function $parcel$exportWildcard(dest, source) { | ||
| Object.keys(source).forEach(function(key) { | ||
| if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) { | ||
| return; | ||
| } | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| function useDraggableCollectionState(props) { | ||
| let [draggingKeys, setDraggingKeys] = useState(new Set()); | ||
| let getKeys = key => { | ||
| // The clicked item is always added to the drag. If it is selected, then all of the | ||
| // other selected items are also dragged. If it is not selected, the only the clicked | ||
| // item is dragged. This matches native macOS behavior. | ||
| let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []); | ||
| keys.add(key); | ||
| return keys; | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| isDragging(key) { | ||
| return draggingKeys.has(key); | ||
| }, | ||
| getKeysForDrag: getKeys, | ||
| getItems(key) { | ||
| return props.getItems(getKeys(key)); | ||
| }, | ||
| renderPreview(key) { | ||
| if (typeof props.renderPreview === 'function') { | ||
| return props.renderPreview(getKeys(key), key); | ||
| Object.defineProperty(dest, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return source[key]; | ||
| } | ||
| }); | ||
| }); | ||
| return null; | ||
| }, | ||
| return dest; | ||
| } | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $97a0ee2d5f702098$exports = {}; | ||
| startDrag(key, event) { | ||
| let keys = getKeys(key); | ||
| setDraggingKeys(keys); | ||
| $parcel$export($97a0ee2d5f702098$exports, "useDraggableCollectionState", () => $97a0ee2d5f702098$export$29efd034f1d79f81); | ||
| if (typeof props.onDragStart === 'function') { | ||
| props.onDragStart(_babelRuntimeHelpersExtends({}, event, { | ||
| keys | ||
| })); | ||
| } | ||
| }, | ||
| function $97a0ee2d5f702098$export$29efd034f1d79f81(props) { | ||
| let [draggingKeys, setDraggingKeys] = $4zSno$react.useState(new Set()); | ||
| let getKeys = (key)=>{ | ||
| // The clicked item is always added to the drag. If it is selected, then all of the | ||
| // other selected items are also dragged. If it is not selected, the only the clicked | ||
| // item is dragged. This matches native macOS behavior. | ||
| let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []); | ||
| keys.add(key); | ||
| return keys; | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| isDragging (key) { | ||
| return draggingKeys.has(key); | ||
| }, | ||
| getKeysForDrag: getKeys, | ||
| getItems (key) { | ||
| return props.getItems(getKeys(key)); | ||
| }, | ||
| renderPreview (key) { | ||
| if (typeof props.renderPreview === 'function') return props.renderPreview(getKeys(key), key); | ||
| return null; | ||
| }, | ||
| startDrag (key, event) { | ||
| let keys = getKeys(key); | ||
| setDraggingKeys(keys); | ||
| if (typeof props.onDragStart === 'function') props.onDragStart({ | ||
| ...event, | ||
| keys: keys | ||
| }); | ||
| }, | ||
| moveDrag (event) { | ||
| if (typeof props.onDragMove === 'function') props.onDragMove({ | ||
| ...event, | ||
| keys: draggingKeys | ||
| }); | ||
| }, | ||
| endDrag (event) { | ||
| if (typeof props.onDragEnd === 'function') props.onDragEnd({ | ||
| ...event, | ||
| keys: draggingKeys | ||
| }); | ||
| setDraggingKeys(new Set()); | ||
| } | ||
| }; | ||
| } | ||
| moveDrag(event) { | ||
| if (typeof props.onDragMove === 'function') { | ||
| props.onDragMove(_babelRuntimeHelpersExtends({}, event, { | ||
| keys: draggingKeys | ||
| })); | ||
| } | ||
| }, | ||
| endDrag(event) { | ||
| if (typeof props.onDragEnd === 'function') { | ||
| props.onDragEnd(_babelRuntimeHelpersExtends({}, event, { | ||
| keys: draggingKeys | ||
| })); | ||
| } | ||
| var $493c7e7e2c1a0cd7$exports = {}; | ||
| setDraggingKeys(new Set()); | ||
| } | ||
| $parcel$export($493c7e7e2c1a0cd7$exports, "useDroppableCollectionState", () => $493c7e7e2c1a0cd7$export$926850f6ecef79d0); | ||
| }; | ||
| function $493c7e7e2c1a0cd7$export$926850f6ecef79d0(props) { | ||
| let [target1, setTarget] = $4zSno$react.useState(null); | ||
| let getOppositeTarget = (target)=>{ | ||
| if (target.dropPosition === 'before') { | ||
| let key = props.collection.getKeyBefore(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key: key, | ||
| dropPosition: 'after' | ||
| } : null; | ||
| } else if (target.dropPosition === 'after') { | ||
| let key = props.collection.getKeyAfter(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key: key, | ||
| dropPosition: 'before' | ||
| } : null; | ||
| } | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| target: target1, | ||
| setTarget (newTarget) { | ||
| if (this.isDropTarget(newTarget)) return; | ||
| if (target1 && typeof props.onDropExit === 'function') props.onDropExit({ | ||
| type: 'dropexit', | ||
| x: 0, | ||
| y: 0, | ||
| target: target1 | ||
| }); | ||
| if (newTarget && typeof props.onDropEnter === 'function') props.onDropEnter({ | ||
| type: 'dropenter', | ||
| x: 0, | ||
| y: 0, | ||
| target: newTarget | ||
| }); | ||
| setTarget(newTarget); | ||
| }, | ||
| isDropTarget (dropTarget) { | ||
| if ($493c7e7e2c1a0cd7$var$isEqualDropTarget(dropTarget, target1)) return true; | ||
| // Check if the targets point at the same point between two items, one referring before, and the other after. | ||
| if (dropTarget?.type === 'item' && target1?.type === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $493c7e7e2c1a0cd7$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $493c7e7e2c1a0cd7$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1)); | ||
| return false; | ||
| }, | ||
| getDropOperation (target, types, allowedOperations) { | ||
| return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0]; | ||
| } | ||
| }; | ||
| } | ||
| exports.useDraggableCollectionState = useDraggableCollectionState; | ||
| function useDroppableCollectionState(props) { | ||
| let [target, setTarget] = useState(null); | ||
| let getOppositeTarget = target => { | ||
| if (target.dropPosition === 'before') { | ||
| let key = props.collection.getKeyBefore(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key, | ||
| dropPosition: 'after' | ||
| } : null; | ||
| } else if (target.dropPosition === 'after') { | ||
| let key = props.collection.getKeyAfter(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key, | ||
| dropPosition: 'before' | ||
| } : null; | ||
| function $493c7e7e2c1a0cd7$var$isEqualDropTarget(a, b) { | ||
| if (!a) return !b; | ||
| switch(a.type){ | ||
| case 'root': | ||
| return b?.type === 'root'; | ||
| case 'item': | ||
| return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition; | ||
| } | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| target, | ||
| setTarget(newTarget) { | ||
| if (this.isDropTarget(newTarget)) { | ||
| return; | ||
| } | ||
| if (target && typeof props.onDropExit === 'function') { | ||
| props.onDropExit({ | ||
| type: 'dropexit', | ||
| x: 0, | ||
| // todo | ||
| y: 0, | ||
| target | ||
| }); | ||
| } | ||
| if (newTarget && typeof props.onDropEnter === 'function') { | ||
| props.onDropEnter({ | ||
| type: 'dropenter', | ||
| x: 0, | ||
| // todo | ||
| y: 0, | ||
| target: newTarget | ||
| }); | ||
| } | ||
| setTarget(newTarget); | ||
| }, | ||
| isDropTarget(dropTarget) { | ||
| if ($e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(dropTarget, target)) { | ||
| return true; | ||
| } // Check if the targets point at the same point between two items, one referring before, and the other after. | ||
| if ((dropTarget == null ? void 0 : dropTarget.type) === 'item' && (target == null ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') { | ||
| return $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(dropTarget, getOppositeTarget(target)); | ||
| } | ||
| return false; | ||
| }, | ||
| getDropOperation(target, types, allowedOperations) { | ||
| return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0]; | ||
| } | ||
| }; | ||
| } | ||
| exports.useDroppableCollectionState = useDroppableCollectionState; | ||
| function $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(a, b) { | ||
| if (!a) { | ||
| return !b; | ||
| } | ||
| $parcel$exportWildcard(module.exports, $97a0ee2d5f702098$exports); | ||
| $parcel$exportWildcard(module.exports, $493c7e7e2c1a0cd7$exports); | ||
| switch (a.type) { | ||
| case 'root': | ||
| return (b == null ? void 0 : b.type) === 'root'; | ||
| case 'item': | ||
| return (b == null ? void 0 : b.type) === 'item' && (b == null ? void 0 : b.key) === a.key && (b == null ? void 0 : b.dropPosition) === a.dropPosition; | ||
| } | ||
| } | ||
| //# sourceMappingURL=main.js.map |
@@ -1,155 +0,127 @@ | ||
| import { useState } from "react"; | ||
| import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends"; | ||
| export function useDraggableCollectionState(props) { | ||
| let [draggingKeys, setDraggingKeys] = useState(new Set()); | ||
| import {useState as $gjNPF$useState} from "react"; | ||
| let getKeys = key => { | ||
| // The clicked item is always added to the drag. If it is selected, then all of the | ||
| // other selected items are also dragged. If it is not selected, the only the clicked | ||
| // item is dragged. This matches native macOS behavior. | ||
| let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []); | ||
| keys.add(key); | ||
| return keys; | ||
| }; | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $cfde1c3ca5456981$exports = {}; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| $parcel$export($cfde1c3ca5456981$exports, "useDraggableCollectionState", () => $cfde1c3ca5456981$export$29efd034f1d79f81); | ||
| isDragging(key) { | ||
| return draggingKeys.has(key); | ||
| }, | ||
| function $cfde1c3ca5456981$export$29efd034f1d79f81(props) { | ||
| let [draggingKeys, setDraggingKeys] = $gjNPF$useState(new Set()); | ||
| let getKeys = (key)=>{ | ||
| // The clicked item is always added to the drag. If it is selected, then all of the | ||
| // other selected items are also dragged. If it is not selected, the only the clicked | ||
| // item is dragged. This matches native macOS behavior. | ||
| let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []); | ||
| keys.add(key); | ||
| return keys; | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| isDragging (key) { | ||
| return draggingKeys.has(key); | ||
| }, | ||
| getKeysForDrag: getKeys, | ||
| getItems (key) { | ||
| return props.getItems(getKeys(key)); | ||
| }, | ||
| renderPreview (key) { | ||
| if (typeof props.renderPreview === 'function') return props.renderPreview(getKeys(key), key); | ||
| return null; | ||
| }, | ||
| startDrag (key, event) { | ||
| let keys = getKeys(key); | ||
| setDraggingKeys(keys); | ||
| if (typeof props.onDragStart === 'function') props.onDragStart({ | ||
| ...event, | ||
| keys: keys | ||
| }); | ||
| }, | ||
| moveDrag (event) { | ||
| if (typeof props.onDragMove === 'function') props.onDragMove({ | ||
| ...event, | ||
| keys: draggingKeys | ||
| }); | ||
| }, | ||
| endDrag (event) { | ||
| if (typeof props.onDragEnd === 'function') props.onDragEnd({ | ||
| ...event, | ||
| keys: draggingKeys | ||
| }); | ||
| setDraggingKeys(new Set()); | ||
| } | ||
| }; | ||
| } | ||
| getKeysForDrag: getKeys, | ||
| getItems(key) { | ||
| return props.getItems(getKeys(key)); | ||
| }, | ||
| var $dabc5ba65f76be17$exports = {}; | ||
| renderPreview(key) { | ||
| if (typeof props.renderPreview === 'function') { | ||
| return props.renderPreview(getKeys(key), key); | ||
| } | ||
| $parcel$export($dabc5ba65f76be17$exports, "useDroppableCollectionState", () => $dabc5ba65f76be17$export$926850f6ecef79d0); | ||
| return null; | ||
| }, | ||
| startDrag(key, event) { | ||
| let keys = getKeys(key); | ||
| setDraggingKeys(keys); | ||
| if (typeof props.onDragStart === 'function') { | ||
| props.onDragStart(_babelRuntimeHelpersEsmExtends({}, event, { | ||
| keys | ||
| })); | ||
| } | ||
| }, | ||
| moveDrag(event) { | ||
| if (typeof props.onDragMove === 'function') { | ||
| props.onDragMove(_babelRuntimeHelpersEsmExtends({}, event, { | ||
| keys: draggingKeys | ||
| })); | ||
| } | ||
| }, | ||
| endDrag(event) { | ||
| if (typeof props.onDragEnd === 'function') { | ||
| props.onDragEnd(_babelRuntimeHelpersEsmExtends({}, event, { | ||
| keys: draggingKeys | ||
| })); | ||
| } | ||
| setDraggingKeys(new Set()); | ||
| function $dabc5ba65f76be17$export$926850f6ecef79d0(props) { | ||
| let [target1, setTarget] = $gjNPF$useState(null); | ||
| let getOppositeTarget = (target)=>{ | ||
| if (target.dropPosition === 'before') { | ||
| let key = props.collection.getKeyBefore(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key: key, | ||
| dropPosition: 'after' | ||
| } : null; | ||
| } else if (target.dropPosition === 'after') { | ||
| let key = props.collection.getKeyAfter(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key: key, | ||
| dropPosition: 'before' | ||
| } : null; | ||
| } | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| target: target1, | ||
| setTarget (newTarget) { | ||
| if (this.isDropTarget(newTarget)) return; | ||
| if (target1 && typeof props.onDropExit === 'function') props.onDropExit({ | ||
| type: 'dropexit', | ||
| x: 0, | ||
| y: 0, | ||
| target: target1 | ||
| }); | ||
| if (newTarget && typeof props.onDropEnter === 'function') props.onDropEnter({ | ||
| type: 'dropenter', | ||
| x: 0, | ||
| y: 0, | ||
| target: newTarget | ||
| }); | ||
| setTarget(newTarget); | ||
| }, | ||
| isDropTarget (dropTarget) { | ||
| if ($dabc5ba65f76be17$var$isEqualDropTarget(dropTarget, target1)) return true; | ||
| // Check if the targets point at the same point between two items, one referring before, and the other after. | ||
| if (dropTarget?.type === 'item' && target1?.type === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $dabc5ba65f76be17$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $dabc5ba65f76be17$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1)); | ||
| return false; | ||
| }, | ||
| getDropOperation (target, types, allowedOperations) { | ||
| return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0]; | ||
| } | ||
| }; | ||
| } | ||
| function $dabc5ba65f76be17$var$isEqualDropTarget(a, b) { | ||
| if (!a) return !b; | ||
| switch(a.type){ | ||
| case 'root': | ||
| return b?.type === 'root'; | ||
| case 'item': | ||
| return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition; | ||
| } | ||
| }; | ||
| } | ||
| export function useDroppableCollectionState(props) { | ||
| let [target, setTarget] = useState(null); | ||
| let getOppositeTarget = target => { | ||
| if (target.dropPosition === 'before') { | ||
| let key = props.collection.getKeyBefore(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key, | ||
| dropPosition: 'after' | ||
| } : null; | ||
| } else if (target.dropPosition === 'after') { | ||
| let key = props.collection.getKeyAfter(target.key); | ||
| return key != null ? { | ||
| type: 'item', | ||
| key, | ||
| dropPosition: 'before' | ||
| } : null; | ||
| } | ||
| }; | ||
| return { | ||
| collection: props.collection, | ||
| selectionManager: props.selectionManager, | ||
| target, | ||
| setTarget(newTarget) { | ||
| if (this.isDropTarget(newTarget)) { | ||
| return; | ||
| } | ||
| if (target && typeof props.onDropExit === 'function') { | ||
| props.onDropExit({ | ||
| type: 'dropexit', | ||
| x: 0, | ||
| // todo | ||
| y: 0, | ||
| target | ||
| }); | ||
| } | ||
| if (newTarget && typeof props.onDropEnter === 'function') { | ||
| props.onDropEnter({ | ||
| type: 'dropenter', | ||
| x: 0, | ||
| // todo | ||
| y: 0, | ||
| target: newTarget | ||
| }); | ||
| } | ||
| setTarget(newTarget); | ||
| }, | ||
| isDropTarget(dropTarget) { | ||
| if ($dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(dropTarget, target)) { | ||
| return true; | ||
| } // Check if the targets point at the same point between two items, one referring before, and the other after. | ||
| if ((dropTarget == null ? void 0 : dropTarget.type) === 'item' && (target == null ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') { | ||
| return $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(dropTarget, getOppositeTarget(target)); | ||
| } | ||
| return false; | ||
| }, | ||
| getDropOperation(target, types, allowedOperations) { | ||
| return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0]; | ||
| } | ||
| }; | ||
| } | ||
| function $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(a, b) { | ||
| if (!a) { | ||
| return !b; | ||
| } | ||
| switch (a.type) { | ||
| case 'root': | ||
| return (b == null ? void 0 : b.type) === 'root'; | ||
| case 'item': | ||
| return (b == null ? void 0 : b.type) === 'item' && (b == null ? void 0 : b.key) === a.key && (b == null ? void 0 : b.dropPosition) === a.dropPosition; | ||
| } | ||
| } | ||
| export {$cfde1c3ca5456981$export$29efd034f1d79f81 as useDraggableCollectionState, $dabc5ba65f76be17$export$926850f6ecef79d0 as useDroppableCollectionState}; | ||
| //# sourceMappingURL=module.js.map |
| { | ||
| "name": "@react-stately/dnd", | ||
| "version": "3.0.0-alpha.2", | ||
| "version": "3.0.0-alpha.3", | ||
| "description": "Spectrum UI components in React", | ||
@@ -21,5 +21,5 @@ "license": "Apache-2.0", | ||
| "@babel/runtime": "^7.6.2", | ||
| "@react-stately/selection": "^3.7.0", | ||
| "@react-stately/utils": "^3.2.2", | ||
| "@react-types/shared": "^3.8.0" | ||
| "@react-stately/selection": "^3.9.1", | ||
| "@react-stately/utils": "^3.4.0", | ||
| "@react-types/shared": "^3.11.0" | ||
| }, | ||
@@ -32,3 +32,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "9204e1b8cb61dac767e91087fb16203611dc67c5" | ||
| "gitHead": "54c2366c4f31bd4bf619126131cd583c12972acc" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
57811
0.81%Worsened metrics
- Lines of code
482
-2.43%