@shopgate/pwa-common/components/CountdownTimer/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 padStart from'lodash/padStart';import I18n from"../I18n";/**
 * Creates the appropriate format for a given time period.
 * @param {number} days The remaining days.
 * @param {number} hours The remaining hours.
 * @param {number} minutes The remaining minutes.
 * @param {number} seconds The remaining seconds.
 * @return {Object} String and params for the i18n component
 */export var getFormattedTimeString=function getFormattedTimeString(days,hours,minutes,seconds){var formattedHours=padStart(hours,2,'0');var formattedMinutes=padStart(minutes,2,'0');var formattedSeconds=padStart(seconds,2,'0');var hourlyFormat="".concat(formattedHours,":").concat(formattedMinutes,":").concat(formattedSeconds);return{string:'common.countdown',params:{days:days,time:hourlyFormat}};};/**
 * Creates a formatted duration string for a given time span represented as unix time stamp.
 * @param {number} timeSpanInput The remaining time span (in seconds).
 * @return {Object} String and params for the I18n component
 */var createFormattedTime=function createFormattedTime(timeSpanInput){var timeSpan=Math.max(0,timeSpanInput);// Calculate remaining days, hours, minutes and seconds.
var days=Math.floor(timeSpan/86400);var hours=Math.floor(timeSpan%86400/3600);var minutes=Math.floor(timeSpan%3600/60);var seconds=timeSpan%60;return getFormattedTimeString(days,hours,minutes,seconds);};/**
 * The Countdown timer component.
 */var CountdownTimer=/*#__PURE__*/function(_Component){/**
   * The component constructor.
   * @param {Object} props The component properties.
   */function CountdownTimer(props){var _this2;_classCallCheck(this,CountdownTimer);_this2=_callSuper(this,CountdownTimer,[props]);_this2.intervalHandle=null;_this2.remainingTime=_this2.getRemainingTime();_this2.expired=_this2.remainingTime<=0;// Calculate the initial formatted time string.
_this2.state={formattedTime:createFormattedTime(_this2.remainingTime)};return _this2;}/**
   * Installs a new interval to update the timer if the component did mount.
   */_inherits(CountdownTimer,_Component);return _createClass(CountdownTimer,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;// Install the interval.
this.intervalHandle=setInterval(function(){/**
       * To allow mocked tests of the timing functions and still be able to deal
       * with paused execution, the delta time is expected to be at least 1.
       */_this3.remainingTime=_this3.getRemainingTime();_this3.updateTimer();},1000);}/**
   * Clears the timer interval.
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.intervalHandle){clearInterval(this.intervalHandle);}}/**
   * @returns {number} The remaining time until the timer runs out.
   */},{key:"getRemainingTime",value:function getRemainingTime(){return Math.ceil(this.props.timeout-Date.now()/1000);}/**
   * Updates the formatted time. Will not cause a re-rendering of the component.
   */},{key:"updateTimer",value:function updateTimer(){// Calculate the remaining time until the timer is expired. Also ignore negative durations.
var deltaTime=Math.max(0,this.remainingTime);var isExpired=deltaTime<=0;if(isExpired&&!this.expired){this.expired=true;// Clear the interval.
clearInterval(this.intervalHandle);this.intervalHandle=null;// The timer just expired, invoke the callback.
if(this.props.onExpire){this.props.onExpire();}}this.setState({formattedTime:createFormattedTime(deltaTime)});}/**
   * Renders the element.
   * @return {JSX.Element}
   */},{key:"render",value:function render(){return React.createElement(I18n.Text,{string:this.state.formattedTime.string,params:this.state.formattedTime.params,className:"".concat(this.props.className," common__countdown-timer")});}}]);}(Component);_defineProperty(CountdownTimer,"defaultProps",{className:'',onExpire:null});export default CountdownTimer;