react-dnd simple sortable example ES6 instead of ES7

Question

I'm attempting to follow this example:

https://github.com/gaearon/react-dnd/tree/master/examples/04%20Sortable/Simple

But the code is using ES7 and I don't know how to replace the decorators and the decorate dependency in this file:

https://github.com/gaearon/react-dnd/blob/master/examples/04%20Sortable/Simple/Card.js

I've tried to read about decorators but I just don't understand it. I'm hoping someone can give an ES6 example of the Card.js code so I can get a better idea of what's going on and rewrite that example for my own use.

Answer 1

_.flow is a nice solution, but it's not necessary to install underscore and add an import just for this one task.

DragSource() returns a function that takes a React component class as input and returns a new React component class which will act as a drag source. DropTarget() does the same thing. knowing this, we can simply write:

DragSource(_itemType_, _sourceSpecification_, _sourceCollector_)(
    DropTarget(_itemType_, _targetSpecification, _targetCollector_)(YourComponent))

DropTarget(/*...*/)(YourComponent) will return a target component class, and DragSource(/*...*/) can read in that newly created component class and spit out a final component class that is both a drop target and a drag source.

a little verbose, but it gets the job done without using an outside library, if that's what you're looking for.