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