Extend react-smooth-dnd to lanes

Author: rcdexta

src/actions/LaneActions.js

@@ -6,3 +6,4 @@ export const moveCardAcrossLanes = createAction('MOVE_CARD')
 export const updateCards = createAction('UPDATE_CARDS')
 export const updateLanes = createAction('UPDATE_LANES')
 export const paginateLane = createAction('PAGINATE_LANE')
+export const moveLane = createAction('MOVE_LANE')

src/components/BoardContainer.js

@@ -6,6 +6,7 @@ import {BoardDiv} from '../styles/Base'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import Lane from './Lane'
+import {Container, Draggable} from 'react-smooth-dnd'
 
 import * as boardActions from '../actions/BoardActions'
 import * as laneActions from '../actions/LaneActions'
@@ -59,6 +60,20 @@ class BoardContainer extends Component {
     return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex]
   }
 
+  onDragStart = (index, payload) => {
+    const {handleLaneDragStart} = this.props
+    handleLaneDragStart(payload.id)
+  }
+
+  onLaneDrop = ({removedIndex, addedIndex, payload}) => {
+    const {actions, handleLaneDragEnd} = this.props
+    actions.moveLane({oldIndex: removedIndex, newIndex: addedIndex})
+    handleLaneDragEnd(payload.id, addedIndex)
+  }
+
+  getLaneDetails = (index) => {
+    return this.props.reducerData.lanes[index]
+  }
 
   render() {
     const {reducerData, style, ...otherProps} = this.props
@@ -85,22 +100,31 @@ class BoardContainer extends Component {
     ])
 
     return (
-        <BoardDiv style={style} {...otherProps} draggable={false}>
+      <BoardDiv style={style} {...otherProps} draggable={false}>
+        <Container
+          orientation="horizontal"
+          onDragStart={this.onDragStart}
+          onDrop={this.onLaneDrop}
+          getChildPayload={index => this.getLaneDetails(index)}
+          groupName="TrelloBoard">
           {reducerData.lanes.map((lane, index) => {
             const {id, droppable, ...otherProps} = lane
             return (
-              <Lane
-                key={id}
-                id={id}
-                getCardDetails={this.getCardDetails}
-                index={index}
-                droppable={droppable === undefined ? true : droppable}
-                {...otherProps}
-                {...passthroughProps}
-              />
+              <Draggable key={lane.id}>
+                <Lane
+                  key={id}
+                  id={id}
+                  getCardDetails={this.getCardDetails}
+                  index={index}
+                  droppable={droppable === undefined ? true : droppable}
+                  {...otherProps}
+                  {...passthroughProps}
+                />
+              </Draggable>
             )
           })}
-        </BoardDiv>
+        </Container>
+      </BoardDiv>
     )
   }
 }
@@ -124,6 +148,8 @@ BoardContainer.propTypes = {
   hideCardDeleteIcon: PropTypes.bool,
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
+  handleLaneDragStart: PropTypes.func,
+  handleLaneDragEnd: PropTypes.func,
   customCardLayout: PropTypes.bool,
   newCardTemplate: PropTypes.node,
   customLaneHeader: PropTypes.element,
@@ -135,6 +161,8 @@ BoardContainer.defaultProps = {
   onDataChange: () => {},
   handleDragStart: () => {},
   handleDragEnd: () => {},
+  handleLaneDragStart: () => {},
+  handleLaneDragEnd: () => {},
   editable: false,
   hideCardDeleteIcon: false,
   draggable: false,

src/helpers/LaneHelper.js

@@ -80,6 +80,12 @@ const LaneHelper = {
 
   updateLanes: (state, lanes) => {
     return {...state, ...{lanes: lanes}}
+  },
+
+  moveLane: (state, {oldIndex, newIndex}) => {
+    const laneToMove = state.lanes[oldIndex]
+    const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}});
+    return update(tempState, {lanes: {$splice: [[newIndex, 0, laneToMove]]}})
   }
 }
 

src/reducers/BoardReducer.js

@@ -17,6 +17,8 @@ const boardReducer = (state = {lanes: []}, action) => {
       return Lh.updateLanes(state, payload)
     case 'PAGINATE_LANE':
       return Lh.paginateLane(state, payload)
+    case 'MOVE_LANE':
+      return Lh.moveLane(state, payload)
     default:
       return state
   }

stories/DragDrop.story.js

@@ -8,7 +8,7 @@ const data = require('./data/base.json')
 
 storiesOf('Drag-n-Drop', module).add(
   'Basic',
-  withInfo('A demonstration of onDragStart and onDragEnd hooks')(() => {
+  withInfo('A demonstration of onDragStart and onDragEnd hooks for card and lanes')(() => {
     const handleDragStart = (cardId, laneId) => {
       console.log('drag started')
       console.log(`cardId: ${cardId}`)
@@ -23,6 +23,15 @@ storiesOf('Drag-n-Drop', module).add(
       console.log(`newPosition: ${position}`)
     }
 
+    const handleLaneDragStart = (laneId) => {
+      console.log(`lane drag started for ${laneId}`)
+    }
+
+    const handleLaneDragEnd = (laneId, newPosition) => {
+      console.log(`lane drag ended for ${laneId}`)
+      console.log(`New lane position: ${newPosition}`)
+    }
+
     const shouldReceiveNewData = nextData => {
       console.log('data has changed')
       console.log(nextData)
@@ -35,6 +44,8 @@ storiesOf('Drag-n-Drop', module).add(
         onDataChange={shouldReceiveNewData}
         handleDragStart={handleDragStart}
         handleDragEnd={handleDragEnd}
+        handleLaneDragStart={handleLaneDragStart}
+        handleLaneDragEnd={handleLaneDragEnd}
       />
     )
   })