mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
121 lines
4.4 KiB
TypeScript
121 lines
4.4 KiB
TypeScript
// Type definitions for react-dnd-multi-backend 3.0
|
|
// Project: https://github.com/LouisBrunner/react-dnd-multi-backend, https://louisbrunner.github.io/dnd-multi-backend/packages/react-dnd-multi-backend
|
|
// Definitions by: Janeene Beeforth <https://github.com/dawnmist>
|
|
// Adam Haglund <https://github.com/beeequeue>
|
|
// Rob Valentine <https://github.com/robcodemonkey>
|
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
// TypeScript Version: 2.8
|
|
|
|
import { CSSProperties, PureComponent } from "react";
|
|
import { BackendFactory } from "dnd-core";
|
|
|
|
/**
|
|
* Callback function type definition for checking whether an event represents a transition between
|
|
* dragging and dropping.
|
|
* @param event Touch/Mouse/Keyboard/etc UI Event.
|
|
* @returns True if the event triggers the start of a transition.
|
|
*/
|
|
export type CheckFunction<E extends UIEvent> = (event: E) => boolean;
|
|
|
|
/**
|
|
* Drag and drop Transition interface.
|
|
*/
|
|
export interface Transition {
|
|
/**
|
|
* ???
|
|
*/
|
|
_isMBTransition: boolean;
|
|
/**
|
|
* Event type that this transition should check against. This will be an HTML event, such as
|
|
* "dragstart", "touchstart", etc.
|
|
*/
|
|
event: string;
|
|
/**
|
|
* Check function to use for this transition.
|
|
*/
|
|
check: CheckFunction<any>;
|
|
}
|
|
|
|
/**
|
|
* Function to create a custom/new Transition.
|
|
* @param eventType EventType string to identify the type of event being tested. This will be an
|
|
* HTML event, such as "dragstart", "touchstart", etc.
|
|
* @param check The CheckFunction to use to verify if an event matches the event type.
|
|
* @returns A Transition to indicate when a particular Backend should be used.
|
|
*/
|
|
export function createTransition(eventType: string, check: CheckFunction<any>): Transition;
|
|
|
|
/**
|
|
* Declaration for a Drag and Drop backend to be used.
|
|
*/
|
|
export interface BackendDeclaration {
|
|
/**
|
|
* Backend - e.g. the one provided by react-dnd-html5-backend.
|
|
*/
|
|
backend: BackendFactory;
|
|
/**
|
|
* Flag to indicate that this backend needs to have a custom preview generated. This is mainly
|
|
* used for backends such as the react-dnd-touch-backend, where there is no default preview
|
|
* available.
|
|
*/
|
|
preview?: boolean;
|
|
/**
|
|
* The transition that this backend should be used for.
|
|
*/
|
|
transition?: Transition;
|
|
}
|
|
|
|
/**
|
|
* The declaration for the list of backends to be used.
|
|
*/
|
|
export interface Backends {
|
|
/**
|
|
* The array of backends to use. The first backend in the list is used as the default backend.
|
|
* This means that you can start with the html5 backend, and fall-back to a touch backend if
|
|
* the event is not one that is compatible with the html5 backend.
|
|
*/
|
|
backends: BackendDeclaration[];
|
|
}
|
|
|
|
/**
|
|
* Properties for the Preview class
|
|
*/
|
|
export interface PreviewProps {
|
|
/**
|
|
* Callback function to generate a preview object when dragging. This preview will only be used
|
|
* with backends that have the 'preview' flag set to true.
|
|
* @param type: the type of the item (monitor.getItemType())
|
|
* @param item: the item being dragged (monitor.getItem())
|
|
* @param style: an object representing the style to use for the item, it should be passed to
|
|
* your component's style property and is used for positioning.
|
|
* @returns The JSX element to display for the drag preview.
|
|
*/
|
|
generator(type: string, item: any, style: CSSProperties): JSX.Element;
|
|
}
|
|
|
|
/**
|
|
* Class to use when generating a custom preview for a dragged item.
|
|
* This is frequently used with the Touch backend to provide a preview on mobile devices.
|
|
*/
|
|
export class Preview extends PureComponent<PreviewProps> {}
|
|
/**
|
|
* Pre-existing/default react-dnd-multi-backend transition available to use.
|
|
*/
|
|
export const MouseTransition: Transition;
|
|
/**
|
|
* Pre-existing/default react-dnd-touch-backend transition available to use.
|
|
* This transition has the setting for "enableMouseEvents" turned on.
|
|
*/
|
|
export const TouchTransition: Transition;
|
|
/**
|
|
* Pre-existing/default react-dnd-html5-backend transition available to use.
|
|
*/
|
|
export const HTML5DragTransition: Transition;
|
|
|
|
/**
|
|
* Primary construction function for react-dnd-multi-backend.
|
|
* @param backends The list of backends in descending order of preference to use for drag and drop.
|
|
* @returns A backend definition compatible with react-dnd.
|
|
*/
|
|
export default function(backends: Backends): BackendFactory;
|