parafoil - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/parafoil.cjs.js

@@ -52,24 +52,2 @@ 'use strict';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 function _defineProperty(obj, key, value) {
@@ -108,16 +86,5 @@ if (key in obj) {
 
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype.__proto__ = superClass && superClass.prototype;
+  subClass.__proto__ = superClass;
 }
@@ -133,48 +100,2 @@
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(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"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
 var KEYS = {
@@ -202,15 +123,15 @@ DOWN: 40,
 }
-var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, KEYS.LEFT, function (v) {
+var stepMultiplier = (_stepMultiplier = {}, _stepMultiplier[KEYS.LEFT] = function (v) {
   return v * -1;
-}), _defineProperty(_stepMultiplier, KEYS.RIGHT, function (v) {
+}, _stepMultiplier[KEYS.RIGHT] = function (v) {
   return v * 1;
-}), _defineProperty(_stepMultiplier, KEYS.UP, function (v) {
+}, _stepMultiplier[KEYS.UP] = function (v) {
   return v * 1;
-}), _defineProperty(_stepMultiplier, KEYS.DOWN, function (v) {
+}, _stepMultiplier[KEYS.DOWN] = function (v) {
   return v * -1;
-}), _defineProperty(_stepMultiplier, KEYS.PAGE_DOWN, function (v) {
+}, _stepMultiplier[KEYS.PAGE_DOWN] = function (v) {
   return v > 1 ? -v : v * -10;
-}), _defineProperty(_stepMultiplier, KEYS.PAGE_UP, function (v) {
+}, _stepMultiplier[KEYS.PAGE_UP] = function (v) {
   return v > 1 ? v : v * 10;
-}), _stepMultiplier);
+}, _stepMultiplier);
 
@@ -304,162 +225,12 @@ var PropTypeArrOfNumber = PropTypes.arrayOf(PropTypes.number);
 function (_React$Component) {
-  _inherits(Parafoil, _React$Component);
-
-  function Parafoil(props) {
+  function Parafoil(_props) {
     var _this;
 
-    _classCallCheck(this, Parafoil);
+    _this = _React$Component.call(this, _props) || this;
 
-    _this = _possibleConstructorReturn(this, (Parafoil.__proto__ || Object.getPrototypeOf(Parafoil)).call(this, props));
-
-    _initialiseProps.call(_assertThisInitialized(_this));
-
-    var algorithm = props.algorithm,
-        max = props.max,
-        min = props.min,
-        values = props.values;
-    _this.state = {
-      handlePos: values.map(function (value) {
-        return algorithm.getPosition(value, min, max);
-      }),
-      handleDimensions: 0,
-      sliderBox: {},
-      slidingIndex: null,
-      values: values
-    };
-    return _this;
-  }
-
-  _createClass(Parafoil, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var _props = this.props,
-          disabled = _props.disabled,
-          min = _props.min,
-          max = _props.max;
-      var _state = this.state,
-          values = _state.values,
-          slidingIndex = _state.slidingIndex;
-      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 willBeDisabled = nextProps.disabled && !disabled;
-
-      if (minMaxChanged || valuesChanged) {
-        this.updateNewValues(nextProps);
-      }
-
-      if (willBeDisabled && slidingIndex !== null) {
-        this.endSlide();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _props2 = this.props,
-          algorithm = _props2.algorithm,
-          children = _props2.children,
-          disabled = _props2.disabled,
-          Handle = _props2.handle,
-          max = _props2.max,
-          min = _props2.min,
-          orientation = _props2.orientation,
-          PitComponent = _props2.pitComponent,
-          pitPoints = _props2.pitPoints,
-          ProgressBar = _props2.progressBar,
-          className = _props2.className,
-          classNameBackground = _props2.classNameBackground,
-          classNameHandle = _props2.classNameHandle,
-          classNameProgress = _props2.classNameProgress;
-      var _state2 = this.state,
-          handlePos = _state2.handlePos,
-          values = _state2.values;
-      return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", {
-          className: className,
-          ref: this.setRef,
-          onClick: this.handleClick,
-          role: "presentation"
-        }, React.createElement("div", {
-          className: classNameBackground
-        }), handlePos.map(function (node, idx) {
-          if (idx === 0 && handlePos.length > 1) {
-            return null;
-          }
-
-          return React.createElement(ProgressBar, {
-            className: classNameProgress,
-            key: "progress-bar-".concat(idx) // eslint-disable-line react/no-array-index-key
-            ,
-            style: _this2.getProgressStyle(idx)
-          });
-        }), handlePos.map(function (pos, idx) {
-          var handleStyle = orientation === 'vertical' ? {
-            top: "".concat(pos, "%")
-          } : {
-            left: "".concat(pos, "%")
-          };
-          return React.createElement(Handle, {
-            "aria-valuemax": _this2.getMaxValue(idx),
-            "aria-valuemin": _this2.getMinValue(idx),
-            "aria-valuenow": values[idx],
-            "aria-disabled": disabled,
-            "data-handle-key": idx,
-            className: classNameHandle,
-            key: "handle-".concat(idx) // eslint-disable-line react/no-array-index-key
-            ,
-            onClick: _this2.killEvent,
-            onKeyDown: _this2.handleKeydown,
-            onMouseDown: _this2.startMouseSlide,
-            onTouchStart: _this2.startTouchSlide,
-            role: "slider",
-            style: handleStyle,
-            tabIndex: 0
-          });
-        }), PitComponent && pitPoints.map(function (n) {
-          var pos = algorithm.getPosition(n, min, max);
-          var pitStyle = orientation === 'vertical' ? {
-            top: "".concat(pos, "%")
-          } : {
-            left: "".concat(pos, "%")
-          };
-          return React.createElement(PitComponent, {
-            key: "pit-".concat(n),
-            style: pitStyle
-          }, n);
-        }), children)
-      );
-    }
-  }]);
-
-  return Parafoil;
-}(React.Component);
-
-Object.defineProperty(Parafoil, "propTypes", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: propTypes
-});
-Object.defineProperty(Parafoil, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: defaultProps
-});
-
-var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
-
-  Object.defineProperty(this, "getPublicState", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var _this3$props = _this3.props,
-          min = _this3$props.min,
-          max = _this3$props.max;
-      var values = _this3.state.values;
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getPublicState", function () {
+      var _this$props = _this.props,
+          min = _this$props.min,
+          max = _this$props.max;
+      var values = _this.state.values;
       return {
@@ -470,10 +241,4 @@ max: max,
       };
-    }
-  });
-  Object.defineProperty(this, "getSliderBoundingBox", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var node = _this3.parafoil.getDOMNode ? _this3.parafoil.getDOMNode() : _this3.parafoil;
+    }), "getSliderBoundingBox", function () {
+      var node = _this.parafoil.getDOMNode ? _this.parafoil.getDOMNode() : _this.parafoil;
       var rect = node.getBoundingClientRect();
@@ -486,17 +251,11 @@ return {
       };
-    }
-  });
-  Object.defineProperty(this, "getProgressStyle", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var handlePos = _this3.state.handlePos;
+    }), "getProgressStyle", function (idx) {
+      var handlePos = _this.state.handlePos;
       var value = handlePos[idx];
 
       if (idx === 0) {
-        return _this3.props.orientation === 'vertical' ? {
-          height: "".concat(value, "%")
+        return _this.props.orientation === 'vertical' ? {
+          height: value + "%"
         } : {
-          width: "".concat(value, "%")
+          width: value + "%"
         };
@@ -507,54 +266,30 @@ }
       var diffValue = value - prevValue;
-      return _this3.props.orientation === 'vertical' ? {
-        height: "".concat(diffValue, "%"),
-        top: "".concat(prevValue, "%")
+      return _this.props.orientation === 'vertical' ? {
+        height: diffValue + "%",
+        top: prevValue + "%"
       } : {
-        left: "".concat(prevValue, "%"),
-        width: "".concat(diffValue, "%")
+        left: prevValue + "%",
+        width: diffValue + "%"
       };
-    }
-  });
-  Object.defineProperty(this, "getMinValue", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var values = _this3.state.values;
-      var min = _this3.props.min;
+    }), "getMinValue", function (idx) {
+      var values = _this.state.values;
+      var min = _this.props.min;
       return values[idx - 1] ? Math.max(min, values[idx - 1]) : min;
-    }
-  });
-  Object.defineProperty(this, "getMaxValue", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var values = _this3.state.values;
-      var max = _this3.props.max;
+    }), "getMaxValue", function (idx) {
+      var values = _this.state.values;
+      var max = _this.props.max;
       return values[idx + 1] ? Math.min(max, values[idx + 1]) : max;
-    }
-  });
-  Object.defineProperty(this, "getHandleDimensions", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev, sliderBox) {
+    }), "getHandleDimensions", function (ev, sliderBox) {
       var handleNode = ev.currentTarget || null;
       if (!handleNode) return 0;
-      return _this3.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
-    }
-  });
-  Object.defineProperty(this, "getClosestSnapPoint", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(_value) {
-      var snapPoints = _this3.props.snapPoints;
+      return _this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
+    }), "getClosestSnapPoint", function (value) {
+      var snapPoints = _this.props.snapPoints;
 
       if (!snapPoints.length) {
-        return _value;
+        return value;
       }
 
       return snapPoints.reduce(function (snapTo, snap) {
-        if (Math.abs(snapTo - _value) < Math.abs(snap - _value)) {
+        if (Math.abs(snapTo - value) < Math.abs(snap - value)) {
           return snapTo;
@@ -565,38 +300,26 @@ }
       });
-    }
-  });
-  Object.defineProperty(this, "getSnapPosition", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(positionPercent) {
-      if (!_this3.props.snap) {
+    }), "getSnapPosition", function (positionPercent) {
+      if (!_this.props.snap) {
         return positionPercent;
       }
 
-      var _this3$props2 = _this3.props,
-          algorithm = _this3$props2.algorithm,
-          max = _this3$props2.max,
-          min = _this3$props2.min;
+      var _this$props2 = _this.props,
+          algorithm = _this$props2.algorithm,
+          max = _this$props2.max,
+          min = _this$props2.min;
       var value = algorithm.getValue(positionPercent, min, max);
 
-      var snapValue = _this3.getClosestSnapPoint(value);
+      var snapValue = _this.getClosestSnapPoint(value);
 
       return algorithm.getPosition(snapValue, min, max);
-    }
-  });
-  Object.defineProperty(this, "getNextPositionForKey", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, keyCode) {
-      var _this3$state = _this3.state,
-          handlePos = _this3$state.handlePos,
-          values = _this3$state.values;
-      var _this3$props3 = _this3.props,
-          algorithm = _this3$props3.algorithm,
-          max = _this3$props3.max,
-          min = _this3$props3.min,
-          snapPoints = _this3$props3.snapPoints;
-      var shouldSnap = _this3.props.snap;
+    }), "getNextPositionForKey", function (idx, keyCode) {
+      var _this$state = _this.state,
+          handlePos = _this$state.handlePos,
+          values = _this$state.values;
+      var _this$props3 = _this.props,
+          algorithm = _this$props3.algorithm,
+          max = _this$props3.max,
+          min = _this$props3.min,
+          snapPoints = _this$props3.snapPoints;
+      var shouldSnap = _this.props.snap;
       var proposedValue = values[idx];
@@ -616,3 +339,3 @@ var proposedPercentage = handlePos[idx];
       if (shouldSnap) {
-        currentIndex = snapPoints.indexOf(_this3.getClosestSnapPoint(values[idx]));
+        currentIndex = snapPoints.indexOf(_this.getClosestSnapPoint(values[idx]));
       }
@@ -638,5 +361,3 @@
         if (shouldSnap) {
-          var _snapPoints = _slicedToArray(snapPoints, 1);
-
-          proposedValue = _snapPoints[0];
+          proposedValue = snapPoints[0];
         }
@@ -654,15 +375,9 @@ } else if (keyCode === KEYS.END) {
       return shouldSnap ? algorithm.getPosition(proposedValue, min, max) : proposedPercentage;
-    }
-  });
-  Object.defineProperty(this, "getNextState", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var handlePos = _this3.state.handlePos;
-      var _this3$props4 = _this3.props,
-          max = _this3$props4.max,
-          min = _this3$props4.min;
+    }), "getNextState", function (idx, proposedPosition) {
+      var handlePos = _this.state.handlePos;
+      var _this$props4 = _this.props,
+          max = _this$props4.max,
+          min = _this$props4.min;
 
-      var actualPosition = _this3.validatePosition(idx, proposedPosition);
+      var actualPosition = _this.validatePosition(idx, proposedPosition);
 
@@ -675,13 +390,7 @@ var nextHandlePos = handlePos.map(function (pos, index) {
         values: nextHandlePos.map(function (pos) {
-          return _this3.props.algorithm.getValue(pos, min, max);
+          return _this.props.algorithm.getValue(pos, min, max);
         })
       };
-    }
-  });
-  Object.defineProperty(this, "getClosestHandle", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(positionPercent) {
-      var handlePos = _this3.state.handlePos;
+    }), "getClosestHandle", function (positionPercent) {
+      var handlePos = _this.state.handlePos;
       return handlePos.reduce(function (closestIdx, node, idx) {
@@ -692,54 +401,30 @@ var challenger = Math.abs(handlePos[idx] - positionPercent);
       }, 0);
-    }
-  });
-  Object.defineProperty(this, "setStartSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      var sliderBox = _this3.getSliderBoundingBox();
+    }), "setStartSlide", function (ev) {
+      var sliderBox = _this.getSliderBoundingBox();
 
-      _this3.setState({
-        handleDimensions: _this3.getHandleDimensions(ev, sliderBox),
+      _this.setState({
+        handleDimensions: _this.getHandleDimensions(ev, sliderBox),
         sliderBox: sliderBox,
         slidingIndex: getHandleFor(ev)
       });
-    }
-  });
-  Object.defineProperty(this, "setRef", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ref) {
-      _this3.parafoil = ref;
-    }
-  });
-  Object.defineProperty(this, "startMouseSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+    }), "setRef", function (ref) {
+      _this.parafoil = ref;
+    }), "startMouseSlide", function (ev) {
+      if (_this.props.disabled === true) {
         return;
       }
 
-      _this3.setStartSlide(ev, ev.clientX, ev.clientY);
+      _this.setStartSlide(ev, ev.clientX, ev.clientY);
 
       if (typeof document.addEventListener === 'function') {
-        document.addEventListener('mousemove', _this3.handleMouseSlide, false);
-        document.addEventListener('mouseup', _this3.endSlide, false);
+        document.addEventListener('mousemove', _this.handleMouseSlide, false);
+        document.addEventListener('mouseup', _this.endSlide, false);
       } else {
-        document.attachEvent('onmousemove', _this3.handleMouseSlide);
-        document.attachEvent('onmouseup', _this3.endSlide);
+        document.attachEvent('onmousemove', _this.handleMouseSlide);
+        document.attachEvent('onmouseup', _this.endSlide);
       }
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "startTouchSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+    }), "startTouchSlide", function (ev) {
+      if (_this.props.disabled === true) {
         return;
@@ -751,31 +436,19 @@ }
 
-      _this3.setStartSlide(ev, touch.clientX, touch.clientY);
+      _this.setStartSlide(ev, touch.clientX, touch.clientY);
 
-      document.addEventListener('touchmove', _this3.handleTouchSlide, false);
-      document.addEventListener('touchend', _this3.endSlide, false);
-      if (_this3.props.onSliderDragStart) _this3.props.onSliderDragStart();
+      document.addEventListener('touchmove', _this.handleTouchSlide, false);
+      document.addEventListener('touchend', _this.endSlide, false);
+      if (_this.props.onSliderDragStart) _this.props.onSliderDragStart();
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleMouseSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.state.slidingIndex === null) return;
+    }), "handleMouseSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
 
-      _this3.handleSlide(ev.clientX, ev.clientY);
+      _this.handleSlide(ev.clientX, ev.clientY);
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleTouchSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.state.slidingIndex === null) return;
+    }), "handleTouchSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
 
       if (ev.changedTouches.length > 1) {
-        _this3.endSlide();
+        _this.endSlide();
 
@@ -787,40 +460,28 @@ return;
 
-      _this3.handleSlide(touch.clientX, touch.clientY);
+      _this.handleSlide(touch.clientX, touch.clientY);
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(x, y) {
-      var _this3$state2 = _this3.state,
-          idx = _this3$state2.slidingIndex,
-          sliderBox = _this3$state2.sliderBox;
-      var _this3$props5 = _this3.props,
-          orientation = _this3$props5.orientation,
-          onSliderDragMove = _this3$props5.onSliderDragMove;
+    }), "handleSlide", function (x, y) {
+      var _this$state2 = _this.state,
+          idx = _this$state2.slidingIndex,
+          sliderBox = _this$state2.sliderBox;
+      var _this$props5 = _this.props,
+          orientation = _this$props5.orientation,
+          onSliderDragMove = _this$props5.onSliderDragMove;
       var positionPercent = orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
 
-      _this3.slideTo(idx, positionPercent);
+      _this.slideTo(idx, positionPercent);
 
-      if (_this3.canMove(idx, positionPercent)) {
+      if (_this.canMove(idx, positionPercent)) {
         if (onSliderDragMove) onSliderDragMove();
       }
-    }
-  });
-  Object.defineProperty(this, "endSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var _this3$state3 = _this3.state,
-          idx = _this3$state3.slidingIndex,
-          handlePos = _this3$state3.handlePos;
-      var _this3$props6 = _this3.props,
-          onSliderDragEnd = _this3$props6.onSliderDragEnd,
-          snap = _this3$props6.snap;
+    }), "endSlide", function () {
+      var _this$state3 = _this.state,
+          idx = _this$state3.slidingIndex,
+          handlePos = _this$state3.handlePos;
+      var _this$props6 = _this.props,
+          onSliderDragEnd = _this$props6.onSliderDragEnd,
+          snap = _this$props6.snap;
 
-      _this3.setState({
+      _this.setState({
         slidingIndex: null
@@ -830,9 +491,9 @@ });
       if (typeof document.removeEventListener === 'function') {
-        document.removeEventListener('mouseup', _this3.endSlide, false);
-        document.removeEventListener('touchend', _this3.endSlide, false);
-        document.removeEventListener('touchmove', _this3.handleTouchSlide, false);
-        document.removeEventListener('mousemove', _this3.handleMouseSlide, false);
+        document.removeEventListener('mouseup', _this.endSlide, false);
+        document.removeEventListener('touchend', _this.endSlide, false);
+        document.removeEventListener('touchmove', _this.handleTouchSlide, false);
+        document.removeEventListener('mousemove', _this.handleMouseSlide, false);
       } else {
-        document.detachEvent('onmousemove', _this3.handleMouseSlide);
-        document.detachEvent('onmouseup', _this3.endSlide);
+        document.detachEvent('onmousemove', _this.handleMouseSlide);
+        document.detachEvent('onmouseup', _this.endSlide);
       }
@@ -843,18 +504,12 @@
       if (snap) {
-        var positionPercent = _this3.getSnapPosition(handlePos[idx]);
+        var positionPercent = _this.getSnapPosition(handlePos[idx]);
 
-        _this3.slideTo(idx, positionPercent, function () {
-          return _this3.fireChangeEvent();
+        _this.slideTo(idx, positionPercent, function () {
+          return _this.fireChangeEvent();
         });
       } else {
-        _this3.fireChangeEvent();
+        _this.fireChangeEvent();
       }
-    }
-  });
-  Object.defineProperty(this, "handleClick", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true || ev.target.getAttribute('data-handle-key')) {
+    }), "handleClick", function (ev) {
+      if (_this.props.disabled === true || ev.target.getAttribute('data-handle-key')) {
         return;
@@ -865,25 +520,19 @@ } // Calculate the position of the slider on the page so we can determine
 
-      var sliderBox = _this3.getSliderBoundingBox();
+      var sliderBox = _this.getSliderBoundingBox();
 
-      var positionDecimal = _this3.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+      var positionDecimal = _this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
       var positionPercent = positionDecimal * PERCENT_FULL;
 
-      var handleId = _this3.getClosestHandle(positionPercent);
+      var handleId = _this.getClosestHandle(positionPercent);
 
-      var validPositionPercent = _this3.getSnapPosition(positionPercent); // Move the handle there
+      var validPositionPercent = _this.getSnapPosition(positionPercent); // Move the handle there
 
 
-      _this3.slideTo(handleId, validPositionPercent, function () {
-        return _this3.fireChangeEvent();
+      _this.slideTo(handleId, validPositionPercent, function () {
+        return _this.fireChangeEvent();
       });
 
-      if (_this3.props.onClick) _this3.props.onClick();
-    }
-  });
-  Object.defineProperty(this, "handleKeydown", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+      if (_this.props.onClick) _this.props.onClick();
+    }), "handleKeydown", function (ev) {
+      if (_this.props.disabled === true) {
         return;
@@ -899,25 +548,19 @@ }
 
-      var proposedPercentage = _this3.getNextPositionForKey(idx, ev.keyCode);
+      var proposedPercentage = _this.getNextPositionForKey(idx, ev.keyCode);
 
       if (proposedPercentage === null) return;
 
-      if (_this3.canMove(idx, proposedPercentage)) {
-        _this3.slideTo(idx, proposedPercentage, function () {
-          return _this3.fireChangeEvent();
+      if (_this.canMove(idx, proposedPercentage)) {
+        _this.slideTo(idx, proposedPercentage, function () {
+          return _this.fireChangeEvent();
         });
 
-        if (_this3.props.onKeyPress) _this3.props.onKeyPress();
+        if (_this.props.onKeyPress) _this.props.onKeyPress();
       }
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "validatePosition", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var _this3$state4 = _this3.state,
-          handlePos = _this3$state4.handlePos,
-          handleDimensions = _this3$state4.handleDimensions;
+    }), "validatePosition", function (idx, proposedPosition) {
+      var _this$state4 = _this.state,
+          handlePos = _this$state4.handlePos,
+          handleDimensions = _this$state4.handleDimensions;
       var handlePosMax = handlePos[idx + 1];
@@ -929,10 +572,4 @@ var handlePosMin = handlePos[idx - 1];
       handlePosMin !== undefined ? handlePosMin + handleDimensions : PERCENT_EMPTY);
-    }
-  });
-  Object.defineProperty(this, "validateValues", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(proposedValues, props) {
-      var _ref = props || _this3.props,
+    }), "validateValues", function (proposedValues, props) {
+      var _ref = props || _this.props,
           max = _ref.max,
@@ -950,12 +587,6 @@ min = _ref.min;
       });
-    }
-  });
-  Object.defineProperty(this, "canMove", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var _this3$state5 = _this3.state,
-          handlePos = _this3$state5.handlePos,
-          handleDimensions = _this3$state5.handleDimensions;
+    }), "canMove", function (idx, proposedPosition) {
+      var _this$state5 = _this.state,
+          handlePos = _this$state5.handlePos,
+          handleDimensions = _this$state5.handleDimensions;
       if (proposedPosition < PERCENT_EMPTY) return false;
@@ -966,35 +597,16 @@ if (proposedPosition > PERCENT_FULL) return false;
       var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
-      if (proposedPosition < prevHandlePosition) return false;
-      return true;
-    }
-  });
-  Object.defineProperty(this, "fireChangeEvent", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var onChange = _this3.props.onChange;
-      if (onChange) onChange(_this3.getPublicState());
-    }
-  });
-  Object.defineProperty(this, "slideTo", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition, onAfterSet) {
-      var nextState = _this3.getNextState(idx, proposedPosition);
+      return proposedPosition >= prevHandlePosition;
+    }), "fireChangeEvent", function () {
+      var onChange = _this.props.onChange;
+      if (onChange) onChange(_this.getPublicState());
+    }), "slideTo", function (idx, proposedPosition, onAfterSet) {
+      var nextState = _this.getNextState(idx, proposedPosition);
 
-      _this3.setState(nextState, function () {
-        var onValuesUpdated = _this3.props.onValuesUpdated;
-        if (onValuesUpdated) onValuesUpdated(_this3.getPublicState());
+      _this.setState(nextState, function () {
+        var onValuesUpdated = _this.props.onValuesUpdated;
+        if (onValuesUpdated) onValuesUpdated(_this.getPublicState());
         if (onAfterSet) onAfterSet();
       });
-    }
-  });
-  Object.defineProperty(this, "updateNewValues", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(nextProps) {
-      var slidingIndex = _this3.state.slidingIndex; // Don't update while the slider is sliding
+    }), "updateNewValues", function (nextProps) {
+      var slidingIndex = _this.state.slidingIndex; // Don't update while the slider is sliding
 
@@ -1008,7 +620,7 @@ if (slidingIndex !== null) {
           values = nextProps.values;
-      var algorithm = _this3.props.algorithm;
+      var algorithm = _this.props.algorithm;
 
-      var nextValues = _this3.validateValues(values, nextProps);
+      var nextValues = _this.validateValues(values, nextProps);
 
-      _this3.setState({
+      _this.setState({
         handlePos: nextValues.map(function (value) {
@@ -1019,8 +631,147 @@ return algorithm.getPosition(value, min, max);
       }, function () {
-        return _this3.fireChangeEvent();
+        return _this.fireChangeEvent();
       });
+    });
+
+    var _algorithm = _props.algorithm,
+        _max = _props.max,
+        _min = _props.min,
+        _values = _props.values;
+    _this.state = {
+      handlePos: _values.map(function (value) {
+        return _algorithm.getPosition(value, _min, _max);
+      }),
+      handleDimensions: 0,
+      sliderBox: {},
+      slidingIndex: null,
+      values: _values
+    };
+    _this.pitStyleCache = {};
+    return _this;
+  }
+
+  var _proto = Parafoil.prototype;
+
+  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var _this$props7 = this.props,
+        disabled = _this$props7.disabled,
+        min = _this$props7.min,
+        max = _this$props7.max,
+        orientation = _this$props7.orientation,
+        pitPoints = _this$props7.pitPoints,
+        algorithm = _this$props7.algorithm;
+    var _this$state6 = this.state,
+        values = _this$state6.values,
+        slidingIndex = _this$state6.slidingIndex;
+    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.orientation !== orientation;
+    var willBeDisabled = nextProps.disabled && !disabled;
+
+    if (minMaxChanged || valuesChanged) {
+      this.updateNewValues(nextProps);
     }
-  });
-};
 
+    if (minMaxChanged || orientationChanged || nextProps.pitPoints !== pitPoints || nextProps.algorithm !== algorithm) {
+      this.pitStyleCache = {};
+    }
+
+    if (willBeDisabled && slidingIndex !== null) {
+      this.endSlide();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props8 = this.props,
+        algorithm = _this$props8.algorithm,
+        children = _this$props8.children,
+        disabled = _this$props8.disabled,
+        Handle = _this$props8.handle,
+        max = _this$props8.max,
+        min = _this$props8.min,
+        orientation = _this$props8.orientation,
+        PitComponent = _this$props8.pitComponent,
+        pitPoints = _this$props8.pitPoints,
+        ProgressBar = _this$props8.progressBar,
+        className = _this$props8.className,
+        classNameBackground = _this$props8.classNameBackground,
+        classNameHandle = _this$props8.classNameHandle,
+        classNameProgress = _this$props8.classNameProgress;
+    var _this$state7 = this.state,
+        handlePos = _this$state7.handlePos,
+        values = _this$state7.values;
+    return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: className,
+        ref: this.setRef,
+        onClick: this.handleClick,
+        role: "presentation"
+      }, React.createElement("div", {
+        className: classNameBackground
+      }), PitComponent && pitPoints.map(function (n) {
+        var pitStyle = _this2.pitStyleCache[n];
+
+        if (!pitStyle) {
+          var pos = algorithm.getPosition(n, min, max);
+          pitStyle = orientation === 'vertical' ? {
+            top: pos + "%"
+          } : {
+            left: pos + "%"
+          };
+          _this2.pitStyleCache[n] = pitStyle;
+        }
+
+        return React.createElement(PitComponent, {
+          key: "pit-" + n,
+          style: pitStyle
+        }, n);
+      }), handlePos.map(function (node, idx) {
+        if (idx === 0 && handlePos.length > 1) {
+          return null;
+        }
+
+        return React.createElement(ProgressBar, {
+          className: classNameProgress,
+          key: "progress-bar-" + idx // eslint-disable-line react/no-array-index-key
+          ,
+          style: _this2.getProgressStyle(idx)
+        });
+      }), handlePos.map(function (pos, idx) {
+        var handleStyle = orientation === 'vertical' ? {
+          top: pos + "%"
+        } : {
+          left: pos + "%"
+        };
+        return React.createElement(Handle, {
+          "aria-valuemax": _this2.getMaxValue(idx),
+          "aria-valuemin": _this2.getMinValue(idx),
+          "aria-valuenow": values[idx],
+          "aria-disabled": disabled,
+          "data-handle-key": idx,
+          className: classNameHandle,
+          key: "handle-" + idx // eslint-disable-line react/no-array-index-key
+          ,
+          onClick: _this2.killEvent,
+          onKeyDown: _this2.handleKeydown,
+          onMouseDown: _this2.startMouseSlide,
+          onTouchStart: _this2.startTouchSlide,
+          role: "slider",
+          style: handleStyle,
+          tabIndex: 0
+        });
+      }), children)
+    );
+  };
+
+  _inheritsLoose(Parafoil, _React$Component);
+
+  return Parafoil;
+}(React.Component);
+
+_defineProperty(_defineProperty(Parafoil, "propTypes", propTypes), "defaultProps", defaultProps);
+
 var algorithms = {
@@ -1027,0 +778,0 @@ linear: linear,

dist/parafoil.esm.js

@@ -46,24 +46,2 @@ import React from 'react';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 function _defineProperty(obj, key, value) {
@@ -102,16 +80,5 @@ if (key in obj) {
 
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype.__proto__ = superClass && superClass.prototype;
+  subClass.__proto__ = superClass;
 }
@@ -127,48 +94,2 @@
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(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"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
 var KEYS = {
@@ -196,15 +117,15 @@ DOWN: 40,
 }
-var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, KEYS.LEFT, function (v) {
+var stepMultiplier = (_stepMultiplier = {}, _stepMultiplier[KEYS.LEFT] = function (v) {
   return v * -1;
-}), _defineProperty(_stepMultiplier, KEYS.RIGHT, function (v) {
+}, _stepMultiplier[KEYS.RIGHT] = function (v) {
   return v * 1;
-}), _defineProperty(_stepMultiplier, KEYS.UP, function (v) {
+}, _stepMultiplier[KEYS.UP] = function (v) {
   return v * 1;
-}), _defineProperty(_stepMultiplier, KEYS.DOWN, function (v) {
+}, _stepMultiplier[KEYS.DOWN] = function (v) {
   return v * -1;
-}), _defineProperty(_stepMultiplier, KEYS.PAGE_DOWN, function (v) {
+}, _stepMultiplier[KEYS.PAGE_DOWN] = function (v) {
   return v > 1 ? -v : v * -10;
-}), _defineProperty(_stepMultiplier, KEYS.PAGE_UP, function (v) {
+}, _stepMultiplier[KEYS.PAGE_UP] = function (v) {
   return v > 1 ? v : v * 10;
-}), _stepMultiplier);
+}, _stepMultiplier);
 
@@ -298,162 +219,12 @@ var PropTypeArrOfNumber = PropTypes.arrayOf(PropTypes.number);
 function (_React$Component) {
-  _inherits(Parafoil, _React$Component);
-
-  function Parafoil(props) {
+  function Parafoil(_props) {
     var _this;
 
-    _classCallCheck(this, Parafoil);
+    _this = _React$Component.call(this, _props) || this;
 
-    _this = _possibleConstructorReturn(this, (Parafoil.__proto__ || Object.getPrototypeOf(Parafoil)).call(this, props));
-
-    _initialiseProps.call(_assertThisInitialized(_this));
-
-    var algorithm = props.algorithm,
-        max = props.max,
-        min = props.min,
-        values = props.values;
-    _this.state = {
-      handlePos: values.map(function (value) {
-        return algorithm.getPosition(value, min, max);
-      }),
-      handleDimensions: 0,
-      sliderBox: {},
-      slidingIndex: null,
-      values: values
-    };
-    return _this;
-  }
-
-  _createClass(Parafoil, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var _props = this.props,
-          disabled = _props.disabled,
-          min = _props.min,
-          max = _props.max;
-      var _state = this.state,
-          values = _state.values,
-          slidingIndex = _state.slidingIndex;
-      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 willBeDisabled = nextProps.disabled && !disabled;
-
-      if (minMaxChanged || valuesChanged) {
-        this.updateNewValues(nextProps);
-      }
-
-      if (willBeDisabled && slidingIndex !== null) {
-        this.endSlide();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _props2 = this.props,
-          algorithm = _props2.algorithm,
-          children = _props2.children,
-          disabled = _props2.disabled,
-          Handle = _props2.handle,
-          max = _props2.max,
-          min = _props2.min,
-          orientation = _props2.orientation,
-          PitComponent = _props2.pitComponent,
-          pitPoints = _props2.pitPoints,
-          ProgressBar = _props2.progressBar,
-          className = _props2.className,
-          classNameBackground = _props2.classNameBackground,
-          classNameHandle = _props2.classNameHandle,
-          classNameProgress = _props2.classNameProgress;
-      var _state2 = this.state,
-          handlePos = _state2.handlePos,
-          values = _state2.values;
-      return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", {
-          className: className,
-          ref: this.setRef,
-          onClick: this.handleClick,
-          role: "presentation"
-        }, React.createElement("div", {
-          className: classNameBackground
-        }), handlePos.map(function (node, idx) {
-          if (idx === 0 && handlePos.length > 1) {
-            return null;
-          }
-
-          return React.createElement(ProgressBar, {
-            className: classNameProgress,
-            key: "progress-bar-".concat(idx) // eslint-disable-line react/no-array-index-key
-            ,
-            style: _this2.getProgressStyle(idx)
-          });
-        }), handlePos.map(function (pos, idx) {
-          var handleStyle = orientation === 'vertical' ? {
-            top: "".concat(pos, "%")
-          } : {
-            left: "".concat(pos, "%")
-          };
-          return React.createElement(Handle, {
-            "aria-valuemax": _this2.getMaxValue(idx),
-            "aria-valuemin": _this2.getMinValue(idx),
-            "aria-valuenow": values[idx],
-            "aria-disabled": disabled,
-            "data-handle-key": idx,
-            className: classNameHandle,
-            key: "handle-".concat(idx) // eslint-disable-line react/no-array-index-key
-            ,
-            onClick: _this2.killEvent,
-            onKeyDown: _this2.handleKeydown,
-            onMouseDown: _this2.startMouseSlide,
-            onTouchStart: _this2.startTouchSlide,
-            role: "slider",
-            style: handleStyle,
-            tabIndex: 0
-          });
-        }), PitComponent && pitPoints.map(function (n) {
-          var pos = algorithm.getPosition(n, min, max);
-          var pitStyle = orientation === 'vertical' ? {
-            top: "".concat(pos, "%")
-          } : {
-            left: "".concat(pos, "%")
-          };
-          return React.createElement(PitComponent, {
-            key: "pit-".concat(n),
-            style: pitStyle
-          }, n);
-        }), children)
-      );
-    }
-  }]);
-
-  return Parafoil;
-}(React.Component);
-
-Object.defineProperty(Parafoil, "propTypes", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: propTypes
-});
-Object.defineProperty(Parafoil, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: defaultProps
-});
-
-var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
-
-  Object.defineProperty(this, "getPublicState", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var _this3$props = _this3.props,
-          min = _this3$props.min,
-          max = _this3$props.max;
-      var values = _this3.state.values;
+    _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getPublicState", function () {
+      var _this$props = _this.props,
+          min = _this$props.min,
+          max = _this$props.max;
+      var values = _this.state.values;
       return {
@@ -464,10 +235,4 @@ max: max,
       };
-    }
-  });
-  Object.defineProperty(this, "getSliderBoundingBox", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var node = _this3.parafoil.getDOMNode ? _this3.parafoil.getDOMNode() : _this3.parafoil;
+    }), "getSliderBoundingBox", function () {
+      var node = _this.parafoil.getDOMNode ? _this.parafoil.getDOMNode() : _this.parafoil;
       var rect = node.getBoundingClientRect();
@@ -480,17 +245,11 @@ return {
       };
-    }
-  });
-  Object.defineProperty(this, "getProgressStyle", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var handlePos = _this3.state.handlePos;
+    }), "getProgressStyle", function (idx) {
+      var handlePos = _this.state.handlePos;
       var value = handlePos[idx];
 
       if (idx === 0) {
-        return _this3.props.orientation === 'vertical' ? {
-          height: "".concat(value, "%")
+        return _this.props.orientation === 'vertical' ? {
+          height: value + "%"
         } : {
-          width: "".concat(value, "%")
+          width: value + "%"
         };
@@ -501,54 +260,30 @@ }
       var diffValue = value - prevValue;
-      return _this3.props.orientation === 'vertical' ? {
-        height: "".concat(diffValue, "%"),
-        top: "".concat(prevValue, "%")
+      return _this.props.orientation === 'vertical' ? {
+        height: diffValue + "%",
+        top: prevValue + "%"
       } : {
-        left: "".concat(prevValue, "%"),
-        width: "".concat(diffValue, "%")
+        left: prevValue + "%",
+        width: diffValue + "%"
       };
-    }
-  });
-  Object.defineProperty(this, "getMinValue", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var values = _this3.state.values;
-      var min = _this3.props.min;
+    }), "getMinValue", function (idx) {
+      var values = _this.state.values;
+      var min = _this.props.min;
       return values[idx - 1] ? Math.max(min, values[idx - 1]) : min;
-    }
-  });
-  Object.defineProperty(this, "getMaxValue", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx) {
-      var values = _this3.state.values;
-      var max = _this3.props.max;
+    }), "getMaxValue", function (idx) {
+      var values = _this.state.values;
+      var max = _this.props.max;
       return values[idx + 1] ? Math.min(max, values[idx + 1]) : max;
-    }
-  });
-  Object.defineProperty(this, "getHandleDimensions", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev, sliderBox) {
+    }), "getHandleDimensions", function (ev, sliderBox) {
       var handleNode = ev.currentTarget || null;
       if (!handleNode) return 0;
-      return _this3.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
-    }
-  });
-  Object.defineProperty(this, "getClosestSnapPoint", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(_value) {
-      var snapPoints = _this3.props.snapPoints;
+      return _this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
+    }), "getClosestSnapPoint", function (value) {
+      var snapPoints = _this.props.snapPoints;
 
       if (!snapPoints.length) {
-        return _value;
+        return value;
       }
 
       return snapPoints.reduce(function (snapTo, snap) {
-        if (Math.abs(snapTo - _value) < Math.abs(snap - _value)) {
+        if (Math.abs(snapTo - value) < Math.abs(snap - value)) {
           return snapTo;
@@ -559,38 +294,26 @@ }
       });
-    }
-  });
-  Object.defineProperty(this, "getSnapPosition", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(positionPercent) {
-      if (!_this3.props.snap) {
+    }), "getSnapPosition", function (positionPercent) {
+      if (!_this.props.snap) {
         return positionPercent;
       }
 
-      var _this3$props2 = _this3.props,
-          algorithm = _this3$props2.algorithm,
-          max = _this3$props2.max,
-          min = _this3$props2.min;
+      var _this$props2 = _this.props,
+          algorithm = _this$props2.algorithm,
+          max = _this$props2.max,
+          min = _this$props2.min;
       var value = algorithm.getValue(positionPercent, min, max);
 
-      var snapValue = _this3.getClosestSnapPoint(value);
+      var snapValue = _this.getClosestSnapPoint(value);
 
       return algorithm.getPosition(snapValue, min, max);
-    }
-  });
-  Object.defineProperty(this, "getNextPositionForKey", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, keyCode) {
-      var _this3$state = _this3.state,
-          handlePos = _this3$state.handlePos,
-          values = _this3$state.values;
-      var _this3$props3 = _this3.props,
-          algorithm = _this3$props3.algorithm,
-          max = _this3$props3.max,
-          min = _this3$props3.min,
-          snapPoints = _this3$props3.snapPoints;
-      var shouldSnap = _this3.props.snap;
+    }), "getNextPositionForKey", function (idx, keyCode) {
+      var _this$state = _this.state,
+          handlePos = _this$state.handlePos,
+          values = _this$state.values;
+      var _this$props3 = _this.props,
+          algorithm = _this$props3.algorithm,
+          max = _this$props3.max,
+          min = _this$props3.min,
+          snapPoints = _this$props3.snapPoints;
+      var shouldSnap = _this.props.snap;
       var proposedValue = values[idx];
@@ -610,3 +333,3 @@ var proposedPercentage = handlePos[idx];
       if (shouldSnap) {
-        currentIndex = snapPoints.indexOf(_this3.getClosestSnapPoint(values[idx]));
+        currentIndex = snapPoints.indexOf(_this.getClosestSnapPoint(values[idx]));
       }
@@ -632,5 +355,3 @@
         if (shouldSnap) {
-          var _snapPoints = _slicedToArray(snapPoints, 1);
-
-          proposedValue = _snapPoints[0];
+          proposedValue = snapPoints[0];
         }
@@ -648,15 +369,9 @@ } else if (keyCode === KEYS.END) {
       return shouldSnap ? algorithm.getPosition(proposedValue, min, max) : proposedPercentage;
-    }
-  });
-  Object.defineProperty(this, "getNextState", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var handlePos = _this3.state.handlePos;
-      var _this3$props4 = _this3.props,
-          max = _this3$props4.max,
-          min = _this3$props4.min;
+    }), "getNextState", function (idx, proposedPosition) {
+      var handlePos = _this.state.handlePos;
+      var _this$props4 = _this.props,
+          max = _this$props4.max,
+          min = _this$props4.min;
 
-      var actualPosition = _this3.validatePosition(idx, proposedPosition);
+      var actualPosition = _this.validatePosition(idx, proposedPosition);
 
@@ -669,13 +384,7 @@ var nextHandlePos = handlePos.map(function (pos, index) {
         values: nextHandlePos.map(function (pos) {
-          return _this3.props.algorithm.getValue(pos, min, max);
+          return _this.props.algorithm.getValue(pos, min, max);
         })
       };
-    }
-  });
-  Object.defineProperty(this, "getClosestHandle", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(positionPercent) {
-      var handlePos = _this3.state.handlePos;
+    }), "getClosestHandle", function (positionPercent) {
+      var handlePos = _this.state.handlePos;
       return handlePos.reduce(function (closestIdx, node, idx) {
@@ -686,54 +395,30 @@ var challenger = Math.abs(handlePos[idx] - positionPercent);
       }, 0);
-    }
-  });
-  Object.defineProperty(this, "setStartSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      var sliderBox = _this3.getSliderBoundingBox();
+    }), "setStartSlide", function (ev) {
+      var sliderBox = _this.getSliderBoundingBox();
 
-      _this3.setState({
-        handleDimensions: _this3.getHandleDimensions(ev, sliderBox),
+      _this.setState({
+        handleDimensions: _this.getHandleDimensions(ev, sliderBox),
         sliderBox: sliderBox,
         slidingIndex: getHandleFor(ev)
       });
-    }
-  });
-  Object.defineProperty(this, "setRef", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ref) {
-      _this3.parafoil = ref;
-    }
-  });
-  Object.defineProperty(this, "startMouseSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+    }), "setRef", function (ref) {
+      _this.parafoil = ref;
+    }), "startMouseSlide", function (ev) {
+      if (_this.props.disabled === true) {
         return;
       }
 
-      _this3.setStartSlide(ev, ev.clientX, ev.clientY);
+      _this.setStartSlide(ev, ev.clientX, ev.clientY);
 
       if (typeof document.addEventListener === 'function') {
-        document.addEventListener('mousemove', _this3.handleMouseSlide, false);
-        document.addEventListener('mouseup', _this3.endSlide, false);
+        document.addEventListener('mousemove', _this.handleMouseSlide, false);
+        document.addEventListener('mouseup', _this.endSlide, false);
       } else {
-        document.attachEvent('onmousemove', _this3.handleMouseSlide);
-        document.attachEvent('onmouseup', _this3.endSlide);
+        document.attachEvent('onmousemove', _this.handleMouseSlide);
+        document.attachEvent('onmouseup', _this.endSlide);
       }
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "startTouchSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+    }), "startTouchSlide", function (ev) {
+      if (_this.props.disabled === true) {
         return;
@@ -745,31 +430,19 @@ }
 
-      _this3.setStartSlide(ev, touch.clientX, touch.clientY);
+      _this.setStartSlide(ev, touch.clientX, touch.clientY);
 
-      document.addEventListener('touchmove', _this3.handleTouchSlide, false);
-      document.addEventListener('touchend', _this3.endSlide, false);
-      if (_this3.props.onSliderDragStart) _this3.props.onSliderDragStart();
+      document.addEventListener('touchmove', _this.handleTouchSlide, false);
+      document.addEventListener('touchend', _this.endSlide, false);
+      if (_this.props.onSliderDragStart) _this.props.onSliderDragStart();
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleMouseSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.state.slidingIndex === null) return;
+    }), "handleMouseSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
 
-      _this3.handleSlide(ev.clientX, ev.clientY);
+      _this.handleSlide(ev.clientX, ev.clientY);
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleTouchSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.state.slidingIndex === null) return;
+    }), "handleTouchSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
 
       if (ev.changedTouches.length > 1) {
-        _this3.endSlide();
+        _this.endSlide();
 
@@ -781,40 +454,28 @@ return;
 
-      _this3.handleSlide(touch.clientX, touch.clientY);
+      _this.handleSlide(touch.clientX, touch.clientY);
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "handleSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(x, y) {
-      var _this3$state2 = _this3.state,
-          idx = _this3$state2.slidingIndex,
-          sliderBox = _this3$state2.sliderBox;
-      var _this3$props5 = _this3.props,
-          orientation = _this3$props5.orientation,
-          onSliderDragMove = _this3$props5.onSliderDragMove;
+    }), "handleSlide", function (x, y) {
+      var _this$state2 = _this.state,
+          idx = _this$state2.slidingIndex,
+          sliderBox = _this$state2.sliderBox;
+      var _this$props5 = _this.props,
+          orientation = _this$props5.orientation,
+          onSliderDragMove = _this$props5.onSliderDragMove;
       var positionPercent = orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
 
-      _this3.slideTo(idx, positionPercent);
+      _this.slideTo(idx, positionPercent);
 
-      if (_this3.canMove(idx, positionPercent)) {
+      if (_this.canMove(idx, positionPercent)) {
         if (onSliderDragMove) onSliderDragMove();
       }
-    }
-  });
-  Object.defineProperty(this, "endSlide", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var _this3$state3 = _this3.state,
-          idx = _this3$state3.slidingIndex,
-          handlePos = _this3$state3.handlePos;
-      var _this3$props6 = _this3.props,
-          onSliderDragEnd = _this3$props6.onSliderDragEnd,
-          snap = _this3$props6.snap;
+    }), "endSlide", function () {
+      var _this$state3 = _this.state,
+          idx = _this$state3.slidingIndex,
+          handlePos = _this$state3.handlePos;
+      var _this$props6 = _this.props,
+          onSliderDragEnd = _this$props6.onSliderDragEnd,
+          snap = _this$props6.snap;
 
-      _this3.setState({
+      _this.setState({
         slidingIndex: null
@@ -824,9 +485,9 @@ });
       if (typeof document.removeEventListener === 'function') {
-        document.removeEventListener('mouseup', _this3.endSlide, false);
-        document.removeEventListener('touchend', _this3.endSlide, false);
-        document.removeEventListener('touchmove', _this3.handleTouchSlide, false);
-        document.removeEventListener('mousemove', _this3.handleMouseSlide, false);
+        document.removeEventListener('mouseup', _this.endSlide, false);
+        document.removeEventListener('touchend', _this.endSlide, false);
+        document.removeEventListener('touchmove', _this.handleTouchSlide, false);
+        document.removeEventListener('mousemove', _this.handleMouseSlide, false);
       } else {
-        document.detachEvent('onmousemove', _this3.handleMouseSlide);
-        document.detachEvent('onmouseup', _this3.endSlide);
+        document.detachEvent('onmousemove', _this.handleMouseSlide);
+        document.detachEvent('onmouseup', _this.endSlide);
       }
@@ -837,18 +498,12 @@
       if (snap) {
-        var positionPercent = _this3.getSnapPosition(handlePos[idx]);
+        var positionPercent = _this.getSnapPosition(handlePos[idx]);
 
-        _this3.slideTo(idx, positionPercent, function () {
-          return _this3.fireChangeEvent();
+        _this.slideTo(idx, positionPercent, function () {
+          return _this.fireChangeEvent();
         });
       } else {
-        _this3.fireChangeEvent();
+        _this.fireChangeEvent();
       }
-    }
-  });
-  Object.defineProperty(this, "handleClick", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true || ev.target.getAttribute('data-handle-key')) {
+    }), "handleClick", function (ev) {
+      if (_this.props.disabled === true || ev.target.getAttribute('data-handle-key')) {
         return;
@@ -859,25 +514,19 @@ } // Calculate the position of the slider on the page so we can determine
 
-      var sliderBox = _this3.getSliderBoundingBox();
+      var sliderBox = _this.getSliderBoundingBox();
 
-      var positionDecimal = _this3.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+      var positionDecimal = _this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
       var positionPercent = positionDecimal * PERCENT_FULL;
 
-      var handleId = _this3.getClosestHandle(positionPercent);
+      var handleId = _this.getClosestHandle(positionPercent);
 
-      var validPositionPercent = _this3.getSnapPosition(positionPercent); // Move the handle there
+      var validPositionPercent = _this.getSnapPosition(positionPercent); // Move the handle there
 
 
-      _this3.slideTo(handleId, validPositionPercent, function () {
-        return _this3.fireChangeEvent();
+      _this.slideTo(handleId, validPositionPercent, function () {
+        return _this.fireChangeEvent();
       });
 
-      if (_this3.props.onClick) _this3.props.onClick();
-    }
-  });
-  Object.defineProperty(this, "handleKeydown", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(ev) {
-      if (_this3.props.disabled === true) {
+      if (_this.props.onClick) _this.props.onClick();
+    }), "handleKeydown", function (ev) {
+      if (_this.props.disabled === true) {
         return;
@@ -893,25 +542,19 @@ }
 
-      var proposedPercentage = _this3.getNextPositionForKey(idx, ev.keyCode);
+      var proposedPercentage = _this.getNextPositionForKey(idx, ev.keyCode);
 
       if (proposedPercentage === null) return;
 
-      if (_this3.canMove(idx, proposedPercentage)) {
-        _this3.slideTo(idx, proposedPercentage, function () {
-          return _this3.fireChangeEvent();
+      if (_this.canMove(idx, proposedPercentage)) {
+        _this.slideTo(idx, proposedPercentage, function () {
+          return _this.fireChangeEvent();
         });
 
-        if (_this3.props.onKeyPress) _this3.props.onKeyPress();
+        if (_this.props.onKeyPress) _this.props.onKeyPress();
       }
 
       killEvent(ev);
-    }
-  });
-  Object.defineProperty(this, "validatePosition", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var _this3$state4 = _this3.state,
-          handlePos = _this3$state4.handlePos,
-          handleDimensions = _this3$state4.handleDimensions;
+    }), "validatePosition", function (idx, proposedPosition) {
+      var _this$state4 = _this.state,
+          handlePos = _this$state4.handlePos,
+          handleDimensions = _this$state4.handleDimensions;
       var handlePosMax = handlePos[idx + 1];
@@ -923,10 +566,4 @@ var handlePosMin = handlePos[idx - 1];
       handlePosMin !== undefined ? handlePosMin + handleDimensions : PERCENT_EMPTY);
-    }
-  });
-  Object.defineProperty(this, "validateValues", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(proposedValues, props) {
-      var _ref = props || _this3.props,
+    }), "validateValues", function (proposedValues, props) {
+      var _ref = props || _this.props,
           max = _ref.max,
@@ -944,12 +581,6 @@ min = _ref.min;
       });
-    }
-  });
-  Object.defineProperty(this, "canMove", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition) {
-      var _this3$state5 = _this3.state,
-          handlePos = _this3$state5.handlePos,
-          handleDimensions = _this3$state5.handleDimensions;
+    }), "canMove", function (idx, proposedPosition) {
+      var _this$state5 = _this.state,
+          handlePos = _this$state5.handlePos,
+          handleDimensions = _this$state5.handleDimensions;
       if (proposedPosition < PERCENT_EMPTY) return false;
@@ -960,35 +591,16 @@ if (proposedPosition > PERCENT_FULL) return false;
       var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
-      if (proposedPosition < prevHandlePosition) return false;
-      return true;
-    }
-  });
-  Object.defineProperty(this, "fireChangeEvent", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value() {
-      var onChange = _this3.props.onChange;
-      if (onChange) onChange(_this3.getPublicState());
-    }
-  });
-  Object.defineProperty(this, "slideTo", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(idx, proposedPosition, onAfterSet) {
-      var nextState = _this3.getNextState(idx, proposedPosition);
+      return proposedPosition >= prevHandlePosition;
+    }), "fireChangeEvent", function () {
+      var onChange = _this.props.onChange;
+      if (onChange) onChange(_this.getPublicState());
+    }), "slideTo", function (idx, proposedPosition, onAfterSet) {
+      var nextState = _this.getNextState(idx, proposedPosition);
 
-      _this3.setState(nextState, function () {
-        var onValuesUpdated = _this3.props.onValuesUpdated;
-        if (onValuesUpdated) onValuesUpdated(_this3.getPublicState());
+      _this.setState(nextState, function () {
+        var onValuesUpdated = _this.props.onValuesUpdated;
+        if (onValuesUpdated) onValuesUpdated(_this.getPublicState());
         if (onAfterSet) onAfterSet();
       });
-    }
-  });
-  Object.defineProperty(this, "updateNewValues", {
-    configurable: true,
-    enumerable: true,
-    writable: true,
-    value: function value(nextProps) {
-      var slidingIndex = _this3.state.slidingIndex; // Don't update while the slider is sliding
+    }), "updateNewValues", function (nextProps) {
+      var slidingIndex = _this.state.slidingIndex; // Don't update while the slider is sliding
 
@@ -1002,7 +614,7 @@ if (slidingIndex !== null) {
           values = nextProps.values;
-      var algorithm = _this3.props.algorithm;
+      var algorithm = _this.props.algorithm;
 
-      var nextValues = _this3.validateValues(values, nextProps);
+      var nextValues = _this.validateValues(values, nextProps);
 
-      _this3.setState({
+      _this.setState({
         handlePos: nextValues.map(function (value) {
@@ -1013,8 +625,147 @@ return algorithm.getPosition(value, min, max);
       }, function () {
-        return _this3.fireChangeEvent();
+        return _this.fireChangeEvent();
       });
+    });
+
+    var _algorithm = _props.algorithm,
+        _max = _props.max,
+        _min = _props.min,
+        _values = _props.values;
+    _this.state = {
+      handlePos: _values.map(function (value) {
+        return _algorithm.getPosition(value, _min, _max);
+      }),
+      handleDimensions: 0,
+      sliderBox: {},
+      slidingIndex: null,
+      values: _values
+    };
+    _this.pitStyleCache = {};
+    return _this;
+  }
+
+  var _proto = Parafoil.prototype;
+
+  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var _this$props7 = this.props,
+        disabled = _this$props7.disabled,
+        min = _this$props7.min,
+        max = _this$props7.max,
+        orientation = _this$props7.orientation,
+        pitPoints = _this$props7.pitPoints,
+        algorithm = _this$props7.algorithm;
+    var _this$state6 = this.state,
+        values = _this$state6.values,
+        slidingIndex = _this$state6.slidingIndex;
+    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.orientation !== orientation;
+    var willBeDisabled = nextProps.disabled && !disabled;
+
+    if (minMaxChanged || valuesChanged) {
+      this.updateNewValues(nextProps);
     }
-  });
-};
 
+    if (minMaxChanged || orientationChanged || nextProps.pitPoints !== pitPoints || nextProps.algorithm !== algorithm) {
+      this.pitStyleCache = {};
+    }
+
+    if (willBeDisabled && slidingIndex !== null) {
+      this.endSlide();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props8 = this.props,
+        algorithm = _this$props8.algorithm,
+        children = _this$props8.children,
+        disabled = _this$props8.disabled,
+        Handle = _this$props8.handle,
+        max = _this$props8.max,
+        min = _this$props8.min,
+        orientation = _this$props8.orientation,
+        PitComponent = _this$props8.pitComponent,
+        pitPoints = _this$props8.pitPoints,
+        ProgressBar = _this$props8.progressBar,
+        className = _this$props8.className,
+        classNameBackground = _this$props8.classNameBackground,
+        classNameHandle = _this$props8.classNameHandle,
+        classNameProgress = _this$props8.classNameProgress;
+    var _this$state7 = this.state,
+        handlePos = _this$state7.handlePos,
+        values = _this$state7.values;
+    return (// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      React.createElement("div", {
+        className: className,
+        ref: this.setRef,
+        onClick: this.handleClick,
+        role: "presentation"
+      }, React.createElement("div", {
+        className: classNameBackground
+      }), PitComponent && pitPoints.map(function (n) {
+        var pitStyle = _this2.pitStyleCache[n];
+
+        if (!pitStyle) {
+          var pos = algorithm.getPosition(n, min, max);
+          pitStyle = orientation === 'vertical' ? {
+            top: pos + "%"
+          } : {
+            left: pos + "%"
+          };
+          _this2.pitStyleCache[n] = pitStyle;
+        }
+
+        return React.createElement(PitComponent, {
+          key: "pit-" + n,
+          style: pitStyle
+        }, n);
+      }), handlePos.map(function (node, idx) {
+        if (idx === 0 && handlePos.length > 1) {
+          return null;
+        }
+
+        return React.createElement(ProgressBar, {
+          className: classNameProgress,
+          key: "progress-bar-" + idx // eslint-disable-line react/no-array-index-key
+          ,
+          style: _this2.getProgressStyle(idx)
+        });
+      }), handlePos.map(function (pos, idx) {
+        var handleStyle = orientation === 'vertical' ? {
+          top: pos + "%"
+        } : {
+          left: pos + "%"
+        };
+        return React.createElement(Handle, {
+          "aria-valuemax": _this2.getMaxValue(idx),
+          "aria-valuemin": _this2.getMinValue(idx),
+          "aria-valuenow": values[idx],
+          "aria-disabled": disabled,
+          "data-handle-key": idx,
+          className: classNameHandle,
+          key: "handle-" + idx // eslint-disable-line react/no-array-index-key
+          ,
+          onClick: _this2.killEvent,
+          onKeyDown: _this2.handleKeydown,
+          onMouseDown: _this2.startMouseSlide,
+          onTouchStart: _this2.startTouchSlide,
+          role: "slider",
+          style: handleStyle,
+          tabIndex: 0
+        });
+      }), children)
+    );
+  };
+
+  _inheritsLoose(Parafoil, _React$Component);
+
+  return Parafoil;
+}(React.Component);
+
+_defineProperty(_defineProperty(Parafoil, "propTypes", propTypes), "defaultProps", defaultProps);
+
 var algorithms = {
@@ -1021,0 +772,0 @@ linear: linear,

package.json

 {
   "name": "parafoil",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Yet another slider for React, but the last you'll ever need.",
@@ -24,25 +24,25 @@ "author": "Josh Perez <[e-mail]>",
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.42",
-    "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-react": "^7.0.0-beta.42",
-    "@babel/preset-stage-3": "^7.0.0-beta.42",
+    "@babel/core": "^7.0.0-beta.46",
+    "@babel/preset-env": "^7.0.0-beta.46",
+    "@babel/preset-react": "^7.0.0-beta.46",
+    "@babel/preset-stage-3": "^7.0.0-beta.46",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.1",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^22.4.3",
     "cross-env": "^5.1.4",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.0",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.4.2",
+    "jest": "^22.4.3",
     "prettier-eslint-cli": "^4.7.1",
     "raf": "^3.4.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
     "rimraf": "^2.6.2",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^4.0.0-beta.3"
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^4.0.0-beta.4"
   },
@@ -49,0 +49,0 @@ "peerDependencies": {

src/Parafoil.js

@@ -23,6 +23,8 @@ /* eslint-disable no-mixed-operators */
         };
+
+        this.pitStyleCache = {};
     }
 
     componentWillReceiveProps(nextProps) {
-        const {disabled, min, max} = this.props;
+        const {disabled, min, max, orientation, pitPoints, algorithm} = this.props;
         const {values, slidingIndex} = this.state;
@@ -35,2 +37,4 @@
 
+        const orientationChanged = nextProps.orientation !== orientation;
+
         const willBeDisabled = nextProps.disabled && !disabled;
@@ -42,2 +46,11 @@
 
+        if (
+            minMaxChanged ||
+            orientationChanged ||
+            nextProps.pitPoints !== pitPoints ||
+            nextProps.algorithm !== algorithm
+        ) {
+            this.pitStyleCache = {};
+        }
+
         if (willBeDisabled && slidingIndex !== null) {
@@ -431,5 +444,3 @@ this.endSlide();
 
-        if (proposedPosition < prevHandlePosition) return false;
-
-        return true;
+        return proposedPosition >= prevHandlePosition;
     };
@@ -497,2 +508,18 @@
                 <div className={classNameBackground} />
+                {PitComponent &&
+                    pitPoints.map((n) => {
+                        let pitStyle = this.pitStyleCache[n];
+
+                        if (!pitStyle) {
+                            const pos = algorithm.getPosition(n, min, max);
+                            pitStyle = orientation === 'vertical' ? {top: `${pos}%`} : {left: `${pos}%`};
+                            this.pitStyleCache[n] = pitStyle;
+                        }
+
+                        return (
+                            <PitComponent key={`pit-${n}`} style={pitStyle}>
+                                {n}
+                            </PitComponent>
+                        );
+                    })}
                 {handlePos.map((node, idx) => {
@@ -531,12 +558,2 @@ if (idx === 0 && handlePos.length > 1) {
                 })}
-                {PitComponent &&
-                    pitPoints.map((n) => {
-                        const pos = algorithm.getPosition(n, min, max);
-                        const pitStyle = orientation === 'vertical' ? {top: `${pos}%`} : {left: `${pos}%`};
-                        return (
-                            <PitComponent key={`pit-${n}`} style={pitStyle}>
-                                {n}
-                            </PitComponent>
-                        );
-                    })}
                 {children}
@@ -543,0 +560,0 @@ </div>

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

Worsened metrics

Total package byte prevSize

161108

decreased by-4.72%

Lines of code

1913

decreased by-19.28%

No dependency changes