Hooks Ref'ing Updates

[darthtrevino]

Key Updates to the Hooks API per our recent discussion in #1148

• Remove ref key on dragSource, dropTarget spec.
• useDrag and useDrop return connector functions, which can now be chained and use as refs
• Change the top-level useDrag and useDrop functions to accept a function and memoize keys so that the spec objects aren't created on every render.

Simple Case

let [, drag] = useDrag({/*...*/})
return <div ref={drag}>...</div>

Chained Case

let [, drag] = useDrag({/*...*/})
let [, drop] = useDrop({/*...*/})
return <div ref={node => drag(drop(node))}>...</div>

or

let ref = useRef(null)
let [, drag] = useDrag({/*...*/})
let [, drop] = useDrop({/*...*/})
drag(drop(ref))
return <div ref={ref}>...</div>

Drag Previews

Remove preview key on dragSource spec, use connector function instead
Remove return ref from useDragPreview
Rename useDragPreview to useDetachedComponent
Add a DragPreviewImage component to render drag preview images on the output tree. (Note: The useDragPreview mechanism was removed inherit limitations in the HTML5 drag-and-drop API (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage) limit us to images)

let [, drag, preview] = useDrag(() => ({/*...*/}))
return (
    <div ref={drag}>
        <DragPreviewImage connect={preview} src="imageSrc.png" /> 
        ...
    </div>
)

Known Issues

• the shallowEquals check in useCollector is necessary for performance, but right now the hooks don't render correctly at all with it, and I'm not sure why.
• the draglayer example is wonky, dragged item is not disappearing and custom drag layer is wrong size
• the sortable card example is wonky, dragged item gets out of sync with view
• the stress test example does not function due to issue above.

[darthtrevino]

I'm not really a fan of using a callback to memoize. I'd like to run some tests to see if a function arg really makes a difference here.

[yched]

The removal of the "isClassComponent(Decorated)" logic causes a "Function components cannot be given refs" error in 7.4.0 when DragDropContext is used to wrap a non-class component, which was supported so far.

(I'm guessing this also affects other parts of the API where the isClassComponent() check was removed)

[darthtrevino]

I realized that and added the check back in

[darthtrevino]

Ahh, I see, I only restored the check in the decorateHandler. I'll restore those checks in a patch version today.

[yched]

Awesome, thanks !