UNPKG

@start-base/start-ui

Version:

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

1 lines 2.79 kB
import e,{forwardRef as a,useMemo as t,useState as o,useEffect as n}from"react";import l from"clsx";var r={root:"SUI-Countdown-module-root-7UwEA",item:"SUI-Countdown-module-item-DEDMa",value:"SUI-Countdown-module-value-psTEn",label:"SUI-Countdown-module-label-qd2GV",separator:"SUI-Countdown-module-separator-pOajL",withLabels:"SUI-Countdown-module-withLabels-ePNaR",labelsUnder:"SUI-Countdown-module-labelsUnder-BM1hw",inBoxes:"SUI-Countdown-module-inBoxes-kxi8C"},s={day:{oneChar:"d",full:"Days",none:""},hour:{oneChar:"h",full:"Hours",none:""},minute:{oneChar:"m",full:"Minutes",none:""},second:{oneChar:"s",full:"Seconds",none:""}};function d(e,a){return s[e][a]}var m=({date:e,showDay:a=!0,showHour:t=!0,showMinute:l=!0,showSecond:r=!0})=>{const[s,d]=o({});return n((()=>{const o="number"==typeof e?new Date(e):e,n=setInterval((()=>{const e=new Date,n={},s=o.getTime()-e.getTime(),m=Math.floor(s/1e3),u=Math.floor(m/60),i=Math.floor(u/60),c=Math.floor(i/24);if(a&&(n.day=String(c).padStart(2,"0")),t){const e=a?i%24:i;n.hour=String(e).padStart(2,"0")}if(l){const e=t?u%60:u;n.minute=String(e).padStart(2,"0")}if(r){const e=l?m%60:m;n.second=String(e).padStart(2,"0")}d(n)}),1e3);return()=>clearInterval(n)}),[e,a,t,l,r]),s},u=a(((a,o)=>{const{date:n,showDay:s=!0,showHour:u=!0,showMinute:i=!0,showSecond:c=!0,type:h="default",itemClassName:v,rootClassName:w,valueClassName:p,labelClassName:S}=a,f=m({date:n,showDay:s,showHour:u,showMinute:i,showSecond:c}),E=l(r.item,v,"default"!==h&&r[h]),N=l(r.value,p,"default"!==h&&r[h]),C=l(r.label,S,"default"!==h&&r[h]),y=t((()=>"withSeparator"===h?"none":"default"===h?"oneChar":"full"),[h]);return e.createElement("div",{className:l(r.root,w),"data-type":h,ref:o},s&&void 0!==f.day&&e.createElement("div",{className:E},e.createElement("div",{className:N},f.day),e.createElement("div",{className:C},d("day",y))),u&&void 0!==f.hour&&e.createElement(e.Fragment,null,"withSeparator"===h&&void 0!==f.day&&e.createElement("span",{className:r.separator},":"),e.createElement("div",{className:E},e.createElement("div",{className:N},f.hour),e.createElement("div",{className:C},d("hour",y)))),i&&void 0!==f.minute&&e.createElement(e.Fragment,null,"withSeparator"===h&&(void 0!==f.day||void 0!==f.hour)&&e.createElement("span",{className:r.separator},":"),e.createElement("div",{className:E},e.createElement("div",{className:N},f.minute),e.createElement("div",{className:C},d("minute",y)))),c&&void 0!==f.second&&e.createElement(e.Fragment,null,"withSeparator"===h&&(void 0!==f.hour||void 0!==f.minute)&&e.createElement("span",{className:r.separator},":"),e.createElement("div",{className:E},e.createElement("div",{className:N},f.second),e.createElement("div",{className:C},d("second",y)))))}));u.displayName="Countdown";var i=u;export{i as default};