mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
8f662ae62d
* [react-dnd-multi-backend] Fix Preview typings
Starting with 5.0.0, react-dnd-preview (which provides the Preview component) will start passing its arguments packed in one argument, an object {itemType, item, style}, instead of 3 different arguments (itemType, item and style). This means that will need to change your generator function to receive arguments correctly.
* [react-dnd-multi-backend] Add DndProvider export
### Migrating from 5.0.x
Starting with 5.1.0, react-dnd-multi-backend will export a new DndProvider which you can use instead of the one from react-dnd. You don't need to pass the backend prop to that component as it's implied you are using MultiBackend, however the major benefits is under the hood:
No longer relying on global values, allowing better encapsulation of the backend and previews
Preview will be mounted with DndProvider using a React.createPortal, thus you don't need to worry about mounting your Preview at the top of the tree for the absolute positioning to work correctly
Note that this isn't a breaking change, you can continue using the library as before.
* [react-dnd-multi-backend] Preview may return anything react can render
See https://www.npmjs.com/package/react-dnd-preview#usage--example
It says:
The function needs to return something that React can render (React component, null, etc).
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { DndProvider } from 'react-dnd';
|
|
import MultiBackend, { createTransition, TouchTransition, Backends, Preview, PreviewGenerator } from 'react-dnd-multi-backend';
|
|
import HTML5ToTouchEsm from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';
|
|
import HTML5ToTouchCjs from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
|
|
import TouchBackend from 'react-dnd-touch-backend';
|
|
|
|
const context = {};
|
|
|
|
/**
|
|
* Most common use case - using the default HTML5 with Touch as a fallback.
|
|
*/
|
|
const multiDndComponentEsm = (
|
|
<DndProvider backend={MultiBackend} options={HTML5ToTouchEsm}>
|
|
<div>A page of Text</div>
|
|
</DndProvider>
|
|
);
|
|
const multiDndComponentCjs = (
|
|
<DndProvider backend={MultiBackend} options={HTML5ToTouchCjs}>
|
|
<div>A page of Text</div>
|
|
</DndProvider>
|
|
);
|
|
|
|
/**
|
|
* Creating a custom list of backends, including creating a touch transition.
|
|
*/
|
|
const CustomBackends: Backends = {
|
|
backends: [
|
|
{
|
|
backend: TouchBackend,
|
|
options: { enableMouseEvents: false },
|
|
preview: true,
|
|
transition: createTransition('touchstart', (event: TouchEvent) => {
|
|
return event.touches != null;
|
|
})
|
|
},
|
|
{
|
|
backend: TouchBackend,
|
|
transition: TouchTransition
|
|
}]
|
|
};
|
|
const multiCustomBackendsComponent = (
|
|
<DndProvider backend={MultiBackend} options={CustomBackends}>
|
|
<div>A page of Text</div>
|
|
</DndProvider>
|
|
);
|
|
|
|
/**
|
|
* Testing the Preview component.
|
|
*/
|
|
class App extends React.Component {
|
|
generator: PreviewGenerator = ({item, itemType, style}) =>
|
|
(itemType === 'card')
|
|
? <div style={style}>{item.label}</div>
|
|
: <div />
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Preview generator={this.generator} />
|
|
<div>A page of text</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|