CODEWITHSUNDEEP
reactjsdecoratorecmascript-6ecmascript-2016
Recur
Recur

Reputation: 1428

react-dnd simple sortable example ES6 instead of ES7

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.

Upvotes: 11

Views: 5533

Answers (5)

Kaiwen Luo
Kaiwen Luo

Reputation: 513

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)

Upvotes: 0

Sauce
Sauce

Reputation: 662

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);

Upvotes: 0

Errorpro
Errorpro

Reputation: 2423

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

Upvotes: 0

Magenta Nova
Magenta Nova

Reputation: 691

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

Upvotes: 6

sebbulon
sebbulon

Reputation: 623

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 |   }

Upvotes: 5

Related Questions