@royaloperahouse/chord 2.11.0-b-development → 2.11.1-a-development

package/dist/chord.esm.js

@@ -1,6 +1,6 @@
 import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef, useMemo, cloneElement, useLayoutEffect } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
-import moment from 'moment';
+import { isPast, intervalToDuration, differenceInDays } from 'date-fns';
 import { renderToString } from 'react-dom/server';
 import Select$1, { components } from 'react-select';
 import Select$2 from 'react-select/async';
@@ -4665,6 +4665,23 @@ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templa
 var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
+var pad = function pad(num) {
+  return String(num || 0).padStart(2, '0');
+};
+
+var renderTimerValue = function renderTimerValue(value, title, separator) {
+  if (separator === void 0) {
+    separator = true;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
+    className: 'chord-timer-value',
+    "data-testid": title
+  }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    className: 'chord-timer-label'
+  }, title)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
+};
+
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
       title = _ref.title,
@@ -4674,39 +4691,27 @@ var Timer = function Timer(_ref) {
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? Colors.Black : _ref$color;
 
-  var _React$useState = React__default.useState('00'),
-      seconds = _React$useState[0],
-      setSeconds = _React$useState[1];
-
-  var _React$useState2 = React__default.useState('00'),
-      minutes = _React$useState2[0],
-      setMinutes = _React$useState2[1];
+  var _useState = useState('00'),
+      seconds = _useState[0],
+      setSeconds = _useState[1];
 
-  var _React$useState3 = React__default.useState('00'),
-      hours = _React$useState3[0],
-      setHours = _React$useState3[1];
+  var _useState2 = useState('00'),
+      minutes = _useState2[0],
+      setMinutes = _useState2[1];
 
-  var _React$useState4 = React__default.useState('00'),
-      days = _React$useState4[0],
-      setDays = _React$useState4[1];
+  var _useState3 = useState('00'),
+      hours = _useState3[0],
+      setHours = _useState3[1];
 
-  var _React$useState5 = React__default.useState(false),
-      isEndDateReached = _React$useState5[0],
-      setIsEndDateReached = _React$useState5[1];
+  var _useState4 = useState('00'),
+      days = _useState4[0],
+      setDays = _useState4[1];
 
-  var renderTimerValue = function renderTimerValue(value, title, separator) {
-    if (separator === void 0) {
-      separator = true;
-    }
-
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
-      className: 'chord-timer-value'
-    }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
-      className: 'chord-timer-label'
-    }, title)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
-  };
+  var _useState5 = useState(false),
+      isEndDateReached = _useState5[0],
+      setIsEndDateReached = _useState5[1];
 
-  React__default.useEffect(function () {
+  useEffect(function () {
     if (isEndDateReached) return; // We use this to set values for the timer immediately
 
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4715,20 +4720,23 @@ var Timer = function Timer(_ref) {
     };
 
     var updateValues = function updateValues() {
-      var futureDate = moment(endDate);
-      var nowDate = moment();
-      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
-      var difference = moment(differenceInMilliseconds).utc();
+      var futureDate = new Date(endDate); // Date.now() is explicitly passed here just to satisfy Jest time mocking.
+
+      var nowDate = new Date(Date.now());
+      var diffInMs = futureDate.getTime() - nowDate.getTime();
 
-      if (differenceInMilliseconds < 0) {
+      if (diffInMs < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
-        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
-        var hoursDiff = difference.format('HH');
-        var minutesDiff = difference.format('mm');
-        var secondsDiff = difference.format('ss');
+        var duration = intervalToDuration({
+          start: nowDate,
+          end: futureDate
+        });
+        var daysDiff = pad(differenceInDays(futureDate, nowDate));
+        var hoursDiff = pad(duration.hours);
+        var minutesDiff = pad(duration.minutes);
+        var secondsDiff = pad(duration.seconds);
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4741,7 +4749,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = moment(endDate).isBefore(moment());
+  var hideTimer = isPast(new Date(endDate));
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color