@royaloperahouse/harmonic 0.19.2-a → 0.19.2-b

package/dist/harmonic.esm.js

@@ -1,6 +1,6 @@
 import React__default, { createElement, memo, forwardRef, useCallback, useRef, useImperativeHandle, useMemo, useEffect, useState, 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';
@@ -4663,6 +4663,31 @@ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templa
 var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__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, label, 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: "harmonic-timer-value"
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium",
+    "data-testid": label
+  }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    className: "harmonic-timer-label"
+  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    color: "inherit",
+    size: "large"
+  }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "inherit",
+    hierarchy: "h3",
+    size: "medium"
+  }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
+};
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
     title = _ref.title,
@@ -4671,43 +4696,22 @@ var Timer = function Timer(_ref) {
     bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? ThemeColor['base-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 _React$useState3 = React__default.useState('00'),
-    hours = _React$useState3[0],
-    setHours = _React$useState3[1];
-  var _React$useState4 = React__default.useState('00'),
-    days = _React$useState4[0],
-    setDays = _React$useState4[1];
-  var _React$useState5 = React__default.useState(false),
-    isEndDateReached = _React$useState5[0],
-    setIsEndDateReached = _React$useState5[1];
-  var renderTimerValue = function renderTimerValue(value, label, 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: "harmonic-timer-value"
-    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
-      className: "harmonic-timer-label"
-    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
-      color: "inherit",
-      size: "large"
-    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-      color: "inherit",
-      hierarchy: "h3",
-      size: "medium"
-    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
-  };
-  React__default.useEffect(function () {
+  var _useState = useState('00'),
+    seconds = _useState[0],
+    setSeconds = _useState[1];
+  var _useState2 = useState('00'),
+    minutes = _useState2[0],
+    setMinutes = _useState2[1];
+  var _useState3 = useState('00'),
+    hours = _useState3[0],
+    setHours = _useState3[1];
+  var _useState4 = useState('00'),
+    days = _useState4[0],
+    setDays = _useState4[1];
+  var _useState5 = useState(false),
+    isEndDateReached = _useState5[0],
+    setIsEndDateReached = _useState5[1];
+  useEffect(function () {
     if (isEndDateReached) return undefined;
     // We use this to set values for the timer immediately
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4715,19 +4719,21 @@ var Timer = function Timer(_ref) {
       return setInterval(fn, delay);
     };
     var updateValues = function updateValues() {
-      var futureDate = moment(endDate);
-      var nowDate = moment();
-      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
-      var difference = moment(differenceInMilliseconds).utc();
-      if (differenceInMilliseconds < 0) {
+      var futureDate = new Date(endDate);
+      var nowDate = new Date();
+      var diffInMs = futureDate.getTime() - nowDate.getTime();
+      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);
@@ -4739,7 +4745,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
@@ -12199,7 +12205,7 @@ var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$f || (_templateOb
   var withShadow = _ref7.withShadow;
   return withShadow && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
 });
-var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pointer-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
+var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: ", ";\n  pinter-events: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  && svg path {\n    fill: ", ";\n  }\n"])), function (_ref8) {
   var disabled = _ref8.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref9) {
@@ -12245,7 +12251,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
       onTabClick(e, id);
     }
     setSelectedItem(id);
-    var clickedTab = document.getElementById("tablink-" + id);
+    var clickedTab = document.getElementById("tablink-" + selectedItem);
     if (clickedTab) {
       clickedTab.focus();
     }