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
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { EditableText } from "../EditableText";
|
|
import { Panel } from "../Panel";
|
|
|
|
interface PanelExportProps {
|
|
projectName: string;
|
|
onProjectNameChange: (name: string) => void;
|
|
onExportAsPNG: React.MouseEventHandler;
|
|
exportBackground: boolean;
|
|
onExportBackgroundChange: (val: boolean) => void;
|
|
onSaveScene: React.MouseEventHandler;
|
|
onLoadScene: React.MouseEventHandler;
|
|
}
|
|
|
|
export const PanelExport: React.FC<PanelExportProps> = ({
|
|
projectName,
|
|
exportBackground,
|
|
onProjectNameChange,
|
|
onExportBackgroundChange,
|
|
onSaveScene,
|
|
onLoadScene,
|
|
onExportAsPNG
|
|
}) => {
|
|
return (
|
|
<Panel title="Export">
|
|
<div className="panelColumn">
|
|
<h5>Name</h5>
|
|
{projectName && (
|
|
<EditableText
|
|
value={projectName}
|
|
onChange={(name: string) => onProjectNameChange(name)}
|
|
/>
|
|
)}
|
|
<h5>Image</h5>
|
|
<button onClick={onExportAsPNG}>Export to png</button>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={exportBackground}
|
|
onChange={e => {
|
|
onExportBackgroundChange(e.target.checked);
|
|
}}
|
|
/>
|
|
background
|
|
</label>
|
|
<h5>Scene</h5>
|
|
<button onClick={onSaveScene}>Save as...</button>
|
|
<button onClick={onLoadScene}>Load file...</button>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
};
|