instantsearch.js 4.55.0 → 4.56.0

package/cjs/components/Slider/Rheostat.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _preact = require("preact");
-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, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 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, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -70,10 +70,16 @@ var _ref6 = (0, _preact.h)("div", {
 var Rheostat = /*#__PURE__*/function (_Component) {
   _inherits(Rheostat, _Component);
   var _super = _createSuper(Rheostat);
-  function Rheostat(props) {
+  function Rheostat() {
     var _this;
     _classCallCheck(this, Rheostat);
-    _this = _super.call(this, props);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "x", [0, 0].map(function (y) {
+      return y;
+    }));
     _defineProperty(_assertThisInitialized(_this), "state", {
       className: getClassName(_this.props),
       // non-null thanks to defaultProps
@@ -88,44 +94,14 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       values: _this.props.values
     });
     _defineProperty(_assertThisInitialized(_this), "rheostat", (0, _preact.createRef)());
-    _this.getPublicState = _this.getPublicState.bind(_assertThisInitialized(_this));
-    _this.getSliderBoundingBox = _this.getSliderBoundingBox.bind(_assertThisInitialized(_this));
-    _this.getProgressStyle = _this.getProgressStyle.bind(_assertThisInitialized(_this));
-    _this.getMinValue = _this.getMinValue.bind(_assertThisInitialized(_this));
-    _this.getMaxValue = _this.getMaxValue.bind(_assertThisInitialized(_this));
-    _this.getHandleDimensions = _this.getHandleDimensions.bind(_assertThisInitialized(_this));
-    _this.getClosestSnapPoint = _this.getClosestSnapPoint.bind(_assertThisInitialized(_this));
-    _this.getSnapPosition = _this.getSnapPosition.bind(_assertThisInitialized(_this));
-    _this.getNextPositionForKey = _this.getNextPositionForKey.bind(_assertThisInitialized(_this));
-    _this.getNextState = _this.getNextState.bind(_assertThisInitialized(_this));
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    _this.getClosestHandle = _this.getClosestHandle.bind(_assertThisInitialized(_this));
-    _this.setStartSlide = _this.setStartSlide.bind(_assertThisInitialized(_this));
-    _this.startMouseSlide = _this.startMouseSlide.bind(_assertThisInitialized(_this));
-    _this.startTouchSlide = _this.startTouchSlide.bind(_assertThisInitialized(_this));
-    _this.handleMouseSlide = _this.handleMouseSlide.bind(_assertThisInitialized(_this));
-    _this.handleTouchSlide = _this.handleTouchSlide.bind(_assertThisInitialized(_this));
-    _this.handleSlide = _this.handleSlide.bind(_assertThisInitialized(_this));
-    _this.endSlide = _this.endSlide.bind(_assertThisInitialized(_this));
-    _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this));
-    _this.validatePosition = _this.validatePosition.bind(_assertThisInitialized(_this));
-    _this.validateValues = _this.validateValues.bind(_assertThisInitialized(_this));
-    _this.canMove = _this.canMove.bind(_assertThisInitialized(_this));
-    _this.fireChangeEvent = _this.fireChangeEvent.bind(_assertThisInitialized(_this));
-    _this.slideTo = _this.slideTo.bind(_assertThisInitialized(_this));
-    _this.updateNewValues = _this.updateNewValues.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(Rheostat, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var _this$props = this.props,
+    _defineProperty(_assertThisInitialized(_this), "componentWillReceiveProps", function (nextProps) {
+      var _this$props = _this.props,
         className = _this$props.className,
         disabled = _this$props.disabled,
         min = _this$props.min,
         max = _this$props.max,
         orientation = _this$props.orientation;
-      var _this$state = this.state,
+      var _this$state = _this.state,
         values = _this$state.values,
         slidingIndex = _this$state.slidingIndex;
       var minMaxChanged = nextProps.min !== min || nextProps.max !== max;
@@ -135,33 +111,29 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       var orientationChanged = nextProps.className !== className || nextProps.orientation !== orientation;
       var willBeDisabled = nextProps.disabled && !disabled;
       if (orientationChanged) {
-        this.setState({
+        _this.setState({
           className: getClassName(nextProps)
         });
       }
-      if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
+      if (minMaxChanged || valuesChanged) _this.updateNewValues(nextProps);
       if (willBeDisabled && slidingIndex !== null) {
-        this.endSlide();
+        _this.endSlide();
       }
-    }
-  }, {
-    key: "getPublicState",
-    value: function getPublicState() {
-      var _this$props2 = this.props,
+    });
+    _defineProperty(_assertThisInitialized(_this), "getPublicState", function () {
+      var _this$props2 = _this.props,
         min = _this$props2.min,
         max = _this$props2.max;
-      var values = this.state.values;
+      var values = _this.state.values;
       return {
         max: max,
         min: min,
         values: values
       };
-    }
-  }, {
-    key: "getSliderBoundingBox",
-    value: function getSliderBoundingBox() {
+    });
+    _defineProperty(_assertThisInitialized(_this), "getSliderBoundingBox", function () {
       // only gets called after render, so it will always be defined
-      var node = this.rheostat.current;
+      var node = _this.rheostat.current;
       var rect = node.getBoundingClientRect();
       return {
         height: rect.height || node.clientHeight,
@@ -169,14 +141,12 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         top: rect.top,
         width: rect.width || node.clientWidth
       };
-    }
-  }, {
-    key: "getProgressStyle",
-    value: function getProgressStyle(idx) {
-      var handlePos = this.state.handlePos;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getProgressStyle", function (idx) {
+      var handlePos = _this.state.handlePos;
       var value = handlePos[idx];
       if (idx === 0) {
-        return this.props.orientation === 'vertical' ? {
+        return _this.props.orientation === 'vertical' ? {
           height: "".concat(value, "%"),
           top: 0
         } : {
@@ -186,63 +156,51 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       }
       var prevValue = handlePos[idx - 1];
       var diffValue = value - prevValue;
-      return this.props.orientation === 'vertical' ? {
+      return _this.props.orientation === 'vertical' ? {
         height: "".concat(diffValue, "%"),
         top: "".concat(prevValue, "%")
       } : {
         left: "".concat(prevValue, "%"),
         width: "".concat(diffValue, "%")
       };
-    }
-  }, {
-    key: "getMinValue",
-    value: function getMinValue(idx) {
-      return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
-    }
-  }, {
-    key: "getMaxValue",
-    value: function getMaxValue(idx) {
-      return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
-    }
-  }, {
-    key: "getHandleDimensions",
-    value: function getHandleDimensions(ev, sliderBox) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "getMinValue", function (idx) {
+      return _this.state.values[idx - 1] ? Math.max(_this.props.min, _this.state.values[idx - 1]) : _this.props.min;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getMaxValue", function (idx) {
+      return _this.state.values[idx + 1] ? Math.min(_this.props.max, _this.state.values[idx + 1]) : _this.props.max;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getHandleDimensions", function (ev, sliderBox) {
       var handleNode = ev.currentTarget || null;
       if (!handleNode) return 0;
-      return this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
-    }
-  }, {
-    key: "getClosestSnapPoint",
-    value: function getClosestSnapPoint(value) {
+      return _this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getClosestSnapPoint", function (value) {
       // non-null thanks to defaultProps
-      if (!this.props.snapPoints.length) return value;
-      return this.props.snapPoints.reduce(function (snapTo, snap) {
+      if (!_this.props.snapPoints.length) return value;
+      return _this.props.snapPoints.reduce(function (snapTo, snap) {
         return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
       });
-    }
-  }, {
-    key: "getSnapPosition",
-    value: function getSnapPosition(positionPercent) {
-      if (!this.props.snap) return positionPercent;
-      var _ref = this.props,
+    });
+    _defineProperty(_assertThisInitialized(_this), "getSnapPosition", function (positionPercent) {
+      if (!_this.props.snap) return positionPercent;
+      var _ref = _this.props,
         max = _ref.max,
         min = _ref.min;
       var value = getValue(positionPercent, min, max);
-      var snapValue = this.getClosestSnapPoint(value);
+      var snapValue = _this.getClosestSnapPoint(value);
       return getPosition(snapValue, min, max);
-    }
-  }, {
-    key: "getNextPositionForKey",
-    value: function getNextPositionForKey(idx, keyCode) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "getNextPositionForKey", function (idx, keyCode) {
       var _stepMultiplier;
-      var _this$state2 = this.state,
+      var _this$state2 = _this.state,
         handlePos = _this$state2.handlePos,
         values = _this$state2.values;
-      var _ref2 = this.props,
+      var _ref2 = _this.props,
         max = _ref2.max,
         min = _ref2.min,
         snapPoints = _ref2.snapPoints;
-      var shouldSnap = this.props.snap;
+      var shouldSnap = _this.props.snap;
       var proposedValue = values[idx];
       var proposedPercentage = handlePos[idx];
       var originalPercentage = proposedPercentage;
@@ -254,7 +212,7 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       }
       var currentIndex = null;
       if (shouldSnap) {
-        currentIndex = snapPoints.indexOf(this.getClosestSnapPoint(values[idx]));
+        currentIndex = snapPoints.indexOf(_this.getClosestSnapPoint(values[idx]));
       }
       var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, KEYS.LEFT, function (v) {
         return v * -1;
@@ -298,15 +256,13 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         return null;
       }
       return shouldSnap ? getPosition(proposedValue, min, max) : proposedPercentage;
-    }
-  }, {
-    key: "getNextState",
-    value: function getNextState(idx, proposedPosition) {
-      var handlePos = this.state.handlePos;
-      var _ref3 = this.props,
+    });
+    _defineProperty(_assertThisInitialized(_this), "getNextState", function (idx, proposedPosition) {
+      var handlePos = _this.state.handlePos;
+      var _ref3 = _this.props,
         max = _ref3.max,
         min = _ref3.min;
-      var actualPosition = this.validatePosition(idx, proposedPosition);
+      var actualPosition = _this.validatePosition(idx, proposedPosition);
       var nextHandlePos = handlePos.map(function (pos, index) {
         return index === idx ? actualPosition : pos;
       });
@@ -316,23 +272,19 @@ var Rheostat = /*#__PURE__*/function (_Component) {
           return getValue(pos, min, max);
         })
       };
-    }
-  }, {
-    key: "getClosestHandle",
-    value: function getClosestHandle(positionPercent) {
-      var handlePos = this.state.handlePos;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getClosestHandle", function (positionPercent) {
+      var handlePos = _this.state.handlePos;
       return handlePos.reduce(function (closestIdx, _node, idx) {
         var challenger = Math.abs(handlePos[idx] - positionPercent);
         var current = Math.abs(handlePos[closestIdx] - positionPercent);
         return challenger < current ? idx : closestIdx;
       }, 0);
-    }
-  }, {
-    key: "setStartSlide",
-    value: function setStartSlide(ev, x, y) {
-      var sliderBox = this.getSliderBoundingBox();
-      this.setState({
-        handleDimensions: this.getHandleDimensions(ev, sliderBox),
+    });
+    _defineProperty(_assertThisInitialized(_this), "setStartSlide", function (ev, x, y) {
+      var sliderBox = _this.getSliderBoundingBox();
+      _this.setState({
+        handleDimensions: _this.getHandleDimensions(ev, sliderBox),
         mousePos: {
           x: x,
           y: y
@@ -340,144 +292,118 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         sliderBox: sliderBox,
         slidingIndex: getHandleFor(ev)
       });
-    }
-  }, {
-    key: "startMouseSlide",
-    value: function startMouseSlide(ev) {
-      this.setStartSlide(ev, ev.clientX, ev.clientY);
-      document.addEventListener('mousemove', this.handleMouseSlide, false);
-      document.addEventListener('mouseup', this.endSlide, false);
+    });
+    _defineProperty(_assertThisInitialized(_this), "startMouseSlide", function (ev) {
+      _this.setStartSlide(ev, ev.clientX, ev.clientY);
+      document.addEventListener('mousemove', _this.handleMouseSlide, false);
+      document.addEventListener('mouseup', _this.endSlide, false);
       killEvent(ev);
-    }
-  }, {
-    key: "startTouchSlide",
-    value: function startTouchSlide(ev) {
+    });
+    _defineProperty(_assertThisInitialized(_this), "startTouchSlide", function (ev) {
       if (ev.changedTouches.length > 1) return;
       var touch = ev.changedTouches[0];
-      this.setStartSlide(ev, touch.clientX, touch.clientY);
-      document.addEventListener('touchmove', this.handleTouchSlide, false);
-      document.addEventListener('touchend', this.endSlide, false);
-      if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+      _this.setStartSlide(ev, touch.clientX, touch.clientY);
+      document.addEventListener('touchmove', _this.handleTouchSlide, false);
+      document.addEventListener('touchend', _this.endSlide, false);
+      if (_this.props.onSliderDragStart) _this.props.onSliderDragStart();
       killEvent(ev);
-    }
-  }, {
-    key: "handleMouseSlide",
-    value: function handleMouseSlide(ev) {
-      if (this.state.slidingIndex === null) return;
-      this.handleSlide(ev.clientX, ev.clientY);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
+      _this.handleSlide(ev.clientX, ev.clientY);
       killEvent(ev);
-    }
-  }, {
-    key: "handleTouchSlide",
-    value: function handleTouchSlide(ev) {
-      if (this.state.slidingIndex === null) return;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTouchSlide", function (ev) {
+      if (_this.state.slidingIndex === null) return;
       if (ev.changedTouches.length > 1) {
-        this.endSlide();
+        _this.endSlide();
         return;
       }
       var touch = ev.changedTouches[0];
-      this.handleSlide(touch.clientX, touch.clientY);
+      _this.handleSlide(touch.clientX, touch.clientY);
       killEvent(ev);
-    }
-  }, {
-    key: "handleSlide",
-    value: function handleSlide(x, y) {
-      var _this$state3 = this.state,
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSlide", function (x, y) {
+      var _this$state3 = _this.state,
         idx = _this$state3.slidingIndex,
         sliderBox = _this$state3.sliderBox;
-      var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
-      this.slideTo(idx, positionPercent);
-      if (this.canMove(idx, positionPercent)) {
+      var positionPercent = _this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
+      _this.slideTo(idx, positionPercent);
+      if (_this.canMove(idx, positionPercent)) {
         // update mouse positions
-        this.setState({
+        _this.setState({
           mousePos: {
             x: x,
             y: y
           }
         });
-        if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+        if (_this.props.onSliderDragMove) _this.props.onSliderDragMove();
       }
-    }
-  }, {
-    key: "endSlide",
-    value: function endSlide() {
-      var _this2 = this;
-      var idx = this.state.slidingIndex;
-      this.setState({
+    });
+    _defineProperty(_assertThisInitialized(_this), "endSlide", function () {
+      var idx = _this.state.slidingIndex;
+      _this.setState({
         slidingIndex: null
       });
-      document.removeEventListener('mouseup', this.endSlide, false);
-      document.removeEventListener('touchend', this.endSlide, false);
-      document.removeEventListener('touchmove', this.handleTouchSlide, false);
-      document.removeEventListener('mousemove', this.handleMouseSlide, false);
-      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 _this2.fireChangeEvent();
+      document.removeEventListener('mouseup', _this.endSlide, false);
+      document.removeEventListener('touchend', _this.endSlide, false);
+      document.removeEventListener('touchmove', _this.handleTouchSlide, false);
+      document.removeEventListener('mousemove', _this.handleMouseSlide, false);
+      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 _this.fireChangeEvent();
         });
       } else {
-        this.fireChangeEvent();
+        _this.fireChangeEvent();
       }
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick(ev) {
-      var _this3 = this;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (ev) {
       if (ev.target.getAttribute('data-handle-key')) {
         return;
       }
 
       // 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 sliderBox = _this.getSliderBoundingBox();
+      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 = this.getClosestHandle(positionPercent);
-      var validPositionPercent = this.getSnapPosition(positionPercent);
+      var handleId = _this.getClosestHandle(positionPercent);
+      var validPositionPercent = _this.getSnapPosition(positionPercent);
 
       // Move the handle there
-      this.slideTo(handleId, validPositionPercent, function () {
-        return _this3.fireChangeEvent();
+      _this.slideTo(handleId, validPositionPercent, function () {
+        return _this.fireChangeEvent();
       });
-      if (this.props.onClick) this.props.onClick();
-    }
-  }, {
-    key: "handleKeydown",
-    value: function handleKeydown(ev) {
-      var _this4 = this;
+      if (_this.props.onClick) _this.props.onClick();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeydown", function (ev) {
       var idx = getHandleFor(ev);
       if (ev.keyCode === KEYS.ESC) {
         ev.currentTarget.blur();
         return;
       }
-      var proposedPercentage = this.getNextPositionForKey(idx, ev.keyCode);
+      var proposedPercentage = _this.getNextPositionForKey(idx, ev.keyCode);
       if (proposedPercentage === null) return;
-      if (this.canMove(idx, proposedPercentage)) {
-        this.slideTo(idx, proposedPercentage, function () {
-          return _this4.fireChangeEvent();
+      if (_this.canMove(idx, proposedPercentage)) {
+        _this.slideTo(idx, proposedPercentage, function () {
+          return _this.fireChangeEvent();
         });
-        if (this.props.onKeyPress) this.props.onKeyPress();
+        if (_this.props.onKeyPress) _this.props.onKeyPress();
       }
       killEvent(ev);
-    }
-
-    // Make sure the proposed position respects the bounds and
-    // does not collide with other handles too much.
-  }, {
-    key: "validatePosition",
-    value: function validatePosition(idx, proposedPosition) {
-      var _this$state4 = this.state,
+    });
+    _defineProperty(_assertThisInitialized(_this), "validatePosition", function (idx, proposedPosition) {
+      var _this$state4 = _this.state,
         handlePos = _this$state4.handlePos,
         handleDimensions = _this$state4.handleDimensions;
       return Math.max(Math.min(proposedPosition, handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : PERCENT_FULL // 100% is the highest value
       ), handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : PERCENT_EMPTY // 0% is the lowest value
       );
-    }
-  }, {
-    key: "validateValues",
-    value: function validateValues(proposedValues, props) {
-      var _ref4 = props || this.props,
+    });
+    _defineProperty(_assertThisInitialized(_this), "validateValues", function (proposedValues, props) {
+      var _ref4 = props || _this.props,
         max = _ref4.max,
         min = _ref4.min;
       return proposedValues.map(function (value, idx, values) {
@@ -487,11 +413,9 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         }
         return realValue;
       });
-    }
-  }, {
-    key: "canMove",
-    value: function canMove(idx, proposedPosition) {
-      var _this$state5 = this.state,
+    });
+    _defineProperty(_assertThisInitialized(_this), "canMove", function (idx, proposedPosition) {
+      var _this$state5 = _this.state,
         handlePos = _this$state5.handlePos,
         handleDimensions = _this$state5.handleDimensions;
       if (proposedPosition < PERCENT_EMPTY) return false;
@@ -501,29 +425,21 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
       if (proposedPosition < prevHandlePosition) return false;
       return true;
-    }
-  }, {
-    key: "fireChangeEvent",
-    value: function fireChangeEvent() {
-      var onChange = this.props.onChange;
-      if (onChange) onChange(this.getPublicState());
-    }
-  }, {
-    key: "slideTo",
-    value: function slideTo(idx, proposedPosition, onAfterSet) {
-      var _this5 = this;
-      var nextState = this.getNextState(idx, proposedPosition);
-      this.setState(nextState, function () {
-        var onValuesUpdated = _this5.props.onValuesUpdated;
-        if (onValuesUpdated) onValuesUpdated(_this5.getPublicState());
+    });
+    _defineProperty(_assertThisInitialized(_this), "fireChangeEvent", function () {
+      var onChange = _this.props.onChange;
+      if (onChange) onChange(_this.getPublicState());
+    });
+    _defineProperty(_assertThisInitialized(_this), "slideTo", function (idx, proposedPosition, onAfterSet) {
+      var nextState = _this.getNextState(idx, proposedPosition);
+      _this.setState(nextState, function () {
+        var onValuesUpdated = _this.props.onValuesUpdated;
+        if (onValuesUpdated) onValuesUpdated(_this.getPublicState());
         if (onAfterSet) onAfterSet();
       });
-    }
-  }, {
-    key: "updateNewValues",
-    value: function updateNewValues(nextProps) {
-      var _this6 = this;
-      var slidingIndex = this.state.slidingIndex;
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateNewValues", function (nextProps) {
+      var slidingIndex = _this.state.slidingIndex;
 
       // Don't update while the slider is sliding
       if (slidingIndex !== null) {
@@ -532,21 +448,18 @@ var Rheostat = /*#__PURE__*/function (_Component) {
       var max = nextProps.max,
         min = nextProps.min,
         values = nextProps.values;
-      var nextValues = this.validateValues(values, nextProps);
-      this.setState({
+      var nextValues = _this.validateValues(values, nextProps);
+      _this.setState({
         handlePos: nextValues.map(function (value) {
           return getPosition(value, min, max);
         }),
         values: nextValues
       }, function () {
-        return _this6.fireChangeEvent();
+        return _this.fireChangeEvent();
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this7 = this;
-      var _ref5 = this.props,
+    });
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      var _ref5 = _this.props,
         children = _ref5.children,
         disabled = _ref5.disabled,
         Handle = _ref5.handle,
@@ -556,14 +469,14 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         PitComponent = _ref5.pitComponent,
         pitPoints = _ref5.pitPoints,
         ProgressBar = _ref5.progressBar; // all required thanks to defaultProps
-      var _this$state6 = this.state,
+      var _this$state6 = _this.state,
         className = _this$state6.className,
         handlePos = _this$state6.handlePos,
         values = _this$state6.values;
       return (0, _preact.h)("div", {
         className: className,
-        ref: this.rheostat,
-        onClick: disabled ? undefined : this.handleClick,
+        ref: _this.rheostat,
+        onClick: disabled ? undefined : _this.handleClick,
         style: {
           position: 'relative'
         }
@@ -576,17 +489,17 @@ var Rheostat = /*#__PURE__*/function (_Component) {
           position: 'absolute'
         };
         return (0, _preact.h)(Handle, {
-          "aria-valuemax": _this7.getMaxValue(idx),
-          "aria-valuemin": _this7.getMinValue(idx),
+          "aria-valuemax": _this.getMaxValue(idx),
+          "aria-valuemin": _this.getMinValue(idx),
           "aria-valuenow": values[idx],
           "aria-disabled": disabled,
           "data-handle-key": idx,
           className: "rheostat-handle",
           key: "handle-".concat(idx),
           onClick: killEvent,
-          onKeyDown: disabled ? undefined : _this7.handleKeydown,
-          onMouseDown: disabled ? undefined : _this7.startMouseSlide,
-          onTouchStart: disabled ? undefined : _this7.startTouchSlide,
+          onKeyDown: disabled ? undefined : _this.handleKeydown,
+          onMouseDown: disabled ? undefined : _this.startMouseSlide,
+          onTouchStart: disabled ? undefined : _this.startTouchSlide,
           role: "slider",
           style: handleStyle,
           tabIndex: 0
@@ -598,7 +511,7 @@ var Rheostat = /*#__PURE__*/function (_Component) {
         return (0, _preact.h)(ProgressBar, {
           className: "rheostat-progress",
           key: "progress-bar-".concat(idx),
-          style: _this7.getProgressStyle(idx)
+          style: _this.getProgressStyle(idx)
         });
       }), PitComponent && pitPoints.map(function (n) {
         var pos = getPosition(n, min, max);
@@ -614,9 +527,10 @@ var Rheostat = /*#__PURE__*/function (_Component) {
           style: pitStyle
         }, n);
       }), children);
-    }
-  }]);
-  return Rheostat;
+    });
+    return _this;
+  }
+  return _createClass(Rheostat);
 }(_preact.Component);
 _defineProperty(Rheostat, "defaultProps", {
   className: '',