fix: Fix the handleDragStart and handleDragEnd callbacks after the DnD re-write

#66

Author: rcdexta

README.md

@@ -75,7 +75,7 @@ This is the container component that encapsulates the lanes and cards
 | draggable        | boolean  | Makes all cards in the lanes draggable. Default: false |
 | editable         | boolean  | Makes the entire board editable. Allow cards to be added or deleted Default: false |
 | handleDragStart  | function | Callback function triggered when card drag is started: `handleDragStart(cardId, laneId)` |
-| handleDragEnd    | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId)` |
+| handleDragEnd    | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position)` |
 | onLaneScroll     | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
 | onCardClick      | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
 | onCardAdd        | function | Called when a new card is added: `onCardAdd(card, laneId) ` |

src/components/BoardContainer.js

@@ -49,15 +49,23 @@ class BoardContainer extends Component {
     }
   }
 
+	onDragStart = card => {
+    const {handleDragStart} = this.props
+		handleDragStart(card.draggableId, card.source.droppableId)
+  }
+
   onDragEnd = result => {
+    const {handleDragEnd} = this.props
     const {source, destination, draggableId} = result
-    destination &&
-      this.props.actions.moveCardAcrossLanes({
-        fromLaneId: source.droppableId,
-        toLaneId: destination.droppableId,
-        cardId: draggableId,
-        index: destination.index
-      })
+    if (destination) {
+			this.props.actions.moveCardAcrossLanes({
+				fromLaneId: source.droppableId,
+				toLaneId: destination.droppableId,
+				cardId: draggableId,
+				index: destination.index
+			})
+      handleDragEnd(draggableId, source.droppableId, destination.droppableId, destination.index)
+    }
   }
 
   render() {
@@ -73,8 +81,6 @@ class BoardContainer extends Component {
       'laneSortFunction',
       'draggable',
       'editable',
-      'handleDragStart',
-      'handleDragEnd',
       'customCardLayout',
       'newCardTemplate',
       'customLaneHeader',
@@ -83,7 +89,7 @@ class BoardContainer extends Component {
     ])
 
     return (
-      <DragDropContext onDragEnd={this.onDragEnd}>
+      <DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
         <BoardDiv style={style} {...otherProps}>
           {reducerData.lanes.map((lane, index) => {
             const {id, droppable, ...otherProps} = lane
@@ -130,6 +136,8 @@ BoardContainer.propTypes = {
 
 BoardContainer.defaultProps = {
   onDataChange: () => {},
+	handleDragStart: () => {},
+	handleDragEnd: () => {},
   editable: false,
   draggable: false
 }

src/components/Card.js

@@ -90,8 +90,6 @@ Card.propTypes = {
   onClick: PropTypes.func,
   onDelete: PropTypes.func,
   metadata: PropTypes.object,
-  handleDragStart: PropTypes.func,
-  handleDragEnd: PropTypes.func,
   cardStyle: PropTypes.object,
   tagStyle: PropTypes.object,
   customCardLayout: PropTypes.bool,

src/components/Lane.js

@@ -155,8 +155,6 @@ class Lane extends Component {
         index={idx}
         customCardLayout={this.props.customCardLayout}
         customCard={this.props.children}
-        handleDragStart={this.props.handleDragStart}
-        handleDragEnd={this.props.handleDragEnd}
         tagStyle={tagStyle}
         cardStyle={cardStyle}
         moveCard={this.moveCard}
@@ -245,8 +243,6 @@ Lane.propTypes = {
   draggable: PropTypes.bool,
   droppable: PropTypes.bool,
   onLaneScroll: PropTypes.func,
-  handleDragStart: PropTypes.func,
-  handleDragEnd: PropTypes.func,
   onCardClick: PropTypes.func,
   onCardDelete: PropTypes.func,
   onCardAdd: PropTypes.func,

stories/DragDrop.story.js

@@ -15,11 +15,12 @@ storiesOf('Drag-n-Drop', module).add(
       console.log(`laneId: ${laneId}`)
     }
 
-    const handleDragEnd = (cardId, sourceLaneId, targetLaneId) => {
+    const handleDragEnd = (cardId, sourceLaneId, targetLaneId, position) => {
       console.log('drag ended')
       console.log(`cardId: ${cardId}`)
       console.log(`sourceLaneId: ${sourceLaneId}`)
       console.log(`targetLaneId: ${targetLaneId}`)
+      console.log(`newPosition: ${position}`)
     }
 
     const shouldReceiveNewData = nextData => {