[react-beautiful-dnd] Update type for react-beautiful-dnd 10.1 (#33791)

Release note: https://github.com/atlassian/react-beautiful-dnd/releases/tag/v10.1.0
This commit is contained in:
Kanitkorn Sujautra
2019-03-13 02:45:51 +09:00
committed by Wesley Wigham
parent b1a104ea4f
commit 087cbdb2f7
2 changed files with 9 additions and 6 deletions

View File

@@ -1,4 +1,4 @@
// Type definitions for react-beautiful-dnd 10.0
// Type definitions for react-beautiful-dnd 10.1
// Project: https://github.com/atlassian/react-beautiful-dnd
// Definitions by: varHarrie <https://github.com/varHarrie>
// Bradley Ayers <https://github.com/bradleyayers>
@@ -6,6 +6,7 @@
// Mark Nelissen <https://github.com/marknelissen>
// Enrico Boccadifuoco <https://github.com/enricoboccadifuoco>
// Taeheon Kim <https://github.com/lonyele>
// Kanitkorn Sujautra <https://github.com/lukyth>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
@@ -111,6 +112,7 @@ export interface DroppableProvided {
export interface DroppableStateSnapshot {
isDraggingOver: boolean;
draggingOverWith?: DraggableId;
draggingFromThisWith?: DraggableId;
}
export interface DroppableProps {
@@ -205,6 +207,7 @@ export interface DraggableProps {
disableInteractiveElementBlocking?: boolean;
children(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement;
type?: TypeId;
shouldRespectForceTouch?: boolean;
}
export class Draggable extends React.Component<DraggableProps> { }

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 } from 'react-beautiful-dnd';
import { DragDropContext, Draggable, Droppable, DropResult, DragStart, DragUpdate, ResponderProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
interface Item {
id: string;
@@ -30,8 +30,8 @@ const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
...draggableStyle
});
const getListStyle = (isDraggingOver: any) => ({
background: isDraggingOver ? 'lightblue' : 'lightgrey',
const getListStyle = (snapshot: DroppableStateSnapshot) => ({
background: snapshot.draggingFromThisWith ? 'lightpink' : snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
width: 250
});
@@ -87,9 +87,9 @@ class App extends React.Component<{}, AppState> {
<DragDropContext 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.isDraggingOver)} {...provided.droppableProps}>
<div ref={provided.innerRef} style={getListStyle(snapshot)} {...provided.droppableProps}>
{this.state.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
<Draggable key={item.id} draggableId={item.id} index={index} shouldRespectForceTouch={false}>
{(provided, snapshot) => (
<div>
<div