react-transitioning/dist/index.cjs.js

React components for easily implementing basic CSS animations and transitions

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