mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-02-20 07:37:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1145] Keep more info open if it is (#1392)

Browse Source 
* Keep more info open if it is

* toggle off when closing inspector

* Update TopBarOptions.tsx

* tweak code

* Update Accordion.tsx

---------

Co-authored-by: jake <77554505+brxken128@users.noreply.github.com>
This commit is contained in:
ameer2468
2023-09-27 20:15:57 +03:00
committed by GitHub
parent 98a49ba9ed
commit a68b33d980
5 changed files with 32 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
interface/components/Accordion.tsx
View File

@@ -7,6 +7,8 @@ interface Props {
title: string;
variant?: keyof typeof styles;
className?: string;
isOpen?: boolean;
onToggle?: (isOpen: boolean) => void;
}
const styles = {
@@ -22,19 +24,25 @@ const styles = {
}
};
const Accordion = (props: PropsWithChildren<Props>) => {
const [toggle, setToggle] = useState(false);
const Accordion = ({ isOpen = false, ...props }: PropsWithChildren<Props>) => {
const [toggle, setToggle] = useState(isOpen);
const variant = styles[props.variant ?? 'default'];
return (
<div className={clsx(variant.box, props.className)}>
<div onClick={() => setToggle((t) => !t)} className={variant.title}>
<div
onClick={() => {
setToggle((t) => !t);
props.onToggle?.(!toggle);
}}
className={variant.title}
>
<p className="text-xs">{props.title}</p>
<CaretDown
size={props.caretSize || 12}
className={clsx(toggle && 'rotate-180', 'transition-all duration-200')}
className={clsx(isOpen && 'rotate-180', 'transition-all duration-200')}
/>
</div>
{toggle && <div className={variant.container}>{props.children}</div>}
{isOpen && <div className={variant.container}>{props.children}</div>}
</div>
);
};