time-runner 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -73
- package/README.zh-CN.md +184 -0
- package/dist/TimeRunner.d.ts +2 -1
- package/dist/Tools.d.ts +12 -0
- package/dist/index.css +1 -1
- package/dist/time-runner.es.js +339 -268
- package/dist/time-runner.umd.js +26 -2
- package/package.json +1 -1
package/dist/time-runner.umd.js
CHANGED
|
@@ -1,2 +1,26 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(nt);function lt(m){return m&&m.__esModule&&Object.prototype.hasOwnProperty.call(m,"default")?m.default:m}var Z={exports:{}},ut=Z.exports,it;function ht(){return it||(it=1,(function(m,l){(function(u,f){m.exports=f()})(ut,(function(){var u=1e3,f=6e4,k=36e5,$="millisecond",S="second",A="minute",C="hour",w="day",v="week",h="month",Q="quarter",O="year",g="date",j="Invalid Date",G=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,B=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,rt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(i){var e=["th","st","nd","rd"],t=i%100;return"["+i+(e[(t-20)%10]||e[t]||e[0])+"]"}},y=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},_={s:y,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+y(n,2,"0")+":"+y(r,2,"0")},m:function i(e,t){if(e.date()<t.date())return-i(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,h),a=t-r<0,s=e.clone().add(n+(a?-1:1),h);return+(-(n+(t-r)/(a?r-s:s-r))||0)},a:function(i){return i<0?Math.ceil(i)||0:Math.floor(i)},p:function(i){return{M:h,y:O,w:v,d:w,D:g,h:C,m:A,s:S,ms:$,Q}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},H="en",W={};W[H]=rt;var q="$isDayjsObject",et=function(i){return i instanceof P||!(!i||!i[q])},F=function i(e,t,n){var r;if(!e)return H;if(typeof e=="string"){var a=e.toLowerCase();W[a]&&(r=a),t&&(W[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var d=e.name;W[d]=e,r=d}return!n&&r&&(H=r),r||!n&&H},b=function(i,e){if(et(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new P(t)},c=_;c.l=F,c.i=et,c.w=function(i,e){return b(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var P=(function(){function i(t){this.$L=F(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[q]=!0}var e=i.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,a=n.utc;if(r===null)return new Date(NaN);if(c.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(G);if(s){var d=s[2]-1||0,p=(s[7]||"0").substring(0,3);return a?new Date(Date.UTC(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)):new Date(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return c},e.isValid=function(){return this.$d.toString()!==j},e.isSame=function(t,n){var r=b(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return b(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<b(t)},e.$g=function(t,n,r){return c.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,a=!!c.u(n)||n,s=c.p(t),d=function(K,D){var V=c.w(r.$u?Date.UTC(r.$y,D,K):new Date(r.$y,D,K),r);return a?V:V.endOf(w)},p=function(K,D){return c.w(r.toDate()[K].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(D)),r)},x=this.$W,M=this.$M,Y=this.$D,E="set"+(this.$u?"UTC":"");switch(s){case O:return a?d(1,0):d(31,11);case h:return a?d(1,M):d(0,M+1);case v:var X=this.$locale().weekStart||0,U=(x<X?x+7:x)-X;return d(a?Y-U:Y+(6-U),M);case w:case g:return p(E+"Hours",0);case C:return p(E+"Minutes",1);case A:return p(E+"Seconds",2);case S:return p(E+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,a=c.p(t),s="set"+(this.$u?"UTC":""),d=(r={},r[w]=s+"Date",r[g]=s+"Date",r[h]=s+"Month",r[O]=s+"FullYear",r[C]=s+"Hours",r[A]=s+"Minutes",r[S]=s+"Seconds",r[$]=s+"Milliseconds",r)[a],p=a===w?this.$D+(n-this.$W):n;if(a===h||a===O){var x=this.clone().set(g,1);x.$d[d](p),x.init(),this.$d=x.set(g,Math.min(this.$D,x.daysInMonth())).$d}else d&&this.$d[d](p);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[c.p(t)]()},e.add=function(t,n){var r,a=this;t=Number(t);var s=c.p(n),d=function(M){var Y=b(a);return c.w(Y.date(Y.date()+Math.round(M*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===O)return this.set(O,this.$y+t);if(s===w)return d(1);if(s===v)return d(7);var p=(r={},r[A]=f,r[C]=k,r[S]=u,r)[s]||1,x=this.$d.getTime()+t*p;return c.w(x,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||j;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=c.z(this),d=this.$H,p=this.$m,x=this.$M,M=r.weekdays,Y=r.months,E=r.meridiem,X=function(D,V,J,R){return D&&(D[V]||D(n,a))||J[V].slice(0,R)},U=function(D){return c.s(d%12||12,D,"0")},K=E||function(D,V,J){var R=D<12?"AM":"PM";return J?R.toLowerCase():R};return a.replace(B,(function(D,V){return V||(function(J){switch(J){case"YY":return String(n.$y).slice(-2);case"YYYY":return c.s(n.$y,4,"0");case"M":return x+1;case"MM":return c.s(x+1,2,"0");case"MMM":return X(r.monthsShort,x,Y,3);case"MMMM":return X(Y,x);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return X(r.weekdaysMin,n.$W,M,2);case"ddd":return X(r.weekdaysShort,n.$W,M,3);case"dddd":return M[n.$W];case"H":return String(d);case"HH":return c.s(d,2,"0");case"h":return U(1);case"hh":return U(2);case"a":return K(d,p,!0);case"A":return K(d,p,!1);case"m":return String(p);case"mm":return c.s(p,2,"0");case"s":return String(n.$s);case"ss":return c.s(n.$s,2,"0");case"SSS":return c.s(n.$ms,3,"0");case"Z":return s}return null})(D)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var a,s=this,d=c.p(n),p=b(t),x=(p.utcOffset()-this.utcOffset())*f,M=this-p,Y=function(){return c.m(s,p)};switch(d){case O:a=Y()/12;break;case h:a=Y();break;case Q:a=Y()/3;break;case v:a=(M-x)/6048e5;break;case w:a=(M-x)/864e5;break;case C:a=M/k;break;case A:a=M/f;break;case S:a=M/u;break;default:a=M}return r?a:c.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=F(t,n,!0);return a&&(r.$L=a),r},e.clone=function(){return c.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},i})(),dt=P.prototype;return b.prototype=dt,[["$ms",$],["$s",S],["$m",A],["$H",C],["$W",w],["$M",h],["$y",O],["$D",g]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),b.extend=function(i,e){return i.$i||(i(e,P,b),i.$i=!0),b},b.locale=F,b.isDayjs=et,b.unix=function(i){return b(1e3*i)},b.en=W[H],b.Ls=W,b.p={},b}))})(Z)),Z.exports}var ft=ht();const I=lt(ft),L=60,pt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],ot=m=>{if(!tt(m))return"00:00:00";const l=I(m).diff(I());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),$=Math.floor(u%3600/60),S=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${$}`.padStart(2,"0")}:${`${S}`.padStart(2,"0")}`},at=m=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(m/L/L))}:${l(Math.floor(m/L)%L)}:${l(m%L)}`},tt=m=>pt.some(l=>I(m,l,!0).isValid()),st="HH:mm:ss",ct=900,mt=m=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:$,borderColor:S,textShadowColor:A,finishCountFn:C}=m,[w,v]=T.useState(u==="count"?at(0):u==="default"?I().format(st):ot(u)),h=T.useRef({t:null}),Q={"--card-size":`${f}px`,"--card-w":`${f*1.25}px`,"--card-h":`${f*2}px`,"--transx":`${-f*1.25/2}px`,"--transy":`${-f}px`,"--delay":`${ct/1e3}s`,"--bgColor":$,"--borderColor":S,"--textShadow":A?`1px 2px 3px ${A}`:"none"};T.useEffect(()=>{let g=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,g=Date.now()),h.current.t=setInterval(()=>{let j=()=>"";u==="count"?j=()=>at(Math.floor((Date.now()-g)/1e3)):u==="default"?j=()=>I().format(st):j=()=>ot(u),v(j())},1e3)},[u]),T.useEffect(()=>{tt(u)&&w==="00:00:00"&&C&&setTimeout(()=>{C()},1e3)},[w,u,C]);const O=()=>{if(!w)return null;const g=w.split(":"),j=g[g.length-3].split(""),G=g[g.length-2].split(""),B=g[g.length-1].split(""),rt=g.length===4?g[0].split(""):[],y=tt(u),_=rt.map((W,q)=>o.jsx(z,{mode:l,time:+W,limit:y?-9:9,size:f},q)),H=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[_.length?o.jsxs(o.Fragment,{children:[_,y?o.jsx("p",{children:"天"}):H]}):null,o.jsx(z,{mode:l,time:+j[0],limit:y?-2:2,size:f}),o.jsx(z,{mode:l,time:+j[1],limit:y?-9:9,size:f}),y?o.jsx("p",{children:"小时"}):H,o.jsx(z,{mode:l,time:+G[0],limit:y?-5:5,size:f}),o.jsx(z,{mode:l,time:+G[1],limit:y?-9:9,size:f}),y?o.jsx("p",{children:"分"}):H,o.jsx(z,{mode:l,time:+B[0],limit:y?-5:5,size:f}),o.jsx(z,{mode:l,time:+B[1],limit:y?-9:9,size:f}),y&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${k||""}`,style:Q,children:O()})},vt=m=>{const{time:l,limit:u,mode:f,size:k}=m,[$,S]=T.useState(!1),A=T.useRef({t:l}),C=T.useMemo(()=>l!==A.current.t?{"--driftX":`${Math.floor(Math.random()*(-k-k+1))+k}px`,"--driftY":`${Math.floor(Math.random()*(-k*2-k*2+1))+k*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[l,k]);T.useEffect(()=>{l!==A.current.t&&S(!0)},[l]),T.useEffect(()=>{$&&setTimeout(()=>{A.current.t=l,S(!1)},ct)},[$,l]);const w=()=>{const{t:v}=A.current;let h=v;switch(u>0?h=v>=u?0:v+1:h=v<=0?Math.abs(u):v-1,f){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${$?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${$?"run":""}`,children:[o.jsx("p",{children:v}),o.jsx("p",{children:v})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${$?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:v})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${$?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:v})]})});case"drift":return o.jsx("div",{className:`drift font-num ${$?"run":""}`,"data-digit":v,style:C,children:h});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:v})})}};return o.jsx(o.Fragment,{children:w()})},z=T.memo(vt);N.TimeRunner=mt,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(X,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(X=typeof globalThis<"u"?globalThis:X||self,o(X["time-runner"]={},X.jsxRuntime,X.React))})(this,(function(X,o,j){"use strict";var ot=document.createElement("style");ot.textContent=`@font-face{font-family:DIN-num-font;src:url(data:font/woff2;base64,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)}.font-num{font-family:DIN-num-font}.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:var(--card-h, 80px);transform-origin:bottom;backface-visibility:hidden;border-radius:6px 6px 0 0}.clock-card .clock-f p:nth-child(2){line-height:3px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:var(--card-h, 80px);border-radius:6px 6px 0 0}.clock-card .clock-b p:nth-child(2){line-height:3px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}.cut{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative;overflow:hidden}.cut>p{color:#fff!important;opacity:0}.cut>div{position:absolute;inset:0;line-height:var(--card-h, 80px);text-align:center;overflow:hidden}.cut>div:nth-child(1){clip-path:var(--lPolygon)}.cut>div:nth-child(2){clip-path:var(--rPolygon)}.cut>div>div{position:absolute;width:2px;background-color:transparent;z-index:10}.cut.run>div:nth-child(1){transition:var(--delay);transform:var(--cutLTranslate)}.cut.run>div:nth-child(2){transition:var(--delay);transform:var(--cutRTranslate)}.cut.run>p{transition:.6s;transition-delay:.15s;opacity:1}.cut.run .l-line,.cut.run .r-line{background-color:#fff}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(ot);function ut(u){return u&&u.__esModule&&Object.prototype.hasOwnProperty.call(u,"default")?u.default:u}var Q={exports:{}},ht=Q.exports,it;function ft(){return it||(it=1,(function(u,l){(function(d,c){u.exports=c()})(ht,(function(){var d=1e3,c=6e4,y=36e5,v="millisecond",$="second",M="minute",k="hour",A="day",b="week",h="month",m="quarter",p="year",g="date",D="Invalid Date",B=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,P=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,et={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(i){var e=["th","st","nd","rd"],t=i%100;return"["+i+(e[(t-20)%10]||e[t]||e[0])+"]"}},T=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},q={s:T,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+T(n,2,"0")+":"+T(r,2,"0")},m:function i(e,t){if(e.date()<t.date())return-i(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,h),a=t-r<0,s=e.clone().add(n+(a?-1:1),h);return+(-(n+(t-r)/(a?r-s:s-r))||0)},a:function(i){return i<0?Math.ceil(i)||0:Math.floor(i)},p:function(i){return{M:h,y:p,w:b,d:A,D:g,h:k,m:M,s:$,ms:v,Q:m}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},N="en",W={};W[N]=et;var _="$isDayjsObject",nt=function(i){return i instanceof R||!(!i||!i[_])},F=function i(e,t,n){var r;if(!e)return N;if(typeof e=="string"){var a=e.toLowerCase();W[a]&&(r=a),t&&(W[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var x=e.name;W[x]=e,r=x}return!n&&r&&(N=r),r||!n&&N},S=function(i,e){if(nt(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new R(t)},f=q;f.l=F,f.i=nt,f.w=function(i,e){return S(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var R=(function(){function i(t){this.$L=F(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[_]=!0}var e=i.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,a=n.utc;if(r===null)return new Date(NaN);if(f.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(B);if(s){var x=s[2]-1||0,w=(s[7]||"0").substring(0,3);return a?new Date(Date.UTC(s[1],x,s[3]||1,s[4]||0,s[5]||0,s[6]||0,w)):new Date(s[1],x,s[3]||1,s[4]||0,s[5]||0,s[6]||0,w)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return f},e.isValid=function(){return this.$d.toString()!==D},e.isSame=function(t,n){var r=S(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return S(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<S(t)},e.$g=function(t,n,r){return f.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,a=!!f.u(n)||n,s=f.p(t),x=function(K,O){var V=f.w(r.$u?Date.UTC(r.$y,O,K):new Date(r.$y,O,K),r);return a?V:V.endOf(A)},w=function(K,O){return f.w(r.toDate()[K].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(O)),r)},Y=this.$W,C=this.$M,H=this.$D,I="set"+(this.$u?"UTC":"");switch(s){case p:return a?x(1,0):x(31,11);case h:return a?x(1,C):x(0,C+1);case b:var L=this.$locale().weekStart||0,J=(Y<L?Y+7:Y)-L;return x(a?H-J:H+(6-J),C);case A:case g:return w(I+"Hours",0);case k:return w(I+"Minutes",1);case M:return w(I+"Seconds",2);case $:return w(I+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,a=f.p(t),s="set"+(this.$u?"UTC":""),x=(r={},r[A]=s+"Date",r[g]=s+"Date",r[h]=s+"Month",r[p]=s+"FullYear",r[k]=s+"Hours",r[M]=s+"Minutes",r[$]=s+"Seconds",r[v]=s+"Milliseconds",r)[a],w=a===A?this.$D+(n-this.$W):n;if(a===h||a===p){var Y=this.clone().set(g,1);Y.$d[x](w),Y.init(),this.$d=Y.set(g,Math.min(this.$D,Y.daysInMonth())).$d}else x&&this.$d[x](w);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[f.p(t)]()},e.add=function(t,n){var r,a=this;t=Number(t);var s=f.p(n),x=function(C){var H=S(a);return f.w(H.date(H.date()+Math.round(C*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===p)return this.set(p,this.$y+t);if(s===A)return x(1);if(s===b)return x(7);var w=(r={},r[M]=c,r[k]=y,r[$]=d,r)[s]||1,Y=this.$d.getTime()+t*w;return f.w(Y,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||D;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=f.z(this),x=this.$H,w=this.$m,Y=this.$M,C=r.weekdays,H=r.months,I=r.meridiem,L=function(O,V,Z,tt){return O&&(O[V]||O(n,a))||Z[V].slice(0,tt)},J=function(O){return f.s(x%12||12,O,"0")},K=I||function(O,V,Z){var tt=O<12?"AM":"PM";return Z?tt.toLowerCase():tt};return a.replace(P,(function(O,V){return V||(function(Z){switch(Z){case"YY":return String(n.$y).slice(-2);case"YYYY":return f.s(n.$y,4,"0");case"M":return Y+1;case"MM":return f.s(Y+1,2,"0");case"MMM":return L(r.monthsShort,Y,H,3);case"MMMM":return L(H,Y);case"D":return n.$D;case"DD":return f.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return L(r.weekdaysMin,n.$W,C,2);case"ddd":return L(r.weekdaysShort,n.$W,C,3);case"dddd":return C[n.$W];case"H":return String(x);case"HH":return f.s(x,2,"0");case"h":return J(1);case"hh":return J(2);case"a":return K(x,w,!0);case"A":return K(x,w,!1);case"m":return String(w);case"mm":return f.s(w,2,"0");case"s":return String(n.$s);case"ss":return f.s(n.$s,2,"0");case"SSS":return f.s(n.$ms,3,"0");case"Z":return s}return null})(O)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var a,s=this,x=f.p(n),w=S(t),Y=(w.utcOffset()-this.utcOffset())*c,C=this-w,H=function(){return f.m(s,w)};switch(x){case p:a=H()/12;break;case h:a=H();break;case m:a=H()/3;break;case b:a=(C-Y)/6048e5;break;case A:a=(C-Y)/864e5;break;case k:a=C/y;break;case M:a=C/c;break;case $:a=C/d;break;default:a=C}return r?a:f.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return W[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=F(t,n,!0);return a&&(r.$L=a),r},e.clone=function(){return f.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},i})(),dt=R.prototype;return S.prototype=dt,[["$ms",v],["$s",$],["$m",M],["$H",k],["$W",A],["$M",h],["$y",p],["$D",g]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),S.extend=function(i,e){return i.$i||(i(e,R,S),i.$i=!0),S},S.locale=F,S.isDayjs=nt,S.unix=function(i){return S(1e3*i)},S.en=W[N],S.Ls=W,S.p={},S}))})(Q)),Q.exports}var pt=ft();const E=ut(pt),U=60,vt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],at=u=>{if(!rt(u))return"00:00:00";const l=E(u).diff(E());if(l<=0)return"00:00:00";const d=Math.floor(l/1e3),c=Math.floor(d/86400),y=Math.floor(d%86400/3600),v=Math.floor(d%3600/60),$=d%60;return`${c?`${c}:`:""}${`${y}`.padStart(2,"0")}:${`${v}`.padStart(2,"0")}:${`${$}`.padStart(2,"0")}`},st=u=>{const l=d=>`${d}`.padStart(2,"0");return`${l(Math.floor(u/U/U))}:${l(Math.floor(u/U)%U)}:${l(u%U)}`},rt=u=>vt.some(l=>E(u,l,!0).isValid()),G=(u,l,d,c,y)=>{const v=c-l,$=y-d,M=Math.sqrt(v*v+$*$).toFixed(2),k=Math.atan2($,v)*180/Math.PI,A=(l+c)/2,b=(d+y)/2;u.style.left=`${A}px`,u.style.top=`${b}px`,u.style.height=`${M}px`,u.style.transform=`translate(-50%, -50%) rotate(${k+90}deg)`},mt=u=>{const l=u.clientWidth,d=u.clientHeight,c=Math.floor(Math.random()*2);let y="",v="",$=0,M=0;const k=u.querySelector(".l-line"),A=u.querySelector(".r-line");if(c===0){const b=5+Math.random()*90,h=100-b;$=Math.max(b,h),y=`
|
|
3
|
+
polygon(
|
|
4
|
+
0% 0%,
|
|
5
|
+
${b}% 0%,
|
|
6
|
+
${h}% 100%,
|
|
7
|
+
0% 100%
|
|
8
|
+
)`,v=`
|
|
9
|
+
polygon(
|
|
10
|
+
${b}% 0%,
|
|
11
|
+
100% 0%,
|
|
12
|
+
100% 100%,
|
|
13
|
+
${h}% 100%
|
|
14
|
+
)`;const m=l*b/100,p=0,g=l*h/100,D=d;G(k,m,p,g,D),G(A,m,p,g,D)}else{const b=5+Math.random()*90,h=100-b;M=Math.max(b,h),y=`
|
|
15
|
+
polygon(
|
|
16
|
+
0% 0%,
|
|
17
|
+
100% 0%,
|
|
18
|
+
100% ${h}%,
|
|
19
|
+
0% ${b}%
|
|
20
|
+
)`,v=`
|
|
21
|
+
polygon(
|
|
22
|
+
0% ${b}%,
|
|
23
|
+
100% ${h}%,
|
|
24
|
+
100% 100%,
|
|
25
|
+
0% 100%
|
|
26
|
+
)`;const m=0,p=d*b/100,g=l,D=d*h/100;G(k,m,p,g,D),G(A,m,p,g,D)}return{lPath:y,rPath:v,lTranslate:c===0?`translateX(-${$}%)`:`translateY(-${M}%)`,rTranslate:c===0?`translateX(${$}%)`:`translateY(${M}%)`}},ct="HH:mm:ss",lt=900,gt=u=>{const{mode:l,showType:d="default",size:c=40,className:y,bgColor:v,borderColor:$,textShadowColor:M,finishCountFn:k}=u,[A,b]=j.useState(d==="count"?st(0):d==="default"?E().format(ct):at(d)),h=j.useRef({t:null}),m={"--card-size":`${c}px`,"--card-w":`${c*1.25}px`,"--card-h":`${c*2}px`,"--transx":`${-c*1.25/2}px`,"--transy":`${-c}px`,"--delay":`${lt/1e3}s`,"--bgColor":v,"--borderColor":$,"--textShadow":M?`1px 2px 3px ${M}`:"none"};j.useEffect(()=>{let g=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,g=Date.now()),h.current.t=setInterval(()=>{let D=()=>"";d==="count"?D=()=>st(Math.floor((Date.now()-g)/1e3)):d==="default"?D=()=>E().format(ct):D=()=>at(d),b(D())},1e3)},[d]),j.useEffect(()=>{rt(d)&&A==="00:00:00"&&k&&setTimeout(()=>{k()},1e3)},[A,d,k]);const p=()=>{if(!A)return null;const g=A.split(":"),D=g[g.length-3].split(""),B=g[g.length-2].split(""),P=g[g.length-1].split(""),et=g.length===4?g[0].split(""):[],T=rt(d),q=et.map((W,_)=>o.jsx(z,{mode:l,time:+W,limit:T?-9:9,size:c},_)),N=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[q.length?o.jsxs(o.Fragment,{children:[q,T?o.jsx("p",{children:"天"}):N]}):null,o.jsx(z,{mode:l,time:+D[0],limit:T?-2:2,size:c}),o.jsx(z,{mode:l,time:+D[1],limit:T?-9:9,size:c}),T?o.jsx("p",{children:"小时"}):N,o.jsx(z,{mode:l,time:+B[0],limit:T?-5:5,size:c}),o.jsx(z,{mode:l,time:+B[1],limit:T?-9:9,size:c}),T?o.jsx("p",{children:"分"}):N,o.jsx(z,{mode:l,time:+P[0],limit:T?-5:5,size:c}),o.jsx(z,{mode:l,time:+P[1],limit:T?-9:9,size:c}),T&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${y||""}`,style:m,children:p()})},xt=u=>{const{time:l,limit:d,mode:c,size:y}=u,[v,$]=j.useState(!1),M=j.useRef({t:l}),k=j.useRef(null),A=j.useMemo(()=>l!==M.current.t&&c==="drift"?{"--driftX":`${Math.floor(Math.random()*(-y-y+1))+y}px`,"--driftY":`${Math.floor(Math.random()*(-y*2-y*2+1))+y*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[l,y,c]),b=j.useMemo(()=>{if(v&&c==="cut"){const{lPath:m,rPath:p,lTranslate:g,rTranslate:D}=mt(k.current);return{"--lPolygon":m,"--rPolygon":p,"--cutLTranslate":g,"--cutRTranslate":D}}return null},[v,c]);j.useEffect(()=>{l!==M.current.t&&$(!0)},[l]),j.useEffect(()=>{v&&setTimeout(()=>{M.current.t=l,$(!1)},lt)},[v,l]);const h=()=>{const{t:m}=M.current;let p=m;switch(d>0?p=m>=d?0:m+1:p=m<=0?Math.abs(d):m-1,c){case"card":return o.jsxs("div",{className:"clock-card font-num",children:[o.jsxs("div",{className:`clock-b ${v?"run":""}`,children:[o.jsx("p",{children:p}),o.jsx("p",{children:p})]}),o.jsxs("div",{className:`clock-f ${v?"run":""}`,children:[o.jsx("p",{children:m}),o.jsx("p",{children:m})]})]});case"cube-v":return o.jsx("div",{className:`cube-v font-num ${v?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:p}),o.jsx("p",{children:m})]})});case"cube-h":return o.jsx("div",{className:`cube-h font-num ${v?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:p}),o.jsx("p",{children:m})]})});case"drift":return o.jsx("div",{className:`drift font-num ${v?"run":""}`,"data-digit":m,style:A,children:p});case"cut":return o.jsxs("div",{ref:k,className:`cut font-num ${v?"run":""}`,style:b,children:[o.jsxs("div",{children:[o.jsx("p",{children:m}),o.jsx("div",{className:"l-line"})]}),o.jsxs("div",{children:[o.jsx("p",{children:m}),o.jsx("div",{className:"r-line"})]}),o.jsx("p",{children:p})]});default:return o.jsx("div",{className:"font-num",children:o.jsx("p",{children:m})})}};return o.jsx(o.Fragment,{children:h()})},z=j.memo(xt);X.TimeRunner=gt,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "time-runner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"description": "Displaying timer, current time, and countdown with light animation effects(React component)",
|
|
5
5
|
"keywords": ["react", "countdown", "timer", "hook", "card", "less", "animation", "vite"],
|
|
6
6
|
"main": "./dist/time-runner.umd.js",
|