quantum/totp
1
0
Fork 0
mirror of https://github.com/quantum5/totp.git synced 2025-04-24 05:31:59 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix Collapsible

Browse source
This commit is contained in:
Quantum 2024-04-07 02:19:40 -04:00
parent c0c6fd2464
commit 1d2d63bdc7
1 changed files with 6 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/Collapsible.tsx
View file

@ -1,28 +1,18 @@
import React from 'react';
import {Collapse} from 'bootstrap';
import classNames from 'classnames';
export interface CollapsibleHandle {
show: () => void;
hide: () => void;
toggle: () => void;
}
export default function Collapsible({children, show}: { children: React.ReactNode; show: boolean }) {
const collapse = React.useRef<Collapse>();
const onLoad = React.useCallback((element: HTMLDivElement) => {
collapse.current = new Collapse(element, {toggle: show});
}, []);
const id = React.useId();
React.useEffect(() => {
const collapse = Collapse.getOrCreateInstance(`#${id}`, {toggle: show});
if (show)
collapse.current?.show();
collapse.show();
else
collapse.current?.hide();
}, [show]);
collapse.hide();
}, [id, show]);
return <div ref={onLoad} className={classNames('collapse', {show})}>
return <div id={id} className="collapse">
{children}
</div>;
}