@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/components/RadioGroup/RadioGroup.js

@@ -1,4 +1,58 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}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 _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import RadioGroupContext from"./RadioGroup.context";var styles={root:css({display:'flex',flexDirection:'column'}).toString()};/**
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import RadioGroupContext from "./RadioGroup.context";
+const styles = {
+  root: css({
+    display: 'flex',
+    flexDirection: 'column'
+  }).toString()
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var RadioGroup=function RadioGroup(_ref){var classes=_ref.classes,children=_ref.children,name=_ref.name,disabled=_ref.disabled,valueProp=_ref.value,defaultValue=_ref.defaultValue,onChange=_ref.onChange,Component=_ref.component;var _useState=useState(valueProp||defaultValue),_useState2=_slicedToArray(_useState,2),value=_useState2[0],setValue=_useState2[1];useEffect(function(){setValue(valueProp||defaultValue);},[defaultValue,valueProp]);var handleChange=useCallback(function(event){setValue(event.target.value);if(onChange){onChange(event,event.target.value);}},[onChange]);return React.createElement(RadioGroupContext.Provider,{value:{name:name,onChange:handleChange,value:value,disabled:disabled}},React.createElement(Component,{role:"radiogroup",className:classNames(styles.root,classes.root)},children));};RadioGroup.defaultProps={classes:{},children:null,defaultValue:null,disabled:false,value:null,onChange:null,component:'div'};export default RadioGroup;
+ */
+const RadioGroup = ({
+  classes,
+  children,
+  name,
+  disabled,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  component: Component
+}) => {
+  const [value, setValue] = useState(valueProp || defaultValue);
+  useEffect(() => {
+    setValue(valueProp || defaultValue);
+  }, [defaultValue, valueProp]);
+  const handleChange = useCallback(event => {
+    setValue(event.target.value);
+    if (onChange) {
+      onChange(event, event.target.value);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: {
+      name,
+      onChange: handleChange,
+      value,
+      disabled
+    }
+  }, /*#__PURE__*/React.createElement(Component, {
+    role: "radiogroup",
+    className: classNames(styles.root, classes.root)
+  }, children));
+};
+RadioGroup.defaultProps = {
+  classes: {},
+  children: null,
+  defaultValue: null,
+  disabled: false,
+  value: null,
+  onChange: null,
+  component: 'div'
+};
+export default RadioGroup;

package/components/RadioGroup/index.js

@@ -1 +1,2 @@
-export{default}from"./RadioGroup";export{default as useRadioGroup}from"./useRadioGroup";
+export { default } from "./RadioGroup";
+export { default as useRadioGroup } from "./useRadioGroup";

package/components/RadioGroup/useRadioGroup.js

@@ -1,4 +1,10 @@
-import{useContext}from'react';import RadioGroupContext from"./RadioGroup.context";/**
+import { useContext } from 'react';
+import RadioGroupContext from "./RadioGroup.context";
+
+/**
  * Provides a radio group context
  * @returns {Object}
- */export default function useRadioGroup(){return useContext(RadioGroupContext);}
+ */
+export default function useRadioGroup() {
+  return useContext(RadioGroupContext);
+}

package/components/RangeSlider/components/Handle/index.js

@@ -1,4 +1,10 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import cxs from 'classnames';
+import styles from "./style";
+
+/**
  * The range slider handle component.
  * @param {Object} props The component properties
  * @param {boolean} props.active Whether this handle is currently touched or was recently touched.
@@ -6,4 +12,33 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {Function} props.onTouchStart The touch start event callback.
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
- */var RangeSliderHandle=function RangeSliderHandle(props){var active=props.active,index=props.index,onTouchStart=props.onTouchStart,classNames=props.classNames,useMouseEvents=props.useMouseEvents;var style={zIndex:Number(active)||0};var eventHandler=_defineProperty({},useMouseEvents?'onMouseDown':'onTouchStart',function(event){return onTouchStart(event,index);});return React.createElement("div",_extends({className:cxs(classNames.handleOuter,styles,'engage__range-slider__handle'),style:style},eventHandler),React.createElement("div",{className:classNames.handleInner}));};RangeSliderHandle.defaultProps={active:false,classNames:{handleOuter:null,handleInner:null}};export default RangeSliderHandle;
+ */
+const RangeSliderHandle = props => {
+  const {
+    active,
+    index,
+    onTouchStart,
+    classNames,
+    useMouseEvents
+  } = props;
+  const style = {
+    zIndex: Number(active) || 0
+  };
+  const eventHandler = {
+    [useMouseEvents ? 'onMouseDown' : 'onTouchStart']: event => onTouchStart(event, index)
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cxs(classNames.handleOuter, styles, 'engage__range-slider__handle'),
+    style: style
+  }, eventHandler), /*#__PURE__*/React.createElement("div", {
+    className: classNames.handleInner
+  }));
+};
+RangeSliderHandle.defaultProps = {
+  active: false,
+  classNames: {
+    handleOuter: null,
+    handleInner: null
+  }
+};
+export default RangeSliderHandle;

package/components/RangeSlider/components/Handle/style.js

@@ -1 +1,15 @@
-import{css}from'glamor';export default css({top:'50%',position:'absolute',cursor:'pointer',':first-child':{left:0,transform:'translate(-50%, -50%)'},':last-child':{left:'auto',right:0,transform:'translate(50%, -50%)'}}).toString();
+import { css } from 'glamor';
+export default css({
+  top: '50%',
+  position: 'absolute',
+  cursor: 'pointer',
+  ':first-child': {
+    left: 0,
+    transform: 'translate(-50%, -50%)'
+  },
+  ':last-child': {
+    left: 'auto',
+    right: 0,
+    transform: 'translate(50%, -50%)'
+  }
+}).toString();

package/components/RangeSlider/helper.js

@@ -3,30 +3,60 @@
  * @param {number} relativeValue The relative value between [0...1].
  * @param {number} resolution The resolution, must be a value between [0,1...1].
  * @returns {number} The interpolated value.
- */var easeLinear=function easeLinear(relativeValue,resolution){var inverseResolution=1.0/resolution;return relativeValue*inverseResolution/inverseResolution;};/**
+ */
+const easeLinear = (relativeValue, resolution) => {
+  const inverseResolution = 1.0 / resolution;
+  return relativeValue * inverseResolution / inverseResolution;
+};
+
+/**
  * Generates a linear easing callback.
  * @param {number} resolution The discrete step size.
  * @returns {Function} The generated callback.
- */export var generateLinearEasingCallback=function generateLinearEasingCallback(){var resolution=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0.1;return function(relativeValue){return easeLinear(relativeValue,resolution);};};/**
+ */
+export const generateLinearEasingCallback = (resolution = 0.1) => relativeValue => easeLinear(relativeValue, resolution);
+
+/**
  * The exponential easing callback.
  * @param {number} relativeValue The relative value between [0...1].
  * @param {number} factor The exponential scale factor.
  * @returns {number} The interpolated value.
- */var easeExponential=function easeExponential(relativeValue,factor){return Math.pow(relativeValue,factor);};/**
+ */
+const easeExponential = (relativeValue, factor) => relativeValue ** factor;
+
+/**
  * Generates an exponential easing callback.
  * @param {number} factor The exponential scale factor.
  * @returns {Function} The generated callback.
- */export var generateExponentialEasingCallback=function generateExponentialEasingCallback(){var factor=arguments.length>0&&arguments[0]!==undefined?arguments[0]:2.5;return function(relativeValue){return easeExponential(relativeValue,factor);};};/**
+ */
+export const generateExponentialEasingCallback = (factor = 2.5) => relativeValue => easeExponential(relativeValue, factor);
+
+/**
  * Converts a range of [0...1] into a style object.
  * @param {number} min A value in interval [0...1]
  * @param {number} max A value in interval [0...1]
  * @param {number} transitionDuration The duration of the transition.
  * @returns {Object} The generated style object
- */export var getRangeStyle=function getRangeStyle(min,max,transitionDuration){return{left:"".concat(Math.min(1,Math.max(0,min))*100,"%"),right:"".concat((1-Math.min(1,Math.max(0,max)))*100,"%"),transition:transitionDuration>0?"left ".concat(transitionDuration,"ms, right ").concat(transitionDuration,"ms"):null};};/**
+ */
+export const getRangeStyle = (min, max, transitionDuration) => ({
+  left: `${Math.min(1, Math.max(0, min)) * 100}%`,
+  right: `${(1 - Math.min(1, Math.max(0, max))) * 100}%`,
+  transition: transitionDuration > 0 ? `left ${transitionDuration}ms, right ${transitionDuration}ms` : null
+});
+
+/**
  * Shortcut for retrieving x position of a touch or mouse event.
  * @param {Event} event The event
  * @returns {number} The x position
- */export var getTouchPositionX=function getTouchPositionX(event){if(event.touches){return event.touches[0].pageX;}return event.pageX;};/**
+ */
+export const getTouchPositionX = event => {
+  if (event.touches) {
+    return event.touches[0].pageX;
+  }
+  return event.pageX;
+};
+
+/**
  * Converts a relative slider value into an absolute value.
  * A relative value is a value between [0...1] indicating the position
  * on the slider given its absolute width.
@@ -37,7 +67,13 @@
  * @param {number} max The maximum.
  * @param {boolean} allowRealValues Whether the value should be rounded to the nearest integer.
  * @returns {number} The converted absolute value.
- */export var getAbsoluteValue=function getAbsoluteValue(value,min,max){var allowRealValues=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var result=min+(max-min)*value;return Math.min(max,Math.max(min,allowRealValues?result:Math.round(result)));};/**
+ */
+export const getAbsoluteValue = (value, min, max, allowRealValues = false) => {
+  const result = min + (max - min) * value;
+  return Math.min(max, Math.max(min, allowRealValues ? result : Math.round(result)));
+};
+
+/**
  * Converts an absolute slider value into a relative value.
  * An absolute value is a value in screen space coordinates. This value must be
  * between [0...offsetWidth] of the price range slider.
@@ -47,4 +83,8 @@
  * @param {number} min The minimum.
  * @param {number} max The maximum.
  * @returns {number} The converted relative value.
- */export var getRelativeValue=function getRelativeValue(value,min,max){var result=(value-min)/(max-min);return Math.min(1,Math.max(0,result));};
+ */
+export const getRelativeValue = (value, min, max) => {
+  const result = (value - min) / (max - min);
+  return Math.min(1, Math.max(0, result));
+};

package/components/RangeSlider/index.js

@@ -1,54 +1,280 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import cxs from'classnames';import styles from"./style";import Handle from"./components/Handle";import{isTouchDevice}from"../../core";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import cxs from 'classnames';
+import styles from "./style";
+import Handle from "./components/Handle";
+import { isTouchDevice } from "../../core";
+import { generateLinearEasingCallback, generateExponentialEasingCallback, getRangeStyle, getTouchPositionX, getAbsoluteValue, getRelativeValue } from "./helper";
+
+/**
  * The range slider component.
- */var RangeSlider=/*#__PURE__*/function(_PureComponent){/**
+ */
+class RangeSlider extends PureComponent {
+  /**
    * Constructor
    * @param {Object} props The component properties
-   */function RangeSlider(props){var _this2;_classCallCheck(this,RangeSlider);_this2=_callSuper(this,RangeSlider,[props]);/**
-   * Processes touch start events on handles.
-   * @param {Object} event The touch event
-   * @param {number} index The index of the touched handle.
-   */_defineProperty(_this2,"handleTouchStart",function(event,index){_this2.addEventListeners();_this2.draggedHandle=index;// Calculate the relative offset to the handles center
-var handleDOMElement=event.target;// Get the handles bounding rectangle ...
-var handleRect=handleDOMElement.getBoundingClientRect();// ... and calculate its absolute center.
-var handleCenterX=handleRect.left+handleDOMElement.offsetWidth/2;// Store the signed distanced between the current touch offset and the handle center.
-_this2.touchOffset=getTouchPositionX(event)-handleCenterX;});/**
-   * Processes move events on handles.
-   * @param {Object} event The touch event
-   */_defineProperty(_this2,"handleTouchMove",function(event){if(_this2.props.min===_this2.props.max){return;}if(_this2.draggedHandle===null){return;}var _this2$domElement$cur=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur.width,offsetLeft=_this2$domElement$cur.left;// Calculate the absolute offset where the element was touched...
-var deltaX=getTouchPositionX(event)-offsetLeft-_this2.touchOffset;// ...and convert it into a relative value between [0...1].
-deltaX=Math.max(0,Math.min(1,deltaX/offsetWidth));var stateUpdate={};if(_this2.draggedHandle===1){// Right handle dragged
-if(_this2.state.rangeMin<deltaX){stateUpdate.rangeMax=Math.min(1,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}else{// Not in valid range, swap handles
-_this2.draggedHandle=0;stateUpdate.rangeMax=_this2.state.rangeMin;stateUpdate.rangeMin=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}}else if(_this2.draggedHandle===0){// Left handle dragged
-if(_this2.state.rangeMax>deltaX){stateUpdate.rangeMin=Math.max(0,deltaX);_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMin-_this2.state.rangeMin);}else{// Not in valid range, swap handles
-_this2.draggedHandle=1;stateUpdate.rangeMin=_this2.state.rangeMax;stateUpdate.rangeMax=deltaX;_this2.draggedHandlePixelOffset=Math.abs(stateUpdate.rangeMax-_this2.state.rangeMax);}}_this2.draggedHandlePixelOffset*=offsetWidth;_this2.setState(stateUpdate,_this2.triggerChangeCallback);});/**
-   * Processes global touch end events for handles.
-   * @param {Object} e The touch event
-   */_defineProperty(_this2,"handleTouchEnd",function(){_this2.removeEventListeners();_this2.touchOffset=0;_this2.draggedHandle=null;});/**
-   * Processes outer range touch end events.
-   * @param {Object} event The touch event
-   */_defineProperty(_this2,"handleRangeTouch",function(event){var _this2$domElement$cur2=_this2.domElement.current.getBoundingClientRect(),offsetWidth=_this2$domElement$cur2.width,offsetLeft=_this2$domElement$cur2.left;var dx=(getTouchPositionX(event)-offsetLeft)/offsetWidth;var d0=Math.abs(_this2.state.rangeMin-dx);var d1=Math.abs(_this2.state.rangeMax-dx);if(d0<d1){_this2.draggedHandle=0;}else{_this2.draggedHandle=1;}_this2.handleTouchMove(event);});/**
-   * Processes the input field values.
-   * @param {Object} event The change event.
-   */_defineProperty(_this2,"handleInputChange",function(event){var max=_this2.props.max;var _event$target=event.target,value=_event$target.value,id=_event$target.id;var delta=Math.max(0,Math.min(1,value/(max/100)));var state=id==='price_from'?{rangeMin:delta}:{rangeMax:delta};_this2.setState(state);});_this2.draggedHandle=null;// 0 for left handle, 1 for right handle or null
-_this2.domElement=React.createRef();_this2.touchOffset=0;_this2.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
-_this2.state=_this2.getRange(props);_this2.useMouseEvents=!isTouchDevice();return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Processes touch start events on handles.
+     * @param {Object} event The touch event
+     * @param {number} index The index of the touched handle.
+     */
+    this.handleTouchStart = (event, index) => {
+      this.addEventListeners();
+      this.draggedHandle = index;
+
+      // Calculate the relative offset to the handles center
+      const handleDOMElement = event.target;
+      // Get the handles bounding rectangle ...
+      const handleRect = handleDOMElement.getBoundingClientRect();
+      // ... and calculate its absolute center.
+      const handleCenterX = handleRect.left + handleDOMElement.offsetWidth / 2;
+      // Store the signed distanced between the current touch offset and the handle center.
+      this.touchOffset = getTouchPositionX(event) - handleCenterX;
+    };
+    /**
+     * Processes move events on handles.
+     * @param {Object} event The touch event
+     */
+    this.handleTouchMove = event => {
+      if (this.props.min === this.props.max) {
+        return;
+      }
+      if (this.draggedHandle === null) {
+        return;
+      }
+      const {
+        width: offsetWidth,
+        left: offsetLeft
+      } = this.domElement.current.getBoundingClientRect();
+
+      // Calculate the absolute offset where the element was touched...
+      let deltaX = getTouchPositionX(event) - offsetLeft - this.touchOffset;
+
+      // ...and convert it into a relative value between [0...1].
+      deltaX = Math.max(0, Math.min(1, deltaX / offsetWidth));
+      const stateUpdate = {};
+      if (this.draggedHandle === 1) {
+        // Right handle dragged
+        if (this.state.rangeMin < deltaX) {
+          stateUpdate.rangeMax = Math.min(1, deltaX);
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+        } else {
+          // Not in valid range, swap handles
+          this.draggedHandle = 0;
+          stateUpdate.rangeMax = this.state.rangeMin;
+          stateUpdate.rangeMin = deltaX;
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+        }
+      } else if (this.draggedHandle === 0) {
+        // Left handle dragged
+        if (this.state.rangeMax > deltaX) {
+          stateUpdate.rangeMin = Math.max(0, deltaX);
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMin - this.state.rangeMin);
+        } else {
+          // Not in valid range, swap handles
+          this.draggedHandle = 1;
+          stateUpdate.rangeMin = this.state.rangeMax;
+          stateUpdate.rangeMax = deltaX;
+          this.draggedHandlePixelOffset = Math.abs(stateUpdate.rangeMax - this.state.rangeMax);
+        }
+      }
+      this.draggedHandlePixelOffset *= offsetWidth;
+      this.setState(stateUpdate, this.triggerChangeCallback);
+    };
+    /**
+     * Processes global touch end events for handles.
+     * @param {Object} e The touch event
+     */
+    this.handleTouchEnd = () => {
+      this.removeEventListeners();
+      this.touchOffset = 0;
+      this.draggedHandle = null;
+    };
+    /**
+     * Processes outer range touch end events.
+     * @param {Object} event The touch event
+     */
+    this.handleRangeTouch = event => {
+      const {
+        width: offsetWidth,
+        left: offsetLeft
+      } = this.domElement.current.getBoundingClientRect();
+      const dx = (getTouchPositionX(event) - offsetLeft) / offsetWidth;
+      const d0 = Math.abs(this.state.rangeMin - dx);
+      const d1 = Math.abs(this.state.rangeMax - dx);
+      if (d0 < d1) {
+        this.draggedHandle = 0;
+      } else {
+        this.draggedHandle = 1;
+      }
+      this.handleTouchMove(event);
+    };
+    /**
+     * Processes the input field values.
+     * @param {Object} event The change event.
+     */
+    this.handleInputChange = event => {
+      const {
+        max
+      } = this.props;
+      const {
+        value,
+        id
+      } = event.target;
+      const delta = Math.max(0, Math.min(1, value / (max / 100)));
+      const state = id === 'price_from' ? {
+        rangeMin: delta
+      } : {
+        rangeMax: delta
+      };
+      this.setState(state);
+    };
+    this.draggedHandle = null; // 0 for left handle, 1 for right handle or null
+    this.domElement = /*#__PURE__*/React.createRef();
+    this.touchOffset = 0;
+    this.draggedHandlePixelOffset = 0; // The absolute pixel delta of the last handle move event.
+
+    this.state = this.getRange(props);
+    this.useMouseEvents = !isTouchDevice();
+  }
+
+  /**
    * Updates the component properties.
    * @param {Object} newProps The new component properties.
-   */_inherits(RangeSlider,_PureComponent);return _createClass(RangeSlider,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
+   */
+  UNSAFE_componentWillReceiveProps(newProps) {
+    this.setState(this.getRange(newProps));
+  }
+
+  /**
    * Get the easing function.
-   */},{key:"ease",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(this.props.factor)}[this.props.easing];}/**
+   */
+  get ease() {
+    return {
+      linear: generateLinearEasingCallback(this.props.resolution),
+      exponential: generateExponentialEasingCallback(this.props.factor)
+    }[this.props.easing];
+  }
+
+  /**
    * Get the function to invert an eased value to it's original value.
-   */},{key:"invertedEase",get:function get(){return{linear:generateLinearEasingCallback(this.props.resolution),exponential:generateExponentialEasingCallback(1/this.props.factor)}[this.props.easing];}/**
+   */
+  get invertedEase() {
+    return {
+      linear: generateLinearEasingCallback(this.props.resolution),
+      exponential: generateExponentialEasingCallback(1 / this.props.factor)
+    }[this.props.easing];
+  }
+
+  /**
    * Adds event listeners
-   */},{key:"addEventListeners",value:function addEventListeners(){if(this.useMouseEvents){document.addEventListener('mouseup',this.handleTouchEnd);document.addEventListener('mousemove',this.handleTouchMove);}else{document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}}/**
+   */
+  addEventListeners() {
+    if (this.useMouseEvents) {
+      document.addEventListener('mouseup', this.handleTouchEnd);
+      document.addEventListener('mousemove', this.handleTouchMove);
+    } else {
+      document.addEventListener('touchend', this.handleTouchEnd);
+      document.addEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
+  /**
    * Removes event listeners
-   */},{key:"removeEventListeners",value:function removeEventListeners(){if(this.useMouseEvents){document.removeEventListener('mouseup',this.handleTouchEnd);document.removeEventListener('mousemove',this.handleTouchMove);}else{document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}}/**
+   */
+  removeEventListeners() {
+    if (this.useMouseEvents) {
+      document.removeEventListener('mouseup', this.handleTouchEnd);
+      document.removeEventListener('mousemove', this.handleTouchMove);
+    } else {
+      document.removeEventListener('touchend', this.handleTouchEnd);
+      document.removeEventListener('touchmove', this.handleTouchMove);
+    }
+  }
+
+  /**
    * Get range min and max from props.
    * @param {Object} props The component props.
    * @returns {Object} The new state
-   */},{key:"getRange",value:function getRange(props){var value=props.value,min=props.min,max=props.max;return{rangeMin:this.invertedEase(getRelativeValue(value[0],min,max)),rangeMax:this.invertedEase(getRelativeValue(value[1],min,max))};}},{key:"triggerChangeCallback",value:/**
+   */
+  getRange(props) {
+    const {
+      value,
+      min,
+      max
+    } = props;
+    return {
+      rangeMin: this.invertedEase(getRelativeValue(value[0], min, max)),
+      rangeMax: this.invertedEase(getRelativeValue(value[1], min, max))
+    };
+  }
+  /**
    * Calls the change callback in case of a state update.
-   */function triggerChangeCallback(){var _this$props=this.props,value=_this$props.value,onChange=_this$props.onChange,min=_this$props.min,max=_this$props.max;if(!onChange){return;}var newRange=[getAbsoluteValue(this.ease(this.state.rangeMin),min,max,true),getAbsoluteValue(this.ease(this.state.rangeMax),min,max,true)];if(newRange!==value){onChange(newRange);}}/**
+   */
+  triggerChangeCallback() {
+    const {
+      value,
+      onChange,
+      min,
+      max
+    } = this.props;
+    if (!onChange) {
+      return;
+    }
+    const newRange = [getAbsoluteValue(this.ease(this.state.rangeMin), min, max, true), getAbsoluteValue(this.ease(this.state.rangeMax), min, max, true)];
+    if (newRange !== value) {
+      onChange(newRange);
+    }
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this$props2=this.props,classNames=_this$props2.classNames,animationSpeed=_this$props2.animationSpeed;var speed=Math.round(1000/animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,speed>10?speed:0);return React.createElement("div",{className:cxs(classNames.container,'engage__range-slider'),onMouseDown:this.handleRangeTouch,"aria-hidden":true},React.createElement("div",{className:cxs(classNames.outerRange,styles.outerRange),ref:this.domElement},React.createElement("div",{className:cxs(classNames.range,styles.range),style:rangeStyle},React.createElement(Handle,{index:0,onTouchStart:this.handleTouchStart,active:this.draggedHandle===0,classNames:classNames,useMouseEvents:this.useMouseEvents}),React.createElement(Handle,{index:1,onTouchStart:this.handleTouchStart,active:this.draggedHandle===1,classNames:classNames,useMouseEvents:this.useMouseEvents}))));}}]);}(PureComponent);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;
+   */
+  render() {
+    const {
+      classNames,
+      animationSpeed
+    } = this.props;
+    const speed = Math.round(1000 / animationSpeed * this.draggedHandlePixelOffset);
+    const rangeStyle = getRangeStyle(this.state.rangeMin, this.state.rangeMax, speed > 10 ? speed : 0);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cxs(classNames.container, 'engage__range-slider'),
+      onMouseDown: this.handleRangeTouch,
+      "aria-hidden": true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cxs(classNames.outerRange, styles.outerRange),
+      ref: this.domElement
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cxs(classNames.range, styles.range),
+      style: rangeStyle
+    }, /*#__PURE__*/React.createElement(Handle, {
+      index: 0,
+      onTouchStart: this.handleTouchStart,
+      active: this.draggedHandle === 0,
+      classNames: classNames,
+      useMouseEvents: this.useMouseEvents
+    }), /*#__PURE__*/React.createElement(Handle, {
+      index: 1,
+      onTouchStart: this.handleTouchStart,
+      active: this.draggedHandle === 1,
+      classNames: classNames,
+      useMouseEvents: this.useMouseEvents
+    }))));
+  }
+}
+RangeSlider.defaultProps = {
+  animationSpeed: 500,
+  classNames: {},
+  easing: 'linear',
+  factor: 2,
+  max: 100,
+  min: 0,
+  resolution: 1,
+  value: [0, 100],
+  onChange: null
+};
+export default RangeSlider;