react-slider - npm Package Compare versions

Comparing version 0.4.2 to 0.5.1

bower.json

 {
   "name": "react-slider",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "react-slider.js",

package.json

 {
   "name": "react-slider",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "react-slider.js",

react-slider.js

@@ -28,3 +28,2 @@ (function (root, factory) {
 
-
   /**
@@ -170,3 +169,9 @@ * Spreads `count` values equally between `min` and `max`.
        */
-      onAfterChange: React.PropTypes.func
+      onAfterChange: React.PropTypes.func,
+
+      /**
+       *  Callback called when the the slider is clicked (handle or bars).
+       *  Receives the value at the clicked position as argument.
+       */
+      onSliderClick: React.PropTypes.func
     },
@@ -226,2 +231,10 @@
       }
+      if (this.state.value.length > value.length)
+        this.state.value.length = value.length;
+
+      // If an upperBound has not yet been determined (due to the component being hidden
+      // during the mount event, or during the last resize), then calculate it now
+      if (this.state.upperBound === 0) {
+        this._handleResize();
+      }
     },
@@ -233,2 +246,3 @@
     // equally.
+    // TODO: better name? better solution?
     _or: function (value, defaultValue) {
@@ -265,17 +279,20 @@ var count = React.Children.count(this.props.children);
     _handleResize: function () {
-      var slider = this.refs.slider.getDOMNode();
-      var handle = this.refs.handle0.getDOMNode();
-      var rect = slider.getBoundingClientRect();
+      // setTimeout of 0 gives element enough time to have assumed its new size if it is being resized
+      window.setTimeout(function() {
+        var slider = this.refs.slider.getDOMNode();
+        var handle = this.refs.handle0.getDOMNode();
+        var rect = slider.getBoundingClientRect();
 
-      var size = this._sizeKey();
+        var size = this._sizeKey();
 
-      var sliderMax = rect[this._posMaxKey()];
-      var sliderMin = rect[this._posMinKey()];
+        var sliderMax = rect[this._posMaxKey()];
+        var sliderMin = rect[this._posMinKey()];
 
-      this.setState({
-        upperBound: slider[size] - handle[size],
-        sliderLength: Math.abs(sliderMax - sliderMin),
-        handleSize: handle[size],
-        sliderStart: this.props.invert ? sliderMax : sliderMin
-      });
+        this.setState({
+          upperBound: slider[size] - handle[size],
+          sliderLength: Math.abs(sliderMax - sliderMin),
+          handleSize: handle[size],
+          sliderStart: this.props.invert ? sliderMax : sliderMin
+        });
+      }.bind(this), 0);
     },
@@ -334,14 +351,23 @@
 
-    // Snaps the nearest handle to the value corresponding to `position` and calls `callback` with that handle's index.
-    _forceValueFromPosition: function (position, callback) {
+    _calcOffsetFromPosition: function (position) {
       var pixelOffset = position - this.state.sliderStart;
       if (this.props.invert) pixelOffset = this.state.sliderLength - pixelOffset;
       pixelOffset -= (this.state.handleSize / 2);
+      return pixelOffset;
+    },
 
+    // Snaps the nearest handle to the value corresponding to `position` and calls `callback` with that handle's index.
+    _forceValueFromPosition: function (position, callback) {
+      var pixelOffset = this._calcOffsetFromPosition(position);
       var closestIndex = this._getClosestIndex(pixelOffset);
+      var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
 
-      var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
-      var value = this.state.value;
+      var value = this.state.value.slice(); // Clone this.state.value since we'll modify it temporarily
       value[closestIndex] = nextValue;
 
+      // Prevents the slider from shrinking below `props.minDistance`
+      for (var i = 0; i < value.length - 1; i += 1) {
+        if (value[i + 1] - value[i] < this.props.minDistance) return;
+      }
+
       this.setState({value: value}, callback.bind(this, closestIndex));
@@ -416,6 +442,11 @@ },
     _start: function (i, position) {
-      if (document.activeElement) document.activeElement.blur();
+      // if activeElement is body window will lost focus in IE9
+      if (document.activeElement && document.activeElement != document.body) {
+        document.activeElement.blur();
+      }
 
-      this._fireEvent('onBeforeChange');
+      this.hasMoved = false;
 
+      this._fireChangeEvent('onBeforeChange');
+
       var zIndices = this.state.zIndices;
@@ -443,3 +474,3 @@ zIndices.splice(zIndices.indexOf(i), 1); // remove wherever the element is
       this._removeHandlers(eventMap);
-      this.setState({index: -1}, this._fireEvent.bind(this, 'onAfterChange'));
+      this.setState({index: -1}, this._fireChangeEvent.bind(this, 'onAfterChange'));
     },
@@ -474,2 +505,4 @@
     _move: function (position) {
+      this.hasMoved = true;
+
       var props = this.props;
@@ -480,3 +513,3 @@ var state = this.state;
       var value = state.value;
-      var l = value.length;
+      var length = value.length;
       var oldValue = value[index];
@@ -502,3 +535,3 @@
 
-        if (index < l - 1) {
+        if (index < length - 1) {
           var valueAfter = value[index + 1];
@@ -514,10 +547,10 @@ if (newValue > valueAfter - minDistance) {
       // if "pearling" is enabled, let the current handle push the pre- and succeeding handles.
-      if (props.pearling && l > 1) {
+      if (props.pearling && length > 1) {
         if (newValue > oldValue) {
-          this._pushSucceeding(l, value, minDistance, index);
-          this._trimSucceeding(l, value, minDistance, props.max);
+          this._pushSucceeding(value, minDistance, index);
+          this._trimSucceeding(length, value, minDistance, props.max);
         }
         else if (newValue < oldValue) {
-          this._pushPreceding(l, value, minDistance, index);
-          this._trimPreceding(l, value, minDistance, props.min);
+          this._pushPreceding(value, minDistance, index);
+          this._trimPreceding(length, value, minDistance, props.min);
         }
@@ -529,7 +562,7 @@ }
       if (newValue !== oldValue) {
-        this.setState({value: value}, this._fireEvent.bind(this, 'onChange'));
+        this.setState({value: value}, this._fireChangeEvent.bind(this, 'onChange'));
       }
     },
 
-    _pushSucceeding: function (l, value, minDistance, index) {
+    _pushSucceeding: function (value, minDistance, index) {
       var i, padding;
@@ -543,7 +576,7 @@ for (i = index, padding = value[i] + minDistance;
 
-    _trimSucceeding: function (l, nextValue, minDistance, max) {
-      for (var i = 0; i < l; i++) {
+    _trimSucceeding: function (length, nextValue, minDistance, max) {
+      for (var i = 0; i < length; i++) {
         var padding = max - i * minDistance;
-        if (nextValue[l - 1 - i] > padding) {
-          nextValue[l - 1 - i] = padding;
+        if (nextValue[length - 1 - i] > padding) {
+          nextValue[length - 1 - i] = padding;
         }
@@ -553,3 +586,3 @@ }
 
-    _pushPreceding: function (l, value, minDistance, index) {
+    _pushPreceding: function (value, minDistance, index) {
       var i, padding;
@@ -563,4 +596,4 @@ for (i = index, padding = value[i] - minDistance;
 
-    _trimPreceding: function (l, nextValue, minDistance, min) {
-      for (var i = 0; i < l; i++) {
+    _trimPreceding: function (length, nextValue, minDistance, min) {
+      for (var i = 0; i < length; i++) {
         var padding = min + i * minDistance;
@@ -649,6 +682,6 @@ if (nextValue[i] < padding) {
     _renderHandles: function (offset) {
-      var l = offset.length;
+      var length = offset.length;
 
       var styles = this.tempArray;
-      for (var i = 0; i < l; i++) {
+      for (var i = 0; i < length; i++) {
         styles[i] = this._buildHandleStyle(offset[i], i);
@@ -664,3 +697,3 @@ }
       } else {
-        for (i = 0; i < l; i++) {
+        for (i = 0; i < length; i++) {
           res[i] = renderHandle(styles[i], null, i);
@@ -699,13 +732,27 @@ }
     _onSliderMouseDown: function (e) {
-      if (this.props.disabled || this.props.snapDragDisabled) return;
-      var position = this._getMousePosition(e);
-      this._forceValueFromPosition(position[0], function (i) {
-        this._fireEvent('onChange');
-        this._start(i, position[0]);
-        this._addHandlers(this._getMouseEventMap());
-      }.bind(this));
+      if (this.props.disabled) return;
+      this.hasMoved = false;
+      if (!this.props.snapDragDisabled) {
+        var position = this._getMousePosition(e);
+        this._forceValueFromPosition(position[0], function (i) {
+          this._fireChangeEvent('onChange');
+          this._start(i, position[0]);
+          this._addHandlers(this._getMouseEventMap());
+        }.bind(this));
+      }
+
       pauseEvent(e);
     },
 
-    _fireEvent: function (event) {
+    _onSliderClick: function (e) {
+      if (this.props.disabled) return;
+
+      if (this.props.onSliderClick && !this.hasMoved) {
+        var position = this._getMousePosition(e);
+        var valueAtPos = this._trimAlignValue(this._calcValue(this._calcOffsetFromPosition(position[0])));
+        this.props.onSliderClick(valueAtPos);
+      }
+    },
+
+    _fireChangeEvent: function (event) {
       if (this.props[event]) {
@@ -735,3 +782,4 @@ this.props[event](undoEnsureArray(this.state.value));
             className: props.className + (props.disabled ? ' disabled' : ''),
-            onMouseDown: this._onSliderMouseDown
+            onMouseDown: this._onSliderMouseDown,
+            onClick: this._onSliderClick
           },
@@ -746,2 +794,2 @@ bars,
   return ReactSlider;
-}));
+}));

README.md

@@ -52,3 +52,3 @@ # React Slider
 
-Now you can style it as you want. Checkout the ```examples``` directory to see how.
+Now you can style it as you want. Checkout the `index.html` example to see how.
 
@@ -145,2 +145,6 @@ ### Properties
 
+##### onSliderClick {func}
+
+Callback called when the the slider is clicked (handle or bars). Receives the value at the clicked position as argument.
+
 ### Methods
@@ -147,0 +151,0 @@

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

33936

increased by6.52%

Lines of code

674

increased by6.65%

Number of lines in readme file

158

increased by2.6%

No dependency changes