fix(Event Bus): Add onLaneAdd event handler

rcdexta · Feb 11, 2019 · 8e12add · 8e12add
2 parents ab18227 + 229a50a
commit 8e12add
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -104,6 +104,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)`                                                                     |
+| onLaneAdd           | function | Called when a new lane is added: `onLaneAdd(params)`                                                                     |
 | 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)                                            |
 | hideCardDeleteIcon  | boolean  | Disable showing the delete icon to the top right corner of the card (when board is editable)                                   |

diff --git a/src/components/BoardContainer.js b/src/components/BoardContainer.js
@@ -96,6 +96,7 @@ class BoardContainer extends Component {
   addNewLane = params => {
     this.hideEditableLane()
     this.props.actions.addLane(params)
+    this.props.onLaneAdd(params)
   }
 
   renderNewLane = () => {
@@ -117,7 +118,7 @@ class BoardContainer extends Component {
   }
 
   render() {
-    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
+    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onLaneAdd, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
     const {addLaneMode} = this.state
     // Stick to whitelisting attributes to segregate board and lane props
     const passthroughProps = pick(this.props, [
@@ -203,6 +204,7 @@ BoardContainer.propTypes = {
   onCardDelete: PropTypes.func,
   onCardAdd: PropTypes.func,
   addCardLink: PropTypes.node,
+  onLaneAdd: PropTypes.func,
   onLaneClick: PropTypes.func,
   laneSortFunction: PropTypes.func,
   draggable: PropTypes.bool,
@@ -233,6 +235,7 @@ BoardContainer.defaultProps = {
   handleDragEnd: () => {},
   handleLaneDragStart: () => {},
   handleLaneDragEnd: () => {},
+  onLaneAdd: () => {},
   editable: false,
   canAddLanes: false,
   hideCardDeleteIcon: false,

diff --git a/stories/EditableBoard.story.js b/stories/EditableBoard.story.js
@@ -79,14 +79,21 @@ storiesOf('Editable Board', module)
   .add(
     'New Card Template',
     () => {
-      return <Board data={data} editable newCardTemplate={<NewCard />} addCardTitle='Click to add'/>
+      return <Board data={data} editable newCardTemplate={<NewCard />} addCardTitle="Click to add" />
     },
     {info: 'Pass a custom new card template to add card'}
   )
   .add(
     'Add New Lane',
     () => {
-      return <Board data={smallData} editable canAddLanes />
+      return (
+        <Board
+          data={smallData}
+          editable
+          canAddLanes
+          onLaneAdd={t => console.log('You added a line with title ' + t.title)}
+        />
+      )
     },
     {info: 'Allow adding new lane'}
   )
diff --git a/tests/__snapshots__/Storyshots.test.js.snap b/tests/__snapshots__/Storyshots.test.js.snap
@@ -18631,6 +18631,25 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
           </section>
         </span>
       </div>
+      <div
+        style={undefined}
+      >
+        <section
+          className="sc-kAzzGY dDenbz"
+          style={
+            Object {
+              "width": 200,
+            }
+          }
+        >
+          <button
+            className="sc-kkGfuU ehXxRc"
+            onClick={[Function]}
+          >
+            + Add another lane
+          </button>
+        </section>
+      </div>
     </div>
   </div>
   <button
@@ -18804,7 +18823,10 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
                 </span>
                 <span>
                   <span>
-
+                    <span>
+                      <br />
+
+                    </span>
                     <span
                       style={Object {}}
                     >
@@ -18961,21 +18983,56 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
                     </span>
                   </span>
                   <span>
-
+                    <span>
+                      <br />
+
+                    </span>
                     <span
                       style={Object {}}
                     >
                       editable
                     </span>
                   </span>
                   <span>
-
+                    <span>
+                      <br />
+
+                    </span>
                     <span
                       style={Object {}}
                     >
                       canAddLanes
                     </span>
-
+                  </span>
+                  <span>
+                    <span>
+                      <br />
+
+                    </span>
+                    <span
+                      style={Object {}}
+                    >
+                      onLaneAdd
+                    </span>
+                    <span>
+                      =
+                      <span
+                        style={Object {}}
+                      >
+                        {
+                        <span
+                          style={
+                            Object {
+                              "color": "#170",
+                            }
+                          }
+                        >
+                          onLaneAdd
+                        </span>
+                        }
+                      </span>
+                    </span>
+                    <br />
                   </span>
                 </span>
                 <span