@react-stately/dnd
Advanced tools
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
57811
482