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