Your IP : 216.73.216.86
hooksApi.js 0000644 00000000015 15170136310 0006650 0 ustar 00 "use strict"; monitors.js 0000644 00000000015 15170136310 0006745 0 ustar 00 "use strict"; monitors.d.ts 0000644 00000020366 15170136310 0007214 0 ustar 00 import { Identifier, Unsubscribe } from 'dnd-core';
export interface XYCoord {
x: number;
y: number;
}
export interface HandlerManager {
receiveHandlerId: (handlerId: Identifier | null) => void;
getHandlerId: () => Identifier | null;
}
export interface DragSourceMonitor extends HandlerManager, MonitorEventEmitter {
/**
* Returns true if no drag operation is in progress, and the owner's canDrag() returns true or is not defined.
*/
canDrag(): boolean;
/**
* Returns true if a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.
*/
isDragging(): boolean;
/**
* Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
*/
getItemType(): Identifier | null;
/**
* Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method.
* Returns null if no item is being dragged.
*/
getItem(): any;
/**
* Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their
* drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop()
* overrides the child drop result previously set by the child. Returns null if called outside endDrag().
*/
getDropResult(): any;
/**
* Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result, didDrop() returns true.
* Use it inside endDrag() to test whether any drop target has handled the drop. Returns false if called outside endDrag().
*/
didDrop(): boolean;
/**
* Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.
*/
getInitialClientOffset(): XYCoord | null;
/**
* Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started.
* Returns null if no item is being dragged.
*/
getInitialSourceClientOffset(): XYCoord | null;
/**
* Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.
*/
getClientOffset(): XYCoord | null;
/**
* Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started.
* Returns null if no item is being dragged.
*/
getDifferenceFromInitialOffset(): XYCoord | null;
/**
* Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has
* started, and the movement difference. Returns null if no item is being dragged.
*/
getSourceClientOffset(): XYCoord | null;
/**
* Returns the ids of the potential drop targets.
*/
getTargetIds(): Identifier[];
}
export interface MonitorEventEmitter {
subscribeToStateChange(fn: () => void, options?: {
handlerIds?: Identifier[];
}): Unsubscribe;
}
export interface DropTargetMonitor extends HandlerManager, MonitorEventEmitter {
/**
* Returns true if there is a drag operation in progress, and the owner's canDrop() returns true or is not defined.
*/
canDrop(): boolean;
/**
* Returns true if there is a drag operation in progress, and the pointer is currently hovering over the owner.
* You may optionally pass { shallow: true } to strictly check whether only the owner is being hovered, as opposed
* to a nested target.
*/
isOver(options?: {
shallow?: boolean;
}): boolean;
/**
* Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns null if no item is being dragged.
*/
getItemType(): Identifier | null;
/**
* Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from
* its beginDrag() method. Returns null if no item is being dragged.
*/
getItem(): any;
/**
* Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an
* object from their drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly
* returns its own result from drop() overrides the drop result previously set by the child. Returns null if called outside drop().
*/
getDropResult(): any;
/**
* Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result,
* didDrop() returns true. Use it inside drop() to test whether any nested drop target has already handled the drop. Returns false
* if called outside drop().
*/
didDrop(): boolean;
/**
* Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item
* is being dragged.
*/
getInitialClientOffset(): XYCoord | null;
/**
* Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started.
* Returns null if no item is being dragged.
*/
getInitialSourceClientOffset(): XYCoord | null;
/**
* Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.
*/
getClientOffset(): XYCoord | null;
/**
* Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when current the drag operation has
* started. Returns null if no item is being dragged.
*/
getDifferenceFromInitialOffset(): XYCoord | null;
/**
* Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current
* drag operation has started, and the movement difference. Returns null if no item is being dragged.
*/
getSourceClientOffset(): XYCoord | null;
}
export interface DragLayerMonitor {
/**
* Returns true if a drag operation is in progress. Returns false otherwise.
*/
isDragging(): boolean;
/**
* Returns a string or an ES6 symbol identifying the type of the current dragged item.
* Returns null if no item is being dragged.
*/
getItemType(): Identifier | null;
/**
* Returns a plain object representing the currently dragged item.
* Every drag source must specify it by returning an object from its beginDrag() method.
* Returns null if no item is being dragged.
*/
getItem(): any;
/**
* Returns the { x, y } client offset of the pointer at the time when the current drag operation has started.
* Returns null if no item is being dragged.
*/
getInitialClientOffset(): XYCoord | null;
/**
* Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current
* drag operation has started. Returns null if no item is being dragged.
*/
getInitialSourceClientOffset(): XYCoord | null;
/**
* Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress.
* Returns null if no item is being dragged.
*/
getClientOffset(): XYCoord | null;
/**
* Returns the { x, y } difference between the last recorded client offset of the pointer and the client
* offset when current the drag operation has started. Returns null if no item is being dragged.
*/
getDifferenceFromInitialOffset(): XYCoord | null;
/**
* Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its
* position at the time when the current drag operation has started, and the movement difference.
* Returns null if no item is being dragged.
*/
getSourceClientOffset(): XYCoord | null;
}
index.js 0000644 00000002257 15170136310 0006214 0 ustar 00 "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _monitors = require("./monitors");
Object.keys(_monitors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _monitors[key];
}
});
});
var _hooksApi = require("./hooksApi");
Object.keys(_hooksApi).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _hooksApi[key];
}
});
});
var _options = require("./options");
Object.keys(_options).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _options[key];
}
});
});
var _connectors = require("./connectors");
Object.keys(_connectors).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _connectors[key];
}
});
}); hooksApi.d.ts 0000644 00000012511 15170136310 0007110 0 ustar 00 import { TargetType, SourceType } from 'dnd-core';
import { DropTargetMonitor, DragSourceMonitor } from './monitors';
import { DragSourceOptions, DragPreviewOptions } from './options';
export interface DragSourceHookSpec<DragObject extends DragObjectWithType, DropResult, CollectedProps> {
/**
* A plain javascript item describing the data being dragged.
* This is the only information available to the drop targets about the drag
* source so it's important to pick the minimal data they need to know.
*
* You may be tempted to put a reference to the component or complex object here,
* but you shouldx try very hard to avoid doing this because it couples the
* drag sources and drop targets. It's a good idea to use something like
* { id: props.id }
*
*/
item: DragObject;
/**
* The drag source options
*/
options?: DragSourceOptions;
/**
* DragPreview options
*/
previewOptions?: DragPreviewOptions;
/**
* When the dragging starts, beginDrag is called. If an object is returned from this function it will overide the default dragItem
*/
begin?: (monitor: DragSourceMonitor) => DragObject | undefined | void;
/**
* Optional.
* When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed.
* You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled,
* and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as
* monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging,
* component parameter is set to be null.
*/
end?: (draggedItem: DragObject | undefined, monitor: DragSourceMonitor) => void;
/**
* Optional.
* Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method.
* Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call
* monitor.canDrag() inside this method.
*/
canDrag?: boolean | ((monitor: DragSourceMonitor) => boolean);
/**
* Optional.
* By default, only the drag source that initiated the drag operation is considered to be dragging. You can
* override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id.
* Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent.
* For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though
* technically, the component gets unmounted and a different one gets mounted every time you move it to another list.
*
* Note: You may not call monitor.isDragging() inside this method.
*/
isDragging?: (monitor: DragSourceMonitor) => boolean;
/**
* A function to collect rendering properties
*/
collect?: (monitor: DragSourceMonitor) => CollectedProps;
}
/**
* Interface for the DropTarget specification object
*/
export interface DropTargetHookSpec<DragObject, DropResult, CollectedProps> {
/**
* The kinds of dragItems this dropTarget accepts
*/
accept: TargetType;
/**
* The drop target optinos
*/
options?: any;
/**
* Optional.
* Called when a compatible item is dropped on the target. You may either return undefined, or a plain object.
* If you return an object, it is going to become the drop result and will be available to the drag source in its
* endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions
* depending on which target received the drop. If you have nested drop targets, you can test whether a nested
* target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and
* the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop()
* is defined and returns false.
*/
drop?: (item: DragObject, monitor: DropTargetMonitor) => DropResult | undefined;
/**
* Optional.
* Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether
* the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even
* if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.
*/
hover?: (item: DragObject, monitor: DropTargetMonitor) => void;
/**
* Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just
* omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or
* monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
*/
canDrop?: (item: DragObject, monitor: DropTargetMonitor) => boolean;
/**
* A function to collect rendering properties
*/
collect?: (monitor: DropTargetMonitor) => CollectedProps;
}
export interface DragObjectWithType {
type: SourceType;
}
options.d.ts 0000644 00000005112 15170136310 0007025 0 ustar 00 /**
* Options for the Drag Sources, Drop Tragets, and Drag Layers annotation
*/
export interface DndOptions<Props> {
arePropsEqual?: (first: Props, second: Props) => boolean;
}
export interface DragSourceOptions {
/**
* Optional. A string. By default, 'move'. In the browsers that support this feature, specifying 'copy'
* shows a special “copying” cursor, while 'move' corresponds to the “move” cursor. You might want to use
* this option to provide a hint to the user about whether an action is destructive.
*/
dropEffect?: string;
}
export interface DragPreviewOptions {
/**
* Optional. A boolean. By default, false. If true, the component will learn that it is being dragged immediately as the drag
* starts instead of the next tick. This means that the screenshotting would occur with monitor.isDragging() already being true,
* and if you apply any styling like a decreased opacity to the dragged element, this styling will also be reflected on the
* screenshot. This is rarely desirable, so false is a sensible default. However, you might want to set it to true in rare cases,
* such as if you want to make the custom drag layers work in IE and you need to hide the original element without resorting to
* an empty drag preview which IE doesn't support.
*/
captureDraggingState?: boolean;
/**
* Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated
* into the horizontal offset of the drag preview when their sizes don't match. 0 means “dock the preview to the left”, 0.5 means
* “interpolate linearly” and 1 means “dock the preview to the right”.
*/
anchorX?: number;
/**
* Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated into
* the vertical offset of the drag preview when their sizes don't match. 0 means “dock the preview to the top, 0.5 means “interpolate
* linearly” and 1 means “dock the preview to the bottom.
*/
anchorY?: number;
/**
* Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview
* element. If offsetX has a value, anchorX won't be used.
*/
offsetX?: number;
/**
* Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag
* preview element. If offsetY has a value, anchorY won't be used.
*/
offsetY?: number;
}
connectors.js 0000644 00000000015 15170136310 0007250 0 ustar 00 "use strict"; connectors.d.ts 0000644 00000001064 15170136310 0007511 0 ustar 00 /// <reference types="react" />
import { DragSourceOptions, DragPreviewOptions } from '../interfaces';
export declare type ConnectableElement = React.RefObject<any> | React.ReactElement | Element | null;
export declare type DragElementWrapper<Options> = (elementOrNode: ConnectableElement, options?: Options) => React.ReactElement | null;
export declare type ConnectDragSource = DragElementWrapper<DragSourceOptions>;
export declare type ConnectDragPreview = DragElementWrapper<DragPreviewOptions>;
export declare type ConnectDropTarget = DragElementWrapper<any>;
index.d.ts 0000644 00000000161 15170136310 0006440 0 ustar 00 export * from './monitors';
export * from './hooksApi';
export * from './options';
export * from './connectors';
options.js 0000644 00000000015 15170136310 0006566 0 ustar 00 "use strict";