fix: Add onCardAdd and onCardDelete hooks

#46

README.md

@@ -78,6 +78,8 @@ This is the container component that encapsulates the lanes and cards
 | handleDragEnd    | function | Callback function triggered when card drag ends: `handleDragEnd(cardId, sourceLaneId, targetLaneId)` |
 | 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) ` |
+| 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)` |
 | eventBusHandle   | function | This is a special function that providers a publishHook to pass new events to the board. See details in Publish Events section |

package.json

@@ -103,7 +103,8 @@
     "redux": "^3.6.0",
     "redux-actions": "^1.2.2",
     "redux-logger": "^3.0.6",
-    "styled-components": "^2.1.1"
+    "styled-components": "^2.1.1",
+    "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "react": ">= 0.14.0 < 17.0.0-0",

src/components/BoardContainer.js

@@ -60,6 +60,8 @@ class BoardContainer extends Component {
           const passthroughProps = pick(this.props, [
             'onLaneScroll',
             'onCardClick',
+            'onCardDelete',
+            'onCardAdd',
             'onLaneClick',
             'laneSortFunction',
             'draggable',
@@ -84,6 +86,8 @@ BoardContainer.propTypes = {
   eventBusHandle: PropTypes.func,
   onLaneScroll: PropTypes.func,
   onCardClick: PropTypes.func,
+	onCardDelete: PropTypes.func,
+	onCardAdd: PropTypes.func,
   onLaneClick: PropTypes.func,
   laneSortFunction: PropTypes.func,
   draggable: PropTypes.bool,

src/components/Card.js

@@ -1,51 +1,36 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {
-	CardHeader, CardRightContent, CardTitle, Detail, Footer,
-	MovableCardWrapper,
-} from '../styles/Base';
-import {DragType} from '../helpers/DragType';
-import {DragSource, DropTarget} from 'react-dnd';
-import {findDOMNode} from 'react-dom';
-import Tag from './Tag';
-import flow from 'lodash/flow';
-import DeleteButton from './widgets/DeleteButton';
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper} from '../styles/Base'
+import {DragType} from '../helpers/DragType'
+import {DragSource, DropTarget} from 'react-dnd'
+import {findDOMNode} from 'react-dom'
+import Tag from './Tag'
+import flow from 'lodash/flow'
+import DeleteButton from './widgets/DeleteButton'
 
 class Card extends Component {
-
-	removeCard = () => {
-	  const {id, laneId} = this.props
-	  this.props.removeCard(laneId, id)
+  removeCard = e => {
+    const {id, laneId, removeCard, onDelete} = this.props
+    removeCard(laneId, id)
+    onDelete(id, laneId)
+    e.stopPropagation()
   }
 
   renderBody = () => {
     if (this.props.customCardLayout) {
       const {customCard, ...otherProps} = this.props
       const customCardWithProps = React.cloneElement(customCard, {...otherProps})
-      return (
-        <span>
-          {customCardWithProps}
-        </span>
-      )
+      return <span>{customCardWithProps}</span>
     } else {
       const {title, description, label, tags} = this.props
       return (
         <span>
           <CardHeader>
-            <CardTitle>
-              {title}
-            </CardTitle>
-            <CardRightContent>
-              {label}
-            </CardRightContent>
+            <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>}
+          <Detail>{description}</Detail>
+          {tags && <Footer>{tags.map(tag => <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />)}</Footer>}
         </span>
       )
     }
@@ -60,7 +45,7 @@ class Card extends Component {
         <div style={{background: background}}>
           <MovableCardWrapper key={id} data-id={id} {...otherProps} style={{...cardStyle, opacity: opacity}}>
             {this.renderBody()}
-            {editable && <DeleteButton onClick={this.removeCard}/>}
+            {editable && <DeleteButton onClick={this.removeCard} />}
           </MovableCardWrapper>
         </div>
       )
@@ -140,7 +125,8 @@ const cardTarget = {
 
 Card.defaultProps = {
   cardStyle: {},
-  customCardLayout: false
+  customCardLayout: false,
+  onDelete: () => {}
 }
 
 Card.propTypes = {
@@ -149,6 +135,7 @@ Card.propTypes = {
   description: PropTypes.string,
   label: PropTypes.string,
   onClick: PropTypes.func,
+  onDelete: PropTypes.func,
   metadata: PropTypes.object,
   connectDragSource: PropTypes.func.isRequired,
   isDragging: PropTypes.bool.isRequired,

src/components/Lane.js

@@ -2,14 +2,15 @@ import React, {Component} from 'react'
 import Loader from './Loader'
 import PropTypes from 'prop-types'
 import Card from './Card'
-import {Section, Header, Title, RightContent, DraggableList, Placeholder, AddCard} from '../styles/Base'
+import {Section, Header, Title, RightContent, DraggableList, Placeholder, AddCardLink} from '../styles/Base'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import {DropTarget} from 'react-dnd'
 import update from 'immutability-helper'
 import {DragType} from '../helpers/DragType'
 import {findDOMNode} from 'react-dom'
 import NewCard from './NewCard'
+import uuidv1 from 'uuid/v1'
 
 const laneActions = require('../actions/LaneActions')
 
@@ -118,15 +119,19 @@ class Lane extends Component {
     this.setState({addCardMode: true})
   }
 
-	hideEditableCard = () => {
-		this.setState({addCardMode: false})
-	}
-
-	addNewCard = (card) => {
-    this.hideEditableCard()
-		return this.props.actions.addCard({laneId: this.props.id, card: card})
+  hideEditableCard = () => {
+    this.setState({addCardMode: false})
   }
 
+  addNewCard = params => {
+    const laneId = this.props.id
+    const id = uuidv1()
+		this.hideEditableCard()
+		let card = {...params, id};
+		this.props.actions.addCard({laneId, card})
+		this.props.onCardAdd(card, laneId)
+	}
+
   renderDragContainer = () => {
     const {connectDropTarget, laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
     const {addCardMode} = this.state
@@ -145,6 +150,7 @@ class Lane extends Component {
         moveCardAcrossLanes={this.moveCardAcrossLanes}
         removeCard={this.removeCard}
         onClick={e => this.handleCardClick(e, card)}
+        onDelete={this.props.onCardDelete}
         draggable={draggable}
         editable={editable}
         {...card}
@@ -158,8 +164,8 @@ class Lane extends Component {
     return connectDropTarget(
       <div>
         <DraggableList>{cardList}</DraggableList>
-        {editable && !addCardMode && <AddCard onClick={this.showEditableCard}>Add Card</AddCard>}
-        {addCardMode && <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard}/>}
+        {editable && !addCardMode && <AddCardLink onClick={this.showEditableCard}>Add Card</AddCardLink>}
+        {addCardMode && <NewCard onCancel={this.hideEditableCard} onAdd={this.addNewCard} />}
       </div>
     )
   }
@@ -208,14 +214,18 @@ Lane.propTypes = {
   droppable: PropTypes.bool,
   onLaneScroll: PropTypes.func,
   handleDragStart: PropTypes.func,
-  handleDragEnd: PropTypes.func
+  handleDragEnd: PropTypes.func,
+  onCardClick: PropTypes.func,
+  onCardDelete: PropTypes.func,
+  onCardAdd: PropTypes.func
 }
 
 Lane.defaultProps = {
   style: {},
   titleStyle: {},
   labelStyle: {},
-  label: undefined
+  label: undefined,
+  onCardAdd: () => {}
 }
 
 const cardTarget = {

src/styles/Base.js

@@ -128,7 +128,7 @@ export const TagSpan = styled.span`
   font-size: 70%;
 `
 
-export const AddCard = styled.a`
+export const AddCardLink = styled.a`
 	border-radius: 0 0 3px 3px;
 	color: #838c91;
 	display: block;

stories/EditableBoard.story.js

@@ -15,10 +15,23 @@ storiesOf('Editable Board', module).add(
 			console.log(nextData)
 		}
 
+		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)
+		}
+
     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
       />
     )