react-dnd
Advanced tools
Comparing version 15.0.1 to 15.0.2
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.DndContext = void 0; | ||
const react_1 = require("react"); | ||
/** | ||
* Create the React Context | ||
*/ | ||
exports.DndContext = (0, react_1.createContext)({ | ||
dragDropManager: undefined, | ||
var _react = require("react"); | ||
const DndContext = (0, _react).createContext({ | ||
dragDropManager: undefined | ||
}); | ||
exports.DndContext = DndContext; | ||
//# sourceMappingURL=DndContext.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.DndProvider = void 0; | ||
const jsx_runtime_1 = require("react/jsx-runtime"); | ||
const react_1 = require("react"); | ||
const dnd_core_1 = require("dnd-core"); | ||
const DndContext_1 = require("./DndContext"); | ||
var _jsxRuntime = require("react/jsx-runtime"); | ||
var _react = require("react"); | ||
var _dndCore = require("dnd-core"); | ||
var _dndContext = require("./DndContext"); | ||
function _objectWithoutProperties(source, excluded) { | ||
if (source == null) return {}; | ||
var target = _objectWithoutPropertiesLoose(source, excluded); | ||
var key, i; | ||
if (Object.getOwnPropertySymbols) { | ||
var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
for(i = 0; i < sourceSymbolKeys.length; i++){ | ||
key = sourceSymbolKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
target[key] = source[key]; | ||
} | ||
} | ||
return target; | ||
} | ||
function _objectWithoutPropertiesLoose(source, excluded) { | ||
if (source == null) return {}; | ||
var target = {}; | ||
var sourceKeys = Object.keys(source); | ||
var key, i; | ||
for(i = 0; i < sourceKeys.length; i++){ | ||
key = sourceKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
target[key] = source[key]; | ||
} | ||
return target; | ||
} | ||
let refCount = 0; | ||
const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__'); | ||
/** | ||
* A React component that provides the React-DnD context | ||
*/ | ||
exports.DndProvider = (0, react_1.memo)(function DndProvider({ children, ...props }) { | ||
const [manager, isGlobalInstance] = getDndContextValue(props); // memoized from props | ||
var DndProvider = /*#__PURE__*/ (0, _react).memo(function DndProvider(_param) { | ||
var { children } = _param, props = _objectWithoutProperties(_param, [ | ||
"children" | ||
]); | ||
const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props | ||
; | ||
/** | ||
* If the global context was used to store the DND context | ||
* then where theres no more references to it we should | ||
* clean it up to avoid memory leaks | ||
*/ | ||
(0, react_1.useEffect)(() => { | ||
* If the global context was used to store the DND context | ||
* then where theres no more references to it we should | ||
* clean it up to avoid memory leaks | ||
*/ (0, _react).useEffect(()=>{ | ||
if (isGlobalInstance) { | ||
const context = getGlobalContext(); | ||
++refCount; | ||
return () => { | ||
return ()=>{ | ||
if (--refCount === 0) { | ||
@@ -32,12 +61,24 @@ context[INSTANCE_SYM] = null; | ||
}, []); | ||
return (0, jsx_runtime_1.jsx)(DndContext_1.DndContext.Provider, { value: manager, children: children }, void 0); | ||
return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_dndContext.DndContext.Provider, { | ||
value: manager, | ||
children: children | ||
})); | ||
}); | ||
exports.DndProvider = DndProvider; | ||
function getDndContextValue(props) { | ||
if ('manager' in props) { | ||
const manager = { dragDropManager: props.manager }; | ||
return [manager, false]; | ||
const manager = { | ||
dragDropManager: props.manager | ||
}; | ||
return [ | ||
manager, | ||
false | ||
]; | ||
} | ||
const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode); | ||
const isGlobalInstance = !props.context; | ||
return [manager, isGlobalInstance]; | ||
return [ | ||
manager, | ||
isGlobalInstance | ||
]; | ||
} | ||
@@ -48,3 +89,3 @@ function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) { | ||
ctx[INSTANCE_SYM] = { | ||
dragDropManager: (0, dnd_core_1.createDragDropManager)(backend, context, options, debugMode), | ||
dragDropManager: (0, _dndCore).createDragDropManager(backend, context, options, debugMode) | ||
}; | ||
@@ -57,1 +98,3 @@ } | ||
} | ||
//# sourceMappingURL=DndProvider.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.DragPreviewImage = void 0; | ||
const react_1 = require("react"); | ||
/** | ||
* A utility for rendering a drag preview image | ||
*/ | ||
exports.DragPreviewImage = (0, react_1.memo)(function DragPreviewImage({ connect, src }) { | ||
(0, react_1.useEffect)(() => { | ||
if (typeof Image === 'undefined') | ||
return; | ||
var _react = require("react"); | ||
const DragPreviewImage = /*#__PURE__*/ (0, _react).memo(function DragPreviewImage({ connect , src }) { | ||
(0, _react).useEffect(()=>{ | ||
if (typeof Image === 'undefined') return; | ||
let connected = false; | ||
const img = new Image(); | ||
img.src = src; | ||
img.onload = () => { | ||
img.onload = ()=>{ | ||
connect(img); | ||
connected = true; | ||
}; | ||
return () => { | ||
return ()=>{ | ||
if (connected) { | ||
@@ -27,1 +25,4 @@ connect(null); | ||
}); | ||
exports.DragPreviewImage = DragPreviewImage; | ||
//# sourceMappingURL=DragPreviewImage.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./DndContext"), exports); | ||
__exportStar(require("./DndProvider"), exports); | ||
__exportStar(require("./DragPreviewImage"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _exportNames = {}; | ||
var _dndContext = _interopRequireWildcard(require("./DndContext")); | ||
Object.keys(_dndContext).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _dndContext[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _dndContext[key]; | ||
} | ||
}); | ||
}); | ||
var _dndProvider = _interopRequireWildcard(require("./DndProvider")); | ||
Object.keys(_dndProvider).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _dndProvider[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _dndProvider[key]; | ||
} | ||
}); | ||
}); | ||
var _dragPreviewImage = _interopRequireWildcard(require("./DragPreviewImage")); | ||
Object.keys(_dragPreviewImage).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _dragPreviewImage[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _dragPreviewImage[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./useDrag"), exports); | ||
__exportStar(require("./useDrop"), exports); | ||
__exportStar(require("./useDragLayer"), exports); | ||
__exportStar(require("./useDragDropManager"), exports); | ||
__exportStar(require("./types"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _exportNames = {}; | ||
var _useDrag = _interopRequireWildcard(require("./useDrag")); | ||
Object.keys(_useDrag).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _useDrag[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDrag[key]; | ||
} | ||
}); | ||
}); | ||
var _useDrop = _interopRequireWildcard(require("./useDrop")); | ||
Object.keys(_useDrop).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _useDrop[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDrop[key]; | ||
} | ||
}); | ||
}); | ||
var _useDragLayer = _interopRequireWildcard(require("./useDragLayer")); | ||
Object.keys(_useDragLayer).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _useDragLayer[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDragLayer[key]; | ||
} | ||
}); | ||
}); | ||
var _useDragDropManager = _interopRequireWildcard(require("./useDragDropManager")); | ||
Object.keys(_useDragDropManager).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _useDragDropManager[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDragDropManager[key]; | ||
} | ||
}); | ||
}); | ||
var _types = _interopRequireWildcard(require("./types")); | ||
Object.keys(_types).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _types[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _types[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
//# sourceMappingURL=types.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useCollectedProps = void 0; | ||
const useMonitorOutput_1 = require("./useMonitorOutput"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useCollectedProps = useCollectedProps; | ||
var _useMonitorOutput = require("./useMonitorOutput"); | ||
function useCollectedProps(collector, monitor, connector) { | ||
return (0, useMonitorOutput_1.useMonitorOutput)(monitor, collector || (() => ({})), () => connector.reconnect()); | ||
return (0, _useMonitorOutput).useMonitorOutput(monitor, collector || (()=>({}) | ||
), ()=>connector.reconnect() | ||
); | ||
} | ||
exports.useCollectedProps = useCollectedProps; | ||
//# sourceMappingURL=useCollectedProps.js.map |
"use strict"; | ||
var __importDefault = (this && this.__importDefault) || function (mod) { | ||
return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useCollector = void 0; | ||
const fast_deep_equal_1 = __importDefault(require("fast-deep-equal")); | ||
const react_1 = require("react"); | ||
const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect"); | ||
/** | ||
* | ||
* @param monitor The monitor to collect state from | ||
* @param collect The collecting function | ||
* @param onUpdate A method to invoke when updates occur | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useCollector = useCollector; | ||
var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal")); | ||
var _react = require("react"); | ||
var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect"); | ||
function _interopRequireDefault(obj) { | ||
return obj && obj.__esModule ? obj : { | ||
default: obj | ||
}; | ||
} | ||
function useCollector(monitor, collect, onUpdate) { | ||
const [collected, setCollected] = (0, react_1.useState)(() => collect(monitor)); | ||
const updateCollected = (0, react_1.useCallback)(() => { | ||
const [collected, setCollected] = (0, _react).useState(()=>collect(monitor) | ||
); | ||
const updateCollected = (0, _react).useCallback(()=>{ | ||
const nextValue = collect(monitor); | ||
// This needs to be a deep-equality check because some monitor-collected values | ||
// include XYCoord objects that may be equivalent, but do not have instance equality. | ||
if (!(0, fast_deep_equal_1.default)(collected, nextValue)) { | ||
if (!(0, _fastDeepEqual).default(collected, nextValue)) { | ||
setCollected(nextValue); | ||
@@ -28,9 +27,17 @@ if (onUpdate) { | ||
} | ||
}, [collected, monitor, onUpdate]); | ||
}, [ | ||
collected, | ||
monitor, | ||
onUpdate | ||
]); | ||
// update the collected properties after react renders. | ||
// Note that the "Dustbin Stress Test" fails if this is not | ||
// done when the component updates | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(updateCollected); | ||
return [collected, updateCollected]; | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(updateCollected); | ||
return [ | ||
collected, | ||
updateCollected | ||
]; | ||
} | ||
exports.useCollector = useCollector; | ||
//# sourceMappingURL=useCollector.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useConnectDragPreview = exports.useConnectDragSource = void 0; | ||
const react_1 = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useConnectDragSource = useConnectDragSource; | ||
exports.useConnectDragPreview = useConnectDragPreview; | ||
var _react = require("react"); | ||
function useConnectDragSource(connector) { | ||
return (0, react_1.useMemo)(() => connector.hooks.dragSource(), [connector]); | ||
return (0, _react).useMemo(()=>connector.hooks.dragSource() | ||
, [ | ||
connector | ||
]); | ||
} | ||
exports.useConnectDragSource = useConnectDragSource; | ||
function useConnectDragPreview(connector) { | ||
return (0, react_1.useMemo)(() => connector.hooks.dragPreview(), [connector]); | ||
return (0, _react).useMemo(()=>connector.hooks.dragPreview() | ||
, [ | ||
connector | ||
]); | ||
} | ||
exports.useConnectDragPreview = useConnectDragPreview; | ||
//# sourceMappingURL=connectors.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DragSourceImpl = void 0; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
class DragSourceImpl { | ||
spec; | ||
monitor; | ||
connector; | ||
constructor(spec, monitor, connector) { | ||
this.spec = spec; | ||
this.monitor = monitor; | ||
this.connector = connector; | ||
} | ||
beginDrag() { | ||
@@ -19,10 +12,8 @@ const spec = this.spec; | ||
result = spec.item; | ||
} | ||
else if (typeof spec.item === 'function') { | ||
} else if (typeof spec.item === 'function') { | ||
result = spec.item(monitor); | ||
} | ||
else { | ||
} else { | ||
result = {}; | ||
} | ||
return result ?? null; | ||
return result !== null && result !== void 0 ? result : null; | ||
} | ||
@@ -34,7 +25,5 @@ canDrag() { | ||
return spec.canDrag; | ||
} | ||
else if (typeof spec.canDrag === 'function') { | ||
} else if (typeof spec.canDrag === 'function') { | ||
return spec.canDrag(monitor); | ||
} | ||
else { | ||
} else { | ||
return true; | ||
@@ -46,6 +35,4 @@ } | ||
const monitor = this.monitor; | ||
const { isDragging } = spec; | ||
return isDragging | ||
? isDragging(monitor) | ||
: target === globalMonitor.getSourceId(); | ||
const { isDragging } = spec; | ||
return isDragging ? isDragging(monitor) : target === globalMonitor.getSourceId(); | ||
} | ||
@@ -56,3 +43,3 @@ endDrag() { | ||
const connector = this.connector; | ||
const { end } = spec; | ||
const { end } = spec; | ||
if (end) { | ||
@@ -63,3 +50,10 @@ end(monitor.getItem(), monitor); | ||
} | ||
constructor(spec, monitor, connector){ | ||
this.spec = spec; | ||
this.monitor = monitor; | ||
this.connector = connector; | ||
} | ||
} | ||
exports.DragSourceImpl = DragSourceImpl; | ||
//# sourceMappingURL=DragSourceImpl.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./useDrag"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _useDrag = _interopRequireWildcard(require("./useDrag")); | ||
Object.keys(_useDrag).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (key in exports && exports[key] === _useDrag[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDrag[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDrag = void 0; | ||
const useRegisteredDragSource_1 = require("./useRegisteredDragSource"); | ||
const useOptionalFactory_1 = require("../useOptionalFactory"); | ||
const useDragSourceMonitor_1 = require("./useDragSourceMonitor"); | ||
const useDragSourceConnector_1 = require("./useDragSourceConnector"); | ||
const useCollectedProps_1 = require("../useCollectedProps"); | ||
const connectors_1 = require("./connectors"); | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
/** | ||
* useDragSource hook | ||
* @param sourceSpec The drag source specification (object or function, function preferred) | ||
* @param deps The memoization deps array to use when evaluating spec changes | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDrag = useDrag; | ||
var _useRegisteredDragSource = require("./useRegisteredDragSource"); | ||
var _useOptionalFactory = require("../useOptionalFactory"); | ||
var _useDragSourceMonitor = require("./useDragSourceMonitor"); | ||
var _useDragSourceConnector = require("./useDragSourceConnector"); | ||
var _useCollectedProps = require("../useCollectedProps"); | ||
var _connectors = require("./connectors"); | ||
var _invariant = require("@react-dnd/invariant"); | ||
function useDrag(specArg, deps) { | ||
const spec = (0, useOptionalFactory_1.useOptionalFactory)(specArg, deps); | ||
(0, invariant_1.invariant)(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`); | ||
const monitor = (0, useDragSourceMonitor_1.useDragSourceMonitor)(); | ||
const connector = (0, useDragSourceConnector_1.useDragSourceConnector)(spec.options, spec.previewOptions); | ||
(0, useRegisteredDragSource_1.useRegisteredDragSource)(spec, monitor, connector); | ||
const spec = (0, _useOptionalFactory).useOptionalFactory(specArg, deps); | ||
(0, _invariant).invariant(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`); | ||
const monitor = (0, _useDragSourceMonitor).useDragSourceMonitor(); | ||
const connector = (0, _useDragSourceConnector).useDragSourceConnector(spec.options, spec.previewOptions); | ||
(0, _useRegisteredDragSource).useRegisteredDragSource(spec, monitor, connector); | ||
return [ | ||
(0, useCollectedProps_1.useCollectedProps)(spec.collect, monitor, connector), | ||
(0, connectors_1.useConnectDragSource)(connector), | ||
(0, connectors_1.useConnectDragPreview)(connector), | ||
(0, _useCollectedProps).useCollectedProps(spec.collect, monitor, connector), | ||
(0, _connectors).useConnectDragSource(connector), | ||
(0, _connectors).useConnectDragPreview(connector), | ||
]; | ||
} | ||
exports.useDrag = useDrag; | ||
//# sourceMappingURL=useDrag.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragSource = void 0; | ||
const react_1 = require("react"); | ||
const DragSourceImpl_1 = require("./DragSourceImpl"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragSource = useDragSource; | ||
var _react = require("react"); | ||
var _dragSourceImpl = require("./DragSourceImpl"); | ||
function useDragSource(spec, monitor, connector) { | ||
const handler = (0, react_1.useMemo)(() => new DragSourceImpl_1.DragSourceImpl(spec, monitor, connector), [monitor, connector]); | ||
(0, react_1.useEffect)(() => { | ||
const handler = (0, _react).useMemo(()=>new _dragSourceImpl.DragSourceImpl(spec, monitor, connector) | ||
, [ | ||
monitor, | ||
connector | ||
]); | ||
(0, _react).useEffect(()=>{ | ||
handler.spec = spec; | ||
}, [spec]); | ||
}, [ | ||
spec | ||
]); | ||
return handler; | ||
} | ||
exports.useDragSource = useDragSource; | ||
//# sourceMappingURL=useDragSource.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragSourceConnector = void 0; | ||
const react_1 = require("react"); | ||
const internals_1 = require("../../internals"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
const useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragSourceConnector = useDragSourceConnector; | ||
var _react = require("react"); | ||
var _internals = require("../../internals"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
var _useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect"); | ||
function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
const connector = (0, react_1.useMemo)(() => new internals_1.SourceConnector(manager.getBackend()), [manager]); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => { | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
const connector = (0, _react).useMemo(()=>new _internals.SourceConnector(manager.getBackend()) | ||
, [ | ||
manager | ||
]); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(()=>{ | ||
connector.dragSourceOptions = dragSourceOptions || null; | ||
connector.reconnect(); | ||
return () => connector.disconnectDragSource(); | ||
}, [connector, dragSourceOptions]); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => { | ||
return ()=>connector.disconnectDragSource() | ||
; | ||
}, [ | ||
connector, | ||
dragSourceOptions | ||
]); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(()=>{ | ||
connector.dragPreviewOptions = dragPreviewOptions || null; | ||
connector.reconnect(); | ||
return () => connector.disconnectDragPreview(); | ||
}, [connector, dragPreviewOptions]); | ||
return ()=>connector.disconnectDragPreview() | ||
; | ||
}, [ | ||
connector, | ||
dragPreviewOptions | ||
]); | ||
return connector; | ||
} | ||
exports.useDragSourceConnector = useDragSourceConnector; | ||
//# sourceMappingURL=useDragSourceConnector.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragSourceMonitor = void 0; | ||
const react_1 = require("react"); | ||
const internals_1 = require("../../internals"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragSourceMonitor = useDragSourceMonitor; | ||
var _react = require("react"); | ||
var _internals = require("../../internals"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
function useDragSourceMonitor() { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
return (0, react_1.useMemo)(() => new internals_1.DragSourceMonitorImpl(manager), [manager]); | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
return (0, _react).useMemo(()=>new _internals.DragSourceMonitorImpl(manager) | ||
, [ | ||
manager | ||
]); | ||
} | ||
exports.useDragSourceMonitor = useDragSourceMonitor; | ||
//# sourceMappingURL=useDragSourceMonitor.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragType = void 0; | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
const react_1 = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragType = useDragType; | ||
var _invariant = require("@react-dnd/invariant"); | ||
var _react = require("react"); | ||
function useDragType(spec) { | ||
return (0, react_1.useMemo)(() => { | ||
return (0, _react).useMemo(()=>{ | ||
const result = spec.type; | ||
(0, invariant_1.invariant)(result != null, 'spec.type must be defined'); | ||
(0, _invariant).invariant(result != null, 'spec.type must be defined'); | ||
return result; | ||
}, [spec]); | ||
}, [ | ||
spec | ||
]); | ||
} | ||
exports.useDragType = useDragType; | ||
//# sourceMappingURL=useDragType.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useRegisteredDragSource = void 0; | ||
const internals_1 = require("../../internals"); | ||
const useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect"); | ||
const useDragSource_1 = require("./useDragSource"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
const useDragType_1 = require("./useDragType"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useRegisteredDragSource = useRegisteredDragSource; | ||
var _internals = require("../../internals"); | ||
var _useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect"); | ||
var _useDragSource = require("./useDragSource"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
var _useDragType = require("./useDragType"); | ||
function useRegisteredDragSource(spec, monitor, connector) { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
const handler = (0, useDragSource_1.useDragSource)(spec, monitor, connector); | ||
const itemType = (0, useDragType_1.useDragType)(spec); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function registerDragSource() { | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
const handler = (0, _useDragSource).useDragSource(spec, monitor, connector); | ||
const itemType = (0, _useDragType).useDragType(spec); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(function registerDragSource() { | ||
if (itemType != null) { | ||
const [handlerId, unregister] = (0, internals_1.registerSource)(itemType, handler, manager); | ||
const [handlerId, unregister] = (0, _internals).registerSource(itemType, handler, manager); | ||
monitor.receiveHandlerId(handlerId); | ||
@@ -21,4 +23,11 @@ connector.receiveHandlerId(handlerId); | ||
return; | ||
}, [manager, monitor, connector, handler, itemType]); | ||
}, [ | ||
manager, | ||
monitor, | ||
connector, | ||
handler, | ||
itemType | ||
]); | ||
} | ||
exports.useRegisteredDragSource = useRegisteredDragSource; | ||
//# sourceMappingURL=useRegisteredDragSource.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragDropManager = void 0; | ||
const react_1 = require("react"); | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
const core_1 = require("../core"); | ||
/** | ||
* A hook to retrieve the DragDropManager from Context | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragDropManager = useDragDropManager; | ||
var _react = require("react"); | ||
var _invariant = require("@react-dnd/invariant"); | ||
var _core = require("../core"); | ||
function useDragDropManager() { | ||
const { dragDropManager } = (0, react_1.useContext)(core_1.DndContext); | ||
(0, invariant_1.invariant)(dragDropManager != null, 'Expected drag drop context'); | ||
const { dragDropManager } = (0, _react).useContext(_core.DndContext); | ||
(0, _invariant).invariant(dragDropManager != null, 'Expected drag drop context'); | ||
return dragDropManager; | ||
} | ||
exports.useDragDropManager = useDragDropManager; | ||
//# sourceMappingURL=useDragDropManager.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDragLayer = void 0; | ||
const react_1 = require("react"); | ||
const useDragDropManager_1 = require("./useDragDropManager"); | ||
const useCollector_1 = require("./useCollector"); | ||
/** | ||
* useDragLayer Hook | ||
* @param collector The property collector | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDragLayer = useDragLayer; | ||
var _react = require("react"); | ||
var _useDragDropManager = require("./useDragDropManager"); | ||
var _useCollector = require("./useCollector"); | ||
function useDragLayer(collect) { | ||
const dragDropManager = (0, useDragDropManager_1.useDragDropManager)(); | ||
const dragDropManager = (0, _useDragDropManager).useDragDropManager(); | ||
const monitor = dragDropManager.getMonitor(); | ||
const [collected, updateCollected] = (0, useCollector_1.useCollector)(monitor, collect); | ||
(0, react_1.useEffect)(() => monitor.subscribeToOffsetChange(updateCollected)); | ||
(0, react_1.useEffect)(() => monitor.subscribeToStateChange(updateCollected)); | ||
const [collected, updateCollected] = (0, _useCollector).useCollector(monitor, collect); | ||
(0, _react).useEffect(()=>monitor.subscribeToOffsetChange(updateCollected) | ||
); | ||
(0, _react).useEffect(()=>monitor.subscribeToStateChange(updateCollected) | ||
); | ||
return collected; | ||
} | ||
exports.useDragLayer = useDragLayer; | ||
//# sourceMappingURL=useDragLayer.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useConnectDropTarget = void 0; | ||
const react_1 = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useConnectDropTarget = useConnectDropTarget; | ||
var _react = require("react"); | ||
function useConnectDropTarget(connector) { | ||
return (0, react_1.useMemo)(() => connector.hooks.dropTarget(), [connector]); | ||
return (0, _react).useMemo(()=>connector.hooks.dropTarget() | ||
, [ | ||
connector | ||
]); | ||
} | ||
exports.useConnectDropTarget = useConnectDropTarget; | ||
//# sourceMappingURL=connectors.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DropTargetImpl = void 0; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
class DropTargetImpl { | ||
spec; | ||
monitor; | ||
constructor(spec, monitor) { | ||
this.spec = spec; | ||
this.monitor = monitor; | ||
} | ||
canDrop() { | ||
@@ -31,3 +26,9 @@ const spec = this.spec; | ||
} | ||
constructor(spec, monitor){ | ||
this.spec = spec; | ||
this.monitor = monitor; | ||
} | ||
} | ||
exports.DropTargetImpl = DropTargetImpl; | ||
//# sourceMappingURL=DropTargetImpl.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./useDrop"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _useDrop = _interopRequireWildcard(require("./useDrop")); | ||
Object.keys(_useDrop).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (key in exports && exports[key] === _useDrop[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _useDrop[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useAccept = void 0; | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
const react_1 = require("react"); | ||
/** | ||
* Internal utility hook to get an array-version of spec.accept. | ||
* The main utility here is that we aren't creating a new array on every render if a non-array spec.accept is passed in. | ||
* @param spec | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useAccept = useAccept; | ||
var _invariant = require("@react-dnd/invariant"); | ||
var _react = require("react"); | ||
function useAccept(spec) { | ||
const { accept } = spec; | ||
return (0, react_1.useMemo)(() => { | ||
(0, invariant_1.invariant)(spec.accept != null, 'accept must be defined'); | ||
return Array.isArray(accept) ? accept : [accept]; | ||
}, [accept]); | ||
const { accept } = spec; | ||
return (0, _react).useMemo(()=>{ | ||
(0, _invariant).invariant(spec.accept != null, 'accept must be defined'); | ||
return Array.isArray(accept) ? accept : [ | ||
accept | ||
]; | ||
}, [ | ||
accept | ||
]); | ||
} | ||
exports.useAccept = useAccept; | ||
//# sourceMappingURL=useAccept.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDrop = void 0; | ||
const useRegisteredDropTarget_1 = require("./useRegisteredDropTarget"); | ||
const useOptionalFactory_1 = require("../useOptionalFactory"); | ||
const useDropTargetMonitor_1 = require("./useDropTargetMonitor"); | ||
const useDropTargetConnector_1 = require("./useDropTargetConnector"); | ||
const useCollectedProps_1 = require("../useCollectedProps"); | ||
const connectors_1 = require("./connectors"); | ||
/** | ||
* useDropTarget Hook | ||
* @param spec The drop target specification (object or function, function preferred) | ||
* @param deps The memoization deps array to use when evaluating spec changes | ||
*/ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDrop = useDrop; | ||
var _useRegisteredDropTarget = require("./useRegisteredDropTarget"); | ||
var _useOptionalFactory = require("../useOptionalFactory"); | ||
var _useDropTargetMonitor = require("./useDropTargetMonitor"); | ||
var _useDropTargetConnector = require("./useDropTargetConnector"); | ||
var _useCollectedProps = require("../useCollectedProps"); | ||
var _connectors = require("./connectors"); | ||
function useDrop(specArg, deps) { | ||
const spec = (0, useOptionalFactory_1.useOptionalFactory)(specArg, deps); | ||
const monitor = (0, useDropTargetMonitor_1.useDropTargetMonitor)(); | ||
const connector = (0, useDropTargetConnector_1.useDropTargetConnector)(spec.options); | ||
(0, useRegisteredDropTarget_1.useRegisteredDropTarget)(spec, monitor, connector); | ||
const spec = (0, _useOptionalFactory).useOptionalFactory(specArg, deps); | ||
const monitor = (0, _useDropTargetMonitor).useDropTargetMonitor(); | ||
const connector = (0, _useDropTargetConnector).useDropTargetConnector(spec.options); | ||
(0, _useRegisteredDropTarget).useRegisteredDropTarget(spec, monitor, connector); | ||
return [ | ||
(0, useCollectedProps_1.useCollectedProps)(spec.collect, monitor, connector), | ||
(0, connectors_1.useConnectDropTarget)(connector), | ||
(0, _useCollectedProps).useCollectedProps(spec.collect, monitor, connector), | ||
(0, _connectors).useConnectDropTarget(connector), | ||
]; | ||
} | ||
exports.useDrop = useDrop; | ||
//# sourceMappingURL=useDrop.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDropTarget = void 0; | ||
const react_1 = require("react"); | ||
const DropTargetImpl_1 = require("./DropTargetImpl"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDropTarget = useDropTarget; | ||
var _react = require("react"); | ||
var _dropTargetImpl = require("./DropTargetImpl"); | ||
function useDropTarget(spec, monitor) { | ||
const dropTarget = (0, react_1.useMemo)(() => new DropTargetImpl_1.DropTargetImpl(spec, monitor), [monitor]); | ||
(0, react_1.useEffect)(() => { | ||
const dropTarget = (0, _react).useMemo(()=>new _dropTargetImpl.DropTargetImpl(spec, monitor) | ||
, [ | ||
monitor | ||
]); | ||
(0, _react).useEffect(()=>{ | ||
dropTarget.spec = spec; | ||
}, [spec]); | ||
}, [ | ||
spec | ||
]); | ||
return dropTarget; | ||
} | ||
exports.useDropTarget = useDropTarget; | ||
//# sourceMappingURL=useDropTarget.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDropTargetConnector = void 0; | ||
const react_1 = require("react"); | ||
const internals_1 = require("../../internals"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
const useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDropTargetConnector = useDropTargetConnector; | ||
var _react = require("react"); | ||
var _internals = require("../../internals"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
var _useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect"); | ||
function useDropTargetConnector(options) { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
const connector = (0, react_1.useMemo)(() => new internals_1.TargetConnector(manager.getBackend()), [manager]); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => { | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
const connector = (0, _react).useMemo(()=>new _internals.TargetConnector(manager.getBackend()) | ||
, [ | ||
manager | ||
]); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(()=>{ | ||
connector.dropTargetOptions = options || null; | ||
connector.reconnect(); | ||
return () => connector.disconnectDropTarget(); | ||
}, [options]); | ||
return ()=>connector.disconnectDropTarget() | ||
; | ||
}, [ | ||
options | ||
]); | ||
return connector; | ||
} | ||
exports.useDropTargetConnector = useDropTargetConnector; | ||
//# sourceMappingURL=useDropTargetConnector.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useDropTargetMonitor = void 0; | ||
const react_1 = require("react"); | ||
const internals_1 = require("../../internals"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useDropTargetMonitor = useDropTargetMonitor; | ||
var _react = require("react"); | ||
var _internals = require("../../internals"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
function useDropTargetMonitor() { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
return (0, react_1.useMemo)(() => new internals_1.DropTargetMonitorImpl(manager), [manager]); | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
return (0, _react).useMemo(()=>new _internals.DropTargetMonitorImpl(manager) | ||
, [ | ||
manager | ||
]); | ||
} | ||
exports.useDropTargetMonitor = useDropTargetMonitor; | ||
//# sourceMappingURL=useDropTargetMonitor.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useRegisteredDropTarget = void 0; | ||
const internals_1 = require("../../internals"); | ||
const useDragDropManager_1 = require("../useDragDropManager"); | ||
const useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect"); | ||
const useAccept_1 = require("./useAccept"); | ||
const useDropTarget_1 = require("./useDropTarget"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useRegisteredDropTarget = useRegisteredDropTarget; | ||
var _internals = require("../../internals"); | ||
var _useDragDropManager = require("../useDragDropManager"); | ||
var _useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect"); | ||
var _useAccept = require("./useAccept"); | ||
var _useDropTarget = require("./useDropTarget"); | ||
function useRegisteredDropTarget(spec, monitor, connector) { | ||
const manager = (0, useDragDropManager_1.useDragDropManager)(); | ||
const dropTarget = (0, useDropTarget_1.useDropTarget)(spec, monitor); | ||
const accept = (0, useAccept_1.useAccept)(spec); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function registerDropTarget() { | ||
const [handlerId, unregister] = (0, internals_1.registerTarget)(accept, dropTarget, manager); | ||
const manager = (0, _useDragDropManager).useDragDropManager(); | ||
const dropTarget = (0, _useDropTarget).useDropTarget(spec, monitor); | ||
const accept = (0, _useAccept).useAccept(spec); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(function registerDropTarget() { | ||
const [handlerId, unregister] = (0, _internals).registerTarget(accept, dropTarget, manager); | ||
monitor.receiveHandlerId(handlerId); | ||
@@ -23,5 +25,7 @@ connector.receiveHandlerId(handlerId); | ||
connector, | ||
accept.map((a) => a.toString()).join('|'), | ||
accept.map((a)=>a.toString() | ||
).join('|'), | ||
]); | ||
} | ||
exports.useRegisteredDropTarget = useRegisteredDropTarget; | ||
//# sourceMappingURL=useRegisteredDropTarget.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useIsomorphicLayoutEffect = void 0; | ||
const react_1 = require("react"); | ||
// suppress the useLayoutEffect warning on server side. | ||
exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect; | ||
var _react = require("react"); | ||
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect; | ||
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect; | ||
//# sourceMappingURL=useIsomorphicLayoutEffect.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useMonitorOutput = void 0; | ||
const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect"); | ||
const useCollector_1 = require("./useCollector"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useMonitorOutput = useMonitorOutput; | ||
var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect"); | ||
var _useCollector = require("./useCollector"); | ||
function useMonitorOutput(monitor, collect, onCollect) { | ||
const [collected, updateCollected] = (0, useCollector_1.useCollector)(monitor, collect, onCollect); | ||
(0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function subscribeToMonitorStateChange() { | ||
const [collected, updateCollected] = (0, _useCollector).useCollector(monitor, collect, onCollect); | ||
(0, _useIsomorphicLayoutEffect).useIsomorphicLayoutEffect(function subscribeToMonitorStateChange() { | ||
const handlerId = monitor.getHandlerId(); | ||
@@ -14,7 +16,13 @@ if (handlerId == null) { | ||
return monitor.subscribeToStateChange(updateCollected, { | ||
handlerIds: [handlerId], | ||
handlerIds: [ | ||
handlerId | ||
] | ||
}); | ||
}, [monitor, updateCollected]); | ||
}, [ | ||
monitor, | ||
updateCollected | ||
]); | ||
return collected; | ||
} | ||
exports.useMonitorOutput = useMonitorOutput; | ||
//# sourceMappingURL=useMonitorOutput.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.useOptionalFactory = void 0; | ||
const react_1 = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.useOptionalFactory = useOptionalFactory; | ||
var _react = require("react"); | ||
function useOptionalFactory(arg, deps) { | ||
const memoDeps = [...(deps || [])]; | ||
const memoDeps = [ | ||
...deps || [] | ||
]; | ||
if (deps == null && typeof arg !== 'function') { | ||
memoDeps.push(arg); | ||
} | ||
return (0, react_1.useMemo)(() => { | ||
return (0, _react).useMemo(()=>{ | ||
return typeof arg === 'function' ? arg() : arg; | ||
}, memoDeps); | ||
} | ||
exports.useOptionalFactory = useOptionalFactory; | ||
//# sourceMappingURL=useOptionalFactory.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./types"), exports); | ||
__exportStar(require("./core"), exports); | ||
__exportStar(require("./hooks"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _exportNames = {}; | ||
var _types = _interopRequireWildcard(require("./types")); | ||
Object.keys(_types).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _types[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _types[key]; | ||
} | ||
}); | ||
}); | ||
var _core = _interopRequireWildcard(require("./core")); | ||
Object.keys(_core).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _core[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _core[key]; | ||
} | ||
}); | ||
}); | ||
var _hooks = _interopRequireWildcard(require("./hooks")); | ||
Object.keys(_hooks).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _hooks[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _hooks[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DragSourceMonitorImpl = void 0; | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _invariant = require("@react-dnd/invariant"); | ||
let isCallingCanDrag = false; | ||
let isCallingIsDragging = false; | ||
class DragSourceMonitorImpl { | ||
internalMonitor; | ||
sourceId = null; | ||
constructor(manager) { | ||
this.internalMonitor = manager.getMonitor(); | ||
} | ||
receiveHandlerId(sourceId) { | ||
@@ -20,9 +16,7 @@ this.sourceId = sourceId; | ||
canDrag() { | ||
(0, invariant_1.invariant)(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + | ||
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor'); | ||
(0, _invariant).invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor'); | ||
try { | ||
isCallingCanDrag = true; | ||
return this.internalMonitor.canDragSource(this.sourceId); | ||
} | ||
finally { | ||
} finally{ | ||
isCallingCanDrag = false; | ||
@@ -35,9 +29,7 @@ } | ||
} | ||
(0, invariant_1.invariant)(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + | ||
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor'); | ||
(0, _invariant).invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor'); | ||
try { | ||
isCallingIsDragging = true; | ||
return this.internalMonitor.isDraggingSource(this.sourceId); | ||
} | ||
finally { | ||
} finally{ | ||
isCallingIsDragging = false; | ||
@@ -100,3 +92,9 @@ } | ||
} | ||
constructor(manager){ | ||
this.sourceId = null; | ||
this.internalMonitor = manager.getMonitor(); | ||
} | ||
} | ||
exports.DragSourceMonitorImpl = DragSourceMonitorImpl; | ||
//# sourceMappingURL=DragSourceMonitorImpl.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.DropTargetMonitorImpl = void 0; | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _invariant = require("@react-dnd/invariant"); | ||
let isCallingCanDrop = false; | ||
class DropTargetMonitorImpl { | ||
internalMonitor; | ||
targetId = null; | ||
constructor(manager) { | ||
this.internalMonitor = manager.getMonitor(); | ||
} | ||
receiveHandlerId(targetId) { | ||
@@ -28,9 +24,7 @@ this.targetId = targetId; | ||
} | ||
(0, invariant_1.invariant)(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + | ||
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor'); | ||
(0, _invariant).invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor'); | ||
try { | ||
isCallingCanDrop = true; | ||
return this.internalMonitor.canDropOnTarget(this.targetId); | ||
} | ||
finally { | ||
} finally{ | ||
isCallingCanDrop = false; | ||
@@ -72,3 +66,9 @@ } | ||
} | ||
constructor(manager){ | ||
this.targetId = null; | ||
this.internalMonitor = manager.getMonitor(); | ||
} | ||
} | ||
exports.DropTargetMonitorImpl = DropTargetMonitorImpl; | ||
//# sourceMappingURL=DropTargetMonitorImpl.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./DragSourceMonitorImpl"), exports); | ||
__exportStar(require("./DropTargetMonitorImpl"), exports); | ||
__exportStar(require("./SourceConnector"), exports); | ||
__exportStar(require("./TargetConnector"), exports); | ||
__exportStar(require("./registration"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _exportNames = {}; | ||
var _dragSourceMonitorImpl = _interopRequireWildcard(require("./DragSourceMonitorImpl")); | ||
Object.keys(_dragSourceMonitorImpl).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _dragSourceMonitorImpl[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _dragSourceMonitorImpl[key]; | ||
} | ||
}); | ||
}); | ||
var _dropTargetMonitorImpl = _interopRequireWildcard(require("./DropTargetMonitorImpl")); | ||
Object.keys(_dropTargetMonitorImpl).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _dropTargetMonitorImpl[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _dropTargetMonitorImpl[key]; | ||
} | ||
}); | ||
}); | ||
var _sourceConnector = _interopRequireWildcard(require("./SourceConnector")); | ||
Object.keys(_sourceConnector).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _sourceConnector[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _sourceConnector[key]; | ||
} | ||
}); | ||
}); | ||
var _targetConnector = _interopRequireWildcard(require("./TargetConnector")); | ||
Object.keys(_targetConnector).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _targetConnector[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _targetConnector[key]; | ||
} | ||
}); | ||
}); | ||
var _registration = _interopRequireWildcard(require("./registration")); | ||
Object.keys(_registration).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _registration[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _registration[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.isRef = void 0; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.isRef = isRef; | ||
function isRef(obj) { | ||
return ( | ||
// eslint-disable-next-line no-prototype-builtins | ||
obj !== null && | ||
typeof obj === 'object' && | ||
Object.prototype.hasOwnProperty.call(obj, 'current')); | ||
return(// eslint-disable-next-line no-prototype-builtins | ||
obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current')); | ||
} | ||
exports.isRef = isRef; | ||
//# sourceMappingURL=isRef.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.registerSource = exports.registerTarget = void 0; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.registerTarget = registerTarget; | ||
exports.registerSource = registerSource; | ||
function registerTarget(type, target, manager) { | ||
const registry = manager.getRegistry(); | ||
const targetId = registry.addTarget(type, target); | ||
return [targetId, () => registry.removeTarget(targetId)]; | ||
return [ | ||
targetId, | ||
()=>registry.removeTarget(targetId) | ||
]; | ||
} | ||
exports.registerTarget = registerTarget; | ||
function registerSource(type, source, manager) { | ||
const registry = manager.getRegistry(); | ||
const sourceId = registry.addSource(type, source); | ||
return [sourceId, () => registry.removeSource(sourceId)]; | ||
return [ | ||
sourceId, | ||
()=>registry.removeSource(sourceId) | ||
]; | ||
} | ||
exports.registerSource = registerSource; | ||
//# sourceMappingURL=registration.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.SourceConnector = void 0; | ||
const wrapConnectorHooks_1 = require("./wrapConnectorHooks"); | ||
const isRef_1 = require("./isRef"); | ||
const shallowequal_1 = require("@react-dnd/shallowequal"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _wrapConnectorHooks = require("./wrapConnectorHooks"); | ||
var _isRef = require("./isRef"); | ||
var _shallowequal = require("@react-dnd/shallowequal"); | ||
class SourceConnector { | ||
hooks = (0, wrapConnectorHooks_1.wrapConnectorHooks)({ | ||
dragSource: (node, options) => { | ||
this.clearDragSource(); | ||
this.dragSourceOptions = options || null; | ||
if ((0, isRef_1.isRef)(node)) { | ||
this.dragSourceRef = node; | ||
} | ||
else { | ||
this.dragSourceNode = node; | ||
} | ||
this.reconnectDragSource(); | ||
}, | ||
dragPreview: (node, options) => { | ||
this.clearDragPreview(); | ||
this.dragPreviewOptions = options || null; | ||
if ((0, isRef_1.isRef)(node)) { | ||
this.dragPreviewRef = node; | ||
} | ||
else { | ||
this.dragPreviewNode = node; | ||
} | ||
this.reconnectDragPreview(); | ||
}, | ||
}); | ||
handlerId = null; | ||
// The drop target may either be attached via ref or connect function | ||
dragSourceRef = null; | ||
dragSourceNode; | ||
dragSourceOptionsInternal = null; | ||
dragSourceUnsubscribe; | ||
// The drag preview may either be attached via ref or connect function | ||
dragPreviewRef = null; | ||
dragPreviewNode; | ||
dragPreviewOptionsInternal = null; | ||
dragPreviewUnsubscribe; | ||
lastConnectedHandlerId = null; | ||
lastConnectedDragSource = null; | ||
lastConnectedDragSourceOptions = null; | ||
lastConnectedDragPreview = null; | ||
lastConnectedDragPreviewOptions = null; | ||
backend; | ||
constructor(backend) { | ||
this.backend = backend; | ||
} | ||
receiveHandlerId(newHandlerId) { | ||
@@ -81,5 +38,3 @@ if (this.handlerId === newHandlerId) { | ||
// if nothing has changed then don't resubscribe | ||
const didChange = this.didHandlerIdChange() || | ||
this.didConnectedDragSourceChange() || | ||
this.didDragSourceOptionsChange(); | ||
const didChange = this.didHandlerIdChange() || this.didConnectedDragSourceChange() || this.didDragSourceOptionsChange(); | ||
if (didChange) { | ||
@@ -106,6 +61,3 @@ this.disconnectDragSource(); | ||
// if nothing has changed then don't resubscribe | ||
const didChange = forceDidChange || | ||
this.didHandlerIdChange() || | ||
this.didConnectedDragPreviewChange() || | ||
this.didDragPreviewOptionsChange(); | ||
const didChange = forceDidChange || this.didHandlerIdChange() || this.didConnectedDragPreviewChange() || this.didDragPreviewOptionsChange(); | ||
if (didChange) { | ||
@@ -138,6 +90,6 @@ this.disconnectDragPreview(); | ||
didDragSourceOptionsChange() { | ||
return !(0, shallowequal_1.shallowEqual)(this.lastConnectedDragSourceOptions, this.dragSourceOptions); | ||
return !(0, _shallowequal).shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions); | ||
} | ||
didDragPreviewOptionsChange() { | ||
return !(0, shallowequal_1.shallowEqual)(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions); | ||
return !(0, _shallowequal).shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions); | ||
} | ||
@@ -159,7 +111,6 @@ disconnectDragSource() { | ||
get dragSource() { | ||
return (this.dragSourceNode || (this.dragSourceRef && this.dragSourceRef.current)); | ||
return this.dragSourceNode || this.dragSourceRef && this.dragSourceRef.current; | ||
} | ||
get dragPreview() { | ||
return (this.dragPreviewNode || | ||
(this.dragPreviewRef && this.dragPreviewRef.current)); | ||
return this.dragPreviewNode || this.dragPreviewRef && this.dragPreviewRef.current; | ||
} | ||
@@ -174,3 +125,42 @@ clearDragSource() { | ||
} | ||
constructor(backend){ | ||
this.hooks = (0, _wrapConnectorHooks).wrapConnectorHooks({ | ||
dragSource: (node, options)=>{ | ||
this.clearDragSource(); | ||
this.dragSourceOptions = options || null; | ||
if ((0, _isRef).isRef(node)) { | ||
this.dragSourceRef = node; | ||
} else { | ||
this.dragSourceNode = node; | ||
} | ||
this.reconnectDragSource(); | ||
}, | ||
dragPreview: (node, options)=>{ | ||
this.clearDragPreview(); | ||
this.dragPreviewOptions = options || null; | ||
if ((0, _isRef).isRef(node)) { | ||
this.dragPreviewRef = node; | ||
} else { | ||
this.dragPreviewNode = node; | ||
} | ||
this.reconnectDragPreview(); | ||
} | ||
}); | ||
this.handlerId = null; | ||
// The drop target may either be attached via ref or connect function | ||
this.dragSourceRef = null; | ||
this.dragSourceOptionsInternal = null; | ||
// The drag preview may either be attached via ref or connect function | ||
this.dragPreviewRef = null; | ||
this.dragPreviewOptionsInternal = null; | ||
this.lastConnectedHandlerId = null; | ||
this.lastConnectedDragSource = null; | ||
this.lastConnectedDragSourceOptions = null; | ||
this.lastConnectedDragPreview = null; | ||
this.lastConnectedDragPreviewOptions = null; | ||
this.backend = backend; | ||
} | ||
} | ||
exports.SourceConnector = SourceConnector; | ||
//# sourceMappingURL=SourceConnector.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.TargetConnector = void 0; | ||
const shallowequal_1 = require("@react-dnd/shallowequal"); | ||
const wrapConnectorHooks_1 = require("./wrapConnectorHooks"); | ||
const isRef_1 = require("./isRef"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _shallowequal = require("@react-dnd/shallowequal"); | ||
var _wrapConnectorHooks = require("./wrapConnectorHooks"); | ||
var _isRef = require("./isRef"); | ||
class TargetConnector { | ||
hooks = (0, wrapConnectorHooks_1.wrapConnectorHooks)({ | ||
dropTarget: (node, options) => { | ||
this.clearDropTarget(); | ||
this.dropTargetOptions = options; | ||
if ((0, isRef_1.isRef)(node)) { | ||
this.dropTargetRef = node; | ||
} | ||
else { | ||
this.dropTargetNode = node; | ||
} | ||
this.reconnect(); | ||
}, | ||
}); | ||
handlerId = null; | ||
// The drop target may either be attached via ref or connect function | ||
dropTargetRef = null; | ||
dropTargetNode; | ||
dropTargetOptionsInternal = null; | ||
unsubscribeDropTarget; | ||
lastConnectedHandlerId = null; | ||
lastConnectedDropTarget = null; | ||
lastConnectedDropTargetOptions = null; | ||
backend; | ||
constructor(backend) { | ||
this.backend = backend; | ||
} | ||
get connectTarget() { | ||
@@ -39,5 +14,3 @@ return this.dropTarget; | ||
// if nothing has changed then don't resubscribe | ||
const didChange = this.didHandlerIdChange() || | ||
this.didDropTargetChange() || | ||
this.didOptionsChange(); | ||
const didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange(); | ||
if (didChange) { | ||
@@ -81,3 +54,3 @@ this.disconnectDropTarget(); | ||
didOptionsChange() { | ||
return !(0, shallowequal_1.shallowEqual)(this.lastConnectedDropTargetOptions, this.dropTargetOptions); | ||
return !(0, _shallowequal).shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions); | ||
} | ||
@@ -91,3 +64,3 @@ disconnectDropTarget() { | ||
get dropTarget() { | ||
return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current)); | ||
return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.current; | ||
} | ||
@@ -98,3 +71,27 @@ clearDropTarget() { | ||
} | ||
constructor(backend){ | ||
this.hooks = (0, _wrapConnectorHooks).wrapConnectorHooks({ | ||
dropTarget: (node, options)=>{ | ||
this.clearDropTarget(); | ||
this.dropTargetOptions = options; | ||
if ((0, _isRef).isRef(node)) { | ||
this.dropTargetRef = node; | ||
} else { | ||
this.dropTargetNode = node; | ||
} | ||
this.reconnect(); | ||
} | ||
}); | ||
this.handlerId = null; | ||
// The drop target may either be attached via ref or connect function | ||
this.dropTargetRef = null; | ||
this.dropTargetOptionsInternal = null; | ||
this.lastConnectedHandlerId = null; | ||
this.lastConnectedDropTarget = null; | ||
this.lastConnectedDropTargetOptions = null; | ||
this.backend = backend; | ||
} | ||
} | ||
exports.TargetConnector = TargetConnector; | ||
//# sourceMappingURL=TargetConnector.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.wrapConnectorHooks = void 0; | ||
const invariant_1 = require("@react-dnd/invariant"); | ||
const react_1 = require("react"); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.wrapConnectorHooks = wrapConnectorHooks; | ||
var _invariant = require("@react-dnd/invariant"); | ||
var _react = require("react"); | ||
function throwIfCompositeComponentElement(element) { | ||
@@ -13,10 +15,8 @@ // Custom components can no longer be wrapped directly in React DnD 2.0 | ||
const displayName = element.type.displayName || element.type.name || 'the component'; | ||
throw new Error('Only native element nodes can now be passed to React DnD connectors.' + | ||
`You can either wrap ${displayName} into a <div>, or turn it into a ` + | ||
'drag source or a drop target itself.'); | ||
throw new Error('Only native element nodes can now be passed to React DnD connectors.' + `You can either wrap ${displayName} into a <div>, or turn it into a ` + 'drag source or a drop target itself.'); | ||
} | ||
function wrapHookToRecognizeElement(hook) { | ||
return (elementOrNode = null, options = null) => { | ||
return (elementOrNode = null, options = null)=>{ | ||
// When passed a node, call the hook straight away. | ||
if (!(0, react_1.isValidElement)(elementOrNode)) { | ||
if (!(0, _react).isValidElement(elementOrNode)) { | ||
const node = elementOrNode; | ||
@@ -34,3 +34,4 @@ hook(node, options); | ||
// When no options are passed, use the hook directly | ||
const ref = options ? (node) => hook(node, options) : hook; | ||
const ref = options ? (node)=>hook(node, options) | ||
: hook; | ||
return cloneWithRef(element, ref); | ||
@@ -41,3 +42,3 @@ }; | ||
const wrappedHooks = {}; | ||
Object.keys(hooks).forEach((key) => { | ||
Object.keys(hooks).forEach((key)=>{ | ||
const hook = hooks[key]; | ||
@@ -47,6 +48,6 @@ // ref objects should be passed straight through without wrapping | ||
wrappedHooks[key] = hooks[key]; | ||
} | ||
else { | ||
} else { | ||
const wrappedHook = wrapHookToRecognizeElement(hook); | ||
wrappedHooks[key] = () => wrappedHook; | ||
wrappedHooks[key] = ()=>wrappedHook | ||
; | ||
} | ||
@@ -56,8 +57,6 @@ }); | ||
} | ||
exports.wrapConnectorHooks = wrapConnectorHooks; | ||
function setRef(ref, node) { | ||
if (typeof ref === 'function') { | ||
ref(node); | ||
} | ||
else { | ||
} else { | ||
ref.current = node; | ||
@@ -68,19 +67,18 @@ } | ||
const previousRef = element.ref; | ||
(0, invariant_1.invariant)(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + | ||
'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + | ||
'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs'); | ||
(0, _invariant).invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + 'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + 'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs'); | ||
if (!previousRef) { | ||
// When there is no ref on the element, use the new ref directly | ||
return (0, react_1.cloneElement)(element, { | ||
ref: newRef, | ||
return (0, _react).cloneElement(element, { | ||
ref: newRef | ||
}); | ||
} | ||
else { | ||
return (0, react_1.cloneElement)(element, { | ||
ref: (node) => { | ||
} else { | ||
return (0, _react).cloneElement(element, { | ||
ref: (node)=>{ | ||
setRef(previousRef, node); | ||
setRef(newRef, node); | ||
}, | ||
} | ||
}); | ||
} | ||
} | ||
//# sourceMappingURL=wrapConnectorHooks.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
//# sourceMappingURL=connectors.js.map |
"use strict"; | ||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); | ||
}) : (function(o, m, k, k2) { | ||
if (k2 === undefined) k2 = k; | ||
o[k2] = m[k]; | ||
})); | ||
var __exportStar = (this && this.__exportStar) || function(m, exports) { | ||
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
__exportStar(require("./monitors"), exports); | ||
__exportStar(require("./options"), exports); | ||
__exportStar(require("./connectors"), exports); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _exportNames = {}; | ||
var _monitors = _interopRequireWildcard(require("./monitors")); | ||
Object.keys(_monitors).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _monitors[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _monitors[key]; | ||
} | ||
}); | ||
}); | ||
var _options = _interopRequireWildcard(require("./options")); | ||
Object.keys(_options).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _options[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _options[key]; | ||
} | ||
}); | ||
}); | ||
var _connectors = _interopRequireWildcard(require("./connectors")); | ||
Object.keys(_connectors).forEach(function(key) { | ||
if (key === "default" || key === "__esModule") return; | ||
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
if (key in exports && exports[key] === _connectors[key]) return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function() { | ||
return _connectors[key]; | ||
} | ||
}); | ||
}); | ||
function _interopRequireWildcard(obj) { | ||
if (obj && obj.__esModule) { | ||
return obj; | ||
} else { | ||
var newObj = {}; | ||
if (obj != null) { | ||
for(var key in obj){ | ||
if (Object.prototype.hasOwnProperty.call(obj, key)) { | ||
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; | ||
if (desc.get || desc.set) { | ||
Object.defineProperty(newObj, key, desc); | ||
} else { | ||
newObj[key] = obj[key]; | ||
} | ||
} | ||
} | ||
} | ||
newObj.default = obj; | ||
return newObj; | ||
} | ||
} | ||
//# sourceMappingURL=index.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
//# sourceMappingURL=monitors.js.map |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
//# sourceMappingURL=options.js.map |
import { createContext } from 'react'; | ||
/** | ||
* Create the React Context | ||
*/ | ||
export const DndContext = createContext({ | ||
dragDropManager: undefined, | ||
*/ export const DndContext = createContext({ | ||
dragDropManager: undefined | ||
}); | ||
//# sourceMappingURL=DndContext.js.map |
import { jsx as _jsx } from "react/jsx-runtime"; | ||
import { useEffect, memo } from 'react'; | ||
import { createDragDropManager, } from 'dnd-core'; | ||
import { createDragDropManager } from 'dnd-core'; | ||
import { DndContext } from './DndContext'; | ||
function _objectWithoutProperties(source, excluded) { | ||
if (source == null) return {}; | ||
var target = _objectWithoutPropertiesLoose(source, excluded); | ||
var key, i; | ||
if (Object.getOwnPropertySymbols) { | ||
var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
for(i = 0; i < sourceSymbolKeys.length; i++){ | ||
key = sourceSymbolKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
target[key] = source[key]; | ||
} | ||
} | ||
return target; | ||
} | ||
function _objectWithoutPropertiesLoose(source, excluded) { | ||
if (source == null) return {}; | ||
var target = {}; | ||
var sourceKeys = Object.keys(source); | ||
var key, i; | ||
for(i = 0; i < sourceKeys.length; i++){ | ||
key = sourceKeys[i]; | ||
if (excluded.indexOf(key) >= 0) continue; | ||
target[key] = source[key]; | ||
} | ||
return target; | ||
} | ||
let refCount = 0; | ||
const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__'); | ||
/** | ||
* A React component that provides the React-DnD context | ||
*/ | ||
export const DndProvider = memo(function DndProvider({ children, ...props }) { | ||
const [manager, isGlobalInstance] = getDndContextValue(props); // memoized from props | ||
var DndProvider = /*#__PURE__*/ memo(function DndProvider(_param) { | ||
var { children } = _param, props = _objectWithoutProperties(_param, [ | ||
"children" | ||
]); | ||
const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props | ||
; | ||
/** | ||
* If the global context was used to store the DND context | ||
* then where theres no more references to it we should | ||
* clean it up to avoid memory leaks | ||
*/ | ||
useEffect(() => { | ||
* If the global context was used to store the DND context | ||
* then where theres no more references to it we should | ||
* clean it up to avoid memory leaks | ||
*/ useEffect(()=>{ | ||
if (isGlobalInstance) { | ||
const context = getGlobalContext(); | ||
++refCount; | ||
return () => { | ||
return ()=>{ | ||
if (--refCount === 0) { | ||
@@ -29,12 +56,26 @@ context[INSTANCE_SYM] = null; | ||
}, []); | ||
return _jsx(DndContext.Provider, { value: manager, children: children }, void 0); | ||
return(/*#__PURE__*/ _jsx(DndContext.Provider, { | ||
value: manager, | ||
children: children | ||
})); | ||
}); | ||
/** | ||
* A React component that provides the React-DnD context | ||
*/ export { DndProvider, }; | ||
function getDndContextValue(props) { | ||
if ('manager' in props) { | ||
const manager = { dragDropManager: props.manager }; | ||
return [manager, false]; | ||
const manager = { | ||
dragDropManager: props.manager | ||
}; | ||
return [ | ||
manager, | ||
false | ||
]; | ||
} | ||
const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode); | ||
const isGlobalInstance = !props.context; | ||
return [manager, isGlobalInstance]; | ||
return [ | ||
manager, | ||
isGlobalInstance | ||
]; | ||
} | ||
@@ -45,3 +86,3 @@ function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) { | ||
ctx[INSTANCE_SYM] = { | ||
dragDropManager: createDragDropManager(backend, context, options, debugMode), | ||
dragDropManager: createDragDropManager(backend, context, options, debugMode) | ||
}; | ||
@@ -54,1 +95,3 @@ } | ||
} | ||
//# sourceMappingURL=DndProvider.js.map |
import { useEffect, memo } from 'react'; | ||
/** | ||
* A utility for rendering a drag preview image | ||
*/ | ||
export const DragPreviewImage = memo(function DragPreviewImage({ connect, src }) { | ||
useEffect(() => { | ||
if (typeof Image === 'undefined') | ||
return; | ||
*/ export const DragPreviewImage = /*#__PURE__*/ memo(function DragPreviewImage({ connect , src }) { | ||
useEffect(()=>{ | ||
if (typeof Image === 'undefined') return; | ||
let connected = false; | ||
const img = new Image(); | ||
img.src = src; | ||
img.onload = () => { | ||
img.onload = ()=>{ | ||
connect(img); | ||
connected = true; | ||
}; | ||
return () => { | ||
return ()=>{ | ||
if (connected) { | ||
@@ -24,1 +22,3 @@ connect(null); | ||
}); | ||
//# sourceMappingURL=DragPreviewImage.js.map |
export * from './DndContext'; | ||
export * from './DndProvider'; | ||
export * from './DragPreviewImage'; | ||
//# sourceMappingURL=index.js.map |
@@ -6,1 +6,3 @@ export * from './useDrag'; | ||
export * from './types'; | ||
//# sourceMappingURL=index.js.map |
@@ -1,1 +0,3 @@ | ||
export {}; | ||
export { }; | ||
//# sourceMappingURL=types.js.map |
import { useMonitorOutput } from './useMonitorOutput'; | ||
export function useCollectedProps(collector, monitor, connector) { | ||
return useMonitorOutput(monitor, collector || (() => ({})), () => connector.reconnect()); | ||
return useMonitorOutput(monitor, collector || (()=>({}) | ||
), ()=>connector.reconnect() | ||
); | ||
} | ||
//# sourceMappingURL=useCollectedProps.js.map |
@@ -9,6 +9,6 @@ import equal from 'fast-deep-equal'; | ||
* @param onUpdate A method to invoke when updates occur | ||
*/ | ||
export function useCollector(monitor, collect, onUpdate) { | ||
const [collected, setCollected] = useState(() => collect(monitor)); | ||
const updateCollected = useCallback(() => { | ||
*/ export function useCollector(monitor, collect, onUpdate) { | ||
const [collected, setCollected] = useState(()=>collect(monitor) | ||
); | ||
const updateCollected = useCallback(()=>{ | ||
const nextValue = collect(monitor); | ||
@@ -23,3 +23,7 @@ // This needs to be a deep-equality check because some monitor-collected values | ||
} | ||
}, [collected, monitor, onUpdate]); | ||
}, [ | ||
collected, | ||
monitor, | ||
onUpdate | ||
]); | ||
// update the collected properties after react renders. | ||
@@ -29,3 +33,8 @@ // Note that the "Dustbin Stress Test" fails if this is not | ||
useIsomorphicLayoutEffect(updateCollected); | ||
return [collected, updateCollected]; | ||
return [ | ||
collected, | ||
updateCollected | ||
]; | ||
} | ||
//# sourceMappingURL=useCollector.js.map |
import { useMemo } from 'react'; | ||
export function useConnectDragSource(connector) { | ||
return useMemo(() => connector.hooks.dragSource(), [connector]); | ||
return useMemo(()=>connector.hooks.dragSource() | ||
, [ | ||
connector | ||
]); | ||
} | ||
export function useConnectDragPreview(connector) { | ||
return useMemo(() => connector.hooks.dragPreview(), [connector]); | ||
return useMemo(()=>connector.hooks.dragPreview() | ||
, [ | ||
connector | ||
]); | ||
} | ||
//# sourceMappingURL=connectors.js.map |
export class DragSourceImpl { | ||
spec; | ||
monitor; | ||
connector; | ||
constructor(spec, monitor, connector) { | ||
this.spec = spec; | ||
this.monitor = monitor; | ||
this.connector = connector; | ||
} | ||
beginDrag() { | ||
@@ -16,10 +8,8 @@ const spec = this.spec; | ||
result = spec.item; | ||
} | ||
else if (typeof spec.item === 'function') { | ||
} else if (typeof spec.item === 'function') { | ||
result = spec.item(monitor); | ||
} | ||
else { | ||
} else { | ||
result = {}; | ||
} | ||
return result ?? null; | ||
return result !== null && result !== void 0 ? result : null; | ||
} | ||
@@ -31,7 +21,5 @@ canDrag() { | ||
return spec.canDrag; | ||
} | ||
else if (typeof spec.canDrag === 'function') { | ||
} else if (typeof spec.canDrag === 'function') { | ||
return spec.canDrag(monitor); | ||
} | ||
else { | ||
} else { | ||
return true; | ||
@@ -43,6 +31,4 @@ } | ||
const monitor = this.monitor; | ||