rheostat - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

CHANGELOG.md

@@ -8,8 +8,20 @@ # Change Log
 
+## [2.1.2] - 2018-01-02
+
+### Fixes
+
+- Slider: avoid key={0} (#106)
+- Use math.round instead of math.floor for getting value with geometric algorithm (#131)
+
+### Refactors
+
+- Slider: use function refs instead of string refs (#112)
+- Memoize pits styles (#123, #130)
+
 ## [2.1.1] - 2017-07-11
 
-### Changed
+### Fixed
 
-- [Fix] use prop-types + create-react-class packages (#73)
-- [Fix] ensure `Object.assign` is transformed to `object.assign`
+- use prop-types + create-react-class packages (#73)
+- ensure `Object.assign` is transformed to `object.assign`
 
@@ -25,2 +37,3 @@ ## [2.1.0] - 2016-11-10
 ### Fixed
+
 - Eliminate slidingIndex of -1 (#33)
@@ -27,0 +40,0 @@

lib/algorithms/geometric.js

@@ -14,3 +14,3 @@ Object.defineProperty(exports, "__esModule", {
     function getValue(x, min, max) {
-      return Math.floor(Math.pow(x / 100, 2) * (max - min)) + min;
+      return Math.round(Math.pow(x / 100, 2) * (max - min)) + min;
     }
@@ -17,0 +17,0 @@

lib/Slider.js

@@ -5,2 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -28,3 +30,3 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -90,3 +92,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   // any children you pass in
-  children: _propTypes2['default'].any,
+  children: _propTypes2['default'].node,
   // standard class name you'd like to apply to the root element
@@ -136,2 +138,3 @@ className: _propTypes2['default'].string,
   className: '',
+  children: null,
   disabled: false,
@@ -141,3 +144,11 @@ handle: Button,
   min: SliderConstants.PERCENT_EMPTY,
+  onClick: null,
+  onChange: null,
+  onKeyPress: null,
+  onSliderDragEnd: null,
+  onSliderDragMove: null,
+  onSliderDragStart: null,
+  onValuesUpdated: null,
   orientation: 'horizontal',
+  pitComponent: null,
   pitPoints: [],
@@ -159,2 +170,3 @@ progressBar: 'div',
     var _this2$props = _this2.props,
+        algorithm = _this2$props.algorithm,
         max = _this2$props.max,
@@ -167,6 +179,6 @@ min = _this2$props.min,
       handlePos: values.map(function (value) {
-        return _this2.props.algorithm.getPosition(value, min, max);
+        return algorithm.getPosition(value, min, max);
       }),
       handleDimensions: 0,
-      mousePos: null,
+      // mousePos: null,
       sliderBox: {},
@@ -202,2 +214,6 @@ slidingIndex: null,
     _this2.updateNewValues = _this2.updateNewValues.bind(_this2);
+    _this2.setRef = _this2.setRef.bind(_this2);
+    _this2.invalidatePitStyleCache = _this2.invalidatePitStyleCache.bind(_this2);
+
+    _this2.pitStyleCache = {};
     return _this2;
@@ -210,12 +226,29 @@ }
       function componentWillReceiveProps(nextProps) {
-        var minMaxChanged = nextProps.min !== this.props.min || nextProps.max !== this.props.max;
+        var _props = this.props,
+            className = _props.className,
+            disabled = _props.disabled,
+            min = _props.min,
+            max = _props.max,
+            orientation = _props.orientation,
+            pitPoints = _props.pitPoints,
+            algorithm = _props.algorithm;
+        var _state = this.state,
+            values = _state.values,
+            slidingIndex = _state.slidingIndex;
 
-        var valuesChanged = this.state.values.length !== nextProps.values.length || this.state.values.some(function (value, idx) {
+
+        var minMaxChanged = nextProps.min !== min || nextProps.max !== max;
+
+        var valuesChanged = values.length !== nextProps.values.length || values.some(function (value, idx) {
           return nextProps.values[idx] !== value;
         });
 
-        var orientationChanged = nextProps.className !== this.props.className || nextProps.orientation !== this.props.orientation;
+        var orientationChanged = nextProps.className !== className || nextProps.orientation !== orientation;
 
-        var willBeDisabled = nextProps.disabled && !this.props.disabled;
+        var algorithmChanged = nextProps.algorithm !== algorithm;
 
+        var pitPointsChanged = nextProps.pitPoints !== pitPoints;
+
+        var willBeDisabled = nextProps.disabled && !disabled;
+
         if (orientationChanged) {
@@ -229,3 +262,7 @@ this.setState({
 
-        if (willBeDisabled && this.state.slidingIndex !== null) {
+        if (minMaxChanged || pitPointsChanged || orientationChanged || algorithmChanged) {
+          this.invalidatePitStyleCache();
+        }
+
+        if (willBeDisabled && slidingIndex !== null) {
           this.endSlide();
@@ -241,7 +278,9 @@ }
       function getPublicState() {
-        return {
-          max: this.props.max,
-          min: this.props.min,
-          values: this.state.values
-        };
+        var _props2 = this.props,
+            min = _props2.min,
+            max = _props2.max;
+        var values = this.state.values;
+
+
+        return { max: max, min: min, values: values };
       }
@@ -258,3 +297,3 @@
       function getSliderBoundingBox() {
-        var rheostat = this.refs.rheostat;
+        var rheostat = this.rheostat;
 
@@ -278,2 +317,3 @@ var node = rheostat.getDOMNode ? rheostat.getDOMNode() : rheostat;
       function getProgressStyle(idx) {
+        var orientation = this.props.orientation;
         var handlePos = this.state.handlePos;
@@ -285,3 +325,3 @@
         if (idx === 0) {
-          return this.props.orientation === 'vertical' ? { height: String(value) + '%', top: 0 } : { left: 0, width: String(value) + '%' };
+          return orientation === 'vertical' ? { height: String(value) + '%', top: 0 } : { left: 0, width: String(value) + '%' };
         }
@@ -292,3 +332,3 @@
 
-        return this.props.orientation === 'vertical' ? { height: diffValue + '%', top: String(prevValue) + '%' } : { left: String(prevValue) + '%', width: diffValue + '%' };
+        return orientation === 'vertical' ? { height: diffValue + '%', top: String(prevValue) + '%' } : { left: String(prevValue) + '%', width: diffValue + '%' };
       }
@@ -302,3 +342,6 @@
       function getMinValue(idx) {
-        return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
+        var min = this.props.min;
+        var values = this.state.values;
+
+        return values[idx - 1] ? Math.max(min, values[idx - 1]) : min;
       }
@@ -312,3 +355,6 @@
       function getMaxValue(idx) {
-        return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
+        var max = this.props.max;
+        var values = this.state.values;
+
+        return values[idx + 1] ? Math.min(max, values[idx + 1]) : max;
       }
@@ -338,5 +384,7 @@
       function getClosestSnapPoint(value) {
-        if (!this.props.snapPoints.length) return value;
+        var snapPoints = this.props.snapPoints;
 
-        return this.props.snapPoints.reduce(function (snapTo, snap) {
+        if (!snapPoints.length) return value;
+
+        return snapPoints.reduce(function (snapTo, snap) {
           return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
@@ -352,9 +400,10 @@ });
       function getSnapPosition(positionPercent) {
-        if (!this.props.snap) return positionPercent;
+        var _props3 = this.props,
+            algorithm = _props3.algorithm,
+            max = _props3.max,
+            min = _props3.min,
+            snap = _props3.snap;
 
-        var _props = this.props,
-            algorithm = _props.algorithm,
-            max = _props.max,
-            min = _props.min;
 
+        if (!snap) return positionPercent;
 
@@ -376,14 +425,13 @@ var value = algorithm.getValue(positionPercent, min, max);
 
-        var _state = this.state,
-            handlePos = _state.handlePos,
-            values = _state.values;
-        var _props2 = this.props,
-            algorithm = _props2.algorithm,
-            max = _props2.max,
-            min = _props2.min,
-            snapPoints = _props2.snapPoints;
+        var _state2 = this.state,
+            handlePos = _state2.handlePos,
+            values = _state2.values;
+        var _props4 = this.props,
+            algorithm = _props4.algorithm,
+            max = _props4.max,
+            min = _props4.min,
+            snapPoints = _props4.snapPoints,
+            shouldSnap = _props4.snap;
 
 
-        var shouldSnap = this.props.snap;
-
         var proposedValue = values[idx];
@@ -438,3 +486,5 @@ var proposedPercentage = handlePos[idx];
           if (shouldSnap) {
-            proposedValue = snapPoints[0];
+            var _snapPoints = _slicedToArray(snapPoints, 1);
+
+            proposedValue = _snapPoints[0];
           }
@@ -460,8 +510,7 @@ } else if (keyCode === SliderConstants.KEYS.END) {
       function getNextState(idx, proposedPosition) {
-        var _this3 = this;
-
         var handlePos = this.state.handlePos;
-        var _props3 = this.props,
-            max = _props3.max,
-            min = _props3.min;
+        var _props5 = this.props,
+            max = _props5.max,
+            min = _props5.min,
+            algorithm = _props5.algorithm;
 
@@ -478,3 +527,3 @@
           values: nextHandlePos.map(function (pos) {
-            return _this3.props.algorithm.getValue(pos, min, max);
+            return algorithm.getValue(pos, min, max);
           })
@@ -508,3 +557,3 @@ };
     value: function () {
-      function setStartSlide(ev, x, y) {
+      function setStartSlide(ev /* , x, y */) {
         var sliderBox = this.getSliderBoundingBox();
@@ -514,3 +563,3 @@
           handleDimensions: this.getHandleDimensions(ev, sliderBox),
-          mousePos: { x: x, y: y },
+          // mousePos: { x, y },
           sliderBox: sliderBox,
@@ -523,3 +572,12 @@ slidingIndex: getHandleFor(ev)
     }()
+  }, {
+    key: 'setRef',
+    value: function () {
+      function setRef(ref) {
+        this.rheostat = ref;
+      }
 
+      return setRef;
+    }()
+
     // istanbul ignore next
@@ -553,2 +611,5 @@
       function startTouchSlide(ev) {
+        var onSliderDragStart = this.props.onSliderDragStart;
+
+
         if (ev.changedTouches.length > 1) return;
@@ -563,3 +624,3 @@
 
-        if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+        if (onSliderDragStart) onSliderDragStart();
 
@@ -578,3 +639,5 @@ killEvent(ev);
       function handleMouseSlide(ev) {
-        if (this.state.slidingIndex === null) return;
+        var slidingIndex = this.state.slidingIndex;
+
+        if (slidingIndex === null) return;
         this.handleSlide(ev.clientX, ev.clientY);
@@ -593,4 +656,6 @@ killEvent(ev);
       function handleTouchSlide(ev) {
-        if (this.state.slidingIndex === null) return;
+        var slidingIndex = this.state.slidingIndex;
 
+        if (slidingIndex === null) return;
+
         if (ev.changedTouches.length > 1) {
@@ -616,8 +681,11 @@ this.endSlide();
       function handleSlide(x, y) {
-        var _state2 = this.state,
-            idx = _state2.slidingIndex,
-            sliderBox = _state2.sliderBox;
+        var _props6 = this.props,
+            orientation = _props6.orientation,
+            onSliderDragMove = _props6.onSliderDragMove;
+        var _state3 = this.state,
+            idx = _state3.slidingIndex,
+            sliderBox = _state3.sliderBox;
 
 
-        var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * SliderConstants.PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * SliderConstants.PERCENT_FULL;
+        var positionPercent = orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * SliderConstants.PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * SliderConstants.PERCENT_FULL;
 
@@ -628,4 +696,4 @@ this.slideTo(idx, positionPercent);
           // update mouse positions
-          this.setState({ x: x, y: y });
-          if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+          // this.setState({ mousePos: { x, y } });
+          if (onSliderDragMove) onSliderDragMove();
         }
@@ -643,6 +711,12 @@ }
       function endSlide() {
-        var _this4 = this;
+        var _this3 = this;
 
-        var idx = this.state.slidingIndex;
+        var _props7 = this.props,
+            onSliderDragEnd = _props7.onSliderDragEnd,
+            snap = _props7.snap;
+        var _state4 = this.state,
+            slidingIndex = _state4.slidingIndex,
+            handlePos = _state4.handlePos;
 
+
         this.setState({ slidingIndex: null });
@@ -660,7 +734,7 @@
 
-        if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
-        if (this.props.snap) {
-          var positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
-          this.slideTo(idx, positionPercent, function () {
-            return _this4.fireChangeEvent();
+        if (onSliderDragEnd) onSliderDragEnd();
+        if (snap) {
+          var positionPercent = this.getSnapPosition(handlePos[slidingIndex]);
+          this.slideTo(slidingIndex, positionPercent, function () {
+            return _this3.fireChangeEvent();
           });
@@ -681,3 +755,3 @@ } else {
       function handleClick(ev) {
-        var _this5 = this;
+        var _this4 = this;
 
@@ -688,7 +762,12 @@ if (ev.target.getAttribute('data-handle-key')) {
 
+        var _props8 = this.props,
+            orientation = _props8.orientation,
+            onClick = _props8.onClick;
+
         // Calculate the position of the slider on the page so we can determine
         // the position where you click in relativity.
+
         var sliderBox = this.getSliderBoundingBox();
 
-        var positionDecimal = this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+        var positionDecimal = orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
 
@@ -703,6 +782,6 @@ var positionPercent = positionDecimal * SliderConstants.PERCENT_FULL;
         this.slideTo(handleId, validPositionPercent, function () {
-          return _this5.fireChangeEvent();
+          return _this4.fireChangeEvent();
         });
 
-        if (this.props.onClick) this.props.onClick();
+        if (onClick) onClick();
       }
@@ -719,3 +798,3 @@
       function handleKeydown(ev) {
-        var _this6 = this;
+        var _this5 = this;
 
@@ -735,5 +814,7 @@ var idx = getHandleFor(ev);
           this.slideTo(idx, proposedPercentage, function () {
-            return _this6.fireChangeEvent();
+            return _this5.fireChangeEvent();
           });
-          if (this.props.onKeyPress) this.props.onKeyPress();
+          var onKeyPress = this.props.onKeyPress;
+
+          if (onKeyPress) onKeyPress();
         }
@@ -754,5 +835,5 @@
       function validatePosition(idx, proposedPosition) {
-        var _state3 = this.state,
-            handlePos = _state3.handlePos,
-            handleDimensions = _state3.handleDimensions;
+        var _state5 = this.state,
+            handlePos = _state5.handlePos,
+            handleDimensions = _state5.handleDimensions;
 
@@ -795,5 +876,5 @@
       function canMove(idx, proposedPosition) {
-        var _state4 = this.state,
-            handlePos = _state4.handlePos,
-            handleDimensions = _state4.handleDimensions;
+        var _state6 = this.state,
+            handlePos = _state6.handlePos,
+            handleDimensions = _state6.handleDimensions;
 
@@ -824,3 +905,5 @@
       function fireChangeEvent() {
-        if (this.props.onChange) this.props.onChange(this.getPublicState());
+        var onChange = this.props.onChange;
+
+        if (onChange) onChange(this.getPublicState());
       }
@@ -837,3 +920,3 @@
       function slideTo(idx, proposedPosition, onAfterSet) {
-        var _this7 = this;
+        var _this6 = this;
 
@@ -843,3 +926,5 @@ var nextState = this.getNextState(idx, proposedPosition);
         this.setState(nextState, function () {
-          if (_this7.props.onValuesUpdated) _this7.props.onValuesUpdated(_this7.getPublicState());
+          var onValuesUpdated = _this6.props.onValuesUpdated;
+
+          if (onValuesUpdated) onValuesUpdated(_this6.getPublicState());
           if (onAfterSet) onAfterSet();
@@ -858,6 +943,9 @@ });
       function updateNewValues(nextProps) {
-        var _this8 = this;
+        var _this7 = this;
 
+        var slidingIndex = this.state.slidingIndex;
+
         // Don't update while the slider is sliding
-        if (this.state.slidingIndex !== null) {
+
+        if (slidingIndex !== null) {
           return;
@@ -869,2 +957,3 @@ }
             values = nextProps.values;
+        var algorithm = this.props.algorithm;
 
@@ -876,7 +965,7 @@
           handlePos: nextValues.map(function (value) {
-            return _this8.props.algorithm.getPosition(value, min, max);
+            return algorithm.getPosition(value, min, max);
           }),
           values: nextValues
         }, function () {
-          return _this8.fireChangeEvent();
+          return _this7.fireChangeEvent();
         });
@@ -888,27 +977,40 @@ }
   }, {
+    key: 'invalidatePitStyleCache',
+    value: function () {
+      function invalidatePitStyleCache() {
+        this.pitStyleCache = {};
+      }
+
+      return invalidatePitStyleCache;
+    }()
+  }, {
     key: 'render',
     value: function () {
       function render() {
-        var _this9 = this;
+        var _this8 = this;
 
-        var _props4 = this.props,
-            algorithm = _props4.algorithm,
-            children = _props4.children,
-            disabled = _props4.disabled,
-            Handle = _props4.handle,
-            max = _props4.max,
-            min = _props4.min,
-            orientation = _props4.orientation,
-            PitComponent = _props4.pitComponent,
-            pitPoints = _props4.pitPoints,
-            ProgressBar = _props4.progressBar;
+        var _props9 = this.props,
+            algorithm = _props9.algorithm,
+            children = _props9.children,
+            disabled = _props9.disabled,
+            Handle = _props9.handle,
+            max = _props9.max,
+            min = _props9.min,
+            orientation = _props9.orientation,
+            PitComponent = _props9.pitComponent,
+            pitPoints = _props9.pitPoints,
+            ProgressBar = _props9.progressBar;
+        var _state7 = this.state,
+            className = _state7.className,
+            handlePos = _state7.handlePos,
+            values = _state7.values;
 
 
         return (
-          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
           _react2['default'].createElement(
             'div',
             {
-              className: this.state.className,
-              ref: 'rheostat',
+              className: className,
+              ref: this.setRef,
               onClick: !disabled && this.handleClick,
@@ -918,17 +1020,17 @@ style: { position: 'relative' }
             _react2['default'].createElement('div', { className: 'rheostat-background' }),
-            this.state.handlePos.map(function (pos, idx) {
+            handlePos.map(function (pos, idx) {
               var handleStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
 
               return _react2['default'].createElement(Handle, {
-                'aria-valuemax': _this9.getMaxValue(idx),
-                'aria-valuemin': _this9.getMinValue(idx),
-                'aria-valuenow': _this9.state.values[idx],
+                'aria-valuemax': _this8.getMaxValue(idx),
+                'aria-valuemin': _this8.getMinValue(idx),
+                'aria-valuenow': values[idx],
                 'aria-disabled': disabled,
                 'data-handle-key': idx,
                 className: 'rheostat-handle',
-                key: idx,
-                onClick: _this9.killEvent,
-                onKeyDown: !disabled && _this9.handleKeydown,
-                onMouseDown: !disabled && _this9.startMouseSlide,
-                onTouchStart: !disabled && _this9.startTouchSlide,
+                key: 'handle-' + String(idx),
+                onClick: _this8.killEvent,
+                onKeyDown: !disabled && _this8.handleKeydown,
+                onMouseDown: !disabled && _this8.startMouseSlide,
+                onTouchStart: !disabled && _this8.startTouchSlide,
                 role: 'slider',
@@ -939,3 +1041,3 @@ style: handleStyle,
             }),
-            this.state.handlePos.map(function (node, idx, arr) {
+            handlePos.map(function (node, idx, arr) {
               if (idx === 0 && arr.length > 1) {
@@ -947,13 +1049,18 @@ return null;
                 className: 'rheostat-progress',
-                key: idx,
-                style: _this9.getProgressStyle(idx)
+                key: 'progress-bar-' + String(idx),
+                style: _this8.getProgressStyle(idx)
               });
             }),
             PitComponent && pitPoints.map(function (n) {
-              var pos = algorithm.getPosition(n, min, max);
-              var pitStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
+              var pitStyle = _this8.pitStyleCache[n];
 
+              if (!pitStyle) {
+                var pos = algorithm.getPosition(n, min, max);
+                pitStyle = orientation === 'vertical' ? { top: String(pos) + '%', position: 'absolute' } : { left: String(pos) + '%', position: 'absolute' };
+                _this8.pitStyleCache[n] = pitStyle;
+              }
+
               return _react2['default'].createElement(
                 PitComponent,
-                { key: n, style: pitStyle },
+                { key: 'pit-' + String(n), style: pitStyle },
                 n
@@ -960,0 +1067,0 @@ );

package.json

 {
   "name": "rheostat",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Rheostat is a www, mobile, and accessible slider component built with React",
-  "main": "lib/Slider.js",
-  "jsnext:main": "src/Slider.jsx",
+  "main": "lib/Slider",
+  "jsnext:main": "src/Slider",
   "scripts": {
@@ -16,11 +16,8 @@ "build": "npm run clean && babel src -d lib",
     "tests-only": "npm run build && npm run test:all",
+    "pretest:all": "npm run react",
     "test:all": "npm run test:node && npm run test:dom",
-    "test:node": "npm run test:mocha",
-    "test:dom": "WITH_DOM=1 npm run test:mocha -- --require './test/.dom.js'",
-    "test:mocha": "npm run mocha 'test/**/*-test.*'",
-    "mocha": "mocha -R tap --compilers js:babel-register",
-    "react:clean": "rimraf node_modules/react node_modules/react-dom node_modules/react-addons-test-utils",
-    "react:13": "npm run react:clean && npm i react@0.13",
-    "react:14": "npm run react:clean && npm i react@0.14 react-dom@0.14 react-addons-test-utils@0.14",
-    "react:15": "npm run react:clean && npm i react@15 react-dom@15 react-addons-test-utils@15"
+    "test:node": "npm run jest -- --testEnvironment=node",
+    "test:dom": "WITH_DOM=1 npm run jest -- --testEnvironment=jsdom",
+    "jest": "jest",
+    "react": "enzyme-adapter-react-install 15"
   },
@@ -35,28 +32,29 @@ "repository": {
     "@kadira/storybook": "^2.35.3",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
+    "ajv": "^5.5.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^21.2.0",
     "babel-plugin-transform-replace-object-assign": "^0.2.1",
     "babel-preset-airbnb": "^2.4.0",
-    "babel-register": "^6.24.1",
-    "casual": "^1.5.14",
-    "chai": "^4.0.2",
-    "chai-enzyme": "^0.8.0",
-    "create-react-class": "^15.6.0",
-    "enzyme": "^2.9.1",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.2",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.1.0",
+    "babel-register": "^6.26.0",
+    "casual": "^1.5.19",
+    "chai": "^4.1.2",
+    "chai-enzyme": "^1.0.0-beta.0",
+    "create-react-class": "^15.6.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-helper": "^1.2.2",
+    "eslint": "^4.14.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.5.1",
     "has": "^1.0.1",
-    "jsdom": "^9.12.0",
-    "mocha": "^3.4.2",
-    "nyc": "^11.0.3",
+    "jest": "^21.2.1",
+    "nyc": "^11.4.1",
     "raw-loader": "^0.5.1",
-    "react": "^15.6.1",
-    "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
-    "rimraf": "^2.6.1",
-    "sinon": "^2.3.7",
+    "react": "^15.6.2",
+    "react-addons-pure-render-mixin": "^15.6.2",
+    "react-dom": "^15.6.2",
+    "rimraf": "^2.6.2",
+    "sinon": "^4.1.3",
     "style-loader": "^0.17.0"
@@ -68,5 +66,21 @@ },
   "dependencies": {
-    "object.assign": "^4.0.4",
-    "prop-types": "^15.5.10"
+    "object.assign": "^4.1.0",
+    "prop-types": "^15.6.0"
+  },
+  "jest": {
+    "testMatch": [
+      "<rootDir>/test/*-test.*"
+    ],
+    "setupFiles": [
+      "<rootDir>/test/_setup.js"
+    ]
+  },
+  "greenkeeper": {
+    "ignore": [
+      "jest",
+      "babel-jest",
+      "react",
+      "react-dom"
+    ]
   }
 }

src/algorithms/geometric.js

@@ -7,4 +7,4 @@ export default {
   getValue(x, min, max) {
-    return (Math.floor(((x / 100) ** 2) * (max - min)) + min);
+    return (Math.round(((x / 100) ** 2) * (max - min)) + min);
   },
 };

src/Slider.jsx

@@ -45,3 +45,3 @@ /* globals document */
   // any children you pass in
-  children: PropTypes.any,
+  children: PropTypes.node,
   // standard class name you'd like to apply to the root element
@@ -91,2 +91,3 @@ className: PropTypes.string,
   className: '',
+  children: null,
   disabled: false,
@@ -96,3 +97,11 @@ handle: Button,
   min: SliderConstants.PERCENT_EMPTY,
+  onClick: null,
+  onChange: null,
+  onKeyPress: null,
+  onSliderDragEnd: null,
+  onSliderDragMove: null,
+  onSliderDragStart: null,
+  onValuesUpdated: null,
   orientation: 'horizontal',
+  pitComponent: null,
   pitPoints: [],
@@ -111,8 +120,13 @@ progressBar: 'div',
 
-    const { max, min, values } = this.props;
+    const {
+      algorithm,
+      max,
+      min,
+      values,
+    } = this.props;
     this.state = {
       className: getClassName(this.props),
-      handlePos: values.map(value => this.props.algorithm.getPosition(value, min, max)),
+      handlePos: values.map(value => algorithm.getPosition(value, min, max)),
       handleDimensions: 0,
-      mousePos: null,
+      // mousePos: null,
       sliderBox: {},
@@ -148,21 +162,41 @@ slidingIndex: null,
     this.updateNewValues = this.updateNewValues.bind(this);
+    this.setRef = this.setRef.bind(this);
+    this.invalidatePitStyleCache = this.invalidatePitStyleCache.bind(this);
+
+    this.pitStyleCache = {};
   }
 
   componentWillReceiveProps(nextProps) {
-    const minMaxChanged = (
-      nextProps.min !== this.props.min || nextProps.max !== this.props.max
-    );
+    const {
+      className,
+      disabled,
+      min,
+      max,
+      orientation,
+      pitPoints,
+      algorithm,
+    } = this.props;
+    const {
+      values,
+      slidingIndex,
+    } = this.state;
 
+    const minMaxChanged = (nextProps.min !== min || nextProps.max !== max);
+
     const valuesChanged = (
-      this.state.values.length !== nextProps.values.length ||
-      this.state.values.some((value, idx) => nextProps.values[idx] !== value)
+      values.length !== nextProps.values.length ||
+      values.some((value, idx) => nextProps.values[idx] !== value)
     );
 
     const orientationChanged = (
-      nextProps.className !== this.props.className ||
-      nextProps.orientation !== this.props.orientation
+      nextProps.className !== className ||
+      nextProps.orientation !== orientation
     );
 
-    const willBeDisabled = nextProps.disabled && !this.props.disabled;
+    const algorithmChanged = nextProps.algorithm !== algorithm;
 
+    const pitPointsChanged = nextProps.pitPoints !== pitPoints;
+
+    const willBeDisabled = nextProps.disabled && !disabled;
+
     if (orientationChanged) {
@@ -176,3 +210,7 @@ this.setState({
 
-    if (willBeDisabled && this.state.slidingIndex !== null) {
+    if (minMaxChanged || pitPointsChanged || orientationChanged || algorithmChanged) {
+      this.invalidatePitStyleCache();
+    }
+
+    if (willBeDisabled && slidingIndex !== null) {
       this.endSlide();
@@ -183,7 +221,6 @@ }
   getPublicState() {
-    return {
-      max: this.props.max,
-      min: this.props.min,
-      values: this.state.values,
-    };
+    const { min, max } = this.props;
+    const { values } = this.state;
+
+    return { max, min, values };
   }
@@ -193,3 +230,3 @@
   getSliderBoundingBox() {
-    const { rheostat } = this.refs;
+    const { rheostat } = this;
     const node = rheostat.getDOMNode ? rheostat.getDOMNode() : rheostat;
@@ -207,2 +244,3 @@ const rect = node.getBoundingClientRect();
   getProgressStyle(idx) {
+    const { orientation } = this.props;
     const { handlePos } = this.state;
@@ -213,3 +251,3 @@
     if (idx === 0) {
-      return this.props.orientation === 'vertical'
+      return orientation === 'vertical'
         ? { height: `${value}%`, top: 0 }
@@ -222,3 +260,3 @@ : { left: 0, width: `${value}%` };
 
-    return this.props.orientation === 'vertical'
+    return orientation === 'vertical'
       ? { height: `${diffValue}%`, top: `${prevValue}%` }
@@ -229,11 +267,11 @@ : { left: `${prevValue}%`, width: `${diffValue}%` };
   getMinValue(idx) {
-    return this.state.values[idx - 1]
-      ? Math.max(this.props.min, this.state.values[idx - 1])
-      : this.props.min;
+    const { min } = this.props;
+    const { values } = this.state;
+    return values[idx - 1] ? Math.max(min, values[idx - 1]) : min;
   }
 
   getMaxValue(idx) {
-    return this.state.values[idx + 1]
-      ? Math.min(this.props.max, this.state.values[idx + 1])
-      : this.props.max;
+    const { max } = this.props;
+    const { values } = this.state;
+    return values[idx + 1] ? Math.min(max, values[idx + 1]) : max;
   }
@@ -253,5 +291,6 @@
   getClosestSnapPoint(value) {
-    if (!this.props.snapPoints.length) return value;
+    const { snapPoints } = this.props;
+    if (!snapPoints.length) return value;
 
-    return this.props.snapPoints.reduce((snapTo, snap) => (
+    return snapPoints.reduce((snapTo, snap) => (
       Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap
@@ -262,5 +301,10 @@ ));
   getSnapPosition(positionPercent) {
-    if (!this.props.snap) return positionPercent;
+    const {
+      algorithm,
+      max,
+      min,
+      snap,
+    } = this.props;
 
-    const { algorithm, max, min } = this.props;
+    if (!snap) return positionPercent;
 
@@ -276,6 +320,10 @@ const value = algorithm.getValue(positionPercent, min, max);
     const { handlePos, values } = this.state;
-    const { algorithm, max, min, snapPoints } = this.props;
+    const {
+      algorithm,
+      max,
+      min,
+      snapPoints,
+      snap: shouldSnap,
+    } = this.props;
 
-    const shouldSnap = this.props.snap;
-
     let proposedValue = values[idx];
@@ -325,3 +373,3 @@ let proposedPercentage = handlePos[idx];
       if (shouldSnap) {
-        proposedValue = snapPoints[0];
+        ([proposedValue] = snapPoints);
       }
@@ -345,3 +393,3 @@ } else if (keyCode === SliderConstants.KEYS.END) {
     const { handlePos } = this.state;
-    const { max, min } = this.props;
+    const { max, min, algorithm } = this.props;
 
@@ -356,5 +404,3 @@ const actualPosition = this.validatePosition(idx, proposedPosition);
       handlePos: nextHandlePos,
-      values: nextHandlePos.map(pos => (
-        this.props.algorithm.getValue(pos, min, max)
-      )),
+      values: nextHandlePos.map(pos => algorithm.getValue(pos, min, max)),
     };
@@ -374,3 +420,3 @@ }
   // istanbul ignore next
-  setStartSlide(ev, x, y) {
+  setStartSlide(ev/* , x, y */) {
     const sliderBox = this.getSliderBoundingBox();
@@ -380,3 +426,3 @@
       handleDimensions: this.getHandleDimensions(ev, sliderBox),
-      mousePos: { x, y },
+      // mousePos: { x, y },
       sliderBox,
@@ -387,2 +433,6 @@ slidingIndex: getHandleFor(ev),
 
+  setRef(ref) {
+    this.rheostat = ref;
+  }
+
   // istanbul ignore next
@@ -405,2 +455,4 @@ startMouseSlide(ev) {
   startTouchSlide(ev) {
+    const { onSliderDragStart } = this.props;
+
     if (ev.changedTouches.length > 1) return;
@@ -415,3 +467,3 @@
 
-    if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+    if (onSliderDragStart) onSliderDragStart();
 
@@ -423,3 +475,4 @@ killEvent(ev);
   handleMouseSlide(ev) {
-    if (this.state.slidingIndex === null) return;
+    const { slidingIndex } = this.state;
+    if (slidingIndex === null) return;
     this.handleSlide(ev.clientX, ev.clientY);
@@ -431,3 +484,4 @@ killEvent(ev);
   handleTouchSlide(ev) {
-    if (this.state.slidingIndex === null) return;
+    const { slidingIndex } = this.state;
+    if (slidingIndex === null) return;
 
@@ -447,5 +501,6 @@ if (ev.changedTouches.length > 1) {
   handleSlide(x, y) {
+    const { orientation, onSliderDragMove } = this.props;
     const { slidingIndex: idx, sliderBox } = this.state;
 
-    const positionPercent = this.props.orientation === 'vertical'
+    const positionPercent = orientation === 'vertical'
       ? ((y - sliderBox.top) / sliderBox.height) * SliderConstants.PERCENT_FULL
@@ -458,4 +513,4 @@ : ((x - sliderBox.left) / sliderBox.width) * SliderConstants.PERCENT_FULL;
       // update mouse positions
-      this.setState({ x, y });
-      if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+      // this.setState({ mousePos: { x, y } });
+      if (onSliderDragMove) onSliderDragMove();
     }
@@ -466,3 +521,4 @@ }
   endSlide() {
-    const idx = this.state.slidingIndex;
+    const { onSliderDragEnd, snap } = this.props;
+    const { slidingIndex, handlePos } = this.state;
 
@@ -481,6 +537,6 @@ this.setState({ slidingIndex: null });
 
-    if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
-    if (this.props.snap) {
-      const positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
-      this.slideTo(idx, positionPercent, () => this.fireChangeEvent());
+    if (onSliderDragEnd) onSliderDragEnd();
+    if (snap) {
+      const positionPercent = this.getSnapPosition(handlePos[slidingIndex]);
+      this.slideTo(slidingIndex, positionPercent, () => this.fireChangeEvent());
     } else {
@@ -497,2 +553,4 @@ this.fireChangeEvent();
 
+    const { orientation, onClick } = this.props;
+
     // Calculate the position of the slider on the page so we can determine
@@ -502,3 +560,3 @@ // the position where you click in relativity.
 
-    const positionDecimal = this.props.orientation === 'vertical'
+    const positionDecimal = orientation === 'vertical'
       ? (ev.clientY - sliderBox.top) / sliderBox.height
@@ -516,3 +574,3 @@ : (ev.clientX - sliderBox.left) / sliderBox.width;
 
-    if (this.props.onClick) this.props.onClick();
+    if (onClick) onClick();
   }
@@ -535,3 +593,4 @@
       this.slideTo(idx, proposedPercentage, () => this.fireChangeEvent());
-      if (this.props.onKeyPress) this.props.onKeyPress();
+      const { onKeyPress } = this.props;
+      if (onKeyPress) onKeyPress();
     }
@@ -598,3 +657,4 @@
   fireChangeEvent() {
-    if (this.props.onChange) this.props.onChange(this.getPublicState());
+    const { onChange } = this.props;
+    if (onChange) onChange(this.getPublicState());
   }
@@ -607,3 +667,4 @@
     this.setState(nextState, () => {
-      if (this.props.onValuesUpdated) this.props.onValuesUpdated(this.getPublicState());
+      const { onValuesUpdated } = this.props;
+      if (onValuesUpdated) onValuesUpdated(this.getPublicState());
       if (onAfterSet) onAfterSet();
@@ -615,4 +676,6 @@ });
   updateNewValues(nextProps) {
+    const { slidingIndex } = this.state;
+
     // Don't update while the slider is sliding
-    if (this.state.slidingIndex !== null) {
+    if (slidingIndex !== null) {
       return;
@@ -622,2 +685,3 @@ }
     const { max, min, values } = nextProps;
+    const { algorithm } = this.props;
 
@@ -627,3 +691,3 @@ const nextValues = this.validateValues(values, nextProps);
     this.setState({
-      handlePos: nextValues.map(value => this.props.algorithm.getPosition(value, min, max)),
+      handlePos: nextValues.map(value => algorithm.getPosition(value, min, max)),
       values: nextValues,
@@ -633,2 +697,6 @@ }, () => this.fireChangeEvent());
 
+  invalidatePitStyleCache() {
+    this.pitStyleCache = {};
+  }
+
   render() {
@@ -647,8 +715,9 @@ const {
     } = this.props;
+    const { className, handlePos, values } = this.state;
 
     return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       <div
-        className={this.state.className}
-        ref="rheostat"
+        className={className}
+        ref={this.setRef}
         onClick={!disabled && this.handleClick}
@@ -658,3 +727,3 @@ style={{ position: 'relative' }}
         <div className="rheostat-background" />
-        {this.state.handlePos.map((pos, idx) => {
+        {handlePos.map((pos, idx) => {
           const handleStyle = orientation === 'vertical'
@@ -668,7 +737,7 @@ ? { top: `${pos}%`, position: 'absolute' }
               aria-valuemin={this.getMinValue(idx)}
-              aria-valuenow={this.state.values[idx]}
+              aria-valuenow={values[idx]}
               aria-disabled={disabled}
               data-handle-key={idx}
               className="rheostat-handle"
-              key={idx}
+              key={`handle-${idx}`}
               onClick={this.killEvent}
@@ -684,3 +753,3 @@ onKeyDown={!disabled && this.handleKeydown}
         })}
-        {this.state.handlePos.map((node, idx, arr) => {
+        {handlePos.map((node, idx, arr) => {
           if (idx === 0 && arr.length > 1) {
@@ -693,3 +762,3 @@ return null;
               className="rheostat-progress"
-              key={idx}
+              key={`progress-bar-${idx}`}
               style={this.getProgressStyle(idx)}
@@ -700,9 +769,14 @@ />
         {PitComponent && pitPoints.map((n) => {
-          const pos = algorithm.getPosition(n, min, max);
-          const pitStyle = orientation === 'vertical'
-            ? { top: `${pos}%`, position: 'absolute' }
-            : { left: `${pos}%`, position: 'absolute' };
+          let pitStyle = this.pitStyleCache[n];
 
+          if (!pitStyle) {
+            const pos = algorithm.getPosition(n, min, max);
+            pitStyle = orientation === 'vertical'
+              ? { top: `${pos}%`, position: 'absolute' }
+              : { left: `${pos}%`, position: 'absolute' };
+            this.pitStyleCache[n] = pitStyle;
+          }
+
           return (
-            <PitComponent key={n} style={pitStyle}>{n}</PitComponent>
+            <PitComponent key={`pit-${n}`} style={pitStyle}>{n}</PitComponent>
           );
@@ -709,0 +783,0 @@ })}

test/algorithms/geometric-test.js

@@ -15,2 +15,10 @@ import { assert } from 'chai';
 
+  it('should have inverse functions for getValue and getPosition', () => {
+    const min = 10;
+    const max = 1000;
+    const value = 358;
+    const positionFromValue = geometric.getPosition(value, min, max);
+    assert.equal(value, geometric.getValue(positionFromValue, min, max));
+  });
+
   it('should handle the minimum end of the range correctly', () => {
@@ -17,0 +25,0 @@ const min = casual.integer(0, 99);

test/slider-test.jsx

 import { shallow, mount } from 'enzyme';
 import React from 'react';
 import createReactClass from 'create-react-class';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
@@ -14,7 +15,3 @@ import sinon from 'sinon';
 
-function skipWithoutDom() {
-  if (WITH_DOM !== '1') {
-    this.skip();
-  }
-}
+const describeWithDOM = WITH_DOM === '1' ? describe : describe.skip;
 
@@ -31,5 +28,3 @@ function testKeys(slider, tests) {
 
-describe('<Slider />', () => {
-  beforeEach(skipWithoutDom);
-
+describeWithDOM('<Slider />', () => {
   describe('render', () => {
@@ -73,3 +68,3 @@ it('should render the slider with one handle by default', () => {
 
-      mount(
+      mount((
         <Slider
@@ -79,7 +74,20 @@ orientation="vertical"
           pitPoints={[10]}
-        />,
-      );
+        />
+      ));
 
       assert.isTrue(pitRender.calledOnce, 'one pit was rendered vertically');
     });
+
+    it('doesn\'t re-renders pits when value are changed', () => {
+      const pitRender = sinon.stub().returns(<div />);
+      const PitComponent = createReactClass({
+        mixins: [PureRenderMixin],
+        render: pitRender,
+      });
+
+      const slider = mount(<Slider pitComponent={PitComponent} pitPoints={[20]} />);
+      slider.setProps({ values: [10] });
+
+      assert.isTrue(pitRender.calledOnce, 'one pit was rendered only once');
+    });
   });
@@ -150,2 +158,60 @@
 
+    it('should re-render pits when min or max are changed', () => {
+      const pitRender = sinon.stub().returns(<div />);
+      const PitComponent = createReactClass({
+        mixins: [PureRenderMixin],
+        render: pitRender,
+      });
+
+      const slider = mount(<Slider pitComponent={PitComponent} pitPoints={[20]} />);
+      slider.setProps({ min: 30 });
+      slider.setProps({ max: 60 });
+
+      assert.isTrue(pitRender.calledThrice, 'one pit was rendered thrice');
+    });
+
+    it('should re-render pits when pitPoints are changed', () => {
+      const pitRender = sinon.stub().returns(<div />);
+      const PitComponent = createReactClass({
+        mixins: [PureRenderMixin],
+        render: pitRender,
+      });
+
+      const slider = mount(<Slider pitComponent={PitComponent} pitPoints={[20]} />);
+      slider.setProps({ pitPoints: [40] });
+
+      assert.isTrue(pitRender.calledTwice, 'one pit was rendered twice');
+    });
+
+    it('should re-render pits when orientation are changed', () => {
+      const pitRender = sinon.stub().returns(<div />);
+      const PitComponent = createReactClass({
+        mixins: [PureRenderMixin],
+        render: pitRender,
+      });
+
+      const slider = mount(<Slider pitComponent={PitComponent} pitPoints={[20]} />);
+      slider.setProps({ orientation: 'vertical' });
+
+      assert.isTrue(pitRender.calledTwice, 'one pit was rendered twice');
+    });
+
+    it('should re-render pits when algorithm are changed', () => {
+      const pitRender = sinon.stub().returns(<div />);
+      const PitComponent = createReactClass({
+        mixins: [PureRenderMixin],
+        render: pitRender,
+      });
+
+      const algorithm = {
+        getPosition: () => 20,
+        getValue: () => 30,
+      };
+
+      const slider = mount(<Slider pitComponent={PitComponent} pitPoints={[20]} />);
+      slider.setProps({ algorithm });
+
+      assert.isTrue(pitRender.calledTwice, 'one pit was rendered twice');
+    });
+
     it('should move the values if the min is changed to be larger', () => {
@@ -152,0 +218,0 @@ const slider = shallow(<Slider values={[50]} />);

No alert changes

Improved metrics

Number of package files

65

increased by54.76%

Lines of code

2406

increased by9.17%

Worsened metrics

Total package byte prevSize

95875

decreased by-62.39%

Dev dependency count

29

increased by3.57%

Dependency changes

• Updatedobject.assign@^4.1.0

• Updatedprop-types@^15.6.0