react-dual-range-slider - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

components.json

@@ -10,2 +10,14 @@ {
         {
+          "name": "getStateFromProps",
+          "docblock": null,
+          "modifiers": [],
+          "params": [
+            {
+              "name": "props",
+              "type": null
+            }
+          ],
+          "returns": null
+        },
+        {
           "name": "startToMove",
@@ -142,2 +154,9 @@ "docblock": "startToMove\r\nevent triggered when the user starts to move",
         {
+          "name": "getDisplayValues",
+          "docblock": null,
+          "modifiers": [],
+          "params": [],
+          "returns": null
+        },
+        {
           "name": "getLeftPositions",
@@ -203,2 +222,16 @@ "docblock": "getLeftPositions\r\nreturn left position as a proportion",
         },
+        "lock": {
+          "type": {
+            "name": "arrayOf",
+            "value": {
+              "name": "bool"
+            }
+          },
+          "required": false,
+          "defaultValue": {
+            "value": "[false, false]",
+            "computed": false
+          },
+          "description": ""
+        },
         "reverse": {
@@ -205,0 +238,0 @@ "type": {

components.md

@@ -16,2 +16,3 @@ #  (react-dual-range-slider)
 | *values* | arrayOf |  | `[0, 100]`
+| *lock* | arrayOf |  | `[false, false]`
 | *reverse* | bool |  | `false`
@@ -18,0 +19,0 @@ | *formatFunc* | func |  | `function(value) { return value; }`

lib/components/react-dual-range-slider.js

@@ -45,4 +45,19 @@ "use strict";
 
-    var limits = _this.props.limits.slice().sort(_this.sortValues);
-    var values = _this.props.values.slice().sort(_this.sortValues);
+    _this.state = _this.getStateFromProps(props);
+    return _this;
+  }
+
+  ReactDualRangeSlider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+
+    var props = {};
+    for (el in this.props) {
+      props[el] = this.props[el];
+    }
+    this.setState(this.getStateFromProps(props));
+  };
+
+  ReactDualRangeSlider.prototype.getStateFromProps = function getStateFromProps(props) {
+
+    var limits = props.limits.slice().sort(this.sortValues);
+    var values = props.values.slice().sort(this.sortValues);
     var size = Math.abs(limits[1] - limits[0]);
@@ -53,7 +68,8 @@
 
-    _this.state = {
+    return {
       limits: limits,
       size: size,
       values: values,
-      reverse: _this.props.reverse,
+      lock: props.lock,
+      reverse: props.reverse,
       isSelDown: false,
@@ -66,8 +82,7 @@ indexSelDown: 0,
       boxWidth: 0,
-      formatFunc: _this.props.formatFunc,
-      onChange: _this.props.onChange,
-      rangeColor: _this.props.rangeColor
+      formatFunc: props.formatFunc,
+      onChange: props.onChange,
+      rangeColor: props.rangeColor
     };
-    return _this;
-  }
+  };
 
@@ -80,2 +95,3 @@ /**
   ReactDualRangeSlider.prototype.startToMove = function startToMove(event, index) {
+    var clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
     this.setState({
@@ -86,4 +102,4 @@ isSelDown: true,
       moveCurrentValue: this.state.values[index],
-      moveStartX: event.clientX,
-      moveCurrentX: event.clientX,
+      moveStartX: clientX,
+      moveCurrentX: clientX,
       boxWidth: event.currentTarget.parentElement.offsetWidth
@@ -112,2 +128,20 @@ });
 
+  ReactDualRangeSlider.prototype.onTouchStart0 = function onTouchStart0(event) {
+    this.startToMove(event, 0);
+  };
+
+  ReactDualRangeSlider.prototype.onTouchStart1 = function onTouchStart1(event) {
+    this.startToMove(event, 1);
+  };
+
+  ReactDualRangeSlider.prototype.onTouchMove = function onTouchMove(event) {
+
+    this.move(event);
+  };
+
+  ReactDualRangeSlider.prototype.onTouchEnd = function onTouchEnd(event) {
+
+    this.stopToMove(event);
+  };
+
   /**
@@ -120,7 +154,12 @@ * onMouseMove
 
+    this.move(event);
+  };
+
+  ReactDualRangeSlider.prototype.move = function move(event) {
+
     if (this.state.isSelDown) {
-      var currentX = event.clientX;
+      var clientX = event.touches && event.touches.length > 0 ? event.touches[0].clientX : event.clientX;
       this.setState({
-        moveCurrentX: currentX,
-        moveCurrentValue: this.getMoveCurrentValue(currentX)
+        moveCurrentX: clientX,
+        moveCurrentValue: this.getMoveCurrentValue(clientX)
       });
@@ -298,7 +337,9 @@ }
     var styleSelector0 = {
-      left: leftPos[0] + '%'
+      left: leftPos[0] + '%',
+      display: this.props.lock[0] === false ? 'block' : 'none'
     };
 
     var styleSelector1 = {
-      left: leftPos[1] + '%'
+      left: leftPos[1] + '%',
+      display: this.props.lock[1] === false ? 'block' : 'none'
     };
@@ -316,2 +357,5 @@
         onMouseUp: this.onMouseUp.bind(this),
+
+        onTouchMove: this.onTouchMove.bind(this),
+        onTouchEnd: this.onTouchEnd.bind(this),
         "data-name": "component" },
@@ -331,3 +375,4 @@ _react2.default.createElement(
             style: styleSelector0,
-            onMouseDown: this.onMouseDown0.bind(this)
+            onMouseDown: this.onMouseDown0.bind(this),
+            onTouchStart: this.onTouchStart0.bind(this)
           },
@@ -341,3 +386,4 @@ _ref
             style: styleSelector1,
-            onMouseDown: this.onMouseDown1.bind(this)
+            onMouseDown: this.onMouseDown1.bind(this),
+            onTouchStart: this.onTouchStart1.bind(this)
           },
@@ -386,2 +432,3 @@ _ref2
   values: _react.PropTypes.arrayOf(_react.PropTypes.number),
+  lock: _react.PropTypes.arrayOf(_react.PropTypes.bool),
   reverse: _react.PropTypes.bool,
@@ -396,2 +443,3 @@ formatFunc: _react.PropTypes.func,
   values: [0, 100],
+  lock: [false, false],
   reverse: false,
@@ -398,0 +446,0 @@ formatFunc: function formatFunc(value) {

package.json

 {
   "name": "react-dual-range-slider",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "react-dual-range-slider",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-dual-range-slider
 
 The react dual range slider is a UI input designed to set a range of values.
+It works with mouse events for desktop and touch events for mobile devices.
 
 You can set the limits and the values by default.
+Lock a value to get a simple slider, or both to draw the range without any slider.
 The reverse mode permits to switch the order of limit values on left/right.
-
 An onChange event is triggered when the user stops to slide.
 Pass a function to format yourself the output, easy to round the values.
-
 It is possible to set a personalized range color.
@@ -52,2 +52,3 @@
 values: PropTypes.arrayOf(PropTypes.number),
+lock: PropTypes.arrayOf(PropTypes.bool),
 reverse: PropTypes.bool,
@@ -63,2 +64,3 @@ formatFunc : PropTypes.func,
 values={[2, 5]}
+lock={[true, false]}
 formatFunc={(v) => { return Math.round(v); }}
@@ -65,0 +67,0 @@ onChange={(values) => { console.log(values) }}

src/components/react-dual-range-slider.jsx

@@ -12,4 +12,19 @@ import React, {PropTypes} from "react";
     super(props);
-    let limits = this.props.limits.slice().sort(this.sortValues);
-    let values = this.props.values.slice().sort(this.sortValues);
+
+    this.state = this.getStateFromProps(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+
+    let props = {};
+    for(el in this.props) {
+      props[el] = this.props[el];
+    }
+    this.setState(this.getStateFromProps(props));
+  }
+
+  getStateFromProps(props) {
+
+    let limits = props.limits.slice().sort(this.sortValues);
+    let values = props.values.slice().sort(this.sortValues);
     let size = Math.abs(limits[1]-limits[0]);
@@ -20,7 +35,8 @@
 
-    this.state = {
+    return {
       limits: limits,
       size: size,
       values:values,
-      reverse: this.props.reverse,
+      lock: props.lock,
+      reverse: props.reverse,
       isSelDown: false,
@@ -33,5 +49,5 @@ indexSelDown: 0,
       boxWidth:0, 
-      formatFunc: this.props.formatFunc, 
-      onChange: this.props.onChange,
-      rangeColor: this.props.rangeColor
+      formatFunc: props.formatFunc, 
+      onChange: props.onChange,
+      rangeColor: props.rangeColor
     }
@@ -46,2 +62,3 @@ }
   startToMove(event, index) {
+    const clientX = event.touches && event.touches.length>0 ? event.touches[0].clientX : event.clientX;
     this.setState({
@@ -52,4 +69,4 @@ isSelDown:true,
       moveCurrentValue: this.state.values[index],
-      moveStartX: event.clientX,
-      moveCurrentX: event.clientX,
+      moveStartX: clientX,
+      moveCurrentX: clientX,
       boxWidth:event.currentTarget.parentElement.offsetWidth
@@ -78,3 +95,23 @@ });
 
+  onTouchStart0(event) {
+    this.startToMove(event, 0);
+  }
 
+  onTouchStart1(event) {
+    this.startToMove(event, 1);
+  }
+
+
+  onTouchMove(event) {
+    
+    this.move(event);
+  }
+  
+  onTouchEnd(event) {
+    
+    this.stopToMove(event);
+  }
+
+
+
   /**
@@ -87,7 +124,12 @@ * onMouseMove
     
+    this.move(event);
+  }
+
+  move(event) {
+    
     if(this.state.isSelDown) {
-      const currentX = event.clientX;
+      const clientX = event.touches && event.touches.length>0 ? event.touches[0].clientX : event.clientX;
       this.setState({
-        moveCurrentX: currentX,
-        moveCurrentValue: this.getMoveCurrentValue (currentX)
+        moveCurrentX: clientX,
+        moveCurrentValue: this.getMoveCurrentValue (clientX)
       });
@@ -265,7 +307,9 @@ }
     const styleSelector0 = {
-      left:leftPos[0]+'%'
+      left:leftPos[0]+'%',
+      display: this.props.lock[0] === false ? 'block' : 'none'
     };
 
     const styleSelector1 = {
-      left:leftPos[1]+'%'
+      left:leftPos[1]+'%',
+      display: this.props.lock[1] === false ? 'block' : 'none'
     };
@@ -282,2 +326,5 @@
         onMouseUp={this.onMouseUp.bind(this)}
+
+        onTouchMove={this.onTouchMove.bind(this)}
+        onTouchEnd={this.onTouchEnd.bind(this)}
         data-name='component'>
@@ -291,2 +338,3 @@
             onMouseDown={this.onMouseDown0.bind(this)}
+            onTouchStart={this.onTouchStart0.bind(this)}
             >
@@ -299,2 +347,3 @@ <div></div>
             onMouseDown={this.onMouseDown1.bind(this)}
+            onTouchStart={this.onTouchStart1.bind(this)}
             >
@@ -323,2 +372,3 @@ <div></div>
   values: PropTypes.arrayOf(PropTypes.number),
+  lock: PropTypes.arrayOf(PropTypes.bool),
   reverse: PropTypes.bool,
@@ -333,2 +383,3 @@ formatFunc : PropTypes.func,
   values: [0, 100],
+  lock: [false, false],
   reverse: false,
@@ -335,0 +386,0 @@ formatFunc: function(value) {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1764501

increased by2.09%

Lines of code

10806

increased by1.33%

Number of lines in readme file

80

increased by2.56%

No dependency changes