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
34 lines
800 B
TypeScript
34 lines
800 B
TypeScript
import React from "react";
|
|
|
|
import { ColorPicker } from "../ColorPicker";
|
|
import { Panel } from "../Panel";
|
|
|
|
interface PanelCanvasProps {
|
|
viewBackgroundColor: string;
|
|
onViewBackgroundColorChange: (val: string) => void;
|
|
onClearCanvas: React.MouseEventHandler;
|
|
}
|
|
|
|
export const PanelCanvas: React.FC<PanelCanvasProps> = ({
|
|
viewBackgroundColor,
|
|
onViewBackgroundColorChange,
|
|
onClearCanvas
|
|
}) => {
|
|
return (
|
|
<Panel title="Canvas">
|
|
<h5>Canvas Background Color</h5>
|
|
<ColorPicker
|
|
color={viewBackgroundColor}
|
|
onChange={color => onViewBackgroundColorChange(color)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={onClearCanvas}
|
|
title="Clear the canvas & reset background color"
|
|
>
|
|
Clear canvas
|
|
</button>
|
|
</Panel>
|
|
);
|
|
};
|