Add react-dnd-touch-backend

[darthtrevino]

Fixes #1363

[longlho]

Can we merge this in :) ?

[darthtrevino]

Yep! @longlho I made some updates to the TouchBackend to get it in line with our current TypeScript settings. I'll look into wiring it into the documentation so we can test out out further

[longlho]

thanks a lot!

[darthtrevino]

Hey Marvin, The DndProvider in 9.0 accepts a new 'options' prop. <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>

…

On Thu, Jul 4, 2019 at 12:37 AM Marvin ***@***.***> wrote: Hey question: My current Code: import { BackendFactory } from 'dnd-core'; import TouchBackend from 'react-dnd-touch-backend'; const Backend: BackendFactory = TouchBackend({ enableMouseEvents: true }); export default Backend; This will not work anymore with 9.0.0 now and the mono-repo (which I think is excellent step) What do I need to do, to make it work again with: <DndProvider backend={Backend}> Thanks for all your work. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1425?email_source=notifications&email_token=AAA3XCHGP3XL63SE65H7B2TP5WSDXA5CNFSM4H2UWRO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZGTBLQ#issuecomment-508375214>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAA3XCFTMGNPFLIVWDUWCXDP5WSDXANCNFSM4H2UWROQ> .

[ghost]

Hi,

<DndProvider backend={TouchBackend({ delayTouchStart: 200 })}> was working for me on react-dnd@8.0.3 with react-dnd-touch-backend@0.8.3. But this syntax caused an error on react-dnd@9.0.0 with react-dnd-touch-backend@9.0.0.

Uncaught TypeError: manager.getActions is not a function
at new TouchBackend (TouchBackend.js:241)
at createTouchBackendFactory (index.js:5)

After changing over to use <DndProvider backend={TouchBackend} options={{ delayTouchStart: 200 }}>, I no longer had the error.

Nevertheless, even with the new syntax to avoid the error, touch drag and drop no longer works for me on my touch device (testing on an iPhone 6 iOS 12.3.1).

For now I've reverted for now back to 8.03 / 0.8.3. Will try to upgrade again sometime. Thanks.

[darthtrevino]

@leantide would you be willing to put up a quick codesandbox demonstrating a working example? The touch-backend is fairly new in this repository, and I'd like to get that to a reliable point

[darthtrevino]

I can repro it on my end. I'll see if I can get this working tonight

[darthtrevino]

Thanks for the report @leantide - this should be fixed in the next patch release

[ghost]

Thanks @darthtrevino. Using <DndProvider backend={TouchBackend} options={{ delayTouchStart: 200 }}> now works for me on react-dnd-touch-backend @ 9.0.2.

Just a suggestion. Given that there are two backends, maybe it would be beneficial in your docs to show an example of how a web app could support both a mouse interface and touch interface, for example, by using a component that would dynamically use the HTML backend or the touch backend based on the detection of a mouse using
window.matchMedia('(pointer: fine)')
and the detection of touch using
window.matchMedia('(pointer: coarse)')