transitions-kit
Version:
A set of predefined transition components
2 lines (1 loc) • 13.1 kB
JavaScript
import{Transition as t}from"react-transition-group";export*from"react-transition-group";import{jsx as e}from"react/jsx-runtime";import{useMemo as n,forwardRef as i,useRef as r,cloneElement as o,useEffect as s,useCallback as a}from"react";function l(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}"function"==typeof SuppressedError&&SuppressedError;const d=(t,e=166)=>{let n;function i(...i){clearTimeout(n),n=setTimeout(()=>{t.apply(this,i)},e)}return i.clear=()=>{clearTimeout(n)},i},c=(...t)=>n(()=>t.every(t=>null==t)?null:e=>{t.forEach(t=>{((t,e)=>{"function"==typeof t?t(e):t&&(t.current=e)})(t,e)})},t),u=t=>t.scrollTop,g={easeInOut:"cubic-bezier(0.4, 0, 0.2, 1)",easeOut:"cubic-bezier(0.0, 0, 0.2, 1)",easeIn:"cubic-bezier(0.4, 0, 1, 1)",sharp:"cubic-bezier(0.4, 0, 0.6, 1)"},y={shortest:150,shorter:200,short:250,standard:300,complex:375,enteringScreen:225,leavingScreen:195};function p(t,e){var n,i;const{timeout:r,easing:o,style:s={}}=t;return{duration:null!==(n=s.transitionDuration)&&void 0!==n?n:"number"==typeof r||"string"==typeof r?r:r[e.mode]||0,easing:null!==(i=s.transitionTimingFunction)&&void 0!==i?i:"object"==typeof o?o[e.mode]:o,delay:s.transitionDelay}}const E=(t=["all"],e={})=>{const{duration:n=y.standard,easing:i=g.easeInOut,delay:r=0}=e,o=t=>`${Math.round(t)}ms`;return(Array.isArray(t)?t:[t]).map(t=>`${t} ${"string"==typeof n?n:o(n)} ${i} ${"string"==typeof r?r:o(r)}`).join(",")},m=t=>{if(!t)return 0;const e=t/36;return Math.round(10*(4+15*Math.pow(e,.25)+e/5))};function f(t){return(null==t?void 0:t.ownerDocument)||document}function x(t){return f(t).defaultView||window}const h=t=>({entering:{opacity:1,filter:"blur(0)"},entered:{opacity:1,filter:"blur(0)"},exiting:{opacity:0,filter:`blur(${t}px)`},exited:{opacity:0,filter:`blur(${t}px)`}}),b=i((n,i)=>{const s={enter:y.enteringScreen,exit:y.leavingScreen},{addEndListener:a,appear:d=!0,children:g,easing:m,in:f,radius:x=25,onEnter:b,onEntered:v,onEntering:O,onExit:j,onExited:w,onExiting:S,style:$,timeout:T=s}=n,L=l(n,["addEndListener","appear","children","easing","in","radius","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout"]),z=r(null),k=c(g.ref,i),R=c(z,k),D=t=>e=>{const n=z.current;t&&n&&(void 0===e?t(n):t(n,e))},I=D(O),H=D(v),P=D(S),A=D(w),X=D((t,e)=>{u(t);const n=p({style:$,timeout:T,easing:m},{mode:"enter"});t.style.webkitTransition=E(["opacity","filter"],n),t.style.transition=E(["opacity","filter"],n),null==b||b(t,e)}),Y=D(t=>{const e=p({style:$,timeout:T,easing:m},{mode:"exit"});t.style.webkitTransition=E(["opacity","filter"],e),t.style.transition=E(["opacity","filter"],e),null==j||j(t)});return e(t,Object.assign({in:f,appear:d,nodeRef:z,onExit:Y,onEnter:X,addEndListener:t=>{z.current&&(null==a||a(z.current,t))},onEntering:I,onEntered:H,onExiting:P,onExited:A,timeout:T},L,{children:t=>o(g,{ref:R,style:Object.assign(Object.assign(Object.assign({opacity:0,visibility:"exited"!==t||f?void 0:"hidden"},h(x)[t]),$),g.props.style)})}))}),v=i(({children:t,ownerState:n,style:i={}},r)=>e("div",{ref:r,style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},i),{height:0,overflow:"hidden",transition:E("height")}),"horizontal"===n.orientation&&{height:"auto",width:0,transition:E("width")}),"entered"===n.state&&Object.assign({height:"auto",overflow:"visible"},"horizontal"===n.orientation&&{width:"auto"})),"exited"===n.state&&!n.in&&"0px"===n.collapsedSize&&{visibility:"hidden"}),children:t})),O=i(({children:t,ownerState:n},i)=>e("div",{ref:i,style:Object.assign({display:"flex",width:"100%"},"horizontal"===n.orientation&&{width:"auto",height:"100%"}),children:t})),j=({children:t,ownerState:n})=>e("div",{style:Object.assign({width:"100%"},"horizontal"===n.orientation&&{width:"auto",height:"100%"}),children:t}),w=i((n,i)=>{const{addEndListener:o,children:a,className:d,collapsedSize:g="0px",easing:E,in:f,onEnter:x,onEntered:h,onEntering:b,onExit:w,onExited:S,onExiting:$,orientation:T="vertical",style:L,timeout:z=y.standard}=n,k=l(n,["addEndListener","children","className","collapsedSize","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","orientation","style","timeout"]),R=Object.assign(Object.assign({},n),{orientation:T,collapsedSize:g}),D=r(void 0),I=r(null),H=c(I,i),P=r(null),A=r(void 0),X="number"==typeof g?`${g}px`:g,Y="horizontal"===T,C=Y?"width":"height";s(()=>()=>{clearTimeout(D.current)},[]);const F=t=>e=>{const n=I.current;t&&n&&(void 0===e?t(n):t(n,e))},M=()=>P.current?P.current[Y?"scrollWidth":"scrollHeight"]:0,N=F((t,e)=>{t.style[C]=X,null==x||x(t,e)}),V=F((t,e)=>{const n=M(),{duration:i,easing:r}=p({style:L,timeout:z,easing:E},{mode:"enter"});if("auto"===z){const e=m(n);t.style.transitionDuration=`${e}ms`,A.current=e}else t.style.transitionDuration="string"==typeof i?i:`${i}ms`;t.style[C]=`${n}px`,t.style.transitionTimingFunction=`${r}`,null==b||b(t,e)}),W=F((t,e)=>{t.style[C]="auto",null==h||h(t,e)}),B=F(t=>{t.style[C]=`${M()}px`,P.current&&u(P.current),null==w||w(t)}),_=F(t=>{const e=M(),{duration:n,easing:i}=p({style:L,timeout:z,easing:E},{mode:"exit"});if("auto"===z){const n=m(e);t.style.transitionDuration=`${n}ms`,A.current=n}else t.style.transitionDuration="string"==typeof n?n:`${n}ms`;t.style[C]=X,t.style.transitionTimingFunction=null!=i?i:"",null==$||$(t)}),q=F(S);return e(t,Object.assign({in:f,nodeRef:I,onEnter:N,onEntered:W,onEntering:V,onExit:B,onExited:q,onExiting:_,addEndListener:t=>{"auto"===z&&(D.current=window.setTimeout(t,Number(A.current)||0)),I.current&&(null==o||o(I.current,t))},timeout:"auto"===z?void 0:z},k,{children:t=>e(v,{ref:H,ownerState:Object.assign(Object.assign({},R),{state:t}),style:Object.assign({[Y?"minWidth":"minHeight"]:X},L),children:e(O,{ownerState:Object.assign(Object.assign({},R),{state:t}),ref:P,children:e(j,{ownerState:Object.assign(Object.assign({},R),{state:t}),children:a})})})}))}),S={entering:{opacity:1},entered:{opacity:1}},$=i((n,i)=>{const s={enter:y.enteringScreen,exit:y.leavingScreen},{addEndListener:a,appear:d=!0,children:g,easing:m,in:f,onEnter:x,onEntered:h,onEntering:b,onExit:v,onExited:O,onExiting:j,style:w,timeout:$=s}=n,T=l(n,["addEndListener","appear","children","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout"]),L=r(null),z=c(g.ref,i),k=c(L,z),R=t=>e=>{const n=L.current;t&&n&&(void 0===e?t(n):t(n,e))},D=R(b),I=R(h),H=R(j),P=R(O),A=R((t,e)=>{u(t);const n=p({style:w,timeout:$,easing:m},{mode:"enter"});t.style.webkitTransition=E("opacity",n),t.style.transition=E("opacity",n),null==x||x(t,e)}),X=R(t=>{const e=p({style:w,timeout:$,easing:m},{mode:"exit"});t.style.webkitTransition=E("opacity",e),t.style.transition=E("opacity",e),null==v||v(t)});return e(t,Object.assign({in:f,appear:d,nodeRef:L,onExit:X,onEnter:A,addEndListener:t=>{L.current&&(null==a||a(L.current,t))},onEntering:D,onEntered:I,onExiting:H,onExited:P,timeout:$},T,{children:t=>o(g,{ref:k,style:Object.assign(Object.assign(Object.assign({opacity:0,visibility:"exited"!==t||f?void 0:"hidden"},S[t]),w),g.props.style)})}))}),T={entering:{opacity:1,transform:"scale(1)"},entered:{opacity:1,transform:"none"}},L="undefined"!=typeof navigator&&/^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent)&&/(os |version\/)15(.|_)4/i.test(navigator.userAgent),z=i((n,i)=>{const{addEndListener:a,appear:d=!0,children:g,easing:y,in:f,onEnter:x,onEntered:h,onEntering:b,onExit:v,onExited:O,onExiting:j,style:w,timeout:S="auto"}=n,$=l(n,["addEndListener","appear","children","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout"]),z=r(void 0),k=r(void 0),R=r(null),D=c(g.ref,i),I=c(R,D),H=t=>e=>{const n=R.current;t&&n&&(void 0===e?t(n):t(n,e))},P=H(h),A=H(b),X=H(O),Y=H(j),C=H((t,e)=>{u(t);const{duration:n,delay:i,easing:r}=p({style:w,timeout:S,easing:y},{mode:"enter"});let o;"auto"===S?(o=m(t.clientHeight),k.current=o):o=n,t.style.transition=[E("opacity",{duration:o,delay:i}),E("transform",{duration:L||"string"==typeof o?o:.666*o,delay:i,easing:r})].join(","),null==x||x(t,e)}),F=H(t=>{const{duration:e,delay:n,easing:i}=p({style:w,timeout:S,easing:y},{mode:"exit"});let r;"auto"===S?(r=m(t.clientHeight),k.current=r):r=e,t.style.transition=[E("opacity",{duration:r,delay:n}),E("transform",{duration:L||"string"==typeof r?r:.666*r,delay:L||"string"==typeof r?n:n||.333*r,easing:i})].join(","),t.style.opacity="0",t.style.transform="scale(0.75)",null==v||v(t)});return s(()=>()=>{clearTimeout(z.current)},[]),e(t,Object.assign({in:f,appear:d,nodeRef:R,onEnter:C,onEntered:P,onEntering:A,onExit:F,onExited:X,onExiting:Y,addEndListener:t=>{"auto"===S&&(z.current=window.setTimeout(t,k.current||0)),R.current&&(null==a||a(R.current,t))},timeout:"auto"===S?void 0:S},$,{children:t=>o(g,{ref:I,style:Object.assign(Object.assign(Object.assign({opacity:0,transform:"scale(0.75)",visibility:"exited"!==t||f?void 0:"hidden"},T[t]),w),g.props.style)})}))});function k(t,e,n){var i;const r=function(t,e,n){const i=e.getBoundingClientRect(),r=null==n?void 0:n.getBoundingClientRect(),o=x(e),s=o.getComputedStyle(e),a=s.getPropertyValue("-webkit-transform")||s.getPropertyValue("transform");let l=0,d=0;if(a&&"none"!==a&&"string"==typeof a){const t=a.split("(")[1].split(")")[0].split(",");l=parseInt(t[4],10),d=parseInt(t[5],10)}return"left"===t?r?`translateX(${r.right+l-i.left}px)`:`translateX(${o.innerWidth+l-i.left}px)`:"right"===t?r?`translateX(-${i.right-r.left-l}px)`:`translateX(-${i.left+i.width-l}px)`:"up"===t?r?`translateY(${r.bottom+d-i.top}px)`:`translateY(${o.innerHeight+d-i.top}px)`:r?`translateY(-${i.top-r.top+i.height-d}px)`:`translateY(-${i.top+i.height-d}px)`}(t,e,"function"==typeof(i=n)?i():i);r&&(e.style.webkitTransform=r,e.style.transform=r)}const R=i((n,i)=>{const m={enter:g.easeOut,exit:g.sharp},f={enter:y.enteringScreen,exit:y.leavingScreen},{addEndListener:h,appear:b=!0,children:v,container:O,direction:j="down",easing:w=m,in:S,onEnter:$,onEntered:T,onEntering:L,onExit:z,onExited:R,onExiting:D,style:I,timeout:H=f}=n,P=l(n,["addEndListener","appear","children","container","direction","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout"]),A=r(void 0),X=c(v.ref,A),Y=c(X,i),C=t=>e=>{const n=A.current;t&&n&&(void 0===e?t(n):t(n,e))},F=C((t,e)=>{k(j,t,O),u(t),null==$||$(t,e)}),M=C((t,e)=>{const n=p({timeout:H,style:I,easing:w},{mode:"enter"});t.style.webkitTransition=E("-webkit-transform",n),t.style.transition=E("transform",n),t.style.webkitTransform="none",t.style.transform="none",null==L||L(t,e)}),N=C(t=>{const e=p({timeout:H,style:I,easing:w},{mode:"exit"});t.style.webkitTransition=E("-webkit-transform",e),t.style.transition=E("transform",e),k(j,t,O),null==z||z(t)}),V=C(t=>{t.style.webkitTransition="",t.style.transition="",null==R||R(t)}),W=a(()=>{A.current&&k(j,A.current,O)},[j,O]);return s(()=>{if(S||"down"===j||"right"===j)return;const t=d(()=>{A.current&&k(j,A.current,O)}),e=x(A.current);return e.addEventListener("resize",t),()=>{t.clear(),e.removeEventListener("resize",t)}},[j,S,O]),s(()=>{S||W()},[S,W]),e(t,Object.assign({in:S,appear:b,nodeRef:A,timeout:H,onEnter:F,onEntered:T,onEntering:M,onExit:N,onExited:V,onExiting:D,addEndListener:t=>{A.current&&(null==h||h(A.current,t))}},P,{children:t=>o(v,{ref:Y,style:Object.assign(Object.assign({visibility:"exited"!==t||S?void 0:"hidden"},I),v.props.style)})}))}),D={entering:{transform:"none"},entered:{transform:"none"}},I=i((n,i)=>{const s={enter:y.enteringScreen,exit:y.leavingScreen},{addEndListener:a,appear:d=!0,children:g,easing:m,in:f,onEnter:x,onEntered:h,onEntering:b,onExit:v,onExited:O,onExiting:j,style:w,timeout:S=s}=n,$=l(n,["addEndListener","appear","children","easing","in","onEnter","onEntered","onEntering","onExit","onExited","onExiting","style","timeout"]),T=r(null),L=c(g.ref,i),z=c(T,L),k=t=>e=>{const n=T.current;t&&n&&(void 0===e?t(n):t(n,e))},R=k(h),I=k(b),H=k(O),P=k(j),A=k((t,e)=>{u(t);const n=p({style:w,timeout:S,easing:m},{mode:"enter"});t.style.webkitTransition=E("transform",n),t.style.transition=E("transform",n),null==x||x(t,e)}),X=k(t=>{const e=p({style:w,timeout:S,easing:m},{mode:"exit"});t.style.webkitTransition=E("transform",e),t.style.transition=E("transform",e),null==v||v(t)});return e(t,Object.assign({in:f,appear:d,nodeRef:T,onEnter:A,onEntered:R,onEntering:I,onExit:X,onExited:H,onExiting:P,addEndListener:t=>{T.current&&(null==a||a(T.current,t))},timeout:S},$,{children:t=>o(g,{ref:z,style:Object.assign(Object.assign(Object.assign({transform:"scale(0)",visibility:"exited"!==t||f?void 0:"hidden"},D[t]),w),g.props.style)})}))});export{b as Blur,w as Collapse,$ as Fade,z as Grow,R as Slide,I as Zoom,E as createTransition,d as debounce,y as duration,g as easing,m as getAutoHeightDuration,p as getTransitionProps,f as ownerDocument,x as ownerWindow,u as reflow,c as useForkRef};