[fixed] selectable can properly be toggled on and off

Author: jquense

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({

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 = [];
 

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}