rc-slider - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

lib/Slider.js

 'use strict';
 
 var React = require('react');
+var Tooltip = require('rc-tooltip');
 var DomUtils = require('rc-util').Dom;
@@ -13,5 +14,2 @@
   }
-  e.cancelBubble = true;
-  e.returnValue = false;
-  return false;
 }
@@ -36,2 +34,3 @@
     marks: React.PropTypes.array,
+    isIncluded: React.PropTypes.bool,
     className: React.PropTypes.string,
@@ -51,2 +50,3 @@ disabled: React.PropTypes.bool,
       marks: [],
+      isIncluded: true,
       className: 'rc-slider',
@@ -101,3 +101,3 @@ disabled: false,
     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);
@@ -139,3 +139,3 @@ },
   _calValueByPos: function _calValueByPos(position, callback) {
-    var pixelOffset = position - this.state.sliderStart;
+    var pixelOffset = position - this.getSliderStart();
     // pixelOffset -= (this.state.handleSize / 2);
@@ -261,7 +261,13 @@
       upperBound: slider.clientWidth,
-      sliderLength: Math.abs(sliderMax - sliderMin),
-      sliderStart: sliderMin
+      sliderLength: Math.abs(sliderMax - sliderMin)
     });
   },
 
+  getSliderStart: function getSliderStart() {
+    var slider = this.refs.slider.getDOMNode();
+    var rect = slider.getBoundingClientRect();
+
+    return rect.left;
+  },
+
   handleTouchStart: function handleTouchStart(e) {
@@ -305,2 +311,3 @@ if (this.props.disabled || e.touches.length > 1 || e.type === 'touchend' && e.touches.length > 0) {
     });
+
     pauseEvent(e);
@@ -325,5 +332,10 @@ },
       var className = prefixClsFn(prefixCls, 'dot');
-      if (i <= this.getIndex() || this._calcValue(offset) <= this.getValue()) {
-        className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+      if (props.isIncluded) {
+        if (i <= this.getIndex() || this._calcValue(offset) <= this.getValue()) {
+          className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+        }
+      } else {
+        className = i === this.getIndex() ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
       }
+
       elements[i] = React.createElement('span', { className: className, style: style, ref: 'step' + i });
@@ -350,6 +362,5 @@ }
     if (i === marksLen - 1) {
-      style.right = '0';
-      style.width = 'auto';
+      style.right = -(style.width / 2).toFixed(5);
     } else {
-      style.left = i > 0 ? (offset - unit / 4).toFixed(5) : offset;
+      style.left = i > 0 ? (offset - unit / 4).toFixed(5) : -(style.width / 2).toFixed(5);
     }
@@ -360,4 +371,8 @@
 
-    if (i <= this.getIndex()) {
-      className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
+    if (this.props.isIncluded) {
+      if (i <= this.getIndex()) {
+        className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
+      }
+    } else {
+      className = i === this.getIndex() ? prefixClsFn(prefixCls, 'mark-text', 'mark-text-active') : className;
     }
@@ -402,3 +417,3 @@
 
-    return React.createElement('a', { className: className,
+    var handle = React.createElement('a', { className: className,
       ref: 'handle',
@@ -409,2 +424,16 @@ style: handleStyle,
       onTouchStart: this.handleTouchStart });
+
+    if (this.props.marks.length > 0) {
+      return handle;
+    } else {
+      return React.createElement(
+        Tooltip,
+        { placement: 'top', overlay: React.createElement(
+            'span',
+            null,
+            this.state.value
+          ), delay: 0 },
+        handle
+      );
+    }
   },
@@ -430,3 +459,3 @@
 
-    var track = this.renderTrack(offset);
+    var track = this.props.isIncluded ? this.renderTrack(offset) : null;
     var handles = this.renderHandle(offset);
@@ -445,3 +474,4 @@ var steps = props.step > 1 || props.marks.length > 0 ? this.renderSteps() : null;
       steps,
-      sliderMarks
+      sliderMarks,
+      this.props.children
     );
@@ -448,0 +478,0 @@ }

package.json

 {
   "name": "rc-slider",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "slider ui component for react",
@@ -21,3 +21,3 @@ "keywords": [
   "licenses": "MIT",
-  "main":"./lib/index.js",
+  "main": "./lib/index.js",
   "config": {
@@ -52,4 +52,5 @@ "port": 8000
   "dependencies": {
+    "rc-tooltip": "^2.4.0",
     "rc-util": "^2.0.2"
   }
 }

README.md

@@ -110,2 +110,8 @@ # rc-slider
         <tr>
+          <td>isIncluded</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>if the value is true, it means a continuous value interval, otherwise, it is a independent value.</td>
+        </tr>
+        <tr>
           <td>index</td>
@@ -112,0 +118,0 @@ <td>number</td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20802

increased by6.42%

Lines of code

484

increased by3.42%

Number of lines in readme file

154

increased by4.05%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedrc-tooltip@^2.4.0

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedcss-animation@1.6.1(transitive)

• + Addeddom-align@1.12.4(transitive)

• + Addedrc-align@1.2.1(transitive)

• + Addedrc-animate@1.3.0(transitive)

• + Addedrc-tooltip@2.10.1(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)