docs: expand the touchbackend section, add docs on the options flag…

… for DndProvider

packages/documentation/docsite/markdown/docs/01 Top Level API/DndContext.md → packages/documentation/docsite/markdown/docs/01 Top Level API/DndProvider.md

@@ -18,7 +18,11 @@ import { DndProvider } from 'react-dnd'
 
 export default class YourApp {
   render() {
-    return <DndProvider backend={HTML5Backend}>/* ... */</DndProvider>
+    return (
+      <DndProvider backend={HTML5Backend}>
+        /* Your Drag-and-Drop Application */
+      </DndProvider>
+    )
   }
 }
 ```
@@ -27,3 +31,4 @@ export default class YourApp {
 
 - **`backend`**: Required. A React DnD backend. Unless you're writing a custom one, you probably want to use the [HTML5 backend](/docs/backends/html5) that ships with React DnD.
 - **`context`**: Optional. The backend context used to configure the backend. This is dependent on the backend implementation.
+- **`options`**: Optional. An options object used to configure the backend. This is dependent on the backend implementation.

packages/documentation/docsite/markdown/docs/05 Backends/HTML5.md

@@ -7,18 +7,14 @@ _New to React DnD? [Read the overview](/docs/overview) before jumping into the d
 
 # HTML5
 
-This is the only officially supported backend for React DnD. It uses [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood and hides [its quirks](http://quirksmode.org/blog/archives/2009/09/the_html5_drag.html).
+This is the primary backend supported by React-DnD. It uses [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood and hides [its quirks](http://quirksmode.org/blog/archives/2009/09/the_html5_drag.html).
 
 ### Installation
 
-The HTML5 backend comes in a separate package:
-
 ```
-npm install --save react-dnd-html5-backend
+yarn add react-dnd-html5-backend
 ```
 
-While we suggest you to use NPM, you can find the precompiled UMD build in the `dist` folder available on the [latest](https://github.com/react-dnd/react-dnd-html5-backend/tree/latest/dist) branch as well as in every [tagged release](https://github.com/react-dnd/react-dnd-html5-backend/releases). This is where you can point Bower if that’s what you use.
-
 ### Extras
 
 Aside from the default export, the HTML5 backend module also provides a few extras:
@@ -33,11 +29,13 @@ Aside from the default export, the HTML5 backend module also provides a few extr
 import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 
-class YourApp {
-  /* ... */
+export default function MyReactApp() {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      /* your drag-and-drop application */
+    </DndProvider>
+  )
 }
-
-export default DragDropContext(HTML5Backend)(YourApp)
 ```
 
 When you call `getItem()` on a monitor, the HTML5 backend exposes various data from the event, depending on the drop type:

packages/documentation/docsite/markdown/docs/05 Backends/Test.md

@@ -14,7 +14,7 @@ The test backend lets you test the drag and drop interaction of your components
 The test backend comes in a separate package:
 
 ```
-npm install --save-dev react-dnd-test-backend
+yarn add --dev react-dnd-test-backend
 ```
 
 ### Usage

packages/documentation/docsite/markdown/docs/05 Backends/Touch.md

@@ -24,8 +24,95 @@ import TouchBackend from 'react-dnd-touch-backend'
 import { DragDropContext } from 'react-dnd'
 
 class YourApp {
-  <DndProvider backend={TouchBackend}>
+  <DndProvider backend={TouchBackend} options={opts}>
     {/* Your application */}
   </DndProvider>
 }
 ```
+
+### Options
+
+- **enableTouchEvents**(default: true)
+
+  A flag indicating whether touch-based event processing is enabled.
+
+- **enableMouseEvents**(default: false)
+
+  A flag indicating whether to enable click-based event processing.
+
+  **NOTE**: This is buggy due to the difference in touchstart/touchend event propagation compared to mousedown/mouseup/click.
+
+- **enableKeyboardEvents** (default: false)
+
+  A flag indicating whether to enable keyboard event processing.
+
+- **delay** (default: 0)
+
+  The amount in ms to delay processing for all events
+
+- **delayTouchStart** (default: 0)
+
+  The amount in ms to delay processing of touch events
+
+- **delayMouseStart** (default: 0)
+
+  The amount in ms to delay processing of mouse events
+
+- **touchSlop** (default: 0)
+
+  Specifies the pixel distance moved before a drag is signaled.
+
+- **ignoreContextMenu** (default: false)
+
+  If true, prevents the contextmenu event from canceling a drag.
+
+- **scrollAngleRanges**: (default: undefined)
+
+  Specifies ranges of angles in degrees that drag events should be ignored. This is useful when you want to allow the user to scroll in a particular direction instead of dragging. Degrees move clockwise, 0/360 pointing to the left.
+
+  ```jsx
+  // allow vertical scrolling
+  const options = {
+    scrollAngleRanges: [{ start: 30, end: 150 }, { start: 210, end: 330 }],
+  }
+  // allow horizontal scrolling
+  const options = {
+    scrollAngleRanges: [{ start: 300 }, { end: 60 }, { start: 120, end: 240 }],
+  }
+  ```
+
+- **enableHoverOutsideTarget**: (default: undefined)
+
+  Continue dragging of currently dragged element when pointer leaves DropTarget area
+
+- **getDropTargetElementsAtPoint** (default: undefined) - uses document.elementsFromPoint or polyfill
+
+  Specify a custom function to find drop target elements at the given point. Useful for improving performance in environments (iOS Safari) where document.elementsFromPoint is not available.
+
+  ```jsx
+  const hasNative =
+    document && (document.elementsFromPoint || document.msElementsFromPoint)
+
+  function getDropTargetElementsAtPoint(x, y, dropTargets) {
+    return dropTargets.filter(t => {
+      const rect = t.getBoundingClientRect()
+      return (
+        x >= rect.left &&
+        x <= rect.right &&
+        y <= rect.bottom &&
+        y >= rect.top
+      )
+    })
+  }
+
+  // use custom function only if elementsFromPoint is not supported
+  const backendOptions = {
+    getDropTargetElementsAtPoint: !hasNative && getDropTargetElementsAtPoint,
+  }
+
+  <DndProvider
+    backend={TouchBackend}
+    options={backendOptions}>
+    /* your react application */
+  </DndProvider>
+  ```