-
Notifications
You must be signed in to change notification settings - Fork 96
Description
I'm getting the following error:
Uncaught Invariant Violation: Expected the drop target specification to only have some of the following keys: canDrop, hover, drop. Instead received a specification with an unexpected "beginDrag" key. Read more: http://gaearon.github.io/react-dnd/docs-drop-target.html
Here's my relevant code (I call card, kanban_deck):
**kanban_deck.es6.jsx:
import React, { Component, PropTypes } from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import constants from './constants';
const deckDragSpec = {
beginDrag(props) {
return {
id: props.id,
status: props.status
};
},
endDrag(props) {
props.deckCallbacks.persistDeckDrag(props.id, props.status);
}
}
const deckDropSpec = {
hover(props, monitor) {
const draggedId = monitor.getItem().id;
props.deckCallbacks.updatePosition(draggedId, props.id);
}
}
let collectDrag = (connect, monitor) => {
return {
connectDragSource: connect.dragSource()
};
}
let collectDrop = (connect, monitor) => {
return {
connectDropTarget: connect.dropTarget(),
};
}
class KanbanDeck extends Component {
constructor() {
super(...arguments);
this.state = {
showDetails: false
};
// var str = JSON.stringify(this.props, null, 4);
// console.log(str);
}
render() {
const { connectDragSource, connectDropTarget } = this.props;
let tags = this.props.tags.map((tag) => {
return <button
key={tag.id}
className={tag.hexcolor + " btn btn-xs btn-pill pull-right"}
>
{tag.name}
</button>
});
return connectDropTarget(connectDragSource(
<div className="deck">
<div className='deck-title' >
<h3>{this.props.name}
<span className="kb-badge btn-xs btn-default-outline pull-right">9</span>
</h3>
<div className="deck-details">
{this.props.description}
</div>
{tags}
</div>
</div>
));
}
}
KanbanDeck.propTypes = {
id: PropTypes.number,
name: PropTypes.string,
description: PropTypes.string,
color: PropTypes.string,
deckCallbacks: PropTypes.object,
connectDragSource: PropTypes.func.isRequired,
connectDropTarget: PropTypes.func.isRequired
};
const dragHighOrderDeck = DragSource(constants.KANBANDECK, deckDragSpec, collectDrag)(KanbanDeck);
const dragDropHighOrderDeck = DropTarget(constants.KANBANDECK, deckDragSpec, collectDrop)(dragHighOrderDeck);
export default dragDropHighOrderDeck
teee
`