react-animate-z 3.0.1 → 3.0.2

package/build/components/AnimatePresence.d.ts

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 import type { AnimName } from "../key-frames";
 export interface IFAnimatePresenceProps {
-    /** show / hide */
     show: boolean;
     enter: AnimName;
     exit: AnimName;

package/build/index.cjs.js

@@ -17,5 +17,5 @@
   margin-left: 2px;
   border-left: 3px solid ${({cursorColor:t})=>t||"#000"};
   animation: ${B} 0.7s steps(1) infinite;
-`;const D="pulse",M="shakeMix",A="float",L="flash";function j({text:t,speed:n=50,loop:a=!1}){const[e,o]=r.useState(""),[s,f]=r.useState(0),[i,l]=r.useState(!1);return r.useEffect((()=>{if(s>=t.length){if(l(!0),!a)return;const t=setTimeout((()=>{f(0),o(""),l(!1)}),800);return()=>clearTimeout(t)}const r=setTimeout((()=>{o((r=>r+t[s])),f((t=>t+1))}),n);return()=>clearTimeout(r)}),[s,t,n,a]),{output:e,isDone:i,reset:()=>{f(0),o(""),l(!1)}}}const E={idle:"fadeIn",loading:"float",success:"pulse",error:"shakeMix",warning:"flash"};const Z={bounce:o.bounce,bounceIn:o.bounceIn,bounceOut:o.bounceOut,bounceElastic:o.bounceElastic,bounceJelly:o.bounceJelly},P={shakeMix:o.shakeMix,shakeHorizontal:o.shakeHorizontal,shakeVertical:o.shakeVertical,shakeQuick:o.shakeQuick},q={fadeIn:o.fadeIn,fadeOut:o.fadeOut,blurIn:o.blurIn,blurOut:o.blurOut},$={typing:o.typing,typingLoop:o.typingLoop,typeWriter:o.typeWriter,typeDelete:o.typeDelete},N=o.fadeIn,H=o.fadeOut,G=o.shakeMix,W=o.float;exports.Animate=k,exports.AnimateGroup=({type:n,stagger:a=80,children:e,className:o})=>{const[s,f]=r.useState(0),i=r.Children.toArray(e);return r.useEffect((()=>{if(!a)return void f(i.length);let t=0;const r=setInterval((()=>{t++,f(t),t>=i.length&&clearInterval(r)}),a);return()=>clearInterval(r)}),[a,i.length]),t.jsx("div",{className:o,children:i.map(((a,e)=>r.isValidElement(a)?e>=s?null:t.jsx(O,{type:n,children:r.cloneElement(a)},e):a))})},exports.AnimateHost=I,exports.AnimateOn=function({when:t,value:n,anim:a,options:e,children:o}){const s=F(),f=r.useRef(t);return r.useEffect((()=>{let r=!1;if(r=void 0===n?t!==f.current:t===n&&f.current!==n,r)if(Array.isArray(a)){const t=s.sequence();a.forEach((r=>{t.animate(r,e)}))}else s.play(a,e);f.current=t}),[t,n,a,e,s]),r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&"current"in r&&(r.current=t)}})},exports.AnimatePresence=({show:t,enter:n,exit:a,duration:e=300,children:o})=>{const s=F(),[f,i]=r.useState(t),l=r.useRef(t);return r.useEffect((()=>{if(t&&!l.current&&i(!0),!t&&l.current){s.play(a);const t=setTimeout((()=>{i(!1)}),e);return()=>clearTimeout(t)}l.current=t}),[t,n,a,e]),r.useEffect((()=>{f&&t&&s.play(n)}),[f,t,n]),f?r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&(r.current=t)}}):null},exports.AnimateTyping=({heading:n,dataText:a,className:e,cursorColor:o="#000",typingSpeed:s=120,deletingSpeed:f=40,pauseTime:i=500,children:l})=>{const[m,c]=r.useState(""),[p,d]=r.useState(!1),[u,g]=r.useState(0),y=r.useMemo((()=>Array.isArray(a)?a:"string"==typeof a?[a]:"string"==typeof l?[l]:Array.isArray(l)&&l.every((t=>"string"==typeof t))?l:[]),[a,l]),x=r.useRef();return r.useEffect((()=>{if(!y.length)return;const t=u%y.length,r=y[t],n=p?r.substring(0,m.length-1):r.substring(0,m.length+1),a=!p&&n===r,e=p&&""===n;return x.current=window.setTimeout((()=>{c(n),a&&setTimeout((()=>d(!0)),i),e&&(d(!1),g((t=>t+1)))}),p?f:s),()=>{x.current&&clearTimeout(x.current)}}),[m,p,u,y,s,f,i]),t.jsxs("div",{className:e,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("span",{children:n})," "]}),t.jsx("span",{children:m}),t.jsx(C,{cursorColor:o})]})},exports.TypingText=function({text:r,speed:n,loop:a,as:e="span"}){const{output:o}=j({text:r,speed:n,loop:a});return t.jsx(e,{children:o})},exports.UXDuration={instant:"0.2s",fast:"0.5s",normal:"0.8s",slow:"1.2s",dramatic:"2s"},exports.WrapperAnimate=({children:r,tagName:n,type:a,duration:e,...o})=>t.jsx(k,{...z(a,e),tagName:n,...o,children:r}),exports.animFramesMaps=u,exports.animGroups=y,exports.animNames=g,exports.animate=h,exports.bounceDurations=Z,exports.default=O,exports.defaultAttentionDuration=G,exports.defaultDurationMap=o,exports.defaultEnterDuration=N,exports.defaultExitDuration=H,exports.defaultLoopDuration=W,exports.fadeDurations=q,exports.shakeDurations=P,exports.timingMap={linear:"linear",ease:"ease",easeIn:"ease-in","ease-in":"ease-in",easeOut:"ease-out","ease-out":"ease-out",easeInOut:"ease-in-out","ease-in-out":"ease-in-out"},exports.typingDurations=$,exports.useAnimate=F,exports.useAnimateController=function(t={}){const n=F(),a=r.useCallback(((r,a)=>{const e=r??t.initial;e&&n.play(e,a)}),[n.play,t.initial]);r.useEffect((()=>{t.initial&&a(t.initial)}),[t.initial,a]);const e=r.useMemo((()=>{if(t.recipe)return function(t,r){const n={};return Object.keys(r).forEach((a=>{n[a]=n=>{const e=r[a];if(!e)return;const o="function"==typeof e?e(n):e;t(o,n)}})),n.run=(n,a)=>{const e=r[n];if(!e)return;const o="function"==typeof e?e(a):e;t(o,a)},n}(n.run,t.recipe)}),[n.run,t.recipe]);return{...n,play:a,recipe:e}},exports.useAnimateSequence=function(t){const n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[t]);return r.useMemo((()=>new R(n)),[n])},exports.useAttention=function(){const t=F();return{...t,success:()=>t.play(D),error:()=>t.play(M),loading:()=>t.play(A),warning:()=>t.play(L)}},exports.useAutoAnimate=function(t,n){const a=F(),e=r.useRef(t);return r.useEffect((()=>{e.current!==t&&(a.play(n.change),e.current=t)}),[t,n.change,a]),a},exports.useFocusAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onFocus:()=>t.focus&&r.play(t.focus),onBlur:()=>t.blur&&r.play(t.blur)}}},exports.useHoverAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onMouseEnter:()=>t.enter&&r.play(t.enter),onMouseLeave:()=>t.leave&&r.play(t.leave)}}},exports.usePairedAnimate=function(t){const{ref:n,sequence:a,play:e}=F();return{ref:n,show:r.useCallback((()=>{a().animate(t.enter).wait(t.visibleDuration??1e3).animate(t.leave)}),[a,t]),play:e}},exports.useRandomAnimate=function(t,n){return r.useCallback((r=>{if(!n.length)return;const a=n[Math.floor(Math.random()*n.length)];t(a,r)}),[t,n])},exports.useRandomAnimateByIntensity=function(t,n){return r.useCallback((r=>{const a=n[r?.intensity??"medium"];if(!a?.length)return;const e=a[Math.floor(Math.random()*a.length)];t(e,r)}),[t,n])},exports.useRandomAnimateNoRepeat=function(t,n){const a=r.useRef(null);return r.useCallback((r=>{if(!n.length)return;let e;do{e=n[Math.floor(Math.random()*n.length)]}while(n.length>1&&e===a.current);a.current=e,t(e,r)}),[t,n])},exports.useRecipe=function(t){const{map:n=E,autoReset:a=!0,resetDelay:e=600}=t||{},o=F(),s=r.useRef(),f=r.useCallback((t=>{const r=n[t];r&&(o.play(r),a&&"loading"!==t&&(clearTimeout(s.current),s.current=window.setTimeout(o.reset,e)))}),[n,a,e,o]);return{...o,play:f}},exports.useTypingAnimate=j,exports.useWeightedRandomAnimate=function(t,n){const a=r.useMemo((()=>n.reduce(((t,r)=>t+Math.max(0,r.weight)),0)),[n]);return r.useCallback((r=>{if(!n.length||a<=0)return;let e=Math.random()*a;for(const a of n){if(e-=Math.max(0,a.weight),e<=0)return void t(a.name,r)}}),[t,n,a])};
+`;const D="pulse",M="shakeMix",A="float",L="flash";function j({text:t,speed:n=50,loop:a=!1}){const[e,o]=r.useState(""),[s,f]=r.useState(0),[i,l]=r.useState(!1);return r.useEffect((()=>{if(s>=t.length){if(l(!0),!a)return;const t=setTimeout((()=>{f(0),o(""),l(!1)}),800);return()=>clearTimeout(t)}const r=setTimeout((()=>{o((r=>r+t[s])),f((t=>t+1))}),n);return()=>clearTimeout(r)}),[s,t,n,a]),{output:e,isDone:i,reset:()=>{f(0),o(""),l(!1)}}}const E={idle:"fadeIn",loading:"float",success:"pulse",error:"shakeMix",warning:"flash"};const Z={bounce:o.bounce,bounceIn:o.bounceIn,bounceOut:o.bounceOut,bounceElastic:o.bounceElastic,bounceJelly:o.bounceJelly},P={shakeMix:o.shakeMix,shakeHorizontal:o.shakeHorizontal,shakeVertical:o.shakeVertical,shakeQuick:o.shakeQuick},q={fadeIn:o.fadeIn,fadeOut:o.fadeOut,blurIn:o.blurIn,blurOut:o.blurOut},$={typing:o.typing,typingLoop:o.typingLoop,typeWriter:o.typeWriter,typeDelete:o.typeDelete},N=o.fadeIn,H=o.fadeOut,G=o.shakeMix,W=o.float;exports.Animate=k,exports.AnimateGroup=({type:n,stagger:a=80,children:e,className:o})=>{const[s,f]=r.useState(0),i=r.Children.toArray(e);return r.useEffect((()=>{if(!a)return void f(i.length);let t=0;const r=setInterval((()=>{t++,f(t),t>=i.length&&clearInterval(r)}),a);return()=>clearInterval(r)}),[a,i.length]),t.jsx("div",{className:o,children:i.map(((a,e)=>r.isValidElement(a)?e>=s?null:t.jsx(O,{type:n,children:r.cloneElement(a)},e):a))})},exports.AnimateHost=I,exports.AnimateOn=function({when:t,value:n,anim:a,options:e,children:o}){const s=F(),f=r.useRef(t);return r.useEffect((()=>{let r=!1;if(r=void 0===n?t!==f.current:t===n&&f.current!==n,r)if(Array.isArray(a)){const t=s.sequence();a.forEach((r=>{t.animate(r,e)}))}else s.play(a,e);f.current=t}),[t,n,a,e,s]),r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&"current"in r&&(r.current=t)}})},exports.AnimatePresence=({show:t,enter:n,exit:a,duration:e=300,children:o})=>{const s=F(),[f,i]=r.useState(t),l=r.useRef(t);return r.useEffect((()=>{if(t&&!l.current&&i(!0),!t&&l.current){if(!s.ref.current)return;const t=s.play(a)??e,r=setTimeout((()=>{i(!1)}),t);return()=>clearTimeout(r)}l.current=t}),[t,n,a,e]),r.useEffect((()=>{f&&t&&s.play(n)}),[f,t,n]),f?r.cloneElement(o,{ref:t=>{s.ref.current=t;const r=o.ref;"function"==typeof r?r(t):r&&(r.current=t)}}):null},exports.AnimateTyping=({heading:n,dataText:a,className:e,cursorColor:o="#000",typingSpeed:s=120,deletingSpeed:f=40,pauseTime:i=500,children:l})=>{const[m,c]=r.useState(""),[p,d]=r.useState(!1),[u,g]=r.useState(0),y=r.useMemo((()=>Array.isArray(a)?a:"string"==typeof a?[a]:"string"==typeof l?[l]:Array.isArray(l)&&l.every((t=>"string"==typeof t))?l:[]),[a,l]),x=r.useRef();return r.useEffect((()=>{if(!y.length)return;const t=u%y.length,r=y[t],n=p?r.substring(0,m.length-1):r.substring(0,m.length+1),a=!p&&n===r,e=p&&""===n;return x.current=window.setTimeout((()=>{c(n),a&&setTimeout((()=>d(!0)),i),e&&(d(!1),g((t=>t+1)))}),p?f:s),()=>{x.current&&clearTimeout(x.current)}}),[m,p,u,y,s,f,i]),t.jsxs("div",{className:e,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("span",{children:n})," "]}),t.jsx("span",{children:m}),t.jsx(C,{cursorColor:o})]})},exports.TypingText=function({text:r,speed:n,loop:a,as:e="span"}){const{output:o}=j({text:r,speed:n,loop:a});return t.jsx(e,{children:o})},exports.UXDuration={instant:"0.2s",fast:"0.5s",normal:"0.8s",slow:"1.2s",dramatic:"2s"},exports.WrapperAnimate=({children:r,tagName:n,type:a,duration:e,...o})=>t.jsx(k,{...z(a,e),tagName:n,...o,children:r}),exports.animFramesMaps=u,exports.animGroups=y,exports.animNames=g,exports.animate=h,exports.bounceDurations=Z,exports.default=O,exports.defaultAttentionDuration=G,exports.defaultDurationMap=o,exports.defaultEnterDuration=N,exports.defaultExitDuration=H,exports.defaultLoopDuration=W,exports.fadeDurations=q,exports.shakeDurations=P,exports.timingMap={linear:"linear",ease:"ease",easeIn:"ease-in","ease-in":"ease-in",easeOut:"ease-out","ease-out":"ease-out",easeInOut:"ease-in-out","ease-in-out":"ease-in-out"},exports.typingDurations=$,exports.useAnimate=F,exports.useAnimateController=function(t={}){const n=F(),a=r.useCallback(((r,a)=>{const e=r??t.initial;e&&n.play(e,a)}),[n.play,t.initial]);r.useEffect((()=>{t.initial&&a(t.initial)}),[t.initial,a]);const e=r.useMemo((()=>{if(t.recipe)return function(t,r){const n={};return Object.keys(r).forEach((a=>{n[a]=n=>{const e=r[a];if(!e)return;const o="function"==typeof e?e(n):e;t(o,n)}})),n.run=(n,a)=>{const e=r[n];if(!e)return;const o="function"==typeof e?e(a):e;t(o,a)},n}(n.run,t.recipe)}),[n.run,t.recipe]);return{...n,play:a,recipe:e}},exports.useAnimateSequence=function(t){const n=r.useCallback(((r,n)=>{t.current&&h(t.current).run(r,n)}),[t]);return r.useMemo((()=>new R(n)),[n])},exports.useAttention=function(){const t=F();return{...t,success:()=>t.play(D),error:()=>t.play(M),loading:()=>t.play(A),warning:()=>t.play(L)}},exports.useAutoAnimate=function(t,n){const a=F(),e=r.useRef(t);return r.useEffect((()=>{e.current!==t&&(a.play(n.change),e.current=t)}),[t,n.change,a]),a},exports.useFocusAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onFocus:()=>t.focus&&r.play(t.focus),onBlur:()=>t.blur&&r.play(t.blur)}}},exports.useHoverAnimate=function(t){const r=F();return{...r,bind:{ref:r.ref,onMouseEnter:()=>t.enter&&r.play(t.enter),onMouseLeave:()=>t.leave&&r.play(t.leave)}}},exports.usePairedAnimate=function(t){const{ref:n,sequence:a,play:e}=F();return{ref:n,show:r.useCallback((()=>{a().animate(t.enter).wait(t.visibleDuration??1e3).animate(t.leave)}),[a,t]),play:e}},exports.useRandomAnimate=function(t,n){return r.useCallback((r=>{if(!n.length)return;const a=n[Math.floor(Math.random()*n.length)];t(a,r)}),[t,n])},exports.useRandomAnimateByIntensity=function(t,n){return r.useCallback((r=>{const a=n[r?.intensity??"medium"];if(!a?.length)return;const e=a[Math.floor(Math.random()*a.length)];t(e,r)}),[t,n])},exports.useRandomAnimateNoRepeat=function(t,n){const a=r.useRef(null);return r.useCallback((r=>{if(!n.length)return;let e;do{e=n[Math.floor(Math.random()*n.length)]}while(n.length>1&&e===a.current);a.current=e,t(e,r)}),[t,n])},exports.useRecipe=function(t){const{map:n=E,autoReset:a=!0,resetDelay:e=600}=t||{},o=F(),s=r.useRef(),f=r.useCallback((t=>{const r=n[t];r&&(o.play(r),a&&"loading"!==t&&(clearTimeout(s.current),s.current=window.setTimeout(o.reset,e)))}),[n,a,e,o]);return{...o,play:f}},exports.useTypingAnimate=j,exports.useWeightedRandomAnimate=function(t,n){const a=r.useMemo((()=>n.reduce(((t,r)=>t+Math.max(0,r.weight)),0)),[n]);return r.useCallback((r=>{if(!n.length||a<=0)return;let e=Math.random()*a;for(const a of n){if(e-=Math.max(0,a.weight),e<=0)return void t(a.name,r)}}),[t,n,a])};
 //# sourceMappingURL=index.cjs.js.map