react-coming
Version:
React component rendering a simple page with a countdown timer.
1 lines • 5.29 kB
JavaScript
!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var t=n();for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(self,(function(){return(()=>{"use strict";var e={n:n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},d:(n,t)=>{for(var r in t)e.o(t,r)&&!e.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:t[r]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},n={};e.r(n),e.d(n,{Coming:()=>M});const t=require("react");var r=function(e){return Math.floor(e/864e5)},o=function(e){return Math.floor(e%864e5/36e5)},i=function(e){return Math.floor(e%36e5/6e4)},a=function(e){return Math.floor(e%6e4/1e3)};const s=require("styled-components");var l,c,u,f,d,p=e.n(s);function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var h=p().main(l||(l=m(["\n position: fixed;\n display: flex;\n font-family: 'Merriweather', serif;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n align-content: center;\n justify-content: center;\n flex-direction: column;\n left: 0;\n top: 0;\n z-index: 999;\n color: #000000;\n visibility: visible;\n opacity: 1;\n"]))),y=p().ul(c||(c=m(["\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n"]))),b=p().li(u||(u=m(["\n display: inline-block;\n margin: 0 10px;\n width: 100px;\n\n @media (max-width: 480px) {\n width: 40%;\n margin-bottom: 20px;\n }\n"]))),x=p().p(f||(f=m(["\n border: 2px solid #000000;\n padding: 17px 0;\n font-size: 32px;\n letter-spacing: 2px;\n font-family: 'Times New Roman';\n margin: 0;\n text-align: center;\n"]))),g=p().p(d||(d=m(["\n text-transform: lowercase;\n margin: 8px 0 0 0;\n text-align: center;\n font-size: 16px;\n"])));const v=require("react/jsx-runtime");function j(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var t=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(t.push(a.value),!n||t.length!==n);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(o)throw i}}return t}}(e,n)||function(e,n){if(e){if("string"==typeof e)return w(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?w(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var M=function(e){var n,s=e.children,l=e.enabled,c=e.toDate,u=e.toTime,f=e.daysLabel,d=e.hoursLabel,p=e.minutesLabel,m=e.secondsLabel,w=e.customComponent,M=(0,t.useRef)(),S=j((0,t.useState)(!1),2),N=S[0],O=S[1],I=j((0,t.useState)(!0),2),D=I[0],L=I[1],T=j((0,t.useState)({days:0,hours:0,minutes:0,seconds:0}),2),A=T[0],P=T[1],z=(0,t.useMemo)((function(){return s?(0,v.jsx)(t.Fragment,{children:s}):null}),[]),C=(0,t.useMemo)((function(){var e=j(c.split("-"),3),n=e[0],t=e[1],r=e[2],o=j(u.split(":"),2),i=o[0],a=o[1];return new Date(parseInt(n,10),parseInt(t,10)-1,parseInt(r,10),parseInt(i,10),parseInt(a,10))}),[]);if(!((n=C)instanceof Date)||isNaN(n.getTime()))return z;var E=(0,t.useMemo)((function(){return C.getTime()}),[]),k=(0,t.useCallback)((function(){var e=Date.now(),n=E-e;if(n<=0)return clearInterval(M.current),void L(!1);var t=j(function(e){return[r(e),o(e),i(e),a(e)]}(n),4),s=t[0],l=t[1],c=t[2],u=t[3];isNaN(s)||isNaN(l)||isNaN(c)||isNaN(u)||(P({days:s,hours:l,minutes:c,seconds:u}),O(!0))}),[]);if((0,t.useLayoutEffect)((function(){var e;E&&(w||((e=document.createElement("link")).href="https://fonts.googleapis.com/css2?family=Merriweather&amp;subset=latin-ext",e.rel="stylesheet",document.head.appendChild(e)),k(),M.current=setInterval(k,1e3))}),[]),!D||!l)return z;var _=A.days,q=A.hours,F=A.minutes,R=A.seconds;return w&&(0,t.isValidElement)(w)&&N?(0,t.cloneElement)(w,{days:_,hours:q,minutes:F,seconds:R}):(0,v.jsx)(h,{"data-testid":"coming-container",children:(0,v.jsxs)(y,{children:[(0,v.jsxs)(b,{children:[(0,v.jsx)(x,{children:_}),(0,v.jsx)(g,{children:f})]}),(0,v.jsxs)(b,{children:[(0,v.jsx)(x,{children:q}),(0,v.jsx)(g,{children:d})]}),(0,v.jsxs)(b,{children:[(0,v.jsx)(x,{children:F}),(0,v.jsx)(g,{children:p})]}),(0,v.jsxs)(b,{children:[(0,v.jsx)(x,{children:R}),(0,v.jsx)(g,{children:m})]})]})})};return M.defaultProps={children:null,enabled:!0,toDate:function(e){var n=new Date;n.setMonth(n.getMonth()+3);var t=n.getFullYear(),r=n.getMonth()+1<10?"0".concat(n.getMonth()+1):String(n.getMonth()+1),o=n.getDate()<10?"0".concat(n.getDate()):String(n.getDate());return"".concat(t,"-").concat(r,"-").concat(o)}(),toTime:"00:00",daysLabel:"days",hoursLabel:"hours",minutesLabel:"minutes",secondsLabel:"seconds"},n})()}));