react-slider - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

package.json

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

react-slider.js

@@ -404,2 +404,9 @@ (function (root, factory) {
 
+    _getKeyDownEventMap: function () {
+      return {
+        'keydown': this._onKeyDown,
+        'focusout': this._onBlur
+      }
+    },
+
     _getMouseEventMap: function () {
@@ -419,2 +426,12 @@ return {
 
+    // create the `keydown` handler for the i-th handle
+    _createOnKeyDown: function (i) {
+      return function (e) {
+        if (this.props.disabled) return;
+        this._start(i);
+        this._addHandlers(this._getKeyDownEventMap());
+        pauseEvent(e);
+      }.bind(this);
+    },
+
     // create the `mousedown` handler for the i-th handle
@@ -457,5 +474,7 @@ _createOnMouseDown: function (i) {
     _start: function (i, position) {
+      var activeEl = document.activeElement;
+      var handleRef = this.refs['handle' + i];
       // if activeElement is body window will lost focus in IE9
-      if (document.activeElement && document.activeElement != document.body) {
-        document.activeElement.blur && document.activeElement.blur();
+      if (activeEl && activeEl != document.body && activeEl != handleRef) {
+        activeEl.blur && activeEl.blur();
       }
@@ -487,2 +506,6 @@
 
+    _onBlur: function () {
+      this._onEnd(this._getKeyDownEventMap());
+    },
+
     _onEnd: function (eventMap) {
@@ -495,3 +518,5 @@ this._removeHandlers(eventMap);
       var position = this._getMousePosition(e);
-      this._move(position[0]);
+      var diffPosition = this._getDiffPosition(position[0]);
+      var newValue = this._getValueFromPosition(diffPosition);
+      this._move(newValue);
     },
@@ -517,6 +542,50 @@
 
-      this._move(position[0]);
+      var diffPosition = this._getDiffPosition(position[0]);
+      var newValue = this._getValueFromPosition(diffPosition);
+
+      this._move(newValue);
     },
 
-    _move: function (position) {
+    _onKeyDown: function (e) {
+      if (e.ctrlKey || e.shiftKey || e.altKey) return;
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          return this._moveDownOneStep();
+        case "ArrowRight":
+        case "ArrowDown":
+          return this._moveUpOneStep();
+        case "Home":
+          return this._move(this.props.min);
+        case "End":
+          return this._move(this.props.max);
+        default:
+          return;
+      }
+    },
+
+    _moveUpOneStep: function () {
+      var oldValue = this.state.value[this.state.index];
+      var newValue = oldValue + this.props.step;
+      this._move(Math.min(newValue, this.props.max));
+    },
+
+    _moveDownOneStep: function () {
+      var oldValue = this.state.value[this.state.index];
+      var newValue = oldValue - this.props.step;
+      this._move(Math.max(newValue, this.props.min));
+    },
+
+    _getValueFromPosition: function (position) {
+      var diffValue = position / (this.state.sliderLength - this.state.handleSize) * (this.props.max - this.props.min);
+      return this._trimAlignValue(this.state.startValue + diffValue);
+    },
+
+    _getDiffPosition: function (position) {
+      var diffPosition = position - this.state.startPosition;
+      if (this.props.invert) diffPosition *= -1;
+      return diffPosition;
+    },
+
+    _move: function (newValue) {
       this.hasMoved = true;
@@ -532,8 +601,2 @@
 
-      var diffPosition = position - state.startPosition;
-      if (props.invert) diffPosition *= -1;
-
-      var diffValue = diffPosition / (state.sliderLength - state.handleSize) * (props.max - props.min);
-      var newValue = this._trimAlignValue(state.startValue + diffValue);
-
       var minDistance = props.minDistance;
@@ -684,3 +747,9 @@
             onMouseDown: this._createOnMouseDown(i),
-            onTouchStart: this._createOnTouchStart(i)
+            onTouchStart: this._createOnTouchStart(i),
+            onFocus: this._createOnKeyDown(i),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuenow": this.state.value[i],
+            "aria-valuemin": this.props.min,
+            "aria-valuemax": this.props.max,
           },
@@ -687,0 +756,0 @@ child

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

43991

increased by26.05%

Number of package files

14

increased by100%

Lines of code

880

increased by27.91%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes