From 73a2ba45d53b04f339d752249644c427a225f1d5 Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Tue, 23 Jan 2018 22:03:09 +0530
Subject: [PATCH] fix: Draggable Props should be disabled on card when
 draggable prop on Board is set to false

dragProvided.draggableProps.style was undefined when drag-n-drop was disabled on the card

https://github.com/rcdexta/react-trello/issues/60
---
 src/components/Card.js        | 8 +++++---
 stories/BoardStyling.story.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Card.js b/src/components/Card.js
index f16f445d6..3790b44e3 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -38,12 +38,14 @@ class Card extends Component {
   })
 
   render() {
-    const {id, index, cardStyle, editable, customCardLayout, ...otherProps} = this.props
+    const {id, index, cardStyle, draggable, editable, customCardLayout, ...otherProps} = this.props
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
+    const isDragDisabled = !draggable
     return (
-      <Draggable key={id} draggableId={id} index={index}>
+      <Draggable key={id} draggableId={id} index={index} isDragDisabled={isDragDisabled}>
         {(dragProvided, dragSnapshot) => {
-          const dragStyle = this.getItemStyle(dragSnapshot.isDragging, dragProvided.draggableProps.style)
+          const draggablePropsStyle = dragProvided.draggableProps && dragProvided.draggableProps.style
+          const dragStyle = this.getItemStyle(dragSnapshot.isDragging, draggablePropsStyle)
           return (
             <div>
               <MovableCardWrapper
diff --git a/stories/BoardStyling.story.js b/stories/BoardStyling.story.js
index d8f3b2c2c..1e3e68cb7 100644
--- a/stories/BoardStyling.story.js
+++ b/stories/BoardStyling.story.js
@@ -11,6 +11,6 @@ const data = require('./data.json')
 storiesOf('Advanced Features', module).add(
   'Board Styling',
   withInfo('Change the background and other css styles for the board container')(() =>
-    <Board data={data} style={{}} className='boardContainer' />
+    <Board data={data} style={{padding: '30px 20px'}} className='boardContainer' />
   )
 )