react-transitioning/dist/index.cjs.js

React components for easily implementing basic CSS animations and transitions

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