@shopgate/pwa-common/components/RangeSlider/index.js

Common library for the Shopgate Connect PWA.

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,{Component}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import styles from"./style";import RangeSliderHandle from"./components/Handle";import{generateLinearEasingCallback,generateExponentialEasingCallback,getRangeStyle,getTouchPositionX,getAbsoluteValue,getRelativeValue}from"./helper";/**
 * The range slider component.
 * @deprecated Will be remove in v7.0.0.
 *             Please use `import { RangeSlider } from '@shopgate/engage/components'` instead.
 */var RangeSlider=/*#__PURE__*/function(_Component){/**
   * 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.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=_this2.domElement,offsetWidth=_this2$domElement.offsetWidth,offsetLeft=_this2$domElement.offsetLeft;// 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*=_this2.domElement.offsetWidth;_this2.setState(stateUpdate,_this2.triggerChangeCallback);});/**
   * Processes global touch end events for handles.
   * @param {Object} e The touch event
   */_defineProperty(_this2,"handleTouchEnd",function(){_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$domElement2=_this2.domElement,offsetWidth=_this2$domElement2.offsetWidth,offsetLeft=_this2$domElement2.offsetLeft;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);});logger.warn('===== RangeSlider deprecated =====\nThe RangeSlider component and it\'s related components (@shopgate/pwa-common/component/RangeSlider) are deprecated and will be removed in @shopgate/engage v7.0.0.\nPlease use: import { RangeSlider } from \'@shopgate/engage/components\'.\n===================================');_this2.draggedHandle=null;// 0 for left handle, 1 for right handle or null
_this2.domElement=null;_this2.touchOffset=0;_this2.draggedHandlePixelOffset=0;// The absolute pixel delta of the last handle move event.
_this2.state=_this2.getRange(props);return _this2;}/**
   * Sets the global event listeners when component mounts.
   */_inherits(RangeSlider,_Component);return _createClass(RangeSlider,[{key:"componentDidMount",value:function componentDidMount(){document.addEventListener('touchend',this.handleTouchEnd);document.addEventListener('touchmove',this.handleTouchMove);}/**
   * Updates the component properties.
   * @param {Object} newProps The new component properties.
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(newProps){this.setState(this.getRange(newProps));}/**
   * Removes the global event listeners when component unmounts.
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){document.removeEventListener('touchend',this.handleTouchEnd);document.removeEventListener('touchmove',this.handleTouchMove);}/**
   * Get the easing function.
   */},{key:"ease",get:function get(){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 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:/**
   * 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);}}/**
   * Creates a new handle component.
   * @param {number} index The index of the component. Must be either 0 or 1.
   * @returns {JSX}
   */},{key:"makeHandle",value:function makeHandle(index){return React.createElement(RangeSliderHandle,{index:index,onTouchStart:this.handleTouchStart,active:this.draggedHandle===index,classNames:this.props.classNames});}/**
   * Renders the component.
   * @returns {JSX}
   */},{key:"render",value:function render(){var _this3=this;// Calculate the animation speed.
var animationSpeed=Math.round(1000/this.props.animationSpeed*this.draggedHandlePixelOffset);var rangeStyle=getRangeStyle(this.state.rangeMin,this.state.rangeMax,animationSpeed>10?animationSpeed:0);return React.createElement("div",{className:"".concat(this.props.classNames.container||''," common__range-slider"),onTouchStart:this.handleRangeTouch},React.createElement("div",{className:"".concat(this.props.classNames.outerRange||''," ").concat(styles.outerRange),ref:function ref(_ref){_this3.domElement=_ref;}},React.createElement("div",{className:"".concat(this.props.classNames.range||''," ").concat(styles.range),style:rangeStyle},this.makeHandle(0),this.makeHandle(1))));}}]);}(Component);_defineProperty(RangeSlider,"defaultProps",{animationSpeed:500,classNames:{},easing:'linear',factor:2,max:100,min:0,resolution:1,value:[0,100],onChange:null});export default RangeSlider;