@hakit/components
Version:
A series of components to work with @hakit/core
3 lines (2 loc) • 1.12 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../../emotion-react-jsx-runtime.browser.esm-CgJouFLh.cjs"),s=require("react"),R=({isOpen:t,children:a,duration:r=300,className:f,style:g,onCollapseComplete:u})=>{const h=s.useRef(null),[m,i]=s.useState(t),[y,n]=s.useState(!0),c=s.useRef(!1);return s.useLayoutEffect(()=>{const e=h.current;if(e){if(!c.current){c.current=!0,t?(i(!0),n(!1),e.style.height="auto"):i(!1);return}if(t)i(!0),e.style.height="0px",requestAnimationFrame(()=>{const o=e.scrollHeight;n(!0),e.style.transition=`height ${r}ms ease`,e.style.height=`${o}px`;const l=setTimeout(()=>{e.style.transition="",e.style.height="auto"},r);return()=>clearTimeout(l)});else{const o=e.scrollHeight;e.style.height=`${o}px`,requestAnimationFrame(()=>{n(!0),e.style.transition=`height ${r}ms ease`,e.style.height="0px";const l=setTimeout(()=>{i(!1),u&&u()},r);return()=>clearTimeout(l)})}}},[t,r,u]),d.jsx("div",{ref:h,className:f,style:{overflow:"hidden",height:t&&!y?"auto":void 0,...g},children:m?a:null})};exports.AutoHeight=R;
//# sourceMappingURL=index.js.map