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