Refactor mouse events capturing

1 files changed, 14 insertions, 15 deletions

diff --git a/app/components/Switch.js b/app/components/Switch.js
index 4d6ec6202f..59f997d879 100644
--- a/app/components/Switch.js
+++ b/app/components/Switch.js
@@ -18,30 +18,26 @@ export default class Switch extends Component {
     onChange: null
   }
 
+  isCapturingMouseEvents = false;
   ref: ?HTMLInputElement;
   onRef = (e: HTMLInputElement) => this.ref = e;
 
   state = {
-    isTracking: false,
     ignoreChange: false,
-    initialPos: (null: ?Point2d),
+    initialPos: ({x: 0, y: 0}: Point2d),
     startTime: (null: ?number)
   }
 
   handleMouseDown = (e: MouseEvent) => {
     const { clientX: x, clientY: y } = e;
+    this.startCapturingMouseEvents();
     this.setState({
-      isTracking: true,
       initialPos: { x, y },
       startTime: e.timeStamp
     });
   }
 
   handleMouseMove = (e: MouseEvent) => {
-    if(!this.state.isTracking) {
-      return;
-    }
-
     const inputElement = this.ref;
     const { x: x0 } = this.state.initialPos;
     const { clientX: x, clientY: y } = e;
@@ -75,12 +71,7 @@ export default class Switch extends Component {
   }
 
   handleMouseUp = () => {
-    if(this.state.isTracking) {
-      this.setState({
-        isTracking: false,
-        initialPos: null
-      });
-    }
+    this.stopCapturingMouseEvents();
   }
 
   handleChange = (e: Event) => {
@@ -114,14 +105,22 @@ export default class Switch extends Component {
     }
   }
 
-  componentDidMount() {
+  startCapturingMouseEvents() {
+    if(this.isCapturingMouseEvents) {
+      throw new Error('startCapturingMouseEvents() is called out of order.');
+    }
     document.addEventListener('mousemove', this.handleMouseMove);
     document.addEventListener('mouseup', this.handleMouseUp);
+    this.isCapturingMouseEvents = true;
   }
 
-  componentWillUnmount() {
+  stopCapturingMouseEvents() {
+    if(!this.isCapturingMouseEvents) {
+      throw new Error('stopCapturingMouseEvents() is called out of order.');
+    }
     document.removeEventListener('mousemove', this.handleMouseMove);
     document.removeEventListener('mouseup', this.handleMouseUp);
+    this.isCapturingMouseEvents = false;
   }
 
   render(): React.Element<*> {