feat add tooltip for handler closes #7

react-component · Jul 13, 2015 · b1645aa · b1645aa
1 parent 19deaee
commit b1645aa
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "slider ui component for react",
   "keywords": [
     "react",
@@ -18,7 +18,7 @@
     "url": "http://github.com/react-component/slider/issues"
   },
   "licenses": "MIT",
-  "main":"./lib/index.js",
+  "main": "./lib/index.js",
   "config": {
     "port": 8000
   },
@@ -48,6 +48,7 @@
     "precommit"
   ],
   "dependencies": {
+    "rc-tooltip": "^2.4.0",
     "rc-util": "^2.0.2"
   }
 }
diff --git a/src/Slider.jsx b/src/Slider.jsx
@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var Tooltip = require('rc-tooltip');
 var DomUtils = require('rc-util').Dom;
 
 function pauseEvent(e) {
@@ -10,9 +11,6 @@ function pauseEvent(e) {
   if (e.preventDefault) {
     e.preventDefault();
   }
-  e.cancelBubble = true;
-  e.returnValue = false;
-  return false;
 }
 
 function prefixClsFn(prefixCls) {
@@ -93,7 +91,7 @@ var Slider = React.createClass({
       return 0;
     }
     var value = this.state.value;
-    var unit = (props.max - props.min) / (props.marks.length - 1);
+    var unit = ((props.max - props.min) / (props.marks.length - 1)).toFixed(5);
     return Math.floor(value / unit);
   },
 
@@ -292,6 +290,7 @@ var Slider = React.createClass({
         this._addEventHandles('mouse');
       }
     );
+
     pauseEvent(e);
   },
 
@@ -314,6 +313,7 @@ var Slider = React.createClass({
       if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
         className = prefixClsFn(prefixCls, 'dot', 'dot-active');
       }
+
       elements[i] = (
         <span className={className} style={style} ref={'step' + i}></span>
       );
@@ -336,11 +336,10 @@ var Slider = React.createClass({
       width: (unit / 2).toFixed(5)
     };
 
-    if (i === (marksLen - 1)) {
-      style.right = '0';
-      style.width = 'auto';
-    }else {
-      style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset);
+    if (i === marksLen - 1) {
+      style.right = -(style.width / 2).toFixed(5);
+    } else {
+      style.left = i > 0 ? (offset - unit / 4).toFixed(5) : -(style.width / 2).toFixed(5);
     }
 
     var prefixCls = this.props.className;
@@ -385,14 +384,22 @@ var Slider = React.createClass({
       className =  prefixClsFn(prefixCls, 'handle', 'handle-active');
     }
 
-    return (
-      <a className={className}
+    var handle =  <a className={className}
         ref = "handle"
         style = {handleStyle}
         href = "#"
         onMouseDown = {this.handleMouseDown}
-        onTouchStart = {this.handleTouchStart}></a>
-    );
+        onTouchStart = {this.handleTouchStart}></a>;
+
+    if (this.props.marks.length > 0) {
+      return handle;
+    } else {
+      return (
+        <Tooltip placement="top" overlay={<span>{this.state.value}</span>} delay={0} >
+          {handle}
+        </Tooltip>
+      );
+    }
   },
 
   renderTrack: function(offset) {
@@ -429,6 +436,7 @@ var Slider = React.createClass({
         {handles}
         {steps}
         {sliderMarks}
+        {this.props.children}
       </div>
     );
   }