[react-dnd-multi-backend]: Update default export types for react-dnd-multi-backend 4.0 (#38893)

This commit is contained in:
Marc Missey 2019-10-09 18:08:40 -06:00 committed by Armando Aguirre
parent c79ad1cd46
commit 5a20473e6f
3 changed files with 17 additions and 8 deletions

View File

@ -117,8 +117,9 @@ export const TouchTransition: Transition;
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.
* Primary BackendFactory for react-dnd-multi-backend.
* You must pass an object containing `backends[]` as options
* @returns A backend factory compatible with react-dnd.
*/
export default function(backends: Backends): BackendFactory;
export const MultiBackend: BackendFactory;
export default MultiBackend;

View File

@ -1,7 +1,7 @@
{
"private": true,
"dependencies": {
"dnd-core": "^9.3.1",
"react-dnd": "^9.3.1",
"react-dnd-touch-backend": "^9.3.1"
}
}

View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { createDragDropManager } from 'dnd-core';
import { DndProvider } from 'react-dnd';
import MultiBackend, { createTransition, TouchTransition, Backends, Preview } from 'react-dnd-multi-backend';
import HTML5ToTouch from 'react-dnd-multi-backend/lib/HTML5toTouch';
import TouchBackend from 'react-dnd-touch-backend';
@ -9,7 +9,11 @@ const context = {};
/**
* Most common use case - using the default HTML5 with Touch as a fallback.
*/
const multiDndComponent = createDragDropManager(MultiBackend(HTML5ToTouch), context, {});
const multiDndComponent = (
<DndProvider backend={MultiBackend} options={HTML5ToTouch}>
<div>A page of Text</div>
</DndProvider>
);
/**
* Creating a custom list of backends, including creating a touch transition.
@ -29,7 +33,11 @@ const CustomBackends: Backends = {
transition: TouchTransition
}]
};
const multiCustomBackendsComponent = createDragDropManager(MultiBackend(CustomBackends), context, {});
const multiCustomBackendsComponent = (
<DndProvider backend={MultiBackend} options={CustomBackends}>
<div>A page of Text</div>
</DndProvider>
);
/**
* Testing the Preview component.