react-flip-clock-countdownup/dist/index.modern.js

A 3D animated countdown and countup component for React with date picker integration and enhanced styling options.

import e from"clsx";import t,{useState as n,useRef as r,useEffect as o,useMemo as i}from"react";function c(){return(c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(n){var r,o=n.current,i=n.next,a=n.className,l=n.ready,u=n.style,d=t.useState({current:o,next:i}),s=d[0],f=d[1],v=t.useState(!1),m=v[0],h=v[1];return t.useEffect(function(){if(!l)return f({current:o,next:i}),void h(!1);s.current!==o?(s.current===s.next&&f(c({},s,{next:i})),h(!0)):h(!1)},[o,i]),t.createElement("div",{className:e("fcc__digit_block","_2EBbg",a),style:u,suppressHydrationWarning:!0},t.createElement("div",{className:"_SKh-V"},s.next),t.createElement("div",{className:"_106d2"},s.current),t.createElement("div",{className:e("_3luxx",(r={},r._2kgZC=m,r)),onTransitionEnd:function(){f({current:o,next:i}),h(!1)}},t.createElement("div",{className:e("_2v-d4","_1GZQ7")},s.current),t.createElement("div",{className:e("_2v-d4","_3AVXa")},s.next)))}function l(e){var t=new Date(e);return!isNaN(t.getTime())}function u(e,t){if(!l(e)||!l(t))throw Error("Invalid date");var n=new Date(t),r=new Date(e),o=Math.round((r.getTime()-n.getTime())/1e3);return o<0&&(o=0),{total:o,days:Math.floor(o/86400),hours:Math.floor(o/3600%24),minutes:Math.floor(o/60%60),seconds:Math.floor(o%60)}}function d(e){return("0".repeat(Math.max(0,2-String(e).length))+String(e)).split("")}function s(e){if(void 0!==e)return"string"==typeof e?e:e+"px"}var f=["to","daysInHours","now","isCountUp","countUpFrom","className","style","children","onComplete","onTick","showLabels","showSeparators","labels","labelStyle","digitBlockStyle","separatorStyle","dividerStyle","duration","renderMap","hideOnComplete","stopOnHiddenVisibility","renderOnServer","spacing"],v=[!0,!0,!0,!0],m=["Days","Hours","Minutes","Seconds"];export default function(l){var h,g=l.to,p=l.daysInHours,y=void 0!==p&&p,b=l.now,_=void 0===b?Date.now:b,w=l.isCountUp,x=void 0!==w&&w,S=l.countUpFrom,k=l.className,M=l.style,E=l.children,N=l.onComplete,O=void 0===N?function(){}:N,D=l.onTick,T=void 0===D?function(){}:D,C=l.showLabels,z=void 0===C||C,H=l.showSeparators,j=void 0===H||H,I=l.labels,F=void 0===I?m:I,R=l.labelStyle,B=l.digitBlockStyle,L=l.separatorStyle,U=l.dividerStyle,V=l.duration,q=void 0===V?.7:V,W=l.renderMap,X=void 0===W?v:W,Z=l.hideOnComplete,A=void 0===Z||Z,G=l.stopOnHiddenVisibility,K=void 0!==G&&G,P=l.renderOnServer,Q=void 0!==P&&P,J=l.spacing,Y=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}(l,f),$=t.useState(function(){return{timeDelta:u(0,_()),completed:!1}}),ee=$[0],te=$[1],ne=n(Q),re=ne[0],oe=ne[1],ie=n(!1),ce=ie[0],ae=ie[1],le=t.useRef(0),ue=t.useRef(null);function de(){window.clearInterval(le.current)}function se(){var e=function(){if(x){if(null==ue.current){var e=void 0!==S?new Date(S).getTime():new Date(_()).getTime();ue.current=e}var t=new Date(_()).getTime(),n=Math.round((t-ue.current)/1e3);return n<0&&(n=0),{timeDelta:{total:n,days:Math.floor(n/86400),hours:Math.floor(n/3600%24),minutes:Math.floor(n/60%60),seconds:Math.floor(n%60)},completed:!1}}var r=u(g,_());return{timeDelta:r,completed:0===r.total}}();te(e),T(e),!x&&e.completed&&(de(),O()),re||oe(!0),ce||window.setTimeout(function(){return ae(!0)},900)}var fe=r(se);fe.current=se,o(function(){var e=function(){};if(K){var t=function(){"visible"===document.visibilityState?(fe.current(),le.current=window.setInterval(function(){return fe.current()},1e3)):de()};t(),document.addEventListener("visibilitychange",t),e=function(){de(),document.removeEventListener("visibilitychange",t)}}else de(),fe.current(),le.current=window.setInterval(function(){return fe.current()},1e3),e=function(){de()};return e},[g,K,x]),o(function(){ue.current=x?void 0!==S?new Date(S).getTime():new Date(_()).getTime():null},[x,S]);var ve=i(function(){return c({"--fcc-flip-duration":q+"s","--fcc-spacing":s(null==J?void 0:J.clock),"--fcc-digit-block-width":s(null==B?void 0:B.width),"--fcc-digit-block-height":s(null==B?void 0:B.height),"--fcc-digit-block-radius":s(null==B?void 0:B.borderRadius),"--fcc-digit-block-spacing":s(null==J?void 0:J.digitBlock),"--fcc-shadow":null==B?void 0:B.boxShadow,"--fcc-digit-font-size":s(null==B?void 0:B.fontSize),"--fcc-digit-color":null==B?void 0:B.color,"--fcc-label-font-size":s(null==R?void 0:R.fontSize),"--fcc-label-color":null==R?void 0:R.color,"--fcc-divider-color":null==U?void 0:U.color,"--fcc-divider-height":s(null==U?void 0:U.height),"--fcc-background":(null==B?void 0:B.background)||(null==B?void 0:B.backgroundColor),"--fcc-separator-size":s(null==L?void 0:L.size),"--fcc-separator-color":j?null==L?void 0:L.color:"transparent"},M)},[M,B,R,q,U,L,j,J]),me=t.useMemo(function(){if(B)return c({},B,{background:void 0,backgroundColor:void 0,width:void 0,height:void 0,boxShadow:void 0,fontSize:void 0,color:void 0,borderRadius:void 0})},[B]),he=t.useMemo(function(){var e=function(e,t,n){void 0===n&&(n=!1);var r=n?e.total+1:Math.max(0,e.total-1),o={total:r,days:Math.floor(r/86400),hours:Math.floor(r/3600%24),minutes:Math.floor(r/60%60),seconds:Math.floor(r%60)};return{days:{current:d(t?0:e.days),next:d(t?0:o.days)},hours:{current:d(24*(t?e.days:0)+e.hours),next:d(24*(t?e.days:0)+o.hours)},minutes:{current:d(e.minutes),next:d(o.minutes)},seconds:{current:d(e.seconds),next:d(o.seconds)}}}(ee.timeDelta,y,x),t=X.length>=4?X.slice(0,4):v;y&&(t[0]=!1);var n=F.length>=4?F.slice(0,4):m,r=Object.values(e),o=["day","hour","minute","second"];return t.map(function(e,t){return[e,o[t],r[t],n[t]]}).filter(function(e){return e[0]})},[X,ee]);return!x&&null!=ee&&ee.completed&&A?t.createElement(t.Fragment,null,E):re?t.createElement("div",Object.assign({},Y,{className:e("fcc","_qWTcH",(h={},h._1tbqx=z,h),k),style:ve,"data-testid":"fcc-container"}),he.map(function(e,n){var r=e[1],o=e[2];return e[0]?t.createElement(t.Fragment,{key:r},t.createElement("div",{className:"fcc__unit_time fcc__unit_time--"+r+" _3cpN7"},z&&t.createElement("div",{className:"fcc__label fcc__label--"+r+" _2aOn7",style:R},e[3]),o.current.map(function(e,n){return t.createElement(a,{key:n,current:e,next:o.next[n],style:me,className:"fcc__digit_block--"+r,ready:ce})})),n<he.length-1&&t.createElement("div",{className:"fcc__separator _2hRXr"})):null})):t.createElement(t.Fragment,null)}
//# sourceMappingURL=index.modern.js.map