quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

collapse on border click

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-07-08 17:09:46 +04:00
parent c401f39520
commit a4684ddf39
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/components/src/components/SquiggleItem.tsx
View File

@ -48,12 +48,18 @@ const VariableBox: React.FC<VariableBoxProps> = ({
children,
}) => {
const [isCollapsed, setIsCollapsed] = useState(false);
const toggleCollapsed = () => {
setIsCollapsed(!isCollapsed);
};
return (
<div>
<div>
{name ? (
<header
className="inline-flex space-x-1 text-slate-500 font-mono text-sm cursor-pointer"
onClick={() => setIsCollapsed(!isCollapsed)}
onClick={toggleCollapsed}
>
{name ? (
<Tooltip text={heading}>
@ -65,7 +71,18 @@ const VariableBox: React.FC<VariableBoxProps> = ({
) : null}
</header>
) : null}
{isCollapsed ? null : <div>{children}</div>}
{isCollapsed ? null : (
<div className="flex w-full">
{name ? (
<div
className="border-l-2 border-slate-200 hover:border-green-600 w-4 cursor-pointer"
onClick={toggleCollapsed}
></div>
) : null}
<div className="grow">{children}</div>
</div>
)}
</div>
</div>
);
};
@ -76,7 +93,7 @@ const VariableList: React.FC<{
children: React.ReactNode;
}> = ({ name, heading, children }) => (
<VariableBox name={name} heading={heading}>
<div className={clsx("space-y-3", name ? "border-l pl-4 pt-1 mt-1" : null)}>
<div className={clsx("space-y-3", name ? "pt-1 mt-1" : null)}>
{children}
</div>
</VariableBox>