@kunukn/react-collapse
Version:
Collapse library based on CSS transition for React
3 lines (2 loc) • 2.27 kB
JavaScript
(function(n,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],l):(n=typeof globalThis<"u"?globalThis:n||self,l(n.Collapse={},n.ReactJsxRuntime,n.React))})(this,function(n,l,s){"use strict";const h="collapsed",p="collapsing",u="expanding",a="expanded",S="collapse-css-transition",j="div",A="0px";function m(c){requestAnimationFrame(function(){requestAnimationFrame(c)})}const P=({children:c,transition:q,style:L,render:b,elementType:x=j,isOpen:r,collapseHeight:o=A,onInit:F,onChange:$,className:C=S,addState:G,noAnim:g,overflowOnExpanded:I,...X})=>{const E=()=>o==="0px"?"hidden":void 0,[K,y]=s.useReducer(t=>t+1,0),i=s.useRef(),[T,f]=s.useState(0),e=s.useRef({collapse:r?a:h,style:{height:r?void 0:o,visibility:r?void 0:E()}}).current;s.useEffect(()=>{T&&k($)},[T]);const k=(t,v={})=>{t&&t({state:e.collapse,style:e.style,...v})};function D(){i.current&&(e.collapse=h,e.style={height:o,visibility:E()},y(),setTimeout(()=>f(Date.now),0))}function J(){if(i.current){if(g)return D();e.collapse=p,e.style={height:w(),visibility:void 0},y(),m(()=>{i.current&&e.collapse===p&&(e.style={height:o,visibility:void 0},f(Date.now))})}}function M(){if(i.current){if(g)return R();e.collapse=u,m(()=>{i.current&&e.collapse===u&&(e.style={height:w(),visibility:void 0},f(Date.now))})}}function R(){i.current&&(e.collapse=a,e.style={height:void 0,visibility:void 0},y(),setTimeout(()=>f(Date.now),0))}function w(){return`${i.current.scrollHeight}px`}function U({target:t,propertyName:v}){if(t===i.current&&v==="height"){const d=t.style.height;switch(e.collapse){case u:d===void 0||d===o||R();break;case p:d===void 0||d!==o||D();break}}}const N=e.collapse===a||e.collapse===u;!N&&r&&M(),N&&!r&&J();const V={overflow:e.collapse===a&&I?void 0:"hidden",transition:q,...L,...e.style},_=x,z=s.useCallback(t=>{t&&(i.current=t,k(F,{node:t}))},[x]),B=G?`${C} --c-${e.collapse}`:C;return l.jsx(_,{ref:z,style:V,onTransitionEnd:U,className:B,...X,children:typeof c=="function"?c(e.collapse):typeof b=="function"?b(e.collapse):c})};n.Collapse=P,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=react-collapse.umd.js.map