fix: Allow Add Card link to be customizable

When the board is editable, the Add Card link at the bottom of every lane is static now. This commit adds a new prop called addCardLink to override that element #47
rcdexta · Jan 5, 2018 · d26fb41 · d26fb41
1 parent 0a36c38
commit d26fb41
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ This is the container component that encapsulates the lanes and cards
 | onLaneScroll     | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
 | 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) |
 | 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)` |

diff --git a/src/components/BoardContainer.js b/src/components/BoardContainer.js
@@ -32,7 +32,7 @@ class BoardContainer extends Component {
   }
 
   componentWillMount () {
-		const {actions, eventBusHandle} = this.props
+    const {actions, eventBusHandle} = this.props
     actions.loadBoard(this.props.data)
     if (eventBusHandle) {
       this.wireEventBus()
@@ -45,9 +45,9 @@ class BoardContainer extends Component {
     if (nextProps.reducerData && !isEqual(reducerData, nextProps.reducerData)) {
       onDataChange(nextProps.reducerData)
     }
-    if (nextProps.data && !isEqual(nextProps.data,data)) {
+    if (nextProps.data && !isEqual(nextProps.data, data)) {
       this.props.actions.loadBoard(nextProps.data)
-			onDataChange(nextProps.data)
+      onDataChange(nextProps.data)
     }
   }
 
@@ -86,8 +86,9 @@ BoardContainer.propTypes = {
   eventBusHandle: PropTypes.func,
   onLaneScroll: PropTypes.func,
   onCardClick: PropTypes.func,
-	onCardDelete: PropTypes.func,
-	onCardAdd: PropTypes.func,
+  onCardDelete: PropTypes.func,
+  onCardAdd: PropTypes.func,
+  addCardLink: PropTypes.node,
   onLaneClick: PropTypes.func,
   laneSortFunction: PropTypes.func,
   draggable: PropTypes.bool,
@@ -101,7 +102,7 @@ BoardContainer.propTypes = {
 }
 
 BoardContainer.defaultProps = {
-	onDataChange: () => {}
+  onDataChange: () => {}
 }
 
 const mapStateToProps = state => {

diff --git a/src/components/Lane.js b/src/components/Lane.js
@@ -132,6 +132,16 @@ class Lane extends Component {
 		this.props.onCardAdd(card, laneId)
 	}
 
+	renderAddCardLink = () => {
+    const {addCardLink} = this.props
+    if (addCardLink) {
+      return <span onClick={this.showEditableCard}>{addCardLink}</span>
+    } else {
+			return <AddCardLink onClick={this.showEditableCard}>Add Card</AddCardLink>
+    }
+  }
+
+
   renderDragContainer = () => {
     const {connectDropTarget, laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
     const {addCardMode} = this.state
@@ -164,7 +174,7 @@ class Lane extends Component {
     return connectDropTarget(
       <div>
         <DraggableList>{cardList}</DraggableList>
-        {editable && !addCardMode && <AddCardLink onClick={this.showEditableCard}>Add Card</AddCardLink>}
+        {editable && !addCardMode && this.renderAddCardLink()}
         {addCardMode && <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard} />}
       </div>
     )

diff --git a/stories/EditableBoard.story.js b/stories/EditableBoard.story.js
@@ -6,34 +6,46 @@ import Board from '../src'
 
 const data = require('./data.json')
 
-storiesOf('Editable Board', module).add(
-  'Add/Delete Cards',
-  withInfo('Add/delete cards or delete lanes')(() => {
+storiesOf('Editable Board', module)
+  .add(
+    'Add/Delete Cards',
+    withInfo('Add/delete cards or delete lanes')(() => {
+      const shouldReceiveNewData = nextData => {
+        console.log('Board has changed')
+        console.log(nextData)
+      }
 
-		const shouldReceiveNewData = nextData => {
-			console.log('Board has changed')
-			console.log(nextData)
-		}
+      const handleCardDelete = (cardId, laneId) => {
+        console.log(`Card: ${cardId} deleted from lane: ${laneId}`)
+      }
 
-		const handleCardDelete = (cardId, laneId) => {
-			console.log(`Card: ${cardId} deleted from lane: ${laneId}`)
-		}
+      const handleCardAdd = (card, laneId) => {
+        console.log(`New card added to lane ${laneId}`)
+        console.dir(card)
+      }
 
-		const handleCardAdd = (card, laneId) => {
-			console.log(`New card added to lane ${laneId}`)
-			console.dir(card)
-		}
-
-    return (
-      <Board
-        data={data}
-				draggable
-				onDataChange={shouldReceiveNewData}
-				onCardDelete={handleCardDelete}
-				onCardAdd={handleCardAdd}
-				onCardClick={(cardId, metadata, laneId) => alert(`Card with id:${cardId} clicked. Card in lane: ${laneId}`)}
-        editable
-      />
-    )
-  })
-)
+      return (
+        <Board
+          data={data}
+          draggable
+          onDataChange={shouldReceiveNewData}
+          onCardDelete={handleCardDelete}
+          onCardAdd={handleCardAdd}
+          onCardClick={(cardId, metadata, laneId) => alert(`Card with id:${cardId} clicked. Card in lane: ${laneId}`)}
+          editable
+        />
+      )
+    })
+  )
+  .add(
+    'Customizations',
+    withInfo('Allow editable elements on the board to be customized')(() => {
+      return (
+        <Board
+          data={data}
+          editable
+					addCardLink={<button>New Card</button>}
+        />
+      )
+    })
+  )