fix(ClassNames): Allow overriding Board, Lane and Card with custom classnames

#186

Author: rcdexta

package.json

@@ -40,6 +40,7 @@
   "homepage": "https://github.com/rcdexta/react-trello",
   "dependencies": {
     "@terebentina/react-popover": "^2.0.0",
+    "classnames": "^2.2.6",
     "immutability-helper": "^2.8.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",

src/components/Board.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import BoardContainer from './BoardContainer'
 import {Provider} from 'react-redux'
+import classNames from 'classnames'
 import {applyMiddleware, createStore} from 'redux'
 import boardReducer from '../reducers/BoardReducer'
 import logger from 'redux-logger'
@@ -22,11 +23,12 @@ export default class Board extends Component {
   }
 
   render() {
+    const allClassNames = classNames('react-trello-board', this.props.className || '')
     return (
       <Provider store={this.store}>
         <>
           <GlobalStyle />
-          <BoardContainer className="react-trello-board" {...this.props} id={this.id} />
+          <BoardContainer className={allClassNames} {...this.props} id={this.id} />
         </>
       </Provider>
     )

src/components/Card.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import {CardHeader, CardRightContent, CardTitle, Detail, Footer, MovableCardWrapper} from '../styles/Base'
 import Tag from './Tag'
 import DeleteButton from './widgets/DeleteButton'
+import classNames from 'classnames'
 
 class Card extends Component {
   removeCard = e => {
@@ -40,9 +41,10 @@ class Card extends Component {
   render() {
     const {id, cardStyle, editable, hideCardDeleteIcon, customCardLayout, dragStyle, onDelete, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
+    const allClassNames = classNames('react-trello-board', this.props.className || '')
     return (
       <MovableCardWrapper
-        className="react-trello-card"
+        className={allClassNames}
         key={id}
         data-id={id}
         style={{

src/components/Lane.js

@@ -25,6 +25,7 @@ import {
   LaneMenuTitle,
   MenuButton
 } from '../styles/Elements'
+import classNames from 'classnames'
 
 class Lane extends Component {
   state = {
@@ -263,8 +264,9 @@ class Lane extends Component {
   render() {
     const {loading, isDraggingOver} = this.state
     const {id, onLaneClick, onLaneScroll, onCardClick, onCardAdd, onCardDelete, ...otherProps} = this.props
+    const allClassNames = classNames('react-trello-board', this.props.className || '')
     return (
-      <Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false} className="react-trello-lane">
+      <Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false} className={allClassNames}>
         {this.renderHeader()}
         {this.renderDragContainer(isDraggingOver)}
         {loading && <Loader />}