Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-stately/dnd

Package Overview
Dependencies
Maintainers
2
Versions
768
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc