Merge pull request #146 from ahmetcetin/patch-5

allow drop to be cancellable

Author: rcdexta

README.md

@@ -96,7 +96,7 @@ This is the container component that encapsulates the lanes and cards
 | canAddLanes         | boolean  | Allows new lanes to be added to the board.                          Default: false                                             |
 | addLaneTitle        | string   | Changes add lane button description.                                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, position, cardDetails)`                 |
+| handleDragEnd       | function | Callback function triggered when card drag ends, return false if you want to cancel drop: `handleDragEnd(cardId, sourceLaneId, targetLaneId, position, cardDetails)`                 |
 | handleLaneDragStart | function | Callback function triggered when lane drag is started: `handleLaneDragStart(laneId)`                                           |
 | handleLaneDragEnd   | function | Callback function triggered when lane drag ends: `handleLaneDragEnd(laneId, newPosition, payload)`                                      |
 | cardDragClass       | string   | CSS class to be applied to Card when being dragged                                                                             |

src/components/Lane.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import isEqual from 'lodash/isEqual'
+import cloneDeep from 'lodash/cloneDeep'
 import Container from '../dnd/Container'
 import Draggable from '../dnd/Draggable'
 import uuidv1 from 'uuid/v1'
@@ -151,13 +152,17 @@ class Lane extends Component {
     const {addedIndex, payload} = result
     this.setState({isDraggingOver: false})
     if (addedIndex != null) {
-      this.props.actions.moveCardAcrossLanes({
-        fromLaneId: payload.laneId,
-        toLaneId: laneId,
-        cardId: payload.id,
-        index: addedIndex
-      })
-      handleDragEnd && handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, payload)
+      const newCard = {...cloneDeep(payload), laneId}
+      const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true
+      if (response === undefined || !!response) {
+        this.props.actions.moveCardAcrossLanes({
+          fromLaneId: payload.laneId,
+          toLaneId: laneId,
+          cardId: payload.id,
+          index: addedIndex
+        })
+      }
+      return response
     }
   }