Merge pull request #313 from garvitdelhi/add-drop-classes

Add ability to add drop classes along with drag class

Author: rcdexta

README.md

@@ -170,7 +170,9 @@ This is the container component that encapsulates the lanes and cards
 | laneStyle           | object   | CSS style for every lanes |
 | tagStyle            | object   | If cards have tags, use this prop to modify their style                                                                        |
 | cardDragClass       | string   | CSS class to be applied to Card when being dragged                                                                             |
+| cardDropClass       | string   | CSS class to be applied to Card when being dropped                                                                             |
 | laneDragClass       | string   | CSS class to be applied to Lane when being dragged                                                                             |
+| laneDropClass       | string   | CSS class to be applied to Lane when being dropped                                                                             |
 | components          | object   | Map of customised components. [List](src/components/index.js) of available. |
 
 

src/controllers/BoardContainer.js

@@ -112,6 +112,7 @@ class BoardContainer extends Component {
       draggable,
       laneDraggable,
       laneDragClass,
+      laneDropClass,
       style,
       onDataChange,
       onCardAdd,
@@ -163,7 +164,7 @@ class BoardContainer extends Component {
             orientation="horizontal"
             onDragStart={this.onDragStart}
             dragClass={laneDragClass}
-            dropClass=""
+            dropClass={laneDropClass}
             onDrop={this.onLaneDrop}
             lockAxis="x"
             getChildPayload={index => this.getLaneDetails(index)}
@@ -235,6 +236,7 @@ BoardContainer.propTypes = {
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
   laneDragClass: PropTypes.string,
+  laneDropClass: PropTypes.string,
   onCardMoveAcrossLanes: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
 }
@@ -258,7 +260,8 @@ BoardContainer.defaultProps = {
   laneDraggable: true,
   cardDraggable: true,
   cardDragClass: 'react_trello_dragClass',
-  laneDragClass: 'react_trello_dragLaneClass'
+  laneDragClass: 'react_trello_dragLaneClass',
+  laneDropClass: ''
 }
 
 const mapStateToProps = state => {

src/controllers/Lane.js

@@ -139,6 +139,7 @@ class Lane extends Component {
       hideCardDeleteIcon,
       cardDraggable,
       cardDragClass,
+      cardDropClass,
       tagStyle,
       cardStyle,
       components,
@@ -177,6 +178,7 @@ class Lane extends Component {
           orientation="vertical"
           groupName={this.groupName}
           dragClass={cardDragClass}
+          dropClass={cardDropClass}
           onDragStart={this.onDragStart}
           onDrop={e => this.onDragEnd(id, e)}
           onDragEnter={() => this.setState({isDraggingOver: true})}
@@ -285,6 +287,7 @@ Lane.propTypes = {
   laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
+  cardDropClass: PropTypes.string,
   canAddLanes: PropTypes.bool,
   t: PropTypes.func.isRequired
 }