UNPKG

@kunukn/react-collapse

Version:

Collapse library based on CSS transition for React

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