fix(Board and Lane Dragging Restrictions): Should restrict dragging lanes or cards across boards

#136

Author: rcdexta

src/components/BoardContainer.js

@@ -110,6 +110,11 @@ class BoardContainer extends Component {
     }
   }
 
+  get groupName() {
+    const {id} = this.props
+    return `TrelloBoard${id}`
+  }
+
   render() {
     const {id, reducerData, draggable, laneDraggable, laneDragClass, style, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
     const {addLaneMode} = this.state
@@ -150,12 +155,13 @@ class BoardContainer extends Component {
           onDrop={this.onLaneDrop}
           lockAxis="x"
           getChildPayload={index => this.getLaneDetails(index)}
-          groupName={`TrelloBoard${id}`}>
+          groupName={this.groupName}>
           {reducerData.lanes.map((lane, index) => {
             const {id, droppable, ...otherProps} = lane
             const laneToRender = (
               <Lane
                 key={id}
+                boardId={this.groupName}
                 id={id}
                 getCardDetails={this.getCardDetails}
                 index={index}

src/components/Lane.js

@@ -127,7 +127,12 @@ class Lane extends Component {
   }
 
   shouldAcceptDrop = sourceContainerOptions => {
-    return this.props.droppable && sourceContainerOptions.groupName === 'TrelloLane'
+    return this.props.droppable && sourceContainerOptions.groupName === this.groupName
+  }
+
+  get groupName()  {
+    const {boardId} = this.props
+    return `TrelloBoard${boardId}Lane`
   }
 
   onDragEnd = (laneId, result) => {
@@ -189,7 +194,7 @@ class Lane extends Component {
       <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <Container
           orientation="vertical"
-          groupName="TrelloLane"
+          groupName={this.groupName}
           dragClass={cardDragClass}
           onDragStart={this.onDragStart}
           onDrop={e => this.onDragEnd(id, e)}
@@ -255,6 +260,7 @@ Lane.propTypes = {
   actions: PropTypes.object,
   children: PropTypes.node,
   id: PropTypes.string.isRequired,
+  boardId: PropTypes.string,
   title: PropTypes.node,
   index: PropTypes.number,
   laneSortFunction: PropTypes.func,

src/dnd/Container.js

@@ -1,9 +1,7 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react'
 import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types';
-import container from 'smooth-dnd';
-import { dropHandlers } from 'smooth-dnd';
-import Draggable from './Draggable';
+import PropTypes from 'prop-types'
+import container, {dropHandlers} from 'smooth-dnd'
 
 container.dropHandler = dropHandlers.reactDropHandler().handler;
 container.wrapChild = p => p; // dont wrap children they will already be wrapped
@@ -88,4 +86,4 @@ Container.defaultProps = {
 	orientation: 'vertical'
 };
 
-export default Container;
+export default Container;

src/dnd/Draggable.js

@@ -24,4 +24,4 @@ Draggable.propTypes = {
 	render: PropTypes.func
 };
 
-export default Draggable;
+export default Draggable;

stories/MultipleBoards.story.js

@@ -18,10 +18,10 @@ storiesOf('Multiple Boards', module).add(
     return (
       <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={containerStyles}>
-          <Board data={data1} draggable />
+          <Board id="board1" data={data1} draggable />
         </div>
         <div style={containerStyles}>
-          <Board data={data2} draggable />
+          <Board id="board2" data={data2} draggable />
         </div>
       </div>
     )