Your IP : 216.73.216.86
SourceConnector.js 0000644 00000013044 15170136317 0010223 0 ustar 00 import { wrapConnectorHooks } from './wrapConnectorHooks';
import { isRef } from '../utils/isRef';
import { shallowEqual } from '@react-dnd/shallowequal';
export class SourceConnector {
constructor(backend) {
this.hooks = wrapConnectorHooks({
dragSource: (node, options) => {
this.clearDragSource();
this.dragSourceOptions = options || null;
if (isRef(node)) {
this.dragSourceRef = node;
}
else {
this.dragSourceNode = node;
}
this.reconnectDragSource();
},
dragPreview: (node, options) => {
this.clearDragPreview();
this.dragPreviewOptions = options || null;
if (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;
}
receiveHandlerId(newHandlerId) {
if (this.handlerId === newHandlerId) {
return;
}
this.handlerId = newHandlerId;
this.reconnect();
}
get connectTarget() {
return this.dragSource;
}
get dragSourceOptions() {
return this.dragSourceOptionsInternal;
}
set dragSourceOptions(options) {
this.dragSourceOptionsInternal = options;
}
get dragPreviewOptions() {
return this.dragPreviewOptionsInternal;
}
set dragPreviewOptions(options) {
this.dragPreviewOptionsInternal = options;
}
reconnect() {
this.reconnectDragSource();
this.reconnectDragPreview();
}
reconnectDragSource() {
const dragSource = this.dragSource;
// if nothing has changed then don't resubscribe
const didChange = this.didHandlerIdChange() ||
this.didConnectedDragSourceChange() ||
this.didDragSourceOptionsChange();
if (didChange) {
this.disconnectDragSource();
}
if (!this.handlerId) {
return;
}
if (!dragSource) {
this.lastConnectedDragSource = dragSource;
return;
}
if (didChange) {
this.lastConnectedHandlerId = this.handlerId;
this.lastConnectedDragSource = dragSource;
this.lastConnectedDragSourceOptions = this.dragSourceOptions;
this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
}
}
reconnectDragPreview() {
const dragPreview = this.dragPreview;
// if nothing has changed then don't resubscribe
const didChange = this.didHandlerIdChange() ||
this.didConnectedDragPreviewChange() ||
this.didDragPreviewOptionsChange();
if (didChange) {
this.disconnectDragPreview();
}
if (!this.handlerId) {
return;
}
if (!dragPreview) {
this.lastConnectedDragPreview = dragPreview;
return;
}
if (didChange) {
this.lastConnectedHandlerId = this.handlerId;
this.lastConnectedDragPreview = dragPreview;
this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
}
}
didHandlerIdChange() {
return this.lastConnectedHandlerId !== this.handlerId;
}
didConnectedDragSourceChange() {
return this.lastConnectedDragSource !== this.dragSource;
}
didConnectedDragPreviewChange() {
return this.lastConnectedDragPreview !== this.dragPreview;
}
didDragSourceOptionsChange() {
return !shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
}
didDragPreviewOptionsChange() {
return !shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
}
disconnectDragSource() {
if (this.dragSourceUnsubscribe) {
this.dragSourceUnsubscribe();
this.dragSourceUnsubscribe = undefined;
}
}
disconnectDragPreview() {
if (this.dragPreviewUnsubscribe) {
this.dragPreviewUnsubscribe();
this.dragPreviewUnsubscribe = undefined;
this.dragPreviewNode = null;
this.dragPreviewRef = null;
}
}
get dragSource() {
return (this.dragSourceNode || (this.dragSourceRef && this.dragSourceRef.current));
}
get dragPreview() {
return (this.dragPreviewNode ||
(this.dragPreviewRef && this.dragPreviewRef.current));
}
clearDragSource() {
this.dragSourceNode = null;
this.dragSourceRef = null;
}
clearDragPreview() {
this.dragPreviewNode = null;
this.dragPreviewRef = null;
}
}
DragPreviewImage.d.ts 0000644 00000000371 15170136317 0010525 0 ustar 00 import * as React from 'react';
import { ConnectDragPreview } from '../interfaces';
export interface DragPreviewImageProps {
connect: ConnectDragPreview;
src: string;
}
export declare const DragPreviewImage: React.FC<DragPreviewImageProps>;
registration.d.ts 0000644 00000000573 15170136317 0010061 0 ustar 00 import { DragDropManager, DropTarget, Unsubscribe, Identifier, TargetType, SourceType, DragSource } from 'dnd-core';
export declare function registerTarget(type: TargetType, target: DropTarget, manager: DragDropManager): [Identifier, Unsubscribe];
export declare function registerSource(type: SourceType, source: DragSource, manager: DragDropManager): [Identifier, Unsubscribe];
DropTargetMonitorImpl.js 0000644 00000004204 15170136317 0011353 0 ustar 00 import { invariant } from '@react-dnd/invariant';
let isCallingCanDrop = false;
export class DropTargetMonitorImpl {
constructor(manager) {
this.targetId = null;
this.internalMonitor = manager.getMonitor();
}
receiveHandlerId(targetId) {
this.targetId = targetId;
}
getHandlerId() {
return this.targetId;
}
subscribeToStateChange(listener, options) {
return this.internalMonitor.subscribeToStateChange(listener, options);
}
canDrop() {
// Cut out early if the target id has not been set. This should prevent errors
// where the user has an older version of dnd-core like in
// https://github.com/react-dnd/react-dnd/issues/1310
if (!this.targetId) {
return false;
}
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 {
isCallingCanDrop = false;
}
}
isOver(options) {
if (!this.targetId) {
return false;
}
return this.internalMonitor.isOverTarget(this.targetId, options);
}
getItemType() {
return this.internalMonitor.getItemType();
}
getItem() {
return this.internalMonitor.getItem();
}
getDropResult() {
return this.internalMonitor.getDropResult();
}
didDrop() {
return this.internalMonitor.didDrop();
}
getInitialClientOffset() {
return this.internalMonitor.getInitialClientOffset();
}
getInitialSourceClientOffset() {
return this.internalMonitor.getInitialSourceClientOffset();
}
getSourceClientOffset() {
return this.internalMonitor.getSourceClientOffset();
}
getClientOffset() {
return this.internalMonitor.getClientOffset();
}
getDifferenceFromInitialOffset() {
return this.internalMonitor.getDifferenceFromInitialOffset();
}
}
wrapConnectorHooks.d.ts 0000644 00000000075 15170136317 0011174 0 ustar 00 export declare function wrapConnectorHooks(hooks: any): any;
DndProvider.js 0000644 00000003472 15170136317 0007334 0 ustar 00 import * as React from 'react';
import { memo } from 'react';
import { DndContext, createDndContext } from './DndContext';
let refCount = 0;
/**
* A React component that provides the React-DnD context
*/
export const DndProvider = memo(({ children, ...props }) => {
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
*/
React.useEffect(() => {
if (isGlobalInstance) {
refCount++;
}
return () => {
if (isGlobalInstance) {
refCount--;
if (refCount === 0) {
const context = getGlobalContext();
context[instanceSymbol] = null;
}
}
};
}, []);
return React.createElement(DndContext.Provider, { value: manager }, children);
});
DndProvider.displayName = 'DndProvider';
function getDndContextValue(props) {
if ('manager' in props) {
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];
}
const instanceSymbol = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
const ctx = context;
if (!ctx[instanceSymbol]) {
ctx[instanceSymbol] = createDndContext(backend, context, options, debugMode);
}
return ctx[instanceSymbol];
}
function getGlobalContext() {
return typeof global !== 'undefined' ? global : window;
}
wrapConnectorHooks.js 0000644 00000004104 15170136317 0010735 0 ustar 00 import { isValidElement } from 'react';
import { cloneWithRef } from '../utils/cloneWithRef';
function throwIfCompositeComponentElement(element) {
// Custom components can no longer be wrapped directly in React DnD 2.0
// so that we don't need to depend on findDOMNode() from react-dom.
if (typeof element.type === 'string') {
return;
}
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.');
}
function wrapHookToRecognizeElement(hook) {
return (elementOrNode = null, options = null) => {
// When passed a node, call the hook straight away.
if (!isValidElement(elementOrNode)) {
const node = elementOrNode;
hook(node, options);
// return the node so it can be chained (e.g. when within callback refs
// <div ref={node => connectDragSource(connectDropTarget(node))}/>
return node;
}
// If passed a ReactElement, clone it and attach this function as a ref.
// This helps us achieve a neat API where user doesn't even know that refs
// are being used under the hood.
const element = elementOrNode;
throwIfCompositeComponentElement(element);
// When no options are passed, use the hook directly
const ref = options ? (node) => hook(node, options) : hook;
return cloneWithRef(element, ref);
};
}
export function wrapConnectorHooks(hooks) {
const wrappedHooks = {};
Object.keys(hooks).forEach((key) => {
const hook = hooks[key];
// ref objects should be passed straight through without wrapping
if (key.endsWith('Ref')) {
wrappedHooks[key] = hooks[key];
}
else {
const wrappedHook = wrapHookToRecognizeElement(hook);
wrappedHooks[key] = () => wrappedHook;
}
});
return wrappedHooks;
}
DragSourceMonitorImpl.d.ts 0000644 00000002503 15170136317 0011572 0 ustar 00 import { DragDropManager, Unsubscribe, Listener, Identifier, XYCoord } from 'dnd-core';
import { DragSourceMonitor } from '../interfaces';
export declare class DragSourceMonitorImpl implements DragSourceMonitor {
private internalMonitor;
private sourceId;
constructor(manager: DragDropManager);
receiveHandlerId(sourceId: Identifier | null): void;
getHandlerId(): Identifier | null;
canDrag(): boolean;
isDragging(): boolean;
subscribeToStateChange(listener: Listener, options?: {
handlerIds: Identifier[] | undefined;
}): Unsubscribe;
isDraggingSource(sourceId: Identifier): boolean;
isOverTarget(targetId: Identifier, options?: {
shallow: boolean;
}): boolean;
getTargetIds(): Identifier[];
isSourcePublic(): boolean | null;
getSourceId(): Identifier | null;
subscribeToOffsetChange(listener: Listener): Unsubscribe;
canDragSource(sourceId: Identifier): boolean;
canDropOnTarget(targetId: Identifier): boolean;
getItemType(): Identifier | null;
getItem(): any;
getDropResult(): any;
didDrop(): boolean;
getInitialClientOffset(): XYCoord | null;
getInitialSourceClientOffset(): XYCoord | null;
getSourceClientOffset(): XYCoord | null;
getClientOffset(): XYCoord | null;
getDifferenceFromInitialOffset(): XYCoord | null;
}
DndProvider.d.ts 0000644 00000000707 15170136317 0007566 0 ustar 00 import * as React from 'react';
import { BackendFactory, DragDropManager } from 'dnd-core';
export declare type DndProviderProps<BackendContext, BackendOptions> = {
manager: DragDropManager;
} | {
backend: BackendFactory;
context?: BackendContext;
options?: BackendOptions;
debugMode?: boolean;
};
/**
* A React component that provides the React-DnD context
*/
export declare const DndProvider: React.FC<DndProviderProps<any, any>>;
DropTargetMonitorImpl.d.ts 0000644 00000001705 15170136317 0011612 0 ustar 00 import { DragDropManager, Unsubscribe, Listener, Identifier, XYCoord } from 'dnd-core';
import { DropTargetMonitor } from '../interfaces';
export declare class DropTargetMonitorImpl implements DropTargetMonitor {
private internalMonitor;
private targetId;
constructor(manager: DragDropManager);
receiveHandlerId(targetId: Identifier | null): void;
getHandlerId(): Identifier | null;
subscribeToStateChange(listener: Listener, options?: {
handlerIds: Identifier[] | undefined;
}): Unsubscribe;
canDrop(): boolean;
isOver(options: {
shallow?: boolean;
}): boolean;
getItemType(): Identifier | null;
getItem(): any;
getDropResult(): any;
didDrop(): boolean;
getInitialClientOffset(): XYCoord | null;
getInitialSourceClientOffset(): XYCoord | null;
getSourceClientOffset(): XYCoord | null;
getClientOffset(): XYCoord | null;
getDifferenceFromInitialOffset(): XYCoord | null;
}
index.js 0000644 00000000141 15170136317 0006211 0 ustar 00 export * from './DndContext';
export * from './DndProvider';
export * from './DragPreviewImage';
TargetConnector.js 0000644 00000005704 15170136317 0010215 0 ustar 00 import { shallowEqual } from '@react-dnd/shallowequal';
import { wrapConnectorHooks } from './wrapConnectorHooks';
import { isRef } from '../utils/isRef';
export class TargetConnector {
constructor(backend) {
this.hooks = wrapConnectorHooks({
dropTarget: (node, options) => {
this.clearDropTarget();
this.dropTargetOptions = options;
if (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;
}
get connectTarget() {
return this.dropTarget;
}
reconnect() {
// if nothing has changed then don't resubscribe
const didChange = this.didHandlerIdChange() ||
this.didDropTargetChange() ||
this.didOptionsChange();
if (didChange) {
this.disconnectDropTarget();
}
const dropTarget = this.dropTarget;
if (!this.handlerId) {
return;
}
if (!dropTarget) {
this.lastConnectedDropTarget = dropTarget;
return;
}
if (didChange) {
this.lastConnectedHandlerId = this.handlerId;
this.lastConnectedDropTarget = dropTarget;
this.lastConnectedDropTargetOptions = this.dropTargetOptions;
this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
}
}
receiveHandlerId(newHandlerId) {
if (newHandlerId === this.handlerId) {
return;
}
this.handlerId = newHandlerId;
this.reconnect();
}
get dropTargetOptions() {
return this.dropTargetOptionsInternal;
}
set dropTargetOptions(options) {
this.dropTargetOptionsInternal = options;
}
didHandlerIdChange() {
return this.lastConnectedHandlerId !== this.handlerId;
}
didDropTargetChange() {
return this.lastConnectedDropTarget !== this.dropTarget;
}
didOptionsChange() {
return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
}
disconnectDropTarget() {
if (this.unsubscribeDropTarget) {
this.unsubscribeDropTarget();
this.unsubscribeDropTarget = undefined;
}
}
get dropTarget() {
return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current));
}
clearDropTarget() {
this.dropTargetRef = null;
this.dropTargetNode = null;
}
}
DndContext.js 0000644 00000000732 15170136317 0007162 0 ustar 00 import * as React from 'react';
import { createDragDropManager, } from 'dnd-core';
/**
* Create the React Context
*/
export const DndContext = React.createContext({
dragDropManager: undefined,
});
/**
* Creates the context object we're providing
* @param backend
* @param context
*/
export function createDndContext(backend, context, options, debugMode) {
return {
dragDropManager: createDragDropManager(backend, context, options, debugMode),
};
}
DragPreviewImage.js 0000644 00000001147 15170136317 0010273 0 ustar 00 import * as React from 'react';
/*
* A utility for rendering a drag preview image
*/
export const DragPreviewImage = React.memo(({ connect, src }) => {
React.useEffect(() => {
if (typeof Image === 'undefined')
return;
let connected = false;
const img = new Image();
img.src = src;
img.onload = () => {
connect(img);
connected = true;
};
return () => {
if (connected) {
connect(null);
}
};
});
return null;
});
DragPreviewImage.displayName = 'DragPreviewImage';
DragSourceMonitorImpl.js 0000644 00000005745 15170136317 0011351 0 ustar 00 import { invariant } from '@react-dnd/invariant';
let isCallingCanDrag = false;
let isCallingIsDragging = false;
export class DragSourceMonitorImpl {
constructor(manager) {
this.sourceId = null;
this.internalMonitor = manager.getMonitor();
}
receiveHandlerId(sourceId) {
this.sourceId = sourceId;
}
getHandlerId() {
return this.sourceId;
}
canDrag() {
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 {
isCallingCanDrag = false;
}
}
isDragging() {
if (!this.sourceId) {
return false;
}
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 {
isCallingIsDragging = false;
}
}
subscribeToStateChange(listener, options) {
return this.internalMonitor.subscribeToStateChange(listener, options);
}
isDraggingSource(sourceId) {
return this.internalMonitor.isDraggingSource(sourceId);
}
isOverTarget(targetId, options) {
return this.internalMonitor.isOverTarget(targetId, options);
}
getTargetIds() {
return this.internalMonitor.getTargetIds();
}
isSourcePublic() {
return this.internalMonitor.isSourcePublic();
}
getSourceId() {
return this.internalMonitor.getSourceId();
}
subscribeToOffsetChange(listener) {
return this.internalMonitor.subscribeToOffsetChange(listener);
}
canDragSource(sourceId) {
return this.internalMonitor.canDragSource(sourceId);
}
canDropOnTarget(targetId) {
return this.internalMonitor.canDropOnTarget(targetId);
}
getItemType() {
return this.internalMonitor.getItemType();
}
getItem() {
return this.internalMonitor.getItem();
}
getDropResult() {
return this.internalMonitor.getDropResult();
}
didDrop() {
return this.internalMonitor.didDrop();
}
getInitialClientOffset() {
return this.internalMonitor.getInitialClientOffset();
}
getInitialSourceClientOffset() {
return this.internalMonitor.getInitialSourceClientOffset();
}
getSourceClientOffset() {
return this.internalMonitor.getSourceClientOffset();
}
getClientOffset() {
return this.internalMonitor.getClientOffset();
}
getDifferenceFromInitialOffset() {
return this.internalMonitor.getDifferenceFromInitialOffset();
}
}
index.d.ts 0000644 00000000141 15170136317 0006445 0 ustar 00 export * from './DndContext';
export * from './DndProvider';
export * from './DragPreviewImage';
registration.js 0000644 00000000666 15170136317 0007630 0 ustar 00 export function registerTarget(type, target, manager) {
const registry = manager.getRegistry();
const targetId = registry.addTarget(type, target);
return [targetId, () => registry.removeTarget(targetId)];
}
export function registerSource(type, source, manager) {
const registry = manager.getRegistry();
const sourceId = registry.addSource(type, source);
return [sourceId, () => registry.removeSource(sourceId)];
}
DndContext.d.ts 0000644 00000001116 15170136317 0007413 0 ustar 00 import * as React from 'react';
import { DragDropManager, BackendFactory } from 'dnd-core';
/**
* The React context type
*/
export interface DndContextType {
dragDropManager: DragDropManager | undefined;
}
/**
* Create the React Context
*/
export declare const DndContext: React.Context<DndContextType>;
/**
* Creates the context object we're providing
* @param backend
* @param context
*/
export declare function createDndContext<BackendContext, BackendOptions>(backend: BackendFactory, context?: BackendContext, options?: BackendOptions, debugMode?: boolean): DndContextType;
TargetConnector.d.ts 0000644 00000001564 15170136317 0010451 0 ustar 00 import { Backend, Identifier } from 'dnd-core';
import { Connector } from './SourceConnector';
export declare class TargetConnector implements Connector {
hooks: any;
private handlerId;
private dropTargetRef;
private dropTargetNode;
private dropTargetOptionsInternal;
private unsubscribeDropTarget;
private lastConnectedHandlerId;
private lastConnectedDropTarget;
private lastConnectedDropTargetOptions;
private readonly backend;
constructor(backend: Backend);
get connectTarget(): any;
reconnect(): void;
receiveHandlerId(newHandlerId: Identifier | null): void;
get dropTargetOptions(): any;
set dropTargetOptions(options: any);
private didHandlerIdChange;
private didDropTargetChange;
private didOptionsChange;
private disconnectDropTarget;
private get dropTarget();
private clearDropTarget;
}
SourceConnector.d.ts 0000644 00000003251 15170136317 0010456 0 ustar 00 import { Backend, Identifier } from 'dnd-core';
import { DragSourceOptions, DragPreviewOptions } from '../interfaces';
export interface Connector {
hooks: any;
connectTarget: any;
receiveHandlerId(handlerId: Identifier | null): void;
reconnect(): void;
}
export declare class SourceConnector implements Connector {
hooks: any;
private handlerId;
private dragSourceRef;
private dragSourceNode;
private dragSourceOptionsInternal;
private dragSourceUnsubscribe;
private dragPreviewRef;
private dragPreviewNode;
private dragPreviewOptionsInternal;
private dragPreviewUnsubscribe;
private lastConnectedHandlerId;
private lastConnectedDragSource;
private lastConnectedDragSourceOptions;
private lastConnectedDragPreview;
private lastConnectedDragPreviewOptions;
private readonly backend;
constructor(backend: Backend);
receiveHandlerId(newHandlerId: Identifier | null): void;
get connectTarget(): any;
get dragSourceOptions(): DragSourceOptions | null;
set dragSourceOptions(options: DragSourceOptions | null);
get dragPreviewOptions(): DragPreviewOptions | null;
set dragPreviewOptions(options: DragPreviewOptions | null);
reconnect(): void;
private reconnectDragSource;
private reconnectDragPreview;
private didHandlerIdChange;
private didConnectedDragSourceChange;
private didConnectedDragPreviewChange;
private didDragSourceOptionsChange;
private didDragPreviewOptionsChange;
private disconnectDragSource;
private disconnectDragPreview;
private get dragSource();
private get dragPreview();
private clearDragSource;
private clearDragPreview;
}