Merge pull request #4 from billneff79/global-brush-mousing

Brush: use global mouse hooks
billneff79 · Oct 11, 2016 · 7c560af · 7c560af
2 parents 7dbed47 + 3b6ad4e
commit 7c560af
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "recharts",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "React charts",
   "main": "lib/index",
   "jsnext:main": "es6/index",

diff --git a/src/cartesian/Brush.js b/src/cartesian/Brush.js
@@ -65,6 +65,11 @@ class Brush extends Component {
     }
   }
 
+  componentDidMount() {
+    addEventListener('mousemove', this.handleMove);
+    addEventListener('mouseup', this.handleUp);
+  }
+
   componentWillReceiveProps(nextProps) {
     const { data, width, x, travellerWidth, startIndex, endIndex } = this.props;
 
@@ -102,10 +107,8 @@ class Brush extends Component {
     this.scale = null;
     this.scaleValues = null;
 
-    if (this.leaveTimer) {
-      clearTimeout(this.leaveTimer);
-      this.leaveTimer = null;
-    }
+    removeEventListener('mousemove', this.handleMove);
+    removeEventListener('mouseup', this.handleUp);
   }
 
   getIndexInRange(range, x) {
@@ -157,11 +160,6 @@ class Brush extends Component {
   }
 
   handleMove = (e) => {
-    if (this.leaveTimer) {
-      clearTimeout(this.leaveTimer);
-      this.leaveTimer = null;
-    }
-
     if (this.state.isTravellerMoving) {
       this.handleTravellerMove(e);
     } else if (this.state.isSlideMoving) {
@@ -176,12 +174,6 @@ class Brush extends Component {
     });
   };
 
-  handleLeaveWrapper = () => {
-    if (this.state.isTravellerMoving || this.state.isSlideMoving) {
-      this.leaveTimer = setTimeout(this.handleUp, 1000);
-    }
-  };
-
   handleEnterSlideOrTraveller = () => {
     this.setState({
       isTextActive: true,
@@ -419,9 +411,6 @@ class Brush extends Component {
     return (
       <Layer
         className={layerClass}
-        onMouseUp={this.handleUp}
-        onMouseMove={this.handleMove}
-        onMouseLeave={this.handleLeaveWrapper}
       >
         {this.renderBackground()}
         {this.renderSlide(startX, endX)}