36ce6a26e6
* Make panels collapsible - Add Panel component with collapse logic - Use the component in all the necessary panel groups * Remove unnecessary container from PanelCanvas * Add "hide property" to Pane component to hide Panel contents using a prop - Instead of doing conditional rendering, pass the condition to Panel as props * Change collapse icon rotation for closed - Use one icon and use CSS transforms to rotate it * Remove unnecessary imports from PanelSelection
44 lines
917 B
TypeScript
44 lines
917 B
TypeScript
import React, { useState } from "react";
|
|
|
|
interface PanelProps {
|
|
title: string;
|
|
defaultCollapsed?: boolean;
|
|
hide?: boolean;
|
|
}
|
|
|
|
export const Panel: React.FC<PanelProps> = ({
|
|
title,
|
|
children,
|
|
defaultCollapsed = false,
|
|
hide = false
|
|
}) => {
|
|
const [collapsed, setCollapsed] = useState(defaultCollapsed);
|
|
|
|
if (hide) return null;
|
|
|
|
return (
|
|
<div className="panel">
|
|
<h4>{title}</h4>
|
|
<button
|
|
className="btn-panel-collapse"
|
|
type="button"
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
setCollapsed(collapsed => !collapsed);
|
|
}}
|
|
>
|
|
{
|
|
<span
|
|
className={`btn-panel-collapse-icon ${
|
|
collapsed ? "btn-panel-collapse-icon-closed" : ""
|
|
}`}
|
|
>
|
|
▼
|
|
</span>
|
|
}
|
|
</button>
|
|
{!collapsed && <div className="panelColumn">{children}</div>}
|
|
</div>
|
|
);
|
|
};
|