lesca-use-tween/lib/index.cjs

transition DOM use hooks

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react");function z(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var $,U;function K(){if(U)return $;U=1;var n=4,e=.001,t=1e-7,a=10,i=11,o=1/(i-1),f=typeof Float32Array=="function";function s(r,l){return 1-3*l+3*r}function u(r,l){return 3*l-6*r}function m(r){return 3*r}function c(r,l,h){return((s(l,h)*r+u(l,h))*r+m(l))*r}function d(r,l,h){return 3*s(l,h)*r*r+2*u(l,h)*r+m(l)}function x(r,l,h,F,g){var y,b,O=0;do b=l+(h-l)/2,y=c(b,F,g)-r,y>0?h=b:l=b;while(Math.abs(y)>t&&++O<a);return b}function S(r,l,h,F){for(var g=0;g<n;++g){var y=d(l,h,F);if(y===0)return l;var b=c(l,h,F)-r;l-=b/y}return l}function p(r){return r}return $=function(r,l,h,F){if(!(0<=r&&r<=1&&0<=h&&h<=1))throw new Error("bezier x values must be in [0, 1] range");if(r===l&&h===F)return p;for(var g=f?new Float32Array(i):new Array(i),y=0;y<i;++y)g[y]=c(y*o,r,h);function b(O){for(var w=0,N=1,k=i-1;N!==k&&g[N]<=O;++N)w+=o;--N;var _=(O-g[N])/(g[N+1]-g[N]),j=w+_*o,T=d(j,r,h);return T>=e?S(O,j,r,h):T===0?j:x(O,w,w+o,r,h)}return function(O){return O===0?0:O===1?1:c(b(O),l,F)}},$}var P=K();const Z=z(P),q={outQuart:[.165,.84,.44,1]},C={from:{},to:{},duration:1e3,delay:0,easing:q.outQuart,onStart:{is:!1,method:()=>{}},onUpdate:()=>{},onComplete:()=>{}};class X{enable;data;playing;clearNextFrame;playNextFrame;addDataNextFrame;eachResult;result;timestamp;constructor(e){const t={...C,...e};if(this.enable=!0,this.data=[],this.playing=!1,this.clearNextFrame=!1,this.playNextFrame=!1,this.addDataNextFrame=[],this.timestamp=0,JSON.stringify(t)!==JSON.stringify(C)){const a={method:t.onStart instanceof Function?t.onStart:t.onStart.method,is:!1};Object.keys(t.to).length>0&&this.data.push({...t,onStart:a})}return this.eachResult=this.result=t.from,this}add(e){const t={...C,...e},{from:a,to:i,duration:o,delay:f,easing:s,onUpdate:u,onComplete:m,onStart:c}=t,d={from:a,to:i,duration:o,delay:f,easing:s,onUpdate:u,onComplete:m,onStart:c||{method:()=>{},is:!0}};return e.onStart?d.onStart={method:c instanceof Function?c:c.method,is:!1}:d.onStart={method:()=>{},is:!0},this.clearNextFrame&&this.addDataNextFrame.push(d),this.data.push(d),this}clearQueue(){return this.data.length>0&&(this.clearNextFrame=!0),this.data=[],this.addDataNextFrame=[],this.result=this.eachResult,this.timestamp=new Date().getTime(),this}play(){const{requestAnimationFrame:e}=window,[t]=this.data;if(t){if(this.clearNextFrame){this.playNextFrame=!0;return}if(!this.playing)return this.playing=!0,this.enable=!0,this.timestamp=new Date().getTime(),e(()=>this.render()),this}}stop(){return this.enable=!1,this.playing=!1,this}render(){const{requestAnimationFrame:e}=window,[t]=this.data;if(!t)return;const{from:a,to:i,duration:o,delay:f,easing:s,onUpdate:u,onComplete:m,onStart:c}=t,d=a||this.result,x=new Date().getTime()-this.timestamp-(f||0),[S,p,r,l]=s,h=Z(S,p,r,l),F=x/o;if(x<0){e(()=>this.render());return}if(Object.keys(c).length!==0)if(c instanceof Function)c?.();else{const{method:y,is:b}=c;!b&&y&&(c.is=!0,y?.(d))}let g={};Object.entries(i).forEach(y=>{const[b,O]=y,w=Object.entries(d).filter(k=>k[0]===b)[0][1];if(w===void 0)return;const N=w+(O-w)*h(F);g[b]=N}),x<o?(this.eachResult={...this.result,...g},u?.(this.eachResult),this.enable?e(()=>this.render()):(this.result={...this.result,...g},this.clearNextFrame&&(this.clearNextFrame=!1,this.addDataNextFrame.length>0?(this.data=[...this.addDataNextFrame],this.addDataNextFrame=[]):this.data=[]),this.playNextFrame&&(this.playNextFrame=!1,this.play()))):(this.result=this.eachResult={...this.result,...i},this.data.shift(),m?.(this.result),this.data.length>0?(this.reset(),this.data[0].from=this.data[0].from||this.result,this.enable&&e(()=>this.render())):this.playing=!1)}reset(){this.timestamp=new Date().getTime()}}const L=n=>{let e=0,t=0,a=0;n.length==4?(e="0x"+n[1]+n[1],t="0x"+n[2]+n[2],a="0x"+n[3]+n[3]):n.length==7&&(e="0x"+n[1]+n[2],t="0x"+n[3]+n[4],a="0x"+n[5]+n[6]),e/=255,t/=255,a/=255;let i=Math.min(e,t,a),o=Math.max(e,t,a),f=o-i,s=0,u=0,m=0;return f==0?s=0:o==e?s=(t-a)/f%6:o==t?s=(a-e)/f+2:s=(e-t)/f+4,s=Math.round(s*60),s<0&&(s+=360),m=(o+i)/2,u=f==0?0:f/(1-Math.abs(2*m-1)),u=+(u*100).toFixed(1),m=+(m*100).toFixed(1),[s,u,m]},Y=["backgroundColor","color","borderColor"],M=["scale","x","y","rotate","rotateY","rotateX","rotateZ","skewX","skewY"],B={scale:"scale",rotate:"rotate",x:"translateX",y:"translateY",skewX:"skewX",skewY:"skewY",rotateY:"rotateY",rotateX:"rotateX",rotateZ:"rotateZ"},I={scale:"",rotate:"deg",x:"px",y:"px",skewX:"deg",skewY:"deg",rotateY:"deg",rotateX:"deg",rotateZ:"deg"},V=n=>{const e=L(n),[t,a,i]=e;return[{h:t,s:a,l:i},"hsl"]},J=n=>{const e=String(n),t=parseFloat(e),a=e.split(String(t)).join("");return isNaN(t)?[Number(n),""]:[t,a]},Q=(n,e)=>Y.filter(a=>a===n).length!==0?V(e):J(e),G=n=>{const e={};return Object.entries(n).forEach(t=>{const[a,i]=t,o=M.filter(f=>f===a);if(o.length>0){const[f]=o,u=Object.entries(B).filter(d=>d[0]===f)[0][1],c=Object.entries(I).filter(d=>d[0]===f)[0][1];e.transform?e.transform+=` ${u}(${i}${c})`:e.transform=`${u}(${i}${c})`}else e[a]=i}),e},R=(n,e)=>{const t={};return Object.entries(n).forEach(a=>{const[i,o]=a,[f,s]=i.split("@"),u=e[f],m=M.filter(c=>c===i);if(u==="hsl")t[f]={...t[f],[s]:o};else if(m.length>0){const[c]=m,x=Object.entries(B).filter(r=>r[0]===c)[0][1],p=Object.entries(I).filter(r=>r[0]===c)[0][1];t.transform?t.transform+=` ${x}(${o}${p})`:t.transform=`${x}(${o}${p})`}else t[f]=`${o}${u}`}),Object.entries(t).forEach(a=>{const[i,o]=a;if(Y.filter(s=>s===i).length!==0){const s=o;o instanceof Object&&(t[i]=`hsl(${s.h}, ${s.s}%, ${s.l}%)`)}}),t},A={linear:[0,0,1,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],inSine:[.47,0,.745,.715],outSine:[.39,.575,.565,1],inOutSine:[.445,.05,.55,.95],inCubic:[.55,.055,.675,.19],outCubic:[.215,.61,.355,1],inOutCubic:[.645,.045,.355,1],InQuint:[.755,.05,.855,.06],OutQuint:[.23,1,.32,1],InOutQuint:[.86,0,.07,1],inCirc:[.6,.04,.98,.335],outCirc:[.075,.82,.165,1],inOutCirc:[.785,.135,.15,.86],inQuad:[.55,.085,.68,.53],outQuad:[.25,.46,.45,.94],inOutQuad:[.455,.03,.515,.955],inQuart:[.895,.03,.685,.22],outQuart:[.165,.84,.44,1],inOutQuart:[.77,0,.175,1],inExpo:[.95,.05,.795,.035],outExpo:[.19,1,.22,1],inOutExpo:[1,0,0,1],inBack:[.6,-.28,.735,.045],outBack:[.175,.885,.32,1.275],inOutBack:[.68,-.55,.265,1.55]},D={duration:1e3,easing:A.outQuart,delay:0,onStart:()=>{},onUpdate:()=>{},onEnd:()=>{}},E=n=>{const[e,t]=v.useState(n),a=v.useRef({}),i=v.useRef({}),o=()=>{let s={},u={};return Object.keys(a.current).length?(s=a.current,u=i.current):(Object.entries(e).forEach(m=>{const[c,d]=m,x=Q(c,d);if(x){const[S,p]=x;p==="hsl"?Object.entries(S).forEach(r=>{const[l,h]=r;s[`${c}@${l}`]=h}):s[c]=S,u[c]=p}}),i.current=u),{from:s,unit:u}},f=v.useRef(new X({from:o().from}));return[G(e),(s,u)=>{let m;typeof u=="number"?m={...D,duration:u}:m={...D,...u};const{from:c,unit:d}=o(),x={};Object.entries(s).forEach(p=>{const[r,l]=p,h=Q(r,l);if(h){const[F,g]=h;g==="hsl"?Object.entries(F).forEach(y=>{const[b,O]=y;x[`${r}@${b}`]=O}):x[r]=F}}),f.current.stop().clearQueue().add({to:x,from:c,...m,onUpdate:p=>{a.current=p,t(R(p,d)),m.onUpdate(p)},onComplete:p=>{a.current=p,t(R(p,d)),m.onEnd(p)}}).play()},()=>{f.current?.stop()}]},W=({children:n,initStyle:e,tweenStyle:t,options:a={duration:1e3}})=>{const[i,o,f]=E(e);return v.useEffect(()=>(t&&o(t,a),()=>f()),[t]),v.Children.map(n,s=>{if(typeof s=="string")return v.createElement("div",{style:i,children:s});const u=s;return v.cloneElement(u,{...u.props,style:{...u.props.style,...i}})})};exports.Bezier=A;exports.TweenProvider=W;exports.Tweener=X;exports.default=E;exports.useTween=E;