react-collapsible-wrapper
Version:
Lightweight collapsible wrapper that is easy to use and customizable
2 lines (1 loc) • 1.35 kB
JavaScript
var e,t=require("react/jsx-runtime"),i=require("react");!function(e){e[e.div=0]="div",e[e.article=1]="article",e[e.section=2]="section",e[e.ul=3]="ul",e[e.ol=4]="ol",e[e.li=5]="li"}(e||(e={}));const n={maxHeight:0,overflow:"hidden"},s=i.forwardRef(((e,s)=>{const r=i.useState()[1].bind(null,{}),a=s||i.useRef(null),c=e.tagName||"div";return i.useEffect((()=>{(e.isOpen||e.updateAfterInitRender)&&r()}),[]),i.useEffect((()=>{if(a&&e.updateHeightOnResize){const e=()=>{const e=a.current;"false"===e.getAttribute("aria-hidden")&&(e.style.maxHeight=e.scrollHeight+"px")};return window.addEventListener("resize",e,{passive:!0}),()=>window.removeEventListener("resize",e)}}),[a,e.updateHeightOnResize]),t.jsx(c,Object.assign({ref:a,id:e.id,className:e.className,tabIndex:e.tabIndex,onChange:e.onChange,onTransitionEnd:e.onTransitionEnd},(({isOpen:e,duration:t,easing:i,style:s,ref:r})=>{var a;let c;return r.current&&(c=`max-height ${t||r.current.scrollHeight/750}s ${i||"linear"}`),e?{"aria-hidden":"false",style:Object.assign(Object.assign(Object.assign({},s),n),{transition:c,maxHeight:(null===(a=r.current)||void 0===a?void 0:a.scrollHeight)+"px"})}:{"aria-hidden":"true",style:Object.assign(Object.assign(Object.assign({},s),n),{transition:c})}})(Object.assign(Object.assign({},e),{ref:a})),{children:e.children}))}));module.exports=s;
;