Your IP : 216.73.216.86
utils.d.ts 0000644 00000000655 15170136311 0006502 0 ustar 00 /// <reference types="react" />
export declare function getDecoratedComponent(instanceRef: React.RefObject<any>): any;
export declare function isClassComponent(Component: unknown): boolean;
export declare function isRefForwardingComponent(C: unknown): boolean;
export declare function isRefable(C: unknown): boolean;
export declare function checkDecoratorArguments(functionName: string, signature: string, ...args: any[]): void;
DragLayer.d.ts 0000644 00000000504 15170136311 0007205 0 ustar 00 import { DndOptions } from '../interfaces';
import { DragLayerCollector, DndComponentEnhancer } from './interfaces';
export declare function DragLayer<RequiredProps, CollectedProps = any>(collect: DragLayerCollector<RequiredProps, CollectedProps>, options?: DndOptions<RequiredProps>): DndComponentEnhancer<CollectedProps>;
DropTarget.d.ts 0000644 00000000736 15170136311 0007415 0 ustar 00 import { TargetType } from 'dnd-core';
import { DndOptions } from '../interfaces';
import { DropTargetSpec, DropTargetCollector, DndComponentEnhancer } from './interfaces';
export declare function DropTarget<RequiredProps, CollectedProps = any>(type: TargetType | ((props: RequiredProps) => TargetType), spec: DropTargetSpec<RequiredProps>, collect: DropTargetCollector<CollectedProps, RequiredProps>, options?: DndOptions<RequiredProps>): DndComponentEnhancer<CollectedProps>;
utils.js 0000644 00000002744 15170136311 0006247 0 ustar 00 export function getDecoratedComponent(instanceRef) {
const currentRef = instanceRef.current;
if (currentRef == null) {
return null;
}
else if (currentRef.decoratedRef) {
// go through the private field in decorateHandler to avoid the invariant hit
return currentRef.decoratedRef.current;
}
else {
return currentRef;
}
}
export function isClassComponent(Component) {
return (Component &&
Component.prototype &&
typeof Component.prototype.render === 'function');
}
export function isRefForwardingComponent(C) {
const item = C;
return item?.$$typeof?.toString() === 'Symbol(react.forward_ref)';
}
export function isRefable(C) {
return isClassComponent(C) || isRefForwardingComponent(C);
}
export function checkDecoratorArguments(functionName, signature, ...args) {
if (process.env.NODE_ENV !== 'production') {
for (let i = 0; i < args.length; i++) {
const arg = args[i];
if (arg && arg.prototype && arg.prototype.render) {
// eslint-disable-next-line no-console
console.error('You seem to be applying the arguments in the wrong order. ' +
`It should be ${functionName}(${signature})(Component), not the other way around. ` +
'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#you-seem-to-be-applying-the-arguments-in-the-wrong-order');
return;
}
}
}
}
DragLayer.js 0000644 00000012420 15170136311 0006751 0 ustar 00 import * as React from 'react';
import { shallowEqual } from '@react-dnd/shallowequal';
import hoistStatics from 'hoist-non-react-statics';
import { invariant } from '@react-dnd/invariant';
import { DndContext } from '../common/DndContext';
import { isPlainObject } from '../utils/js_utils';
import { isRefable, checkDecoratorArguments } from './utils';
export function DragLayer(collect, options = {}) {
checkDecoratorArguments('DragLayer', 'collect[, options]', collect, options);
invariant(typeof collect === 'function', 'Expected "collect" provided as the first argument to DragLayer to be a function that collects props to inject into the component. ', 'Instead, received %s. Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-layer', collect);
invariant(isPlainObject(options), 'Expected "options" provided as the second argument to DragLayer to be a plain object when specified. ' +
'Instead, received %s. Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-layer', options);
return function decorateLayer(DecoratedComponent) {
const Decorated = DecoratedComponent;
const { arePropsEqual = shallowEqual } = options;
const displayName = Decorated.displayName || Decorated.name || 'Component';
let DragLayerContainer = /** @class */ (() => {
class DragLayerContainer extends React.Component {
constructor() {
super(...arguments);
this.isCurrentlyMounted = false;
this.ref = React.createRef();
this.handleChange = () => {
if (!this.isCurrentlyMounted) {
return;
}
const nextState = this.getCurrentState();
if (!shallowEqual(nextState, this.state)) {
this.setState(nextState);
}
};
}
getDecoratedComponentInstance() {
invariant(this.ref.current, 'In order to access an instance of the decorated component, it must either be a class component or use React.forwardRef()');
return this.ref.current;
}
shouldComponentUpdate(nextProps, nextState) {
return (!arePropsEqual(nextProps, this.props) ||
!shallowEqual(nextState, this.state));
}
componentDidMount() {
this.isCurrentlyMounted = true;
this.handleChange();
}
componentWillUnmount() {
this.isCurrentlyMounted = false;
if (this.unsubscribeFromOffsetChange) {
this.unsubscribeFromOffsetChange();
this.unsubscribeFromOffsetChange = undefined;
}
if (this.unsubscribeFromStateChange) {
this.unsubscribeFromStateChange();
this.unsubscribeFromStateChange = undefined;
}
}
render() {
return (React.createElement(DndContext.Consumer, null, ({ dragDropManager }) => {
if (dragDropManager === undefined) {
return null;
}
this.receiveDragDropManager(dragDropManager);
// Let componentDidMount fire to initialize the collected state
if (!this.isCurrentlyMounted) {
return null;
}
return (React.createElement(Decorated, Object.assign({}, this.props, this.state, { ref: isRefable(Decorated) ? this.ref : null })));
}));
}
receiveDragDropManager(dragDropManager) {
if (this.manager !== undefined) {
return;
}
this.manager = dragDropManager;
invariant(typeof dragDropManager === 'object', 'Could not find the drag and drop manager in the context of %s. ' +
'Make sure to render a DndProvider component in your top-level component. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
const monitor = this.manager.getMonitor();
this.unsubscribeFromOffsetChange = monitor.subscribeToOffsetChange(this.handleChange);
this.unsubscribeFromStateChange = monitor.subscribeToStateChange(this.handleChange);
}
getCurrentState() {
if (!this.manager) {
return {};
}
const monitor = this.manager.getMonitor();
return collect(monitor, this.props);
}
}
DragLayerContainer.displayName = `DragLayer(${displayName})`;
DragLayerContainer.DecoratedComponent = DecoratedComponent;
return DragLayerContainer;
})();
return hoistStatics(DragLayerContainer, DecoratedComponent);
};
}
disposables.d.ts 0000644 00000005331 15170136311 0007646 0 ustar 00 import { noop } from '../utils/js_utils';
/**
* Provides a set of static methods for creating Disposables.
* @param {Function} action Action to run during the first call to dispose.
* The action is guaranteed to be run at most once.
*/
export declare class Disposable {
/**
* Gets the disposable that does nothing when disposed.
*/
static empty: {
dispose: typeof noop;
};
/**
* Validates whether the given object is a disposable
* @param {Object} Object to test whether it has a dispose method
* @returns {Boolean} true if a disposable object, else false.
*/
static isDisposable(d: any): boolean;
static _fixup(result: any): any;
/**
* Creates a disposable object that invokes the specified action when disposed.
* @param {Function} dispose Action to run during the first call to dispose.
* The action is guaranteed to be run at most once.
* @return {Disposable} The disposable object that runs the given action upon disposal.
*/
static create(action: any): Disposable;
private isDisposed;
private action;
constructor(action: any);
/** Performs the task of cleaning up resources. */
dispose(): void;
}
/**
* Represents a group of disposable resources that are disposed together.
* @constructor
*/
export declare class CompositeDisposable {
private isDisposed;
private disposables;
constructor(...disposables: Disposable[]);
/**
* Adds a disposable to the CompositeDisposable or disposes the disposable if the CompositeDisposable is disposed.
* @param {Any} item Disposable to add.
*/
add(item: Disposable): void;
/**
* Removes and disposes the first occurrence of a disposable from the CompositeDisposable.
* @param {Any} item Disposable to remove.
* @returns {Boolean} true if found; false otherwise.
*/
remove(item: Disposable): boolean;
/**
* Disposes all disposables in the group and removes them from the group but
* does not dispose the CompositeDisposable.
*/
clear(): void;
/**
* Disposes all disposables in the group and removes them from the group.
*/
dispose(): void;
}
/**
* Represents a disposable resource whose underlying disposable resource can
* be replaced by another disposable resource, causing automatic disposal of
* the previous underlying disposable resource.
*/
export declare class SerialDisposable {
private isDisposed;
private current;
/**
* Gets the underlying disposable.
* @returns {Any} the underlying disposable.
*/
getDisposable(): Disposable | undefined;
setDisposable(value: Disposable): void;
/** Performs the task of cleaning up resources. */
dispose(): void;
}
DragSource.d.ts 0000644 00000001312 15170136311 0007367 0 ustar 00 import { SourceType } from 'dnd-core';
import { DndOptions } from '../interfaces';
import { DndComponentEnhancer, DragSourceSpec, DragSourceCollector } from './interfaces';
/**
* Decorates a component as a dragsource
* @param type The dragsource type
* @param spec The drag source specification
* @param collect The props collector function
* @param options DnD options
*/
export declare function DragSource<RequiredProps, CollectedProps = any, DragObject = any>(type: SourceType | ((props: RequiredProps) => SourceType), spec: DragSourceSpec<RequiredProps, DragObject>, collect: DragSourceCollector<CollectedProps, RequiredProps>, options?: DndOptions<RequiredProps>): DndComponentEnhancer<CollectedProps>;
DropTarget.js 0000644 00000004724 15170136311 0007162 0 ustar 00 import { invariant } from '@react-dnd/invariant';
import { isPlainObject } from '../utils/js_utils';
import { registerTarget } from '../common/registration';
import { isValidType } from '../utils/isValidType';
import { TargetConnector } from '../common/TargetConnector';
import { DropTargetMonitorImpl } from '../common/DropTargetMonitorImpl';
import { checkDecoratorArguments } from './utils';
import { decorateHandler } from './decorateHandler';
import { createTargetFactory } from './createTargetFactory';
export function DropTarget(type, spec, collect, options = {}) {
checkDecoratorArguments('DropTarget', 'type, spec, collect[, options]', type, spec, collect, options);
let getType = type;
if (typeof type !== 'function') {
invariant(isValidType(type, true), 'Expected "type" provided as the first argument to DropTarget to be ' +
'a string, an array of strings, or a function that returns either given ' +
'the current props. Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', type);
getType = () => type;
}
invariant(isPlainObject(spec), 'Expected "spec" provided as the second argument to DropTarget to be ' +
'a plain object. Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', spec);
const createTarget = createTargetFactory(spec);
invariant(typeof collect === 'function', 'Expected "collect" provided as the third argument to DropTarget to be ' +
'a function that returns a plain object of props to inject. ' +
'Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', collect);
invariant(isPlainObject(options), 'Expected "options" provided as the fourth argument to DropTarget to be ' +
'a plain object when specified. ' +
'Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', collect);
return function decorateTarget(DecoratedComponent) {
return decorateHandler({
containerDisplayName: 'DropTarget',
createHandler: createTarget,
registerHandler: registerTarget,
createMonitor: (manager) => new DropTargetMonitorImpl(manager),
createConnector: (backend) => new TargetConnector(backend),
DecoratedComponent,
getType,
collect,
options,
});
};
}
decorateHandler.d.ts 0000644 00000001775 15170136311 0010432 0 ustar 00 import * as React from 'react';
import { DragDropManager, Identifier } from 'dnd-core';
import { DndComponent } from './interfaces';
export interface DecorateHandlerArgs<Props, ItemIdType> {
DecoratedComponent: any;
createMonitor: (manager: DragDropManager) => HandlerReceiver;
createHandler: (monitor: HandlerReceiver, ref: React.RefObject<any>) => Handler<Props>;
createConnector: any;
registerHandler: any;
containerDisplayName: string;
getType: (props: Props) => ItemIdType;
collect: any;
options: any;
}
interface HandlerReceiver {
receiveHandlerId: (handlerId: Identifier | null) => void;
}
interface Handler<Props> {
ref: React.RefObject<any>;
receiveProps(props: Props): void;
}
export declare function decorateHandler<Props, CollectedProps, ItemIdType>({ DecoratedComponent, createHandler, createMonitor, createConnector, registerHandler, containerDisplayName, getType, collect, options, }: DecorateHandlerArgs<Props, ItemIdType>): DndComponent<Props>;
export {};
decorateHandler.js 0000644 00000014544 15170136311 0010174 0 ustar 00 import * as React from 'react';
import { shallowEqual } from '@react-dnd/shallowequal';
import { invariant } from '@react-dnd/invariant';
import hoistStatics from 'hoist-non-react-statics';
import { DndContext } from '../common/DndContext';
import { isPlainObject } from '../utils/js_utils';
import { Disposable, CompositeDisposable, SerialDisposable, } from './disposables';
import { isRefable } from './utils';
export function decorateHandler({ DecoratedComponent, createHandler, createMonitor, createConnector, registerHandler, containerDisplayName, getType, collect, options, }) {
const { arePropsEqual = shallowEqual } = options;
const Decorated = DecoratedComponent;
const displayName = DecoratedComponent.displayName || DecoratedComponent.name || 'Component';
let DragDropContainer = /** @class */ (() => {
class DragDropContainer extends React.Component {
constructor(props) {
super(props);
this.decoratedRef = React.createRef();
this.handleChange = () => {
const nextState = this.getCurrentState();
if (!shallowEqual(nextState, this.state)) {
this.setState(nextState);
}
};
this.disposable = new SerialDisposable();
this.receiveProps(props);
this.dispose();
}
getHandlerId() {
return this.handlerId;
}
getDecoratedComponentInstance() {
invariant(this.decoratedRef.current, 'In order to access an instance of the decorated component, it must either be a class component or use React.forwardRef()');
return this.decoratedRef.current;
}
shouldComponentUpdate(nextProps, nextState) {
return (!arePropsEqual(nextProps, this.props) ||
!shallowEqual(nextState, this.state));
}
componentDidMount() {
this.disposable = new SerialDisposable();
this.currentType = undefined;
this.receiveProps(this.props);
this.handleChange();
}
componentDidUpdate(prevProps) {
if (!arePropsEqual(this.props, prevProps)) {
this.receiveProps(this.props);
this.handleChange();
}
}
componentWillUnmount() {
this.dispose();
}
receiveProps(props) {
if (!this.handler) {
return;
}
this.handler.receiveProps(props);
this.receiveType(getType(props));
}
receiveType(type) {
if (!this.handlerMonitor || !this.manager || !this.handlerConnector) {
return;
}
if (type === this.currentType) {
return;
}
this.currentType = type;
const [handlerId, unregister] = registerHandler(type, this.handler, this.manager);
this.handlerId = handlerId;
this.handlerMonitor.receiveHandlerId(handlerId);
this.handlerConnector.receiveHandlerId(handlerId);
const globalMonitor = this.manager.getMonitor();
const unsubscribe = globalMonitor.subscribeToStateChange(this.handleChange, { handlerIds: [handlerId] });
this.disposable.setDisposable(new CompositeDisposable(new Disposable(unsubscribe), new Disposable(unregister)));
}
dispose() {
this.disposable.dispose();
if (this.handlerConnector) {
this.handlerConnector.receiveHandlerId(null);
}
}
getCurrentState() {
if (!this.handlerConnector) {
return {};
}
const nextState = collect(this.handlerConnector.hooks, this.handlerMonitor, this.props);
if (process.env.NODE_ENV !== 'production') {
invariant(isPlainObject(nextState), 'Expected `collect` specified as the second argument to ' +
'%s for %s to return a plain object of props to inject. ' +
'Instead, received %s.', containerDisplayName, displayName, nextState);
}
return nextState;
}
render() {
return (React.createElement(DndContext.Consumer, null, ({ dragDropManager }) => {
this.receiveDragDropManager(dragDropManager);
if (typeof requestAnimationFrame !== 'undefined') {
requestAnimationFrame(() => this.handlerConnector?.reconnect());
}
return (React.createElement(Decorated, Object.assign({}, this.props, this.getCurrentState(), {
// NOTE: if Decorated is a Function Component, decoratedRef will not be populated unless it's a refforwarding component.
ref: isRefable(Decorated) ? this.decoratedRef : null })));
}));
}
receiveDragDropManager(dragDropManager) {
if (this.manager !== undefined) {
return;
}
invariant(dragDropManager !== undefined, 'Could not find the drag and drop manager in the context of %s. ' +
'Make sure to render a DndProvider component in your top-level component. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/troubleshooting#could-not-find-the-drag-and-drop-manager-in-the-context', displayName, displayName);
if (dragDropManager === undefined) {
return;
}
this.manager = dragDropManager;
this.handlerMonitor = createMonitor(dragDropManager);
this.handlerConnector = createConnector(dragDropManager.getBackend());
this.handler = createHandler(this.handlerMonitor, this.decoratedRef);
}
}
DragDropContainer.DecoratedComponent = DecoratedComponent;
DragDropContainer.displayName = `${containerDisplayName}(${displayName})`;
return DragDropContainer;
})();
return hoistStatics(DragDropContainer, DecoratedComponent);
}
createSourceFactory.d.ts 0000644 00000000656 15170136311 0011317 0 ustar 00 import * as React from 'react';
import { DragSource } from 'dnd-core';
import { DragSourceMonitor } from '../interfaces';
import { DragSourceSpec } from './interfaces';
export interface Source extends DragSource {
receiveProps(props: any): void;
}
export declare function createSourceFactory<Props, DragObject = any>(spec: DragSourceSpec<Props, DragObject>): (monitor: DragSourceMonitor, ref: React.RefObject<any>) => Source;
index.js 0000644 00000000167 15170136311 0006213 0 ustar 00 export * from './DragSource';
export * from './DropTarget';
export * from './DragLayer';
export * from './interfaces';
interfaces.d.ts 0000644 00000023671 15170136311 0007470 0 ustar 00 import * as React from 'react';
import { Identifier } from 'dnd-core';
import { DropTargetMonitor, DragSourceMonitor, DragLayerMonitor, ConnectDragPreview, ConnectDropTarget, ConnectDragSource } from '../interfaces';
import { NonReactStatics } from 'hoist-non-react-statics';
/**
* A DnD interactive component
*/
export interface DndComponent<Props> extends React.Component<Props> {
getDecoratedComponentInstance(): React.Component<Props> | null;
getHandlerId(): Identifier;
}
/**
* Interface for the DropTarget specification object
*/
export interface DropTargetSpec<Props> {
/**
* 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?: (props: Props, monitor: DropTargetMonitor, component: any) => any;
/**
* 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?: (props: Props, monitor: DropTargetMonitor, component: any) => 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?: (props: Props, monitor: DropTargetMonitor) => boolean;
}
export interface DragSourceSpec<Props, DragObject> {
/**
* Required.
* When the dragging starts, beginDrag is called. You must return a plain JavaScript object describing the
* data being dragged. What you return 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 into it, but you should try very hard to avoid doing this because it couples the drag
* sources and drop targets. It's a good idea to return something like { id: props.id } from this method.
*/
beginDrag: (props: Props, monitor: DragSourceMonitor, component: any) => DragObject;
/**
* 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.
*/
endDrag?: (props: Props, monitor: DragSourceMonitor, component: any) => 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?: (props: Props, 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?: (props: Props, monitor: DragSourceMonitor) => boolean;
}
/**
* DragSourceConnector is an object passed to a collecting function of the DragSource.
* Its methods return functions that let you assign the roles to your component's DOM nodes.
*/
export interface DragSourceConnector {
/**
* Returns a function that must be used inside the component to assign the drag source role to a node. By
* returning { connectDragSource: connect.dragSource() } from your collecting function, you can mark any React
* element as the draggable node. To do that, replace any element with this.props.connectDragSource(element) inside
* the render function.
*/
dragSource(): ConnectDragSource;
/**
* Optional. Returns a function that may be used inside the component to assign the drag preview role to a node. By
* returning { connectDragPreview: connect.dragPreview() } from your collecting function, you can mark any React element
* as the drag preview node. To do that, replace any element with this.props.connectDragPreview(element) inside the render
* function. The drag preview is the node that will be screenshotted by the HTML5 backend when the drag begins. For example,
* if you want to make something draggable by a small custom handle, you can mark this handle as the dragSource(), but also
* mark an outer, larger component node as the dragPreview(). Thus the larger drag preview appears on the screenshot, but
* only the smaller drag source is actually draggable. Another possible customization is passing an Image instance to dragPreview
* from a lifecycle method like componentDidMount. This lets you use the actual images for drag previews. (Note that IE does not
* support this customization). See the example code below for the different usage examples.
*/
dragPreview(): ConnectDragPreview;
}
/**
* DropTargetConnector is an object passed to a collecting function of the DropTarget. Its only method dropTarget() returns a function
* that lets you assign the drop target role to one of your component's DOM nodes.
*/
export interface DropTargetConnector {
/**
* Returns a function that must be used inside the component to assign the drop target role to a node.
* By returning { connectDropTarget: connect.dropTarget() } from your collecting function, you can mark any React element
* as the droppable node. To do that, replace any element with this.props.connectDropTarget(element) inside the render function.
*/
dropTarget(): ConnectDropTarget;
}
export declare type DragSourceCollector<CollectedProps, TargetProps> = (connect: DragSourceConnector, monitor: DragSourceMonitor, props: TargetProps) => CollectedProps;
export declare type DropTargetCollector<CollectedProps, TargetProps> = (connect: DropTargetConnector, monitor: DropTargetMonitor, props: TargetProps) => CollectedProps;
export declare type DragLayerCollector<TargetProps, CollectedProps> = (monitor: DragLayerMonitor, props: TargetProps) => CollectedProps;
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
/**
* A property P will be present if:
* - it is present in DecorationTargetProps
*
* Its value will be dependent on the following conditions
* - if property P is present in InjectedProps and its definition extends the definition
* in DecorationTargetProps, then its definition will be that of DecorationTargetProps[P]
* - if property P is not present in InjectedProps then its definition will be that of
* DecorationTargetProps[P]
* - if property P is present in InjectedProps but does not extend the
* DecorationTargetProps[P] definition, its definition will be that of InjectedProps[P]
*/
export declare type Matching<InjectedProps, DecorationTargetProps> = {
[P in keyof DecorationTargetProps]: P extends keyof InjectedProps ? InjectedProps[P] extends DecorationTargetProps[P] ? DecorationTargetProps[P] : InjectedProps[P] : DecorationTargetProps[P];
};
/**
* a property P will be present if :
* - it is present in both DecorationTargetProps and InjectedProps
* - InjectedProps[P] can satisfy DecorationTargetProps[P]
* ie: decorated component can accept more types than decorator is injecting
*
* For decoration, inject props or ownProps are all optionally
* required by the decorated (right hand side) component.
* But any property required by the decorated component must be satisfied by the injected property.
*/
export declare type Shared<InjectedProps, DecorationTargetProps> = {
[P in Extract<keyof InjectedProps, keyof DecorationTargetProps>]?: InjectedProps[P] extends DecorationTargetProps[P] ? DecorationTargetProps[P] : never;
};
/**
* Gets the props interface of a component using inference
*/
export declare type GetProps<C> = C extends React.ComponentType<infer P> ? P : never;
export declare type DndComponentEnhancer<CollectedProps> = <C extends React.ComponentType<Matching<CollectedProps, GetProps<C>>>>(component: C) => DndComponentClass<C, Omit<GetProps<C>, keyof Shared<CollectedProps, GetProps<C>>>>;
export declare type DndComponentClass<C extends React.ComponentType<any>, P> = React.ComponentClass<JSX.LibraryManagedAttributes<C, P>> & NonReactStatics<C> & {
DecoratedComponent: C;
};
DragSource.js 0000644 00000005211 15170136311 0007135 0 ustar 00 import { invariant } from '@react-dnd/invariant';
import { isPlainObject } from '../utils/js_utils';
import { checkDecoratorArguments } from './utils';
import { decorateHandler } from './decorateHandler';
import { registerSource } from '../common/registration';
import { DragSourceMonitorImpl } from '../common/DragSourceMonitorImpl';
import { SourceConnector } from '../common/SourceConnector';
import { isValidType } from '../utils/isValidType';
import { createSourceFactory } from './createSourceFactory';
/**
* Decorates a component as a dragsource
* @param type The dragsource type
* @param spec The drag source specification
* @param collect The props collector function
* @param options DnD options
*/
export function DragSource(type, spec, collect, options = {}) {
checkDecoratorArguments('DragSource', 'type, spec, collect[, options]', type, spec, collect, options);
let getType = type;
if (typeof type !== 'function') {
invariant(isValidType(type), 'Expected "type" provided as the first argument to DragSource to be ' +
'a string, or a function that returns a string given the current props. ' +
'Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', type);
getType = () => type;
}
invariant(isPlainObject(spec), 'Expected "spec" provided as the second argument to DragSource to be ' +
'a plain object. Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', spec);
const createSource = createSourceFactory(spec);
invariant(typeof collect === 'function', 'Expected "collect" provided as the third argument to DragSource to be ' +
'a function that returns a plain object of props to inject. ' +
'Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', collect);
invariant(isPlainObject(options), 'Expected "options" provided as the fourth argument to DragSource to be ' +
'a plain object when specified. ' +
'Instead, received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', collect);
return function decorateSource(DecoratedComponent) {
return decorateHandler({
containerDisplayName: 'DragSource',
createHandler: createSource,
registerHandler: registerSource,
createConnector: (backend) => new SourceConnector(backend),
createMonitor: (manager) => new DragSourceMonitorImpl(manager),
DecoratedComponent,
getType,
collect,
options,
});
};
}
createSourceFactory.js 0000644 00000005670 15170136311 0011064 0 ustar 00 import { invariant } from '@react-dnd/invariant';
import { isPlainObject } from '../utils/js_utils';
import { getDecoratedComponent } from './utils';
const ALLOWED_SPEC_METHODS = ['canDrag', 'beginDrag', 'isDragging', 'endDrag'];
const REQUIRED_SPEC_METHODS = ['beginDrag'];
class SourceImpl {
constructor(spec, monitor, ref) {
this.props = null;
this.beginDrag = () => {
if (!this.props) {
return;
}
const item = this.spec.beginDrag(this.props, this.monitor, this.ref.current);
if (process.env.NODE_ENV !== 'production') {
invariant(isPlainObject(item), 'beginDrag() must return a plain object that represents the dragged item. ' +
'Instead received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', item);
}
return item;
};
this.spec = spec;
this.monitor = monitor;
this.ref = ref;
}
receiveProps(props) {
this.props = props;
}
canDrag() {
if (!this.props) {
return false;
}
if (!this.spec.canDrag) {
return true;
}
return this.spec.canDrag(this.props, this.monitor);
}
isDragging(globalMonitor, sourceId) {
if (!this.props) {
return false;
}
if (!this.spec.isDragging) {
return sourceId === globalMonitor.getSourceId();
}
return this.spec.isDragging(this.props, this.monitor);
}
endDrag() {
if (!this.props) {
return;
}
if (!this.spec.endDrag) {
return;
}
this.spec.endDrag(this.props, this.monitor, getDecoratedComponent(this.ref));
}
}
export function createSourceFactory(spec) {
Object.keys(spec).forEach((key) => {
invariant(ALLOWED_SPEC_METHODS.indexOf(key) > -1, 'Expected the drag source specification to only have ' +
'some of the following keys: %s. ' +
'Instead received a specification with an unexpected "%s" key. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', ALLOWED_SPEC_METHODS.join(', '), key);
invariant(typeof spec[key] === 'function', 'Expected %s in the drag source specification to be a function. ' +
'Instead received a specification with %s: %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', key, key, spec[key]);
});
REQUIRED_SPEC_METHODS.forEach((key) => {
invariant(typeof spec[key] === 'function', 'Expected %s in the drag source specification to be a function. ' +
'Instead received a specification with %s: %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source', key, key, spec[key]);
});
return function createSource(monitor, ref) {
return new SourceImpl(spec, monitor, ref);
};
}
createTargetFactory.js 0000644 00000004353 15170136311 0011047 0 ustar 00 import { invariant } from '@react-dnd/invariant';
import { isPlainObject } from '../utils/js_utils';
import { getDecoratedComponent } from './utils';
const ALLOWED_SPEC_METHODS = ['canDrop', 'hover', 'drop'];
class TargetImpl {
constructor(spec, monitor, ref) {
this.props = null;
this.spec = spec;
this.monitor = monitor;
this.ref = ref;
}
receiveProps(props) {
this.props = props;
}
receiveMonitor(monitor) {
this.monitor = monitor;
}
canDrop() {
if (!this.spec.canDrop) {
return true;
}
return this.spec.canDrop(this.props, this.monitor);
}
hover() {
if (!this.spec.hover || !this.props) {
return;
}
this.spec.hover(this.props, this.monitor, getDecoratedComponent(this.ref));
}
drop() {
if (!this.spec.drop) {
return undefined;
}
const dropResult = this.spec.drop(this.props, this.monitor, this.ref.current);
if (process.env.NODE_ENV !== 'production') {
invariant(typeof dropResult === 'undefined' || isPlainObject(dropResult), 'drop() must either return undefined, or an object that represents the drop result. ' +
'Instead received %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', dropResult);
}
return dropResult;
}
}
export function createTargetFactory(spec) {
Object.keys(spec).forEach((key) => {
invariant(ALLOWED_SPEC_METHODS.indexOf(key) > -1, 'Expected the drop target specification to only have ' +
'some of the following keys: %s. ' +
'Instead received a specification with an unexpected "%s" key. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', ALLOWED_SPEC_METHODS.join(', '), key);
invariant(typeof spec[key] === 'function', 'Expected %s in the drop target specification to be a function. ' +
'Instead received a specification with %s: %s. ' +
'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target', key, key, spec[key]);
});
return function createTarget(monitor, ref) {
return new TargetImpl(spec, monitor, ref);
};
}
index.d.ts 0000644 00000000167 15170136311 0006447 0 ustar 00 export * from './DragSource';
export * from './DropTarget';
export * from './DragLayer';
export * from './interfaces';
disposables.js 0000644 00000011774 15170136311 0007422 0 ustar 00 import { isFunction, noop } from '../utils/js_utils';
/**
* Provides a set of static methods for creating Disposables.
* @param {Function} action Action to run during the first call to dispose.
* The action is guaranteed to be run at most once.
*/
let Disposable = /** @class */ (() => {
class Disposable {
constructor(action) {
this.isDisposed = false;
this.action = isFunction(action) ? action : noop;
}
/**
* Validates whether the given object is a disposable
* @param {Object} Object to test whether it has a dispose method
* @returns {Boolean} true if a disposable object, else false.
*/
static isDisposable(d) {
return Boolean(d && isFunction(d.dispose));
}
static _fixup(result) {
return Disposable.isDisposable(result) ? result : Disposable.empty;
}
/**
* Creates a disposable object that invokes the specified action when disposed.
* @param {Function} dispose Action to run during the first call to dispose.
* The action is guaranteed to be run at most once.
* @return {Disposable} The disposable object that runs the given action upon disposal.
*/
static create(action) {
return new Disposable(action);
}
/** Performs the task of cleaning up resources. */
dispose() {
if (!this.isDisposed) {
this.action();
this.isDisposed = true;
}
}
}
/**
* Gets the disposable that does nothing when disposed.
*/
Disposable.empty = { dispose: noop };
return Disposable;
})();
export { Disposable };
/**
* Represents a group of disposable resources that are disposed together.
* @constructor
*/
export class CompositeDisposable {
constructor(...disposables) {
this.isDisposed = false;
this.disposables = disposables;
}
/**
* Adds a disposable to the CompositeDisposable or disposes the disposable if the CompositeDisposable is disposed.
* @param {Any} item Disposable to add.
*/
add(item) {
if (this.isDisposed) {
item.dispose();
}
else {
this.disposables.push(item);
}
}
/**
* Removes and disposes the first occurrence of a disposable from the CompositeDisposable.
* @param {Any} item Disposable to remove.
* @returns {Boolean} true if found; false otherwise.
*/
remove(item) {
let shouldDispose = false;
if (!this.isDisposed) {
const idx = this.disposables.indexOf(item);
if (idx !== -1) {
shouldDispose = true;
this.disposables.splice(idx, 1);
item.dispose();
}
}
return shouldDispose;
}
/**
* Disposes all disposables in the group and removes them from the group but
* does not dispose the CompositeDisposable.
*/
clear() {
if (!this.isDisposed) {
const len = this.disposables.length;
const currentDisposables = new Array(len);
for (let i = 0; i < len; i++) {
currentDisposables[i] = this.disposables[i];
}
this.disposables = [];
for (let i = 0; i < len; i++) {
currentDisposables[i].dispose();
}
}
}
/**
* Disposes all disposables in the group and removes them from the group.
*/
dispose() {
if (!this.isDisposed) {
this.isDisposed = true;
const len = this.disposables.length;
const currentDisposables = new Array(len);
for (let i = 0; i < len; i++) {
currentDisposables[i] = this.disposables[i];
}
this.disposables = [];
for (let i = 0; i < len; i++) {
currentDisposables[i].dispose();
}
}
}
}
/**
* Represents a disposable resource whose underlying disposable resource can
* be replaced by another disposable resource, causing automatic disposal of
* the previous underlying disposable resource.
*/
export class SerialDisposable {
constructor() {
this.isDisposed = false;
}
/**
* Gets the underlying disposable.
* @returns {Any} the underlying disposable.
*/
getDisposable() {
return this.current;
}
setDisposable(value) {
const shouldDispose = this.isDisposed;
if (!shouldDispose) {
const old = this.current;
this.current = value;
if (old) {
old.dispose();
}
}
if (shouldDispose && value) {
value.dispose();
}
}
/** Performs the task of cleaning up resources. */
dispose() {
if (!this.isDisposed) {
this.isDisposed = true;
const old = this.current;
this.current = undefined;
if (old) {
old.dispose();
}
}
}
}
interfaces.js 0000644 00000000000 15170136311 0007211 0 ustar 00 createTargetFactory.d.ts 0000644 00000000670 15170136311 0011301 0 ustar 00 import * as React from 'react';
import { DropTarget } from 'dnd-core';
import { DropTargetMonitor } from '../interfaces';
import { DropTargetSpec } from './interfaces';
export interface Target extends DropTarget {
receiveProps(props: any): void;
receiveMonitor(monitor: any): void;
}
export declare function createTargetFactory<Props>(spec: DropTargetSpec<Props>): (monitor: DropTargetMonitor, ref: React.RefObject<any>) => Target;