@shopgate/pwa-common/components/Backdrop/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 Transition from'react-inline-transition-group';import{toggleBodyScroll}from'@shopgate/engage/styles/helpers';import style from"./style";/**
 * Backdrop component.
 */var Backdrop=/*#__PURE__*/function(_Component){/**
   * @param {Object} props The component props
   */function Backdrop(props){var _this2;_classCallCheck(this,Backdrop);_this2=_callSuper(this,Backdrop,[props]);_this2.bodyScrollRef=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15);return _this2;}/**
   * Sets the initial state for the body scroll lock
   */_inherits(Backdrop,_Component);return _createClass(Backdrop,[{key:"componentDidMount",value:function componentDidMount(){var _this$props=this.props,isVisible=_this$props.isVisible,lockBodyScroll=_this$props.lockBodyScroll;if(lockBodyScroll){toggleBodyScroll(isVisible,this.bodyScrollRef);}}/**
   * Toggles the body scroll lock when the visibility state changes
   * @param {Object} nextProps The next component props
   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){var isVisible=nextProps.isVisible,lockBodyScroll=nextProps.lockBodyScroll;if(isVisible===this.props.isVisible){return;}if(lockBodyScroll){toggleBodyScroll(isVisible,this.bodyScrollRef);}}/**
   * Only update when the `isVisible` prop changes.
   * @param {Object} nextProps The next set of component props.
   * @return {boolean}
   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){return this.props.isVisible!==nextProps.isVisible;}/**
   * Removes the body scroll lock when the component unmounts
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var lockBodyScroll=this.props.lockBodyScroll;if(lockBodyScroll){toggleBodyScroll(false,this.bodyScrollRef);}}/**
   * Renders the component.
   * @returns {JSX}
   */},{key:"render",value:function render(){var opacity=this.props.opacity/100;var transition={base:{background:this.props.color,opacity:0,transition:"opacity ".concat(this.props.duration,"ms ease-out"),zIndex:this.props.level},appear:{opacity:opacity},enter:{opacity:opacity},leave:{opacity:0}};var className="".concat(style," ").concat(this.props.className," common__backdrop");return React.createElement(Transition,{childrenStyles:transition},this.props.isVisible?React.createElement("div",{"data-test-id":"Backdrop","aria-hidden":true,className:className,onClick:this.props.onClick}):null);}}]);}(Component);/**
   * The component prop types.
   * @type {Object}
   */ /**
   * The component default props.
   * @type {Object}
   */_defineProperty(Backdrop,"defaultProps",{className:'',color:'#000',duration:200,isVisible:false,level:2,onClick:function onClick(){},opacity:50,lockBodyScroll:true});export default Backdrop;