fix touch dragndrop

Author: Adam

package.json

@@ -29,7 +29,7 @@
     "react": "^16.3.2",
     "react-dev-utils": "^6.0.0-next.b2fd8db8",
     "react-dnd": "^2.6.0",
-    "react-dnd-html5-backend": "^2.6.0",
+    "react-dnd-multi-backend": "^3.1.2",
     "react-dom": "^16.3.2",
     "react-keydown": "^1.9.7",
     "react-md": "^1.3.0",
@@ -52,7 +52,7 @@
     "@types/jest": "^22.2.3",
     "@types/react": "16.3.13",
     "@types/react-dnd": "^2.0.36",
-    "@types/react-dnd-html5-backend": "^2.1.9",
+    "@types/react-dnd-multi-backend": "^3.0.1",
     "@types/react-dom": "^16.0.5",
     "@types/react-redux": "5.0.19",
     "gh-pages": "^1.1.0",

src/App.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+import { compose } from 'redux'
 import { connect } from 'react-redux'
+import { DragDropContext } from 'react-dnd'
 import keydown from 'react-keydown/es'
 import styled from 'styled-components'
 import { Divider } from 'react-md/lib/Dividers'
@@ -8,6 +10,7 @@ import { startTimer, stopTimer, setTime } from '@state/actions/timerActions'
 import { TimerContainer } from './containers/Timer'
 import { UserContainer } from './containers/Users'
 import { GitHubLink } from './components/GitHubLink'
+import { multiBackend } from './utils/dragDropContext'
 import { Time } from './time'
 import { IState } from './state'
 
@@ -77,4 +80,7 @@ export class AppComponent extends React.Component<
   }
 }
 
-export const App = connect(mapState, mapActions)(AppComponent)
+export const App = compose(
+  connect(mapState, mapActions),
+  DragDropContext(multiBackend)
+)(AppComponent)

src/index.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import { DragDropContextProvider as DnDCProvider } from 'react-dnd'
-import * as HTML5Backend from 'react-dnd-html5-backend'
+
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/filter'
 import 'rxjs/add/operator/mapTo'
@@ -24,11 +23,9 @@ requestPermission()
 
 render(
   <Provider store={store}>
-    <DnDCProvider backend={HTML5Backend}>
-      <React.Fragment>
-        <App />
-      </React.Fragment>
-    </DnDCProvider>
+    <React.Fragment>
+      <App />
+    </React.Fragment>
   </Provider>,
   document.getElementById('root') as HTMLElement
 )
@@ -39,11 +36,9 @@ if ((module as any).hot) {
 
     render(
       <Provider store={store}>
-        <DnDCProvider backend={HTML5Backend}>
-          <React.Fragment>
-            <NextApp />
-          </React.Fragment>
-        </DnDCProvider>
+        <React.Fragment>
+          <NextApp />
+        </React.Fragment>
       </Provider>,
       document.getElementById('root')
     )

src/utils/dragDropContext.ts

@@ -0,0 +1,4 @@
+import MultiBackend from 'react-dnd-multi-backend'
+import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch'
+
+export const multiBackend = MultiBackend(HTML5toTouch)

yarn.lock

@@ -578,10 +578,11 @@
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.0.3.tgz#1f89840c7aac2406cc43a2ecad98fc02a8e130e4"
 
-"@types/react-dnd-html5-backend@^2.1.9":
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dnd-html5-backend/-/react-dnd-html5-backend-2.1.9.tgz#dfc9efe2a68bd12407815a2d61ddfd18bb8686fb"
+"@types/react-dnd-multi-backend@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dnd-multi-backend/-/react-dnd-multi-backend-3.0.1.tgz#9cdf9bfc23e3c12fb5bc47629181ae01e366c979"
   dependencies:
+    "@types/react" "*"
     "@types/react-dnd" "*"
 
 "@types/react-dnd@*", "@types/react-dnd@^2.0.36":
@@ -2320,6 +2321,10 @@ dnd-core@^2.6.0:
     lodash "^4.2.0"
     redux "^3.7.1"
 
+dnd-multi-backend@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/dnd-multi-backend/-/dnd-multi-backend-3.1.0.tgz#595fef292a47634da52014f8f0c70e06dcf1c76b"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -6344,13 +6349,39 @@ react-dev-utils@^6.0.0-next.b2fd8db8:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^2.6.0:
+react-dnd-html5-backend@*:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.6.0.tgz#590cd1cca78441bb274edd571fef4c0b16ddcf8e"
   dependencies:
     lodash "^4.2.0"
 
-react-dnd@^2.6.0:
+react-dnd-multi-backend@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-dnd-multi-backend/-/react-dnd-multi-backend-3.1.2.tgz#520493b7558bc7605ec218da12ddcfacfaec949a"
+  dependencies:
+    dnd-multi-backend "^3.1.0"
+    prop-types "^15.5.8"
+    react "*"
+    react-dnd-html5-backend "*"
+    react-dnd-preview "^3.0.7"
+    react-dnd-touch-backend "^0.3.13"
+
+react-dnd-preview@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/react-dnd-preview/-/react-dnd-preview-3.0.7.tgz#555da2123de675a43169cf5c9e7028e644e3f1fb"
+  dependencies:
+    prop-types "^15.5.8"
+    react "*"
+    react-dnd "*"
+
+react-dnd-touch-backend@^0.3.13:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-0.3.21.tgz#13951348511aed62c47705c82ed21e5e030fcce9"
+  dependencies:
+    invariant "^2.2.2"
+    react-dnd "^2.5.4"
+
+react-dnd@*, react-dnd@^2.5.4, react-dnd@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.6.0.tgz#7fa25676cf827d58a891293e3c1ab59da002545a"
   dependencies:
@@ -6469,7 +6500,7 @@ react-transition-group@^1.2.1:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react@^16.3.2:
+react@*, react@^16.3.2:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9"
   dependencies: