From 386d4bc2bf2b60ed9ba29b12fb9de0c28ccaea7e Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sun, 13 Sep 2015 15:54:01 +0300
Subject: [PATCH] [fixed] `selectable` can properly be toggled on and off

---
 src/BackgroundCells.jsx | 15 ++++++++++++++-
 src/DaySlot.jsx         | 18 ++++++++++++++++--
 src/Month.jsx           |  2 +-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/BackgroundCells.jsx b/src/BackgroundCells.jsx
index ac823e70f..d2201caa5 100644
--- a/src/BackgroundCells.jsx
+++ b/src/BackgroundCells.jsx
@@ -21,7 +21,14 @@ class DisplayCells extends React.Component {
   }
 
   componentWillUnmount() {
-    this._selector && this._selector.teardown()
+    this._teardownSelectable();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectable && !this.props.selectable)
+      this._selectable();
+    if (!nextProps.selectable && this.props.selectable)
+      this._teardownSelectable();
   }
 
   render(){
@@ -104,6 +111,12 @@ class DisplayCells extends React.Component {
       })
   }
 
+  _teardownSelectable() {
+    if (!this._selector) return
+    this._selector.teardown();
+    this._selector = null;
+  }
+
   _selectSlot({ endIdx, startIdx }) {
     this.props.onSelectSlot &&
       this.props.onSelectSlot({
diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx
index f1b353889..40408e383 100644
--- a/src/DaySlot.jsx
+++ b/src/DaySlot.jsx
@@ -56,13 +56,21 @@ let DaySlot = React.createClass({
     return { selecting: false };
   },
 
+
   componentDidMount() {
     this.props.selectable
       && this._selectable()
   },
 
   componentWillUnmount() {
-    this._selector && this._selector.teardown()
+    this._teardownSelectable();
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectable && !this.props.selectable)
+      this._selectable();
+    if (!nextProps.selectable && this.props.selectable)
+      this._teardownSelectable();
   },
 
   render() {
@@ -214,7 +222,13 @@ let DaySlot = React.createClass({
       })
   },
 
-  _selectSlot({ startDate, endDate, endSlot, startSlot }){
+  _teardownSelectable() {
+    if (!this._selector) return
+    this._selector.teardown();
+    this._selector = null;
+  },
+
+  _selectSlot({ startDate, endDate, endSlot, startSlot }) {
     let current = startDate
       , slots = [];
 
diff --git a/src/Month.jsx b/src/Month.jsx
index d23bc535e..1907b13a3 100644
--- a/src/Month.jsx
+++ b/src/Month.jsx
@@ -195,7 +195,7 @@ let MonthView = React.createClass({
 
     return (
     <BackgroundCells
-      selectable
+      selectable={this.props.selectable}
       slots={7}
       ref={r => this._bgRows[idx] = r}
       onSelectSlot={onSelectSlot}