@shopgate/pwa-common 7.30.0-alpha.6 → 7.30.0-alpha.8

package/components/Checkbox/spec.js

@@ -1,7 +1,98 @@
-import React from'react';import{shallow}from'enzyme';import Checkbox from"./index";/**
+import React from 'react';
+import { shallow } from 'enzyme';
+import Checkbox from "./index";
+
+/**
  * Checked Icon
  * @returns {JSX}
- */var Checked=function Checked(){return React.createElement("div",null);};/**
+ */
+const Checked = () => /*#__PURE__*/React.createElement("div", null);
+
+/**
  * Unchecked Icon
  * @returns {JSX}
- */var Unchecked=function Unchecked(){return React.createElement("div",null);};describe('<Checkbox />',function(){it('should render the checkbox with the label before the icon',function(){var wrapper=shallow(React.createElement(Checkbox,{label:React.createElement("span",null,"Test Label Deluxe"),labelPosition:"left",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null),checked:false}));var expected=React.createElement("div",null,React.createElement("span",null,"Test Label Deluxe"),React.createElement(Unchecked,null));expect(wrapper).toMatchSnapshot();expect(wrapper.matchesElement(expected)).toBeTruthy();});it('should render the checkbox with the label after the icon',function(){var wrapper=shallow(React.createElement(Checkbox,{label:React.createElement("span",null,"Test Label Deluxe"),labelPosition:"right",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null),checked:false}));var expected=React.createElement("div",null,React.createElement(Unchecked,null),React.createElement("span",null,"Test Label Deluxe"));expect(wrapper).toMatchSnapshot();expect(wrapper.matchesElement(expected)).toBeTruthy();});it('should render the unchecked icon if "checked" is false',function(){var wrapper=shallow(React.createElement(Checkbox,{checked:false,label:"Test Label Deluxe",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null)}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Checked).length).toBe(0);expect(wrapper.find(Unchecked).length).toBe(1);});it('should render the unchecked icon if "checked" is false',function(){var wrapper=shallow(React.createElement(Checkbox,{checked:true,label:"Test Label Deluxe",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null)}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Checked).length).toBe(1);expect(wrapper.find(Unchecked).length).toBe(0);});it('should call the callback with the inverted value',function(){var spy=jest.fn();var wrapper=shallow(React.createElement(Checkbox,{label:"Test Label Deluxe",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null),checked:false,onCheck:spy}));wrapper.simulate('click');expect(spy).toHaveBeenCalledWith(true);});it('should render an <input> element if a name prop is provided',function(){var wrapper=shallow(React.createElement(Checkbox,{label:"Test Label Deluxe",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null),defaultChecked:false,name:"myCheckbox"}));var input=wrapper.find('input');expect(input.length).toBe(1);expect(input.prop('name')).toEqual('myCheckbox');expect(input.prop('value')).toEqual(0);});it('should work as an uncontrolled input',function(){var wrapper=shallow(React.createElement(Checkbox,{label:"Test Label Deluxe",checkedIcon:React.createElement(Checked,null),uncheckedIcon:React.createElement(Unchecked,null),defaultChecked:false}));wrapper.simulate('click');expect(wrapper.state('checked')).toBe(true);});});
+ */
+const Unchecked = () => /*#__PURE__*/React.createElement("div", null);
+describe('<Checkbox />', () => {
+  it('should render the checkbox with the label before the icon', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      label: /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"),
+      labelPosition: "left",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checked: false
+    }));
+    const expected = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"), /*#__PURE__*/React.createElement(Unchecked, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.matchesElement(expected)).toBeTruthy();
+  });
+  it('should render the checkbox with the label after the icon', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      label: /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"),
+      labelPosition: "right",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checked: false
+    }));
+    const expected = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Unchecked, null), /*#__PURE__*/React.createElement("span", null, "Test Label Deluxe"));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.matchesElement(expected)).toBeTruthy();
+  });
+  it('should render the unchecked icon if "checked" is false', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      checked: false,
+      label: "Test Label Deluxe",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null)
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Checked).length).toBe(0);
+    expect(wrapper.find(Unchecked).length).toBe(1);
+  });
+  it('should render the unchecked icon if "checked" is false', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      checked: true,
+      label: "Test Label Deluxe",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null)
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Checked).length).toBe(1);
+    expect(wrapper.find(Unchecked).length).toBe(0);
+  });
+  it('should call the callback with the inverted value', () => {
+    const spy = jest.fn();
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      label: "Test Label Deluxe",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      checked: false,
+      onCheck: spy
+    }));
+    wrapper.simulate('click');
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+  it('should render an <input> element if a name prop is provided', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      label: "Test Label Deluxe",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      defaultChecked: false,
+      name: "myCheckbox"
+    }));
+    const input = wrapper.find('input');
+    expect(input.length).toBe(1);
+    expect(input.prop('name')).toEqual('myCheckbox');
+    expect(input.prop('value')).toEqual(0);
+  });
+  it('should work as an uncontrolled input', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Checkbox, {
+      label: "Test Label Deluxe",
+      checkedIcon: /*#__PURE__*/React.createElement(Checked, null),
+      uncheckedIcon: /*#__PURE__*/React.createElement(Unchecked, null),
+      defaultChecked: false
+    }));
+    wrapper.simulate('click');
+    expect(wrapper.state('checked')).toBe(true);
+  });
+});

package/components/Consume/helpers/buildParams.js

@@ -1,7 +1,18 @@
-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 get from'lodash/get';/**
+import get from 'lodash/get';
+
+/**
  * Searches an object for the given paths.
  * Returns a new object with the values found at the end of each path.
  * @param {Object} obj The object to look through.
  * @param {Object} paths A set of paths to find inside the object.
  * @returns {Object}
- */var buildParams=function buildParams(obj,paths){var params={};Object.entries(paths).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),prop=_ref2[0],path=_ref2[1];var value=get(obj,path);params[prop]=typeof value!=='undefined'?value:null;});return params;};export default buildParams;
+ */
+const buildParams = (obj, paths) => {
+  const params = {};
+  Object.entries(paths).forEach(([prop, path]) => {
+    const value = get(obj, path);
+    params[prop] = typeof value !== 'undefined' ? value : null;
+  });
+  return params;
+};
+export default buildParams;

package/components/Consume/index.js

@@ -1,6 +1,18 @@
-import React from'react';import PropTypes from'prop-types';import buildParams from"./helpers/buildParams";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import buildParams from "./helpers/buildParams";
+
+/**
  * @param {Function} props.children The child function to call.
  * @param {Object} props.context The react context.
  * @param {Object} props.props The props to create.
  * @returns {JSX}
- */var Consume=function Consume(_ref){var children=_ref.children,Consumer=_ref.context.Consumer,props=_ref.props;return React.createElement(Consumer,null,function(value){return children(buildParams(value,props));});};export default Consume;
+ */
+const Consume = ({
+  children,
+  context: {
+    Consumer
+  },
+  props
+}) => /*#__PURE__*/React.createElement(Consumer, null, value => children(buildParams(value, props)));
+export default Consume;

package/components/CountdownTimer/index.js

@@ -1,37 +1,135 @@
-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";/**
+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}};};/**
+ */
+export const getFormattedTimeString = (days, hours, minutes, seconds) => {
+  const formattedHours = padStart(hours, 2, '0');
+  const formattedMinutes = padStart(minutes, 2, '0');
+  const formattedSeconds = padStart(seconds, 2, '0');
+  const hourlyFormat = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+  return {
+    string: 'common.countdown',
+    params: {
+      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);};/**
+ */
+const createFormattedTime = timeSpanInput => {
+  const timeSpan = Math.max(0, timeSpanInput);
+
+  // Calculate remaining days, hours, minutes and seconds.
+  const days = Math.floor(timeSpan / 86400);
+  const hours = Math.floor(timeSpan % 86400 / 3600);
+  const minutes = Math.floor(timeSpan % 3600 / 60);
+  const seconds = timeSpan % 60;
+  return getFormattedTimeString(days, hours, minutes, seconds);
+};
+
+/**
  * The Countdown timer component.
- */var CountdownTimer=/*#__PURE__*/function(_Component){/**
+ */
+class CountdownTimer extends 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;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.intervalHandle = null;
+    this.remainingTime = this.getRemainingTime();
+    this.expired = this.remainingTime <= 0;
+
+    // Calculate the initial formatted time string.
+    this.state = {
+      formattedTime: createFormattedTime(this.remainingTime)
+    };
+  }
+
+  /**
    * 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(){/**
+   */
+  componentDidMount() {
+    // Install the interval.
+    this.intervalHandle = setInterval(() => {
+      /**
        * 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);}/**
+       */
+      this.remainingTime = this.getRemainingTime();
+      this.updateTimer();
+    }, 1000);
+  }
+
+  /**
    * Clears the timer interval.
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.intervalHandle){clearInterval(this.intervalHandle);}}/**
+   */
+  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);}/**
+   */
+  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)});}/**
+   */
+  updateTimer() {
+    // Calculate the remaining time until the timer is expired. Also ignore negative durations.
+    const deltaTime = Math.max(0, this.remainingTime);
+    const 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;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(I18n.Text, {
+      string: this.state.formattedTime.string,
+      params: this.state.formattedTime.params,
+      className: `${this.props.className} common__countdown-timer`
+    });
+  }
+}
+CountdownTimer.defaultProps = {
+  className: '',
+  onExpire: null
+};
+export default CountdownTimer;

package/components/CountdownTimer/spec.js

@@ -1,4 +1,10 @@
-import React from'react';import{shallow}from'enzyme';import CountdownTimer,{getFormattedTimeString}from"./index";describe('<CountdownTimer>',function(){jest.useFakeTimers();/**
+import React from 'react';
+import { shallow } from 'enzyme';
+import CountdownTimer, { getFormattedTimeString } from "./index";
+describe('<CountdownTimer>', () => {
+  jest.useFakeTimers();
+
+  /**
    * Creates a new countdown timer element.
    * @param {number} remainingDays The remaining days.
    * @param {number} remainingHours The remaining hours.
@@ -6,21 +12,129 @@ import React from'react';import{shallow}from'enzyme';import CountdownTimer,{getF
    * @param {number} remainingSeconds The remaining seconds.
    * @param {Function} callback The expiration callback.
    * @return {JSX}
-   */var createTimerElement=function createTimerElement(remainingDays,remainingHours,remainingMinutes,remainingSeconds,callback){var timeout=Math.floor(Date.now()/1000)+remainingDays*86400+remainingHours*3600+remainingMinutes*60+remainingSeconds;var wrapper=shallow(React.createElement(CountdownTimer,{timeout:timeout,onExpire:callback}));var currentTimeOffset=timeout-Math.floor(Date.now()/1000);wrapper.instance().getRemainingTime=function(){currentTimeOffset-=1;return currentTimeOffset;};return wrapper;};/**
+   */
+  const createTimerElement = (remainingDays, remainingHours, remainingMinutes, remainingSeconds, callback) => {
+    const timeout = Math.floor(Date.now() / 1000) + remainingDays * 86400 + remainingHours * 3600 + remainingMinutes * 60 + remainingSeconds;
+    const wrapper = shallow(/*#__PURE__*/React.createElement(CountdownTimer, {
+      timeout: timeout,
+      onExpire: callback
+    }));
+    let currentTimeOffset = timeout - Math.floor(Date.now() / 1000);
+    wrapper.instance().getRemainingTime = () => {
+      currentTimeOffset -= 1;
+      return currentTimeOffset;
+    };
+    return wrapper;
+  };
+
+  /**
    * Performs a time format check for a specific remaining time.
    * @param {number} remainingDays The remaining days.
    * @param {number} remainingHours The remaining hours.
    * @param {number} remainingMinutes The remaining minutes.
    * @param {number} remainingSeconds The remaining seconds.
-   */var performFormatCheck=function performFormatCheck(remainingDays,remainingHours,remainingMinutes,remainingSeconds){jest.clearAllTimers();setInterval.mock.calls=[];var wrapper=createTimerElement(remainingDays,remainingHours,remainingMinutes,remainingSeconds,null);var expectedTimeFormat=getFormattedTimeString(remainingDays,remainingHours,remainingMinutes,remainingSeconds-1// Expect the decremented timeout.
-);// We cannot perform a snapshot match here because the timestamp changes for each call.
-expect(setInterval.mock.calls.length).toBe(1);jest.runTimersToTime(1000);wrapper.update();var _wrapper$props=wrapper.props(),params=_wrapper$props.params,string=_wrapper$props.string;var renderedTimeFormat={params:params,string:string};expect(renderedTimeFormat).toEqual(expectedTimeFormat);};it('should render the correct time for < 24h',function(){return performFormatCheck(0,0,0,5);});it('should render the correct time for 24h - 48h',function(){return performFormatCheck(1,12,6,5);});it('should render the correct time for > 2d',function(){return performFormatCheck(30,1,2,3);});it('should not render negative durations',function(){jest.clearAllTimers();var wrapper=createTimerElement(-1,-2,-3,-5,null);var expectedTimeFormat=getFormattedTimeString(0,0,0,0);jest.runTimersToTime(1000);var _wrapper$props2=wrapper.props(),params=_wrapper$props2.params,string=_wrapper$props2.string;var renderedTimeFormat={params:params,string:string};expect(renderedTimeFormat).toEqual(expectedTimeFormat);});it('should stop at 00:00:00 when the timer expires',function(){var wrapper=createTimerElement(0,0,0,1,null);var expectedTimeFormat=getFormattedTimeString(0,0,0,0);var renderedTimeFormat;// Run down to 00:00:00.
-jest.runTimersToTime(1000);wrapper.update();var _wrapper$props3=wrapper.props(),params=_wrapper$props3.params,string=_wrapper$props3.string;renderedTimeFormat={params:params,string:string};expect(renderedTimeFormat).toEqual(expectedTimeFormat);// Advance time a bit further and make sure the timer stays at 00:00:00.
-jest.runTimersToTime(1000);var _wrapper$props4=wrapper.props();params=_wrapper$props4.params;string=_wrapper$props4.string;renderedTimeFormat={params:params,string:string};expect(renderedTimeFormat).toEqual(expectedTimeFormat);});it('should invoke the callback when the timer expires',function(){var timesCallbackInvoked=0;/**
+   */
+  const performFormatCheck = (remainingDays, remainingHours, remainingMinutes, remainingSeconds) => {
+    jest.clearAllTimers();
+    setInterval.mock.calls = [];
+    const wrapper = createTimerElement(remainingDays, remainingHours, remainingMinutes, remainingSeconds, null);
+    const expectedTimeFormat = getFormattedTimeString(remainingDays, remainingHours, remainingMinutes, remainingSeconds - 1 // Expect the decremented timeout.
+    );
+
+    // We cannot perform a snapshot match here because the timestamp changes for each call.
+    expect(setInterval.mock.calls.length).toBe(1);
+    jest.runTimersToTime(1000);
+    wrapper.update();
+    const {
+      params,
+      string
+    } = wrapper.props();
+    const renderedTimeFormat = {
+      params,
+      string
+    };
+    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+  };
+  it('should render the correct time for < 24h', () => performFormatCheck(0, 0, 0, 5));
+  it('should render the correct time for 24h - 48h', () => performFormatCheck(1, 12, 6, 5));
+  it('should render the correct time for > 2d', () => performFormatCheck(30, 1, 2, 3));
+  it('should not render negative durations', () => {
+    jest.clearAllTimers();
+    const wrapper = createTimerElement(-1, -2, -3, -5, null);
+    const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
+    jest.runTimersToTime(1000);
+    const {
+      params,
+      string
+    } = wrapper.props();
+    const renderedTimeFormat = {
+      params,
+      string
+    };
+    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+  });
+  it('should stop at 00:00:00 when the timer expires', () => {
+    const wrapper = createTimerElement(0, 0, 0, 1, null);
+    const expectedTimeFormat = getFormattedTimeString(0, 0, 0, 0);
+    let renderedTimeFormat;
+
+    // Run down to 00:00:00.
+    jest.runTimersToTime(1000);
+    wrapper.update();
+    let {
+      params,
+      string
+    } = wrapper.props();
+    renderedTimeFormat = {
+      params,
+      string
+    };
+    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+
+    // Advance time a bit further and make sure the timer stays at 00:00:00.
+    jest.runTimersToTime(1000);
+    ({
+      params,
+      string
+    } = wrapper.props());
+    renderedTimeFormat = {
+      params,
+      string
+    };
+    expect(renderedTimeFormat).toEqual(expectedTimeFormat);
+  });
+  it('should invoke the callback when the timer expires', () => {
+    let timesCallbackInvoked = 0;
+    /**
      * The callback method will just increment a counter when invoked.
-     */var callback=function callback(){timesCallbackInvoked+=1;};createTimerElement(0,0,0,2,callback);// The timer is not expired yet. Make sure the callback is not invoked.
-jest.runTimersToTime(1000);expect(timesCallbackInvoked).toBe(0);// The timer should expire by now.
-jest.runTimersToTime(1000);expect(timesCallbackInvoked).toBe(1);// Run it again and make sure it won't be called twice.
-jest.runTimersToTime(1000);expect(timesCallbackInvoked).toBe(1);});it('should not invoke the callback when the timeout is already expired.',function(){var timesCallbackInvoked=0;/**
+     */
+    const callback = () => {
+      timesCallbackInvoked += 1;
+    };
+    createTimerElement(0, 0, 0, 2, callback);
+
+    // The timer is not expired yet. Make sure the callback is not invoked.
+    jest.runTimersToTime(1000);
+    expect(timesCallbackInvoked).toBe(0);
+
+    // The timer should expire by now.
+    jest.runTimersToTime(1000);
+    expect(timesCallbackInvoked).toBe(1);
+
+    // Run it again and make sure it won't be called twice.
+    jest.runTimersToTime(1000);
+    expect(timesCallbackInvoked).toBe(1);
+  });
+  it('should not invoke the callback when the timeout is already expired.', () => {
+    let timesCallbackInvoked = 0;
+    /**
      * The callback method will just increment a counter when invoked.
-     */var callback=function callback(){timesCallbackInvoked+=1;};createTimerElement(0,0,0,0,callback);jest.runTimersToTime(1000);expect(timesCallbackInvoked).toBe(0);});});
+     */
+    const callback = () => {
+      timesCallbackInvoked += 1;
+    };
+    createTimerElement(0, 0, 0, 0, callback);
+    jest.runTimersToTime(1000);
+    expect(timesCallbackInvoked).toBe(0);
+  });
+});

package/components/Drawer/index.js

@@ -1,25 +1,140 @@
-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 classNames from'classnames';import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  * Drawer component.
- */var Drawer=/*#__PURE__*/function(_Component){/**
+ */
+class Drawer extends Component {
+  /**
    * Initializes the Drawer component.
    * @param {Object} props The components props.
-   */function Drawer(props){var _this2;_classCallCheck(this,Drawer);_this2=_callSuper(this,Drawer,[props]);/**
-   * Syncs the internal active state when an animation ends.
-   */_defineProperty(_this2,"handleAnimationEnd",function(){_this2.setState({active:_this2.props.isOpen});if(!_this2.props.isOpen){_this2.props.onDidClose();}else{_this2.props.onDidOpen();}});_this2.sheetRef=React.createRef();_this2.state={active:props.isOpen};return _this2;}/** inheritdoc */_inherits(Drawer,_Component);return _createClass(Drawer,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.isOpen){if(this.sheetRef.current){this.sheetRef.current.focus();}}}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Syncs the internal active state when an animation ends.
+     */
+    this.handleAnimationEnd = () => {
+      this.setState({
+        active: this.props.isOpen
+      });
+      if (!this.props.isOpen) {
+        this.props.onDidClose();
+      } else {
+        this.props.onDidOpen();
+      }
+    };
+    this.sheetRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      active: props.isOpen
+    };
+  }
+
+  /** inheritdoc */
+  componentDidMount() {
+    if (this.props.isOpen) {
+      if (this.sheetRef.current) {
+        this.sheetRef.current.focus();
+      }
+    }
+  }
+
+  /**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){if(nextProps.isOpen){if(typeof nextProps.onOpen==='function'){nextProps.onOpen();}this.setState({active:true});}else if(typeof nextProps.onClose==='function'){nextProps.onClose();}}}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.isOpen !== nextProps.isOpen) {
+      if (nextProps.isOpen) {
+        if (typeof nextProps.onOpen === 'function') {
+          nextProps.onOpen();
+        }
+        this.setState({
+          active: true
+        });
+      } else if (typeof nextProps.onClose === 'function') {
+        nextProps.onClose();
+      }
+    }
+  }
+
+  /**
    * Set focus for a11y when sheet opens
    * @param {Object} prevProps The previous component props.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!prevProps.isOpen&&this.props.isOpen){if(this.sheetRef.current){this.sheetRef.current.focus();}}}},{key:"render",value:/**
+   */
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isOpen && this.props.isOpen) {
+      if (this.sheetRef.current) {
+        this.sheetRef.current.focus();
+      }
+    }
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,className=_this$props.className,children=_this$props.children,isOpen=_this$props.isOpen,animation=_this$props.animation;var active=this.state.active;var animationIn=animation["in"]||styles.animation["in"];var animationOut=animation.out||styles.animation.out;var combinedClassName=classNames(className,styles.container,_defineProperty({},animationIn,isOpen),_defineProperty({},animationOut,!isOpen),'common__drawer');var style={};if(typeof animation.duration==='number'){style.animationDuration="".concat(animation.duration,"ms");}return active?React.createElement("div",{ref:this.sheetRef,className:combinedClassName,style:style,onAnimationEnd:function onAnimationEnd(){var _this3$sheetRef;_this3.handleAnimationEnd();// clear any residual animation style to fix a11y issue on Android
-// (focus ring is misaligned)
-if((_this3$sheetRef=_this3.sheetRef)===null||_this3$sheetRef===void 0?void 0:_this3$sheetRef.style){_this3.sheetRef.style.animation='';_this3.sheetRef.style.transform='none';}},role:"dialog","aria-modal":true,tabIndex:-1},children):null;}}]);}(Component);/**
-   * The component prop types.
-   * @type {Object}
-   */ /**
-   * The component default props.
-   * @type {Object}
-   */_defineProperty(Drawer,"defaultProps",{className:'',children:null,isOpen:false,onOpen:function onOpen(){},onClose:function onClose(){},onDidClose:function onDidClose(){},onDidOpen:function onDidOpen(){},animation:{duration:null,"in":'',out:''}});export default Drawer;
+   */
+  render() {
+    const {
+      className,
+      children,
+      isOpen,
+      animation
+    } = this.props;
+    const {
+      active
+    } = this.state;
+    const animationIn = animation.in || styles.animation.in;
+    const animationOut = animation.out || styles.animation.out;
+    const combinedClassName = classNames(className, styles.container, {
+      [animationIn]: isOpen
+    }, {
+      [animationOut]: !isOpen
+    }, 'common__drawer');
+    const style = {};
+    if (typeof animation.duration === 'number') {
+      style.animationDuration = `${animation.duration}ms`;
+    }
+    return active ? /*#__PURE__*/React.createElement("div", {
+      ref: this.sheetRef,
+      className: combinedClassName,
+      style: style,
+      onAnimationEnd: () => {
+        this.handleAnimationEnd();
+        // clear any residual animation style to fix a11y issue on Android
+        // (focus ring is misaligned)
+        if (this.sheetRef?.style) {
+          this.sheetRef.style.animation = '';
+          this.sheetRef.style.transform = 'none';
+        }
+      },
+      role: "dialog",
+      "aria-modal": true,
+      tabIndex: -1
+    }, children) : null;
+  }
+}
+/**
+ * The component prop types.
+ * @type {Object}
+ */
+/**
+ * The component default props.
+ * @type {Object}
+ */
+Drawer.defaultProps = {
+  className: '',
+  children: null,
+  isOpen: false,
+  onOpen: () => {},
+  onClose: () => {},
+  onDidClose: () => {},
+  onDidOpen: () => {},
+  animation: {
+    duration: null,
+    in: '',
+    out: ''
+  }
+};
+export default Drawer;