Final, simpler 1.0 API
As I was working on the docs for 1.0 release, I realized that 1.0 API can be much simpler so I just rewrote everything. Here's a few snippets before and after to justify that.
Registering a drag source for a known type
Before
@DragDrop(
register =>
register.dragSource(ItemTypes.BOX, BoxSource),
boxSource => ({
connectDragSource: boxSource.connect(),
isDragging: boxSource.isDragging()
})
)
export default class Box {After
@DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Box {Registering a drag source for a dynamic type
Before
@DragDrop(
(register, props) =>
register.dragSource(props.type, BoxSource),
boxSource => ({
connectDragSource: boxSource.connect(),
isDragging: boxSource.isDragging()
})
)
export default class Box {After
@DragSource(props => props.type, boxSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Box {Registering a drop target for a known type
Before
@DragDrop(
register =>
register.dropTarget(ItemTypes.BOX, BoxTarget),
boxTarget => ({
connectDropTarget: boxTarget.connect()
})
)
export default class Container extends Component {After
@DropTarget(ItemTypes.BOX, boxTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {Registering a drop target for a dynamic type
Before
@DragDrop(
(register, props) =>
register.dropTarget(props.accepts, BoxTarget),
boxTarget => ({
connectDropTarget: boxTarget.connect()
})
)
export default class Container extends Component {After
@DropTarget(props => props.accepts, boxTarget, connect => ({
connectDropTarget: connect.dropTarget()
}))
export default class Container extends Component {Registering a mixed drag source and drop target
Before
@DragDrop(
register => ({
cardSource: register.dragSource(ItemTypes.CARD, CardSource),
cardTarget: register.dropTarget(ItemTypes.CARD, CardTarget)
}),
({ cardSource, cardTarget }) => ({
connectDragSource: cardSource.connect(),
connectDropTarget: cardTarget.connect(),
isDragging: cardSource.isDragging()
})
)
export default class Card {After
@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
connectDropTarget: connect.dropTarget(),
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))
export default class Card {This is going to be the final API for 1.0. It is now frozen, and I'm only going to work on documentation and examples.