Can a single component be also a DragSource as well as DropTarget

I believe a single component can be a DragSource as well as a DropTarget. I am doing a sortable <Layer> component sort of like your <Card> example. My question is how do I do both without using ES7?

In your <Card> example, you have

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

But I want to only use ES6, so how do I combine both DragSource and DropTarget in here:

class Layer extends Component {
}

// Where to put the DropTarget??
export default DragSource('layer', layerSource, collect)(Layer);

Is it I have to use _.flow() from lodash?

[gaearon]

Good point. I’d say accessing instance is usually an anti-pattern. Why do you need it?

Anyway, you can access the “original” component by component.getDecoratedComponentInstance().

[gaearon]

@jawb

Check out Card in sortable-simple.