use-elapsed-time
Advanced tools
Comparing version 3.0.2 to 3.0.3
# Change Log | ||
## 3.0.3 ( January 6th, 2022) | ||
**Big fix:** | ||
- Replay the animation when the duration increases after the initial animation is over | ||
## 3.0.2 ( September 5th, 2021) | ||
@@ -4,0 +10,0 @@ |
@@ -1,1 +0,1 @@ | ||
var P=Object.create;var l=Object.defineProperty,j=Object.defineProperties,z=Object.getOwnPropertyDescriptor,G=Object.getOwnPropertyDescriptors,H=Object.getOwnPropertyNames,B=Object.getOwnPropertySymbols,K=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var V=(e,r,t)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,T=(e,r)=>{for(var t in r||(r={}))M.call(r,t)&&V(e,t,r[t]);if(B)for(var t of B(r))Q.call(r,t)&&V(e,t,r[t]);return e},R=(e,r)=>j(e,G(r)),O=e=>l(e,"__esModule",{value:!0});var W=(e,r)=>{O(e);for(var t in r)l(e,t,{get:r[t],enumerable:!0})},X=(e,r,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let u of H(r))!M.call(e,u)&&u!=="default"&&l(e,u,{get:()=>r[u],enumerable:!(t=z(r,u))||t.enumerable});return e},C=e=>X(O(l(e!=null?P(K(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);W(exports,{useElapsedTime:()=>k});var n=C(require("react"));var b=C(require("react")),x=typeof window=="undefined"?b.useEffect:b.useLayoutEffect;var k=({isPlaying:e,duration:r,startAt:t=0,updateInterval:u=0,onComplete:E,onUpdate:y})=>{let[f,I]=(0,n.useState)(t),S=(0,n.useRef)(t*-1e3),c=(0,n.useRef)(null),m=(0,n.useRef)(null),A=(0,n.useRef)(null),s=(0,n.useRef)({elapsedTimeRef:0,startAtRef:t,durationRef:r,updateIntervalRef:u});s.current=R(T({},s.current),{durationRef:r,updateIntervalRef:u});let p=a=>{let o=a/1e3;if(m.current===null){m.current=o,c.current=requestAnimationFrame(p);return}let{durationRef:i,elapsedTimeRef:D,updateIntervalRef:v,startAtRef:w}=s.current,J=o-m.current,d=D+J;m.current=o,s.current=R(T({},s.current),{elapsedTimeRef:d});let L=w+(v===0?d:(d/v|0)*v),N=w+d,F=typeof i=="number"&&N>=i;I(F?i:L),F||(c.current=requestAnimationFrame(p))},h=()=>{c.current&&cancelAnimationFrame(c.current),A.current&&clearTimeout(A.current),m.current=null},q=(0,n.useCallback)(a=>{let o=typeof a=="number"?a:t;h(),s.current=R(T({},s.current),{elapsedTimeRef:0,startAtRef:o}),I(o),e&&(c.current=requestAnimationFrame(p))},[e,t]);return x(()=>{if(y==null||y(f),r&&f>=r){S.current+=r*1e3;let{shouldRepeat:a=!1,delay:o=0,newStartAt:i}=(E==null?void 0:E(S.current/1e3))||{};a&&(A.current=setTimeout(()=>q(i),o*1e3))}},[f,r]),x(()=>(e&&(c.current=requestAnimationFrame(p)),h),[e]),{elapsedTime:f,reset:q}}; | ||
var V=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=e=>p(e,"__esModule",{value:!0});var I=(e,r)=>{w(e);for(var t in r)p(e,t,{get:r[t],enumerable:!0})},J=(e,r,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of C(r))!k.call(e,n)&&n!=="default"&&p(e,n,{get:()=>r[n],enumerable:!(t=v(r,n))||t.enumerable});return e},B=e=>J(w(p(e!=null?V(D(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);I(exports,{useElapsedTime:()=>M});var u=B(require("react"));var f=B(require("react")),R=typeof window=="undefined"?f.useEffect:f.useLayoutEffect;var M=({isPlaying:e,duration:r,startAt:t=0,updateInterval:n=0,onComplete:T,onUpdate:b})=>{let[i,x]=(0,u.useState)(t),d=(0,u.useRef)(0),h=(0,u.useRef)(t*-1e3),o=(0,u.useRef)(null),c=(0,u.useRef)(null),y=(0,u.useRef)(null),l=m=>{let s=m/1e3;if(c.current===null){c.current=s,o.current=requestAnimationFrame(l);return}let E=s-c.current,a=d.current+E;c.current=s,d.current=a;let A=t+(n===0?a:(a/n|0)*n),O=t+a,S=typeof r=="number"&&O>=r;x(S?r:A),S||(o.current=requestAnimationFrame(l))},q=()=>{o.current&&cancelAnimationFrame(o.current),y.current&&clearTimeout(y.current),c.current=null},F=(0,u.useCallback)(m=>{q(),d.current=0,x(typeof m=="number"?m:t),e&&(o.current=requestAnimationFrame(l))},[e,t]);return R(()=>{if(b==null||b(i),r&&i>=r){h.current+=r*1e3;let{shouldRepeat:m=!1,delay:s=0,newStartAt:E}=(T==null?void 0:T(h.current/1e3))||{};m&&(y.current=setTimeout(()=>F(E),s*1e3))}},[i,r]),R(()=>(e&&(o.current=requestAnimationFrame(l)),q),[e,r,n]),{elapsedTime:i,reset:F}}; |
@@ -1,1 +0,1 @@ | ||
var C=Object.defineProperty,k=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var F=(t,e,r)=>e in t?C(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,p=(t,e)=>{for(var r in e||(e={}))J.call(e,r)&&F(t,r,e[r]);if(w)for(var r of w(e))L.call(e,r)&&F(t,r,e[r]);return t},d=(t,e)=>k(t,D(e));import{useState as j,useRef as m,useCallback as z}from"react";import{useEffect as N,useLayoutEffect as P}from"react";var y=typeof window=="undefined"?N:P;var G=({isPlaying:t,duration:e,startAt:r=0,updateInterval:A=0,onComplete:T,onUpdate:R})=>{let[i,v]=j(r),x=m(r*-1e3),o=m(null),c=m(null),b=m(null),u=m({elapsedTimeRef:0,startAtRef:r,durationRef:e,updateIntervalRef:A});u.current=d(p({},u.current),{durationRef:e,updateIntervalRef:A});let l=s=>{let n=s/1e3;if(c.current===null){c.current=n,o.current=requestAnimationFrame(l);return}let{durationRef:a,elapsedTimeRef:B,updateIntervalRef:E,startAtRef:h}=u.current,M=n-c.current,f=B+M;c.current=n,u.current=d(p({},u.current),{elapsedTimeRef:f});let V=h+(E===0?f:(f/E|0)*E),O=h+f,q=typeof a=="number"&&O>=a;v(q?a:V),q||(o.current=requestAnimationFrame(l))},I=()=>{o.current&&cancelAnimationFrame(o.current),b.current&&clearTimeout(b.current),c.current=null},S=z(s=>{let n=typeof s=="number"?s:r;I(),u.current=d(p({},u.current),{elapsedTimeRef:0,startAtRef:n}),v(n),t&&(o.current=requestAnimationFrame(l))},[t,r]);return y(()=>{if(R==null||R(i),e&&i>=e){x.current+=e*1e3;let{shouldRepeat:s=!1,delay:n=0,newStartAt:a}=(T==null?void 0:T(x.current/1e3))||{};s&&(b.current=setTimeout(()=>S(a),n*1e3))}},[i,e]),y(()=>(t&&(o.current=requestAnimationFrame(l)),I),[t]),{elapsedTime:i,reset:S}};export{G as useElapsedTime}; | ||
import{useState as M,useRef as m,useCallback as A}from"react";import{useEffect as w,useLayoutEffect as B}from"react";var y=typeof window=="undefined"?w:B;var O=({isPlaying:c,duration:e,startAt:r=0,updateInterval:s=0,onComplete:p,onUpdate:f})=>{let[i,E]=M(r),T=m(0),R=m(r*-1e3),t=m(null),u=m(null),b=m(null),l=n=>{let o=n/1e3;if(u.current===null){u.current=o,t.current=requestAnimationFrame(l);return}let d=o-u.current,a=T.current+d;u.current=o,T.current=a;let F=r+(s===0?a:(a/s|0)*s),S=r+a,q=typeof e=="number"&&S>=e;E(q?e:F),q||(t.current=requestAnimationFrame(l))},x=()=>{t.current&&cancelAnimationFrame(t.current),b.current&&clearTimeout(b.current),u.current=null},h=A(n=>{x(),T.current=0,E(typeof n=="number"?n:r),c&&(t.current=requestAnimationFrame(l))},[c,r]);return y(()=>{if(f==null||f(i),e&&i>=e){R.current+=e*1e3;let{shouldRepeat:n=!1,delay:o=0,newStartAt:d}=(p==null?void 0:p(R.current/1e3))||{};n&&(b.current=setTimeout(()=>h(d),o*1e3))}},[i,e]),y(()=>(c&&(t.current=requestAnimationFrame(l)),x),[c,e,s]),{elapsedTime:i,reset:h}};export{O as useElapsedTime}; |
{ | ||
"name": "use-elapsed-time", | ||
"version": "3.0.2", | ||
"version": "3.0.3", | ||
"description": "React hook to measure elapsed time using requestAnimationFrame", | ||
@@ -44,3 +44,2 @@ "main": "./lib/index.js", | ||
"@types/jest": "26.0.24", | ||
"codecov": "3.8.3", | ||
"esbuild": "0.12.24", | ||
@@ -47,0 +46,0 @@ "jest": "27.1.0", |
@@ -5,3 +5,3 @@ # useElapsedTime React hook | ||
[![npm](https://img.shields.io/npm/dw/use-elapsed-time)](https://www.npmjs.com/package/use-elapsed-time) | ||
![Codecov](https://img.shields.io/codecov/c/github/vydimitrov/use-elapsed-time) | ||
[![Codecov](https://img.shields.io/codecov/c/github/vydimitrov/use-elapsed-time)](https://app.codecov.io/gh/vydimitrov/use-elapsed-time) | ||
[![npm bundle size](https://img.shields.io/bundlephobia/min/use-elapsed-time)](https://bundlephobia.com/result?p=use-elapsed-time) | ||
@@ -8,0 +8,0 @@ |
9
20327
71