Skip to content

Commit 8e12add

Browse files
rcdextarcdexta
committed
fix(Event Bus): Add onLaneAdd event handler
2 parents ab18227 + 229a50a commit 8e12add

File tree

4 files changed

+75
-7
lines changed

4 files changed

+75
-7
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ This is the container component that encapsulates the lanes and cards
104104
| onLaneScroll | function | Called when a lane is scrolled to the end: `onLaneScroll(requestedPage, laneId)` |
105105
| onCardClick | function | Called when a card is clicked: `onCardClick(cardId, metadata, laneId)` |
106106
| onCardAdd | function | Called when a new card is added: `onCardAdd(card, laneId)` |
107+
| onLaneAdd | function | Called when a new lane is added: `onLaneAdd(params)` |
107108
| addCardLink | node | Pass custom element to replace the `Add Card` link at the end of the lane (when board is editable) |
108109
| newCardTemplate | node | Pass a custom new card template to add new cards to a lane (when board is editable) |
109110
| hideCardDeleteIcon | boolean | Disable showing the delete icon to the top right corner of the card (when board is editable) |

‎src/components/BoardContainer.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ class BoardContainer extends Component {
9696
addNewLane = params => {
9797
this.hideEditableLane()
9898
this.props.actions.addLane(params)
99+
this.props.onLaneAdd(params)
99100
}
100101

101102
renderNewLane = () => {
@@ -117,7 +118,7 @@ class BoardContainer extends Component {
117118
}
118119

119120
render() {
120-
const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
121+
const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onLaneAdd, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
121122
const {addLaneMode} = this.state
122123
// Stick to whitelisting attributes to segregate board and lane props
123124
const passthroughProps = pick(this.props, [
@@ -203,6 +204,7 @@ BoardContainer.propTypes = {
203204
onCardDelete: PropTypes.func,
204205
onCardAdd: PropTypes.func,
205206
addCardLink: PropTypes.node,
207+
onLaneAdd: PropTypes.func,
206208
onLaneClick: PropTypes.func,
207209
laneSortFunction: PropTypes.func,
208210
draggable: PropTypes.bool,
@@ -233,6 +235,7 @@ BoardContainer.defaultProps = {
233235
handleDragEnd: () => {},
234236
handleLaneDragStart: () => {},
235237
handleLaneDragEnd: () => {},
238+
onLaneAdd: () => {},
236239
editable: false,
237240
canAddLanes: false,
238241
hideCardDeleteIcon: false,

‎stories/EditableBoard.story.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,21 @@ storiesOf('Editable Board', module)
7979
.add(
8080
'New Card Template',
8181
() => {
82-
return <Board data={data} editable newCardTemplate={<NewCard />} addCardTitle='Click to add'/>
82+
return <Board data={data} editable newCardTemplate={<NewCard />} addCardTitle="Click to add" />
8383
},
8484
{info: 'Pass a custom new card template to add card'}
8585
)
8686
.add(
8787
'Add New Lane',
8888
() => {
89-
return <Board data={smallData} editable canAddLanes />
89+
return (
90+
<Board
91+
data={smallData}
92+
editable
93+
canAddLanes
94+
onLaneAdd={t => console.log('You added a line with title ' + t.title)}
95+
/>
96+
)
9097
},
9198
{info: 'Allow adding new lane'}
9299
)

‎tests/__snapshots__/Storyshots.test.js.snap

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18631,6 +18631,25 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
1863118631
</section>
1863218632
</span>
1863318633
</div>
18634+
<div
18635+
style={undefined}
18636+
>
18637+
<section
18638+
className="sc-kAzzGY dDenbz"
18639+
style={
18640+
Object {
18641+
"width": 200,
18642+
}
18643+
}
18644+
>
18645+
<button
18646+
className="sc-kkGfuU ehXxRc"
18647+
onClick={[Function]}
18648+
>
18649+
+ Add another lane
18650+
</button>
18651+
</section>
18652+
</div>
1863418653
</div>
1863518654
</div>
1863618655
<button
@@ -18804,7 +18823,10 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
1880418823
</span>
1880518824
<span>
1880618825
<span>
18807-
18826+
<span>
18827+
<br />
18828+
  
18829+
</span>
1880818830
<span
1880918831
style={Object {}}
1881018832
>
@@ -18961,21 +18983,56 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
1896118983
</span>
1896218984
</span>
1896318985
<span>
18964-
18986+
<span>
18987+
<br />
18988+
  
18989+
</span>
1896518990
<span
1896618991
style={Object {}}
1896718992
>
1896818993
editable
1896918994
</span>
1897018995
</span>
1897118996
<span>
18972-
18997+
<span>
18998+
<br />
18999+
  
19000+
</span>
1897319001
<span
1897419002
style={Object {}}
1897519003
>
1897619004
canAddLanes
1897719005
</span>
18978-
19006+
</span>
19007+
<span>
19008+
<span>
19009+
<br />
19010+
  
19011+
</span>
19012+
<span
19013+
style={Object {}}
19014+
>
19015+
onLaneAdd
19016+
</span>
19017+
<span>
19018+
=
19019+
<span
19020+
style={Object {}}
19021+
>
19022+
{
19023+
<span
19024+
style={
19025+
Object {
19026+
"color": "#170",
19027+
}
19028+
}
19029+
>
19030+
onLaneAdd
19031+
</span>
19032+
}
19033+
</span>
19034+
</span>
19035+
<br />
1897919036
</span>
1898019037
</span>
1898119038
<span

0 commit comments

Comments
 (0)