Merge pull request #287 from rcdexta/feature/hide_adding_card

[#183 #235] Hide the add card button on specific lanes

Author: dapi

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+* Availability to hide Add Card button for specific lane
 * Internationalization support (property `t` and `lang`)
 * Russian translation
 * Dependency Injection mechanisim for all components customization 

README.md

@@ -145,7 +145,7 @@ This is the container component that encapsulates the lanes and cards
 | lang    | string | Language of compiled texts ("en", "ru"). Default is "en"                                            |
 | t       | function | Translation function. You can specify either one key as a `String`. Look into ./src/locales for keys list |
 
-### Style customisation
+### Style customization
 
 | Name                | Type     | Description                                                                                                                    |
 | ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
@@ -157,6 +157,18 @@ This is the container component that encapsulates the lanes and cards
 | laneDragClass       | string   | CSS class to be applied to Lane when being dragged                                                                             |
 | components          | object   | Map of customised components. [List](src/components/index.js) of available. |
 
+
+### Lane specific props
+
+| Name                | Type     | Description                                                                                                                    |
+| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| id                  | string   | ID of lane                                                                                                                     |
+| style               | object   | Pass CSS style props to lane container                                                                                         |
+| labelStyle          | object   | Pass CSS style props of label                                                                                                  |
+| cardStyle           | object   | Pass CSS style props for cards in this lane                                                                                    |
+| disallowAddingCard  | boolean  | Disallow adding card button in this lane (default: false)                                                                      |
+
+
 Refer to `stories` folder for examples on many more options for customization.
 
 ## Editable Board

src/controllers/BoardContainer.js

@@ -140,7 +140,6 @@ class BoardContainer extends Component {
       'draggable',
       'cardDraggable',
       'collapsibleLanes',
-      'editable',
       'canAddLanes',
       'hideCardDeleteIcon',
       'tagStyle',
@@ -176,6 +175,7 @@ class BoardContainer extends Component {
                   style={laneStyle || lane.style || {}}
                   labelStyle={lane.labelStyle || {}}
                   cardStyle={this.props.cardStyle || lane.cardStyle}
+                  editable={editable && !lane.disallowAddingCard}
                   {...otherProps}
                   {...passthroughProps}
                 />

stories/EditableBoard.story.js

@@ -7,6 +7,10 @@ import Board from '../src'
 const data = require('./data/base.json')
 const smallData = require('./data/data-sort')
 
+const disallowAddingCardData =  {...data}
+disallowAddingCardData.lanes[0].title = 'Disallowed adding card'
+disallowAddingCardData.lanes[0].disallowAddingCard = true
+
 storiesOf('Editable Board', module)
   .add(
     'Add/Delete Cards',
@@ -54,3 +58,15 @@ storiesOf('Editable Board', module)
     },
     {info: 'Allow adding new lane'}
   )
+  .add(
+    'Disallow Adding Card for specific Lane',
+    () => {
+      return (
+        <Board
+          data={disallowAddingCardData}
+          editable
+        />
+      )
+    },
+    {info: 'Can hide the add card button on specific lanes'}
+  )