Add onBeforeCapture to React-Beautiful-DnD (#41131)

This commit is contained in:
Tim Perry 2019-12-23 16:14:59 +00:00 committed by Andrew Branch
parent 6bd34e594d
commit d7fbc2e837
2 changed files with 15 additions and 4 deletions

View File

@ -35,6 +35,8 @@ export interface ResponderProvided {
announce: Announce;
}
export type OnBeforeCaptureResponder = (before: BeforeCapture) => void;
export type OnBeforeDragStartResponder = (start: DragStart) => void;
export type OnDragStartResponder = (
@ -53,6 +55,7 @@ export type OnDragEndResponder = (
) => void;
export interface Responders {
onBeforeCapture?: OnBeforeCaptureResponder;
onBeforeDragStart?: OnBeforeDragStartResponder;
onDragStart?: OnDragStartResponder;
onDragUpdate?: OnDragUpdateResponder;
@ -63,11 +66,14 @@ export interface Responders {
* DragDropContext
*/
export interface DragStart {
export interface BeforeCapture {
draggableId: DraggableId;
mode: MovementMode;
}
export interface DragStart extends BeforeCapture {
type: TypeId;
source: DraggableLocation;
mode: MovementMode;
}
export interface DragUpdate extends DragStart {
@ -87,6 +93,7 @@ export interface DropResult extends DragUpdate {
}
export interface DragDropContextProps {
onBeforeCapture?(before: BeforeCapture): void;
onBeforeDragStart?(initial: DragStart): void;
onDragStart?(initial: DragStart, provided: ResponderProvided): void;
onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;

View File

@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DragDropContext, Draggable, Droppable, DropResult, DragStart, DragUpdate, ResponderProvided, DroppableStateSnapshot, resetServerContext } from 'react-beautiful-dnd';
import { DragDropContext, Draggable, Droppable, DropResult, BeforeCapture, DragStart, DragUpdate, ResponderProvided, DroppableStateSnapshot, resetServerContext } from 'react-beautiful-dnd';
interface Item {
id: string;
@ -48,6 +48,10 @@ class App extends React.Component<{}, AppState> {
this.onDragEnd = this.onDragEnd.bind(this);
}
onBeforeCapture(beforeCapture: BeforeCapture) {
//
}
onBeforeDragStart(dragStart: DragStart) {
//
}
@ -84,7 +88,7 @@ class App extends React.Component<{}, AppState> {
render() {
return (
<DragDropContext onBeforeDragStart={this.onBeforeDragStart} onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd}>
<DragDropContext onBeforeCapture={this.onBeforeCapture} onBeforeDragStart={this.onBeforeDragStart} onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate} onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable" ignoreContainerClipping={false} isCombineEnabled={true}>
{(provided, snapshot) => (
<div ref={provided.innerRef} style={getListStyle(snapshot)} {...provided.droppableProps}>