feat: Ability to pass a new card template to be rendered when adding new cards

#48

Author: rcdexta

README.md

@@ -80,6 +80,7 @@ This is the container component that encapsulates the lanes and cards
 | onCardClick      | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId) ` |
 | onCardAdd        | function | Called when a new card is added: `onCardAdd(card, laneId) ` |
 | addCardLink      | node     | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
+| newCardTemplate  | node     | Pass a custom new card template to add new cards to a lane (when board is editable) |
 | onCardDelete     | function | Called when a card is deleted: `onCardDelete(cardId, laneId) ` |
 | onLaneClick      | function | Called when a lane is clicked: `onLaneClick(laneId) `. Card clicks are not propagated to lane click event |
 | laneSortFunction | function | Used to specify the logic to sort cards on a lane: `laneSortFunction(card1, card2)` |

src/components/BoardContainer.js

@@ -71,6 +71,7 @@ class BoardContainer extends Component {
             'handleDragStart',
             'handleDragEnd',
             'customCardLayout',
+            'newCardTemplate',
             'customLaneHeader',
             'tagStyle',
             'children'
@@ -106,6 +107,7 @@ BoardContainer.propTypes = {
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
   customCardLayout: PropTypes.bool,
+	newCardTemplate: PropTypes.node,
   customLaneHeader: PropTypes.element,
   style: PropTypes.object,
   tagStyle: PropTypes.object

src/components/Card.js

@@ -23,7 +23,7 @@ class Card extends Component {
     if (this.props.customCardLayout) {
       const {customCard, ...otherProps} = this.props
       const customCardWithProps = React.cloneElement(customCard, {...otherProps})
-      return <span>{customCardWithProps}</span>
+      return customCardWithProps
     } else {
       const {title, description, label, tags} = this.props
       return (

src/components/Lane.js

@@ -76,19 +76,6 @@ class Lane extends Component {
     )
   }
 
-  sameCards = (cardsA, cardsB) => {
-    return (
-      cardsA.length === cardsB.length &&
-      cardsA.every(
-        (el, ix) =>
-          el.id === cardsB[ix].id &&
-          el.title === cardsB[ix].title &&
-          el.label === cardsB[ix].label &&
-          el.description === cardsB[ix].description
-      )
-    )
-  }
-
   componentWillReceiveProps (nextProps) {
     if (!isEqual(this.props.cards, nextProps.cards)) {
       this.setState({cards: nextProps.cards, currentPage: nextProps.currentPage})
@@ -142,6 +129,15 @@ class Lane extends Component {
     }
   }
 
+  renderNewCard = () => {
+    const {newCardTemplate} = this.props
+    if (newCardTemplate) {
+			const newCardWithProps = React.cloneElement(newCardTemplate, {onCancel: this.hideEditableCard, onAdd: this.addNewCard})
+			return <span>{newCardWithProps}</span>
+    } else {
+			return <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard} />
+    }
+  }
 
   renderDragContainer = () => {
     const {connectDropTarget, laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
@@ -176,7 +172,7 @@ class Lane extends Component {
       <div>
         <DraggableList>{cardList}</DraggableList>
         {editable && !addCardMode && this.renderAddCardLink()}
-        {addCardMode && <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard} />}
+        {addCardMode && this.renderNewCard()}
       </div>
     )
   }
@@ -229,6 +225,7 @@ Lane.propTypes = {
   onCardClick: PropTypes.func,
   onCardDelete: PropTypes.func,
   onCardAdd: PropTypes.func,
+	newCardTemplate: PropTypes.node,
 	addCardLink: PropTypes.node,
   editable: PropTypes.bool
 }

stories/EditableBoard.story.js

@@ -1,11 +1,41 @@
-import React from 'react'
+import React, {Component} from 'react'
 import {withInfo} from '@storybook/addon-info'
 import {storiesOf} from '@storybook/react'
 
 import Board from '../src'
 
 const data = require('./data.json')
 
+class NewCard extends Component {
+  updateField = (field, evt) => {
+    this.setState({[field]: evt.target.value})
+  }
+
+  handleAdd = () => {
+    this.props.onAdd(this.state)
+  }
+
+  render () {
+    const {onCancel} = this.props
+    return (
+      <div style={{background: 'white', borderRadius: 3, border: '1px solid #eee', borderBottom: '1px solid #ccc'}}>
+        <div style={{padding: 5, margin: 5}}>
+          <div>
+            <div style={{marginBottom: 5}}>
+                <input type='text' onChange={evt => this.updateField('title', evt)} placeholder='Title' />
+            </div>
+            <div style={{marginBottom: 5}}>
+              <input type='text' onChange={evt => this.updateField('description', evt)} placeholder='Description'/>
+            </div>
+          </div>
+          <button onClick={this.handleAdd}>Add</button>
+          <button onClick={onCancel}>Cancel</button>
+        </div>
+      </div>
+    )
+  }
+}
+
 storiesOf('Editable Board', module)
   .add(
     'Add/Delete Cards',
@@ -28,7 +58,7 @@ storiesOf('Editable Board', module)
         <Board
           data={data}
           draggable
-					id='EditableBoard1'
+          id='EditableBoard1'
           onDataChange={shouldReceiveNewData}
           onCardDelete={handleCardDelete}
           onCardAdd={handleCardAdd}
@@ -39,14 +69,14 @@ storiesOf('Editable Board', module)
     })
   )
   .add(
-    'Customizations',
+    'Custom Buttons',
     withInfo('Allow editable elements on the board to be customized')(() => {
-      return (
-        <Board
-          data={data}
-          editable
-					addCardLink={<button>New Card</button>}
-        />
-      )
+      return <Board data={data} editable addCardLink={<button>New Card</button>} />
+    })
+  )
+  .add(
+    'New Card Template',
+    withInfo('Pass a custom new card template to add card')(() => {
+      return <Board data={data} editable newCardTemplate={<NewCard />} />
     })
   )