feat(): Custom card templates

Ability to add customised styling to card with props injected at runtime

src/components/BoardContainer.js

@@ -1,27 +1,25 @@
-import React, { Component, PropTypes } from 'react'
-import { BoardDiv } from '../styles/Base'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { DragDropContext } from 'react-dnd'
+import React, {Component, PropTypes} from 'react'
+import {BoardDiv} from '../styles/Base'
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import {DragDropContext} from 'react-dnd'
 import MultiBackend from 'react-dnd-multi-backend'
-import update from 'immutability-helper'
 import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch'
 import Lane from './Lane'
 
 const boardActions = require('../actions/BoardActions')
 const laneActions = require('../actions/LaneActions')
 
 class BoardContainer extends Component {
-  state = { data: this.props.data }
 
   wireEventBus = () => {
     let eventBus = {
-      publish: event => {
+      publish: (event) => {
         switch (event.type) {
           case 'ADD_CARD':
-            return this.props.actions.addCard({ laneId: event.laneId, card: event.card })
+            return this.props.actions.addCard({laneId: event.laneId, card: event.card})
           case 'REMOVE_CARD':
-            return this.props.actions.removeCard({ laneId: event.laneId, cardId: event.cardId })
+            return this.props.actions.removeCard({laneId: event.laneId, cardId: event.cardId})
           case 'REFRESH_BOARD':
             return this.props.actions.loadBoard(event.data)
         }
@@ -30,40 +28,33 @@ class BoardContainer extends Component {
     this.props.eventBusHandle(eventBus)
   }
 
-  componentWillMount() {
+  componentWillMount () {
     this.props.actions.loadBoard(this.props.data)
     if (this.props.eventBusHandle) {
       this.wireEventBus()
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.lanes) {
-      const newData = update(this.state.data, { lanes: { $set: nextProps.lanes } })
-
-      this.setState({ data: newData })
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.data) {
       this.props.onDataChange && this.props.onDataChange(nextProps.data)
     }
   }
 
-  render() {
-    const { data } = this.state
-    return (
-      <BoardDiv>
-        {data.lanes.map(lane => {
-          const { id, ...otherProps } = lane
-          const { tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction } = this.props
-          return (
-            <Lane
-              key={`${id}`}
-              id={id}
-              {...otherProps}
-              {...{ tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction }}
-            />
-          )
+  render () {
+    const {data} = this.props
+    return <BoardDiv>
+      {
+        data.lanes.map((lane) => {
+          const {id, ...otherProps} = lane
+          const {tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction, customCardLayout, cardStyle, children} = this.props
+          return <Lane key={`${id}`}
+            id={id}
+            {...otherProps}
+            {...{tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction, customCardLayout, cardStyle, children}}
+          />
         })}
-      </BoardDiv>
-    )
+    </BoardDiv>
   }
 }
 
@@ -76,13 +67,14 @@ BoardContainer.propTypes = {
   draggable: PropTypes.bool,
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
-  onDataChange: PropTypes.func
+  onDataChange: PropTypes.func,
+  customCardLayout: PropTypes.bool
 }
 
-const mapStateToProps = state => {
-  return state.lanes ? { lanes: state.lanes } : {}
+const mapStateToProps = (state) => {
+  return state.lanes ? {data: state} : {}
 }
 
-const mapDispatchToProps = dispatch => ({ actions: bindActionCreators({ ...boardActions, ...laneActions }, dispatch) })
+const mapDispatchToProps = (dispatch) => ({actions: bindActionCreators({...boardActions, ...laneActions}, dispatch)})
 
 export default connect(mapStateToProps, mapDispatchToProps)(DragDropContext(MultiBackend(HTML5toTouch))(BoardContainer))

src/components/Card.js

@@ -1,30 +1,43 @@
-import React, {Component, PropTypes} from 'react'
-import {CardWrapper, CardHeader, CardTitle, CardRightContent, Detail, Footer} from '../styles/Base'
-import {DragType} from '../helpers/DragType'
-import {DragSource, DropTarget} from 'react-dnd'
+import React, { Component, PropTypes } from 'react'
+import { CardWrapper, CardHeader, CardTitle, CardRightContent, Detail, Footer } from '../styles/Base'
+import { DragType } from '../helpers/DragType'
+import { DragSource, DropTarget } from 'react-dnd'
 var flow = require('lodash.flow')
-import {findDOMNode} from 'react-dom'
+import { findDOMNode } from 'react-dom'
 import Tag from './Tag'
 
 class Card extends Component {
+  renderBody = () => {
+    if (this.props.customCardLayout) {
+      const customCardWithProps = React.cloneElement(this.props.customCard, { ...this.props })
+      return <span>{customCardWithProps}</span>
+    } else {
+      const { title, description, label, tags } = this.props
+      return (
+        <span>
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+            <CardRightContent>{label}</CardRightContent>
+          </CardHeader>
+          <Detail>{description}</Detail>
+          {tags &&
+            <Footer>
+              {tags.map(tag => <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />)}
+            </Footer>}
+        </span>
+      )
+    }
+  }
 
   render () {
-    const {id, title, description, label, tags, connectDragSource, connectDropTarget, isDragging, ...otherProps} = this.props
+    const { id, connectDragSource, connectDropTarget, isDragging, cardStyle, ...otherProps } = this.props
     const opacity = isDragging ? 0 : 1
     const background = isDragging ? '#CCC' : '#E3E3E3'
     return connectDragSource(
       connectDropTarget(
-        <div style={{background: background}}>
-          <CardWrapper key={id} data-id={id} {...otherProps} style={{opacity: opacity}}>
-            <CardHeader>
-              <CardTitle>{title}</CardTitle>
-              <CardRightContent>{label}</CardRightContent>
-            </CardHeader>
-            <Detail>{description}</Detail>
-            {tags && <Footer>
-              {tags.map((tag) => <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />)}
-            </Footer>
-            }
+        <div style={{ background: background }}>
+          <CardWrapper key={id} data-id={id} {...otherProps} style={{ ...cardStyle, opacity: opacity }}>
+            {this.renderBody()}
           </CardWrapper>
         </div>
       )
@@ -100,17 +113,24 @@ const cardTarget = {
   }
 }
 
+Card.defaultProps = {
+  cardStyle: {},
+  customCardLayout: false
+}
+
 Card.propTypes = {
   id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   description: PropTypes.string,
   label: PropTypes.string,
   onClick: PropTypes.func,
   metadata: PropTypes.object,
   connectDragSource: PropTypes.func.isRequired,
   isDragging: PropTypes.bool.isRequired,
   handleDragStart: React.PropTypes.func,
-  handleDragEnd: React.PropTypes.func
+  handleDragEnd: React.PropTypes.func,
+  customCardLayout: React.PropTypes.bool,
+  customCard: React.PropTypes.node
 }
 
 export default flow(