Make lane collapsible individually

- Make it possible to pass the initial collapse state
ObeoNetwork · Jan 30, 2024 · d13b712 · d13b712
1 parent 9ca7b07
commit d13b712
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ObeoNetwork/react-trello",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "Pluggable components to add a trello like kanban board to your application",
   "main": "dist/index.js",
   "files": [

diff --git a/src/controllers/BoardContainer.js b/src/controllers/BoardContainer.js
@@ -165,7 +165,6 @@ class BoardContainer extends Component {
       'draggable',
       'laneDraggable',
       'cardDraggable',
-      'collapsibleLanes',
       'canAddLanes',
       'hideCardDeleteIcon',
       'tagStyle',
@@ -189,7 +188,7 @@ class BoardContainer extends Component {
             getChildPayload={index => this.getLaneDetails(index)}
             groupName={this.groupName}>
             {reducerData.lanes.map((lane, index) => {
-              const {id, droppable, ...otherProps} = lane
+              const {id, droppable, collapsible, collapsed, ...otherProps} = lane
               const laneToRender = (
                 <Lane
                   key={id}
@@ -203,6 +202,8 @@ class BoardContainer extends Component {
                   labelStyle={lane.labelStyle || {}}
                   cardStyle={this.props.cardStyle || lane.cardStyle}
                   editable={editable && !lane.disallowAddingCard}
+                  collapsible={collapsibleLanes || collapsible}
+                  collapsed={collapsed}
                   {...otherProps}
                   {...passthroughProps}
                 />

diff --git a/src/controllers/Lane.js b/src/controllers/Lane.js
@@ -17,7 +17,7 @@ class Lane extends Component {
     loading: false,
     currentPage: this.props.currentPage,
     addCardMode: false,
-    collapsed: false,
+    collapsed: this.props.collapsed,
     isDraggingOver: false
   }
 
@@ -235,15 +235,15 @@ class Lane extends Component {
   }
 
   toggleLaneCollapsed = () => {
-    this.props.collapsibleLanes && this.setState(state => ({collapsed: !state.collapsed}))
+    this.props.collapsible && this.setState(state => ({collapsed: !state.collapsed}))
   }
 
   render() {
     const {loading, isDraggingOver, collapsed} = this.state
     const {
       id,
       cards,
-      collapsibleLanes,
+      collapsible,
       components,
       onLaneClick,
       onLaneScroll,
@@ -271,10 +271,11 @@ class Lane extends Component {
       droppable,
       editable,
       editLaneTitle,
+      collapsed: collapsedProps,
       ...otherProps
     } = this.props
     const allClassNames = classNames('react-trello-lane', this.props.className || '')
-    const showFooter = collapsibleLanes && cards.length > 0
+    const showFooter = collapsible && cards.length > 0
     return (
       <components.Section
         {...otherProps}
@@ -318,7 +319,8 @@ Lane.propTypes = {
   label: PropTypes.string,
   currentPage: PropTypes.number,
   draggable: PropTypes.bool,
-  collapsibleLanes: PropTypes.bool,
+  collapsible: PropTypes.bool,
+  collapsed: PropTypes.bool,
   droppable: PropTypes.bool,
   onCardMoveAcrossLanes: PropTypes.func,
   onCardClick: PropTypes.func,