work with elements that have Ref's generated using the Hooks API (#1242)

* fix: work with elements that have Ref's generated using the Hooks API

In the new Hooks API, Ref's no longer have to be functions, but can
be simple objects with a `current` property. Instead of calling the
Ref function, React sets `ref.current`.

Currently, the following will throw an error:

```jsx
const MyComponent = ({connectDragSource}) => {
  const ref = useRef();

  return (<div ref={ref}/>);
};

DragSource(type, spec, connect)(MyComponent);
```

There is ongoing work to provide a Hooks API for react-dnd, which will ultimately be preferrable, but this provides an immediate fix for mixing the current API with React Hooks.

* refactor: add setref utility

* feat: add react.createRef to FC simple example

packages/documentation-examples/src/01 Dustbin/Single Target with FCs/Box.tsx

@@ -32,8 +32,13 @@ const Box: React.SFC<BoxProps & BoxCollectedProps> = ({
 	name,
 }) => {
 	const opacity = isDragging ? 0.4 : 1
+	const ref = React.createRef()
 	return connectDragSource
-		? connectDragSource(<div style={{ ...style, opacity }}>{name}</div>)
+		? connectDragSource(
+				<div ref={ref as any} style={{ ...style, opacity }}>
+					{name}
+				</div>,
+		  )
 		: null
 }
 

packages/react-dnd/src/utils/cloneWithRef.ts

@@ -2,6 +2,14 @@ declare var require: any
 import { cloneElement } from 'react'
 const invariant = require('invariant')
 
+function setRef(ref: any, node: any) {
+	if (typeof ref === 'function') {
+		ref(node)
+	} else {
+		ref.current = node
+	}
+}
+
 export default function cloneWithRef(
 	element: any,
 	newRef: any,
@@ -23,9 +31,9 @@ export default function cloneWithRef(
 
 	return cloneElement(element, {
 		ref: (node: any) => {
-			newRef(node)
+			setRef(newRef, node)
 			if (previousRef) {
-				previousRef(node)
+				setRef(previousRef, node)
 			}
 		},
 	})