react-transitioning/dist/index.cjs.js

React components for easily implementing basic CSS animations and transitions

"use strict";var X=Object.defineProperty,K=Object.defineProperties,Q=Object.getOwnPropertyDescriptor,W=Object.getOwnPropertyDescriptors,Y=Object.getOwnPropertyNames,O=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var j=(n,e,t)=>e in n?X(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,E=(n,e)=>{for(var t in e||(e={}))G.call(e,t)&&j(n,t,e[t]);if(O)for(var t of O(e))q.call(e,t)&&j(n,t,e[t]);return n},I=(n,e)=>K(n,W(e));var b=(n,e)=>{var t={};for(var s in n)G.call(n,s)&&e.indexOf(s)<0&&(t[s]=n[s]);if(n!=null&&O)for(var s of O(n))e.indexOf(s)<0&&q.call(n,s)&&(t[s]=n[s]);return t};var Z=(n,e)=>{for(var t in e)X(n,t,{get:e[t],enumerable:!0})},ee=(n,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Y(e))!G.call(n,r)&&r!==t&&X(n,r,{get:()=>e[r],enumerable:!(s=Q(e,r))||s.enumerable});return n};var ne=n=>ee(X({},"__esModule",{value:!0}),n);var Ee={};Z(Ee,{CSSTransition:()=>J,DEFAULT_TRANSITION_DURATION:()=>R,StyleTransition:()=>H,Transition:()=>S,TransitionGroup:()=>B,TransitionPhase:()=>V,TransitionPhaseEvent:()=>U});module.exports=ne(Ee);var y=require("react");var k=require("react"),w=typeof window!="undefined"&&window.document?k.useLayoutEffect:k.useEffect;var R=500;var V=(o=>(o.APPEAR="appear",o.APPEAR_ACTIVE="appearActive",o.APPEAR_DONE="appearDone",o.ENTER="enter",o.ENTER_ACTIVE="enterActive",o.ENTER_DONE="enterDone",o.EXIT="exit",o.EXIT_ACTIVE="exitActive",o.EXIT_DONE="exitDone",o))(V||{}),U=(a=>(a.ENTER="onEnter",a.ENTERING="onEntering",a.ENTERED="onEntered",a.EXIT="onExit",a.EXITING="onExiting",a.EXITED="onExited",a))(U||{}),z={appear:["onEnter","appearActive"],appearActive:["onEntering","appearDone",!0],appearDone:["onEntered"],enter:["onEnter","enterActive"],enterActive:["onEntering","enterDone",!0],enterDone:["onEntered"],exit:["onExit","exitActive"],exitActive:["onExiting","exitDone",!0],exitDone:["onExited"]};function S(n){let{children:e,in:t=!1,appear:s=!1,enter:r=!0,exit:c=!0,duration:a=500,alwaysMounted:x=!1,addEndListener:D}=n,[o,m]=(0,y.useState)(()=>{switch(!0){case!t:return"exitDone";case!!s:return"appear";default:return"appearDone"}});(0,y.useEffect)(()=>{let{setTimeout:p,clearTimeout:f}=window,[A,i,T]=z[o],{[A]:l}=n;l==null||l();let P=0,u=0;return i&&(T?D?D(o,()=>m(i)):P=p(m,a,i):u=requestAnimationFrame(()=>m(i))),()=>{f(P),cancelAnimationFrame(u)}},[o,a]),w(()=>{let p=["exit","exitActive","exitDone"].includes(o);t&&p&&m(r?"enter":"enterDone"),!t&&!p&&m(c?"exit":"exitDone")},[t]);let h=(0,y.useMemo)(()=>Object.keys(z).reduce((p,f)=>I(E({},p),{[f]:o===f}),{}),[o]);return!x&&(c?o==="exitDone":!t)?null:typeof e=="function"?e(h,o):e}var d=require("react");function B(n){let{children:e,appear:t=!1,enter:s=!0,exit:r=!1,duration:c=500}=n,a=(0,d.useRef)(!1),x=(0,d.useRef)([]),D=[],o=[],m={},h=[];d.Children.toArray(e).forEach(i=>{(0,d.isValidElement)(i)&&(m[i.key]=h.length,h.push(i))});let p=(i,T)=>{var P,u,N,L,$;let l=(0,d.cloneElement)(i,{in:!T,alwaysMounted:!1,exit:(P=i.props.exit)!=null?P:r,enter:(u=i.props.enter)!=null?u:s,duration:(N=i.props.duration)!=null?N:c,appear:a.current?(L=i.props.enter)!=null?L:s:($=i.props.appear)!=null?$:t});D.push({element:i,removeTimeout:T}),o.push(l)},f=i=>{var T;return window.setTimeout(()=>{let{current:l}=x,P=l.findIndex(({element:u})=>u.key===i.key);P>=0&&l.splice(P,1)},(T=i.props.duration)!=null?T:c)},A=0;x.current.forEach(({element:i,removeTimeout:T})=>{var P,u;let l=(P=m[i.key])!=null?P:-1;if(l<0)T?p(i,T):((u=i.props.exit)!=null?u:r)&&p(i,f(i));else{T&&window.clearTimeout(T);for(let N=A;N<=l;N+=1)p(h[N])}A=Math.max(A,l+1)});for(let i=A;i<h.length;i+=1)p(h[i]);return w(()=>{a.current=!0},[]),x.current=D,o}var C=require("react");var F=require("react/jsx-runtime"),te=(n,e)=>{let t=e[n];switch(n){case"appearActive":return E(E({},e.appear),t);case"enterActive":return E(E({},e.enter),t);case"exitActive":return E(E({},e.exit),t);default:return t}};function ie(n){let{children:e,styles:t,phase:s}=n;if(!(0,C.isValidElement)(e))return null;let{style:r}=e.props,c=(0,C.useMemo)(()=>E(E({},r),te(s,t)),[r,t,s]);return(0,C.cloneElement)(e,{style:c})}function H(n){let r=n,{children:e,styles:t}=r,s=b(r,["children","styles"]);return(0,F.jsx)(S,I(E({},s),{children:(c,a)=>(0,F.jsx)(ie,{children:e,styles:t,phase:a})}))}var _=require("react");var M=require("react/jsx-runtime"),se={appear:"-appear",appearActive:"-appear-active",appearDone:"-appear-done",enter:"-enter",enterActive:"-enter-active",enterDone:"-enter-done",exit:"-exit",exitActive:"-exit-active",exitDone:"-exit-done"},re=(n,e)=>`${n}${e}`,v=(...n)=>n.filter(e=>!!e).join(" "),g=(n,e)=>typeof e=="string"?re(e,se[n]):e[n],oe=(n,e)=>{let t=g(n,e);switch(n){case"appearActive":return v(g("appear",e),t);case"enterActive":return v(g("enter",e),t);case"exitActive":return v(g("exit",e),t);default:return t}};function ae(n){let{children:e,classNames:t,phase:s}=n;if(!(0,_.isValidElement)(e))return null;let{className:r}=e.props,c=(0,_.useMemo)(()=>v(r,oe(s,t)),[r,t,s]);return(0,_.cloneElement)(e,{className:c})}function J(n){let r=n,{children:e,classNames:t}=r,s=b(r,["children","classNames"]);return(0,M.jsx)(S,I(E({},s),{children:(c,a)=>(0,M.jsx)(ae,{children:e,classNames:t,phase:a})}))}0&&(module.exports={CSSTransition,DEFAULT_TRANSITION_DURATION,StyleTransition,Transition,TransitionGroup,TransitionPhase,TransitionPhaseEvent});
//# sourceMappingURL=index.cjs.js.map