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

Comparing version 0.2.0 to 1.0.0

dist/slider-utils.js

@@ -19,3 +19,3 @@ (function (global, factory) {
   });
-  exports.configureBreakpoints = configureBreakpoints;
+  exports.configureRange = configureRange;
   exports.getEmptyImage = getEmptyImage;
@@ -31,25 +31,25 @@
   
-  const breakpoints = [
-    { breakpoint: 0, step: 1}, 
-    { breakpoint: 20, step: 5 }, 
-    { breakpoint: 100 }
+  const range = [
+    { value: 0, step: 1}, 
+    { value: 20, step: 5 }, 
+    { value: 100 }
   ]
   
-  const Breakpoints = configureBreakpoints(breakpoints)
+  const Range = configureRange(range)
   
-  Breakpoints.minStep // 0
-  Breakpoints.maxStep // 36
-  Breakpoints.getValueForStep(22) // 30
-  Breakpoints.getStepForValue(30) // 22
+  Range.minStep // 0
+  Range.maxStep // 36
+  Range.getValueForStep(22) // 30
+  Range.getStepForValue(30) // 22
   
   */
 
-  function configureBreakpoints(breakpoints) {
-    // sort by ascending breakpoints.
-    var sorted = _.sortBy(breakpoints, function (b) {
-      return b.breakpoint;
+  function configureRange(range) {
+    // sort by ascending value.
+    var sorted = _.sortBy(range, function (b) {
+      return b.value;
     });
-    // calculates stepsSoFar on each breakpoint 
+    // calculates stepsSoFar on each value breakpoint 
     // for easier value/step calulations later.
-    var _breakpoints = _.reduce(sorted, function (result, curr, key) {
+    var breakpoints = _.reduce(sorted, function (result, curr, key) {
       // to calculate stepsSoFar we must get the
@@ -62,3 +62,3 @@ // range of values from the previous breakpoint
         // breakpoint value.
-        curr.stepsSoFar = (curr.breakpoint - prev.breakpoint) / prev.step + prev.stepsSoFar;
+        curr.stepsSoFar = (curr.value - prev.value) / prev.step + prev.stepsSoFar;
       } else {
@@ -80,6 +80,6 @@ // the first breakpoint represents min value
     // min and max for easier calculations later
-    var minStep = _.first(_breakpoints).stepsSoFar;
-    var maxStep = _.last(_breakpoints).stepsSoFar;
-    var minValue = _.first(_breakpoints).breakpoint;
-    var maxValue = _.last(_breakpoints).breakpoint;
+    var minStep = _.first(breakpoints).stepsSoFar;
+    var maxStep = _.last(breakpoints).stepsSoFar;
+    var minValue = _.first(breakpoints).value;
+    var maxValue = _.last(breakpoints).value;
 
@@ -100,8 +100,8 @@ // return value within min and max value range
       // find the nearest breakpoint behind current step
-      var nearest = _.reduce(_breakpoints, function (prev, curr) {
+      var nearest = _.reduce(breakpoints, function (prev, curr) {
         return curr.stepsSoFar < step && curr.stepsSoFar > prev.stepsSoFar ? curr : prev;
-      }, _.first(_breakpoints));
+      }, _.first(breakpoints));
       // determine value past nearest breakpoint value
       var additionalValue = (step - nearest.stepsSoFar) * nearest.step;
-      return nearest.breakpoint + additionalValue;
+      return nearest.value + additionalValue;
     };
@@ -112,7 +112,7 @@
       // find the nearest breakpoint behind current value
-      var nearest = _.reduce(_breakpoints, function (prev, curr) {
-        return curr.breakpoint < value && curr.breakpoint > prev.breakpoint ? curr : prev;
-      }, _.first(_breakpoints));
+      var nearest = _.reduce(breakpoints, function (prev, curr) {
+        return curr.value < value && curr.value > prev.value ? curr : prev;
+      }, _.first(breakpoints));
       // determine number of steps past nearest breakpoint steps so far
-      var additionalSteps = (value - nearest.breakpoint) / nearest.step;
+      var additionalSteps = (value - nearest.value) / nearest.step;
       return nearest.stepsSoFar + additionalSteps;
@@ -119,0 +119,0 @@ };

dist/StepRangeSlider.js

@@ -102,6 +102,7 @@ (function (global, factory) {
       value: function setInitialState(props) {
-        var breakpoints = (0, _sliderUtils.configureBreakpoints)(props.breakpoints);
-        var value = breakpoints.ensureValue(props.value || props.defaultValue);
-        var currentStep = breakpoints.getStepForValue(value);
-        this.setState({ value: value, breakpoints: breakpoints, currentStep: currentStep });
+        var range = (0, _sliderUtils.configureRange)(props.range);
+        console.log(range);
+        var value = range.ensureValue(props.value || props.defaultValue);
+        var currentStep = range.getStepForValue(value);
+        this.setState({ value: value, range: range, currentStep: currentStep });
       }
@@ -122,3 +123,3 @@ }, {
       value: function componentWillReceiveProps(nextProps) {
-        if (nextProps.breakpoints && nextProps.breakpoints !== this.props.breakpoints) {
+        if (nextProps.range && nextProps.range !== this.props.range) {
           this.setInitialState(nextProps);
@@ -131,8 +132,8 @@ }
         var _state = this.state;
-        var breakpoints = _state.breakpoints;
+        var range = _state.range;
         var currentStep = _state.currentStep;
 
         var nextStep = currentStep + amount;
-        if (nextStep <= breakpoints.maxStep) {
-          var nextValue = breakpoints.getValueForStep(nextStep);
+        if (nextStep <= range.maxStep) {
+          var nextValue = range.getValueForStep(nextStep);
           this.setState({ currentStep: nextStep, value: nextValue });
@@ -145,8 +146,8 @@ }
         var _state2 = this.state;
-        var breakpoints = _state2.breakpoints;
+        var range = _state2.range;
         var currentStep = _state2.currentStep;
 
         var nextStep = currentStep - amount;
-        if (nextStep >= breakpoints.minStep) {
-          var nextValue = breakpoints.getValueForStep(nextStep);
+        if (nextStep >= range.minStep) {
+          var nextValue = range.getValueForStep(nextStep);
           this.setState({ currentStep: nextStep, value: nextValue });
@@ -172,3 +173,3 @@ }
         var disabled = this.props.disabled;
-        var breakpoints = this.state.breakpoints;
+        var range = this.state.range;
         var _sliderRect = this.sliderRect;
@@ -191,7 +192,9 @@ var width = _sliderRect.width;
         var positionPercent = position / width;
-        var currentStep = Math.round(position / width * breakpoints.maxStep);
-        var value = breakpoints.getValueForStep(currentStep);
+        var currentStep = Math.round(position / width * range.maxStep);
+        var value = range.getValueForStep(currentStep);
 
-        this.setState({ value: value, currentStep: currentStep });
-        this.handleChange(value);
+        if (value !== this.state.value || currentStep !== this.state.currentStep) {
+          this.setState({ value: value, currentStep: currentStep });
+          this.handleChange(value);
+        }
       }
@@ -227,6 +230,6 @@ }, {
         var value = _state3.value;
-        var breakpoints = _state3.breakpoints;
+        var range = _state3.range;
         var currentStep = _state3.currentStep;
 
-        var offset = currentStep / breakpoints.maxStep * 100;
+        var offset = currentStep / range.maxStep * 100;
         var offsetStyle = { left: offset + '%' };
@@ -248,4 +251,4 @@
               className: 'StepRangeSlider__thumb',
-              'aria-valuemin': breakpoints.minValue,
-              'aria-valuemax': breakpoints.maxValue,
+              'aria-valuemin': range.minValue,
+              'aria-valuemax': range.maxValue,
               'aria-valuenow': value,
@@ -276,4 +279,4 @@ role: 'slider'
     onChangeComplete: _react2.default.PropTypes.func,
-    breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
-      breakpoint: _react2.default.PropTypes.number.isRequired,
+    range: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
+      value: _react2.default.PropTypes.number.isRequired,
       step: _react2.default.PropTypes.number
@@ -285,3 +288,3 @@ }).isRequired).isRequired
     defaultValue: 0,
-    breakpoints: [{ breakpoint: 0, step: 1 }, { breakpoint: 100 }],
+    range: [{ value: 0, step: 1 }, { value: 100 }],
     children: function children(value) {
@@ -288,0 +291,0 @@ return _react2.default.createElement(

examples/js/index.js

@@ -6,8 +6,8 @@ import '../styles/styles.scss'
 
-const breakpoints = [
-  { breakpoint: 0, step: 1 }, // treated as min
-  { breakpoint: 10, step: 5 }, 
-  { breakpoint: 30, step: 10 },
-  { breakpoint: 100, step: 50 },
-  { breakpoint: 500 } // treated as max
+const range = [
+  { value: 0, step: 1 }, // treated as min
+  { value: 10, step: 5 }, 
+  { value: 30, step: 10 },
+  { value: 100, step: 50 },
+  { value: 500 } // treated as max
 ]
@@ -17,4 +17,4 @@
   <StepRangeSlider 
-    defaultValue={5}
-    breakpoints={breakpoints}
+    value={5}
+    range={range}
     onChange={value => console.log(value)}
@@ -21,0 +21,0 @@ />,

package.json

@@ -5,3 +5,3 @@ {
   "main": "dist/index.js",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "author": "Robert Gonzales",
@@ -8,0 +8,0 @@ "license": "MIT",

README.md

 react-step-range-slider
 =========
 
-Use this component like a range input. Supports dynamic steps with breakpoints. Fully responsive.
+Use this component like a range input. Supports dynamic steps. Fully responsive.
 
@@ -9,3 +9,3 @@
 
-![react-step-range-slider](https://cloud.githubusercontent.com/assets/7729885/17827653/c1311dd0-664e-11e6-9a36-fee276eeb188.gif)
+![react-step-range-slider](https://cloud.githubusercontent.com/assets/7729885/17833926/e06462f6-66f9-11e6-8e88-c3dba1ee591e.gif)
 
@@ -15,13 +15,13 @@ Usage:
 ```jsx
-const breakpoints = [
-  { breakpoint: 0, step: 1 }, // acts as min value
-  { breakpoint: 20, step: 5 }, 
-  { breakpoint: 50, step: 10 },
-  { breakpoint: 100, step: 50 },
-  { breakpoint: 500 } // acts as max value
+const range = [
+  { value: 0, step: 1 }, // acts as min value
+  { value: 20, step: 5 }, 
+  { value: 50, step: 10 },
+  { value: 100, step: 50 },
+  { value: 500 } // acts as max value
 ]
 
 <StepRangeSlider 
-  value={30} 
-  breakpoints={breakpoints} 
+  value={5} 
+  range={range} 
   onChange={value => console.log(value)}
@@ -34,7 +34,7 @@ />
 
-#### `breakpoints` : `array`
-Configures the step for each breakpoint as well as the min and max step/values. Required.
+#### `range` : `array`
+Configures min and max values as well as the step for each value breakpoint. Required.
 
 #### `value` : `number`
-Determines the position of the drag handle. Should be divisible by the step value at the appropriate breakpoint.
+Determines the position of the drag handle. Should be divisible by the step at the appropriate value breakpoint.
 
@@ -48,3 +48,3 @@ #### `defaultValue` : `number`
 #### `onChangeComplete` : `function`
-Callback called onDragEnd or onClick.
+Callback called on drag end or on click.
 
@@ -55,3 +55,3 @@ #### `disabled` : `bool`
 #### `children` : `any`
-Display whatever you want in the drag tooltip.
+Display whatever you want in the drag tooltip. Defaults to a tooltip.
 
@@ -62,5 +62,5 @@
 #### `stepDown()` : `number`
-Decrements the value of the slider control by a specified number.
+Decrements the step of the slider by the specified number.
 
 #### `stepUp()` : `number`
-Increments the value of the slider control by a specified number.
+Increments the step of the slider by the specified number.

src/slider-utils.js

 
 /* EXAMPLE
 
-const breakpoints = [
-  { breakpoint: 0, step: 1}, 
-  { breakpoint: 20, step: 5 }, 
-  { breakpoint: 100 }
+const range = [
+  { value: 0, step: 1}, 
+  { value: 20, step: 5 }, 
+  { value: 100 }
 ]
 
-const Breakpoints = configureBreakpoints(breakpoints)
+const Range = configureRange(range)
 
-Breakpoints.minStep // 0
-Breakpoints.maxStep // 36
-Breakpoints.getValueForStep(22) // 30
-Breakpoints.getStepForValue(30) // 22
+Range.minStep // 0
+Range.maxStep // 36
+Range.getValueForStep(22) // 30
+Range.getStepForValue(30) // 22
 
 */
 
-export function configureBreakpoints(breakpoints) {
-  // sort by ascending breakpoints.
-  const sorted = _.sortBy(breakpoints, b => b.breakpoint)
-  // calculates stepsSoFar on each breakpoint 
+export function configureRange(range) {
+  // sort by ascending value.
+  const sorted = _.sortBy(range, b => b.value)
+  // calculates stepsSoFar on each value breakpoint 
   // for easier value/step calulations later.
-  const _breakpoints = _.reduce(sorted, (result, curr, key) => {
+  const breakpoints = _.reduce(sorted, (result, curr, key) => {
     // to calculate stepsSoFar we must get the
@@ -32,3 +32,3 @@ // range of values from the previous breakpoint
       // breakpoint value.
-      curr.stepsSoFar = ((curr.breakpoint - prev.breakpoint) / prev.step) + prev.stepsSoFar
+      curr.stepsSoFar = ((curr.value - prev.value) / prev.step) + prev.stepsSoFar
     } else {
@@ -50,6 +50,6 @@ // the first breakpoint represents min value
   // min and max for easier calculations later
-  const minStep = _.first(_breakpoints).stepsSoFar
-  const maxStep = _.last(_breakpoints).stepsSoFar
-  const minValue = _.first(_breakpoints).breakpoint
-  const maxValue = _.last(_breakpoints).breakpoint
+  const minStep = _.first(breakpoints).stepsSoFar
+  const maxStep = _.last(breakpoints).stepsSoFar
+  const minValue = _.first(breakpoints).value
+  const maxValue = _.last(breakpoints).value
 
@@ -70,8 +70,8 @@ // return value within min and max value range
     // find the nearest breakpoint behind current step
-    const nearest = _.reduce(_breakpoints, (prev, curr) => (
+    const nearest = _.reduce(breakpoints, (prev, curr) => (
       curr.stepsSoFar < step && curr.stepsSoFar > prev.stepsSoFar ? curr : prev
-    ), _.first(_breakpoints))
+    ), _.first(breakpoints))
     // determine value past nearest breakpoint value
     const additionalValue = (step - nearest.stepsSoFar) * nearest.step
-    return nearest.breakpoint + additionalValue 
+    return nearest.value + additionalValue 
   }
@@ -82,7 +82,7 @@
     // find the nearest breakpoint behind current value
-    const nearest = _.reduce(_breakpoints, (prev, curr) => (
-      curr.breakpoint < value && curr.breakpoint > prev.breakpoint ? curr : prev
-    ), _.first(_breakpoints))
+    const nearest = _.reduce(breakpoints, (prev, curr) => (
+      curr.value < value && curr.value > prev.value ? curr : prev
+    ), _.first(breakpoints))
     // determine number of steps past nearest breakpoint steps so far
-    const additionalSteps = (value - nearest.breakpoint) / nearest.step
+    const additionalSteps = (value - nearest.value) / nearest.step
     return nearest.stepsSoFar + additionalSteps
@@ -89,0 +89,0 @@ }

src/StepRangeSlider.js

@@ -5,3 +5,3 @@ import './StepRangeSlider.css'
 import ReactDOM from 'react-dom'
-import { configureBreakpoints , getEmptyImage } from './slider-utils'
+import { configureRange , getEmptyImage } from './slider-utils'
 
@@ -24,6 +24,7 @@
   setInitialState(props) {
-    const breakpoints = configureBreakpoints(props.breakpoints)
-    const value = breakpoints.ensureValue(props.value || props.defaultValue)
-    const currentStep = breakpoints.getStepForValue(value)
-    this.setState({ value, breakpoints, currentStep })
+    const range = configureRange(props.range)
+    console.log(range)
+    const value = range.ensureValue(props.value || props.defaultValue)
+    const currentStep = range.getStepForValue(value)
+    this.setState({ value, range, currentStep })
   }
@@ -41,3 +42,3 @@
   componentWillReceiveProps(nextProps) {
-    if (nextProps.breakpoints && nextProps.breakpoints !== this.props.breakpoints) {
+    if (nextProps.range && nextProps.range !== this.props.range) {
       this.setInitialState(nextProps)
@@ -48,6 +49,6 @@ }
   stepUp(amount) {
-    const { breakpoints, currentStep } = this.state
+    const { range, currentStep } = this.state
     const nextStep = currentStep + amount
-    if (nextStep <= breakpoints.maxStep) {
-      const nextValue = breakpoints.getValueForStep(nextStep)
+    if (nextStep <= range.maxStep) {
+      const nextValue = range.getValueForStep(nextStep)
       this.setState({ currentStep: nextStep, value: nextValue })
@@ -58,6 +59,6 @@ }
   stepDown(amount) {
-    const { breakpoints, currentStep } = this.state
+    const { range, currentStep } = this.state
     const nextStep = currentStep - amount
-    if (nextStep >= breakpoints.minStep) {
-      const nextValue = breakpoints.getValueForStep(nextStep)
+    if (nextStep >= range.minStep) {
+      const nextValue = range.getValueForStep(nextStep)
       this.setState({ currentStep: nextStep, value: nextValue })
@@ -79,3 +80,3 @@ }
     const { disabled } = this.props
-    const { breakpoints } = this.state
+    const { range } = this.state
     const { width, left, right } = this.sliderRect
@@ -94,7 +95,9 @@
     const positionPercent = position / width
-    const currentStep = Math.round(position / width * breakpoints.maxStep)
-    const value = breakpoints.getValueForStep(currentStep)
+    const currentStep = Math.round(position / width * range.maxStep)
+    const value = range.getValueForStep(currentStep)
     
-    this.setState({ value, currentStep })
-    this.handleChange(value)
+    if (value !== this.state.value || currentStep !== this.state.currentStep) {
+      this.setState({ value, currentStep })
+      this.handleChange(value)
+    }
   }
@@ -118,4 +121,4 @@
     const { id, name, disabled, tooltip, children } = this.props
-    const { value, breakpoints, currentStep } = this.state
-    const offset = currentStep / breakpoints.maxStep * 100
+    const { value, range, currentStep } = this.state
+    const offset = currentStep / range.maxStep * 100
     const offsetStyle = { left: `${offset}%` }
@@ -134,4 +137,4 @@
             className="StepRangeSlider__thumb"
-            aria-valuemin={breakpoints.minValue}
-            aria-valuemax={breakpoints.maxValue}
+            aria-valuemin={range.minValue}
+            aria-valuemax={range.maxValue}
             aria-valuenow={value} 
@@ -159,5 +162,5 @@ role="slider"
   onChangeComplete: React.PropTypes.func,
-  breakpoints: React.PropTypes.arrayOf(
+  range: React.PropTypes.arrayOf(
     React.PropTypes.shape({
-      breakpoint: React.PropTypes.number.isRequired,
+      value: React.PropTypes.number.isRequired,
       step: React.PropTypes.number,
@@ -170,3 +173,3 @@ }).isRequired
   defaultValue: 0,
-  breakpoints: [{ breakpoint: 0, step: 1}, { breakpoint: 100 }],
+  range: [{ value: 0, step: 1}, { value: 100 }],
   children: value => (
@@ -173,0 +176,0 @@ <div className="StepRangeSlider__tooltip">{value}</div>

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

943

increased by0.64%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

34957

decreased by-1.45%

No dependency changes