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.

You may try to just compile the ES7 to ES6, see what it does, and then put that into your own code. — Bergi, Nov 04 '15 at 22:40
You should have a look at the [documentation](http://gaearon.github.io/react-dnd/docs-drag-source.html), which contains examples ins ES5, 6 and 7 — Paolo Moretti, Nov 04 '15 at 22:41
Have you been able to find/make one? I am farily new to React and ES6 and I am struggling with it too. — hakunin, Mar 08 '16 at 10:14

score 6 · Accepted Answer · answered Aug 17 '17 at 20:12

_.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.

sebbulon · Answer 2 · 2016-06-10T15:08:52.910

you probably stumbled across the part in the example where the ES7 decorators are stacked:

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))

The solution to implement the equivalent code in ES5 or ES6 is given here - http://gaearon.github.io/react-dnd/docs-faq.html - using the lodash flow function to combine the functions- however there is a little mistake in the example code where it's missing Array brackets. The correct code should therefore be:

export default flow([
  DragSource(/* ... */),
  DropTarget(/* ... */)]
)(YourComponent);

P.S. the Babel REPL doesn't seem to support decorators even with Stage 1 activated, I get the following error:

repl: Decorators are not supported yet in 6.x pending proposal update.
  3 |   connectDropTarget: connect.dropTarget()
  4 | }))
> 5 | export default class Card extends Component {
    |                ^
  6 |   render() { 
  7 |     return <div>asdas</div>
  8 |   }

score 0 · Answer 3 · edited Feb 01 '18 at 19:49

0

If you don't understand any es6\7 features you always can go to babeljs.io and try it out. Regarding decorators - A function decorator accepts a function, wraps (or decorates) it’s call and returns the wrapper, which alters default behavior. You can see examples and read about it here: http://javascript.info/tutorial/decorators

Here is your example in babeljs

edited Feb 01 '18 at 19:49

Flint

1,651
1
19
29

answered Nov 05 '15 at 03:06

Errorpro

2,253
2
16
17

Babel turns the code in to ES5.. am I correct in assuming so? – Recur Nov 05 '15 at 18:57
1

Yes, babel turns ES 6\7 -> ES5. – Errorpro Nov 06 '15 at 01:41
Is there a way to change ES7 to ES6 instead? – Recur Nov 06 '15 at 01:44
I don't know. But i think transpiled decorators would be look similar in es 6 and es 7. So decorator it's function which recieves arguments `ItemTypes.CARD, cardTarget, connect => ({ connectDropTarget: connect.dropTarget() })` and returns function which recieves class. It should looks smth like this: http://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=%0ADropTarget(ItemTypes.CARD%2C%20cardTarget%2C%20connect%20%3D%3E%20(%7B%0A%20%20connectDropTarget%3A%20connect.dropTarget()%0A%7D))(Test) – Errorpro Nov 06 '15 at 02:37

score 0 · Answer 4 · answered Sep 28 '18 at 17:59

It looks like HongJheLi made a repo with the example remade in ES6: https://github.com/HongJheLi

The meat of the issue:

export default flow([
  DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  })),
  DropTarget(ItemTypes.CARD, cardTarget, connect => ({
    connectDropTarget: connect.dropTarget(),
  }))
])(Card);

score 0 · Answer 5 · answered Apr 22 '21 at 04:47

Method 1.

Nested HOC

export default DragSource()(DropTarget()(Component));

Method 2.

Use flow method from lodash

import _ from 'lodash';

export default _.flow([DragSource(), DropTarget()])(Component);

Method 3.

Use redux compose

import { compose } from 'redux';

export default compose(DragSource(), DropTarget())(Component)

react-dnd simple sortable example ES6 instead of ES7

5 Answers5

Method 1.

Method 2.

Method 3.