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
This commit is contained in:
Gasim Gasimzada 2020-01-08 11:39:09 +04:00
parent c46765382b
commit a120cd4ad2
2 changed files with 104 additions and 101 deletions

View file

@ -3,14 +3,19 @@ import React, { useState } from "react";
interface PanelProps {
title: string;
defaultCollapsed?: boolean;
hide?: boolean;
}
export const Panel: React.FC<PanelProps> = ({
title,
children,
defaultCollapsed = false
defaultCollapsed = false,
hide = false
}) => {
const [collapsed, setCollapsed] = useState(defaultCollapsed);
if (hide) return null;
return (
<div className="panel">
<h4>{title}</h4>

View file

@ -381,8 +381,7 @@ class App extends React.Component<{}, AppState> {
this.forceUpdate();
}}
/>
{someElementIsSelected(elements) && (
<Panel title="Selection">
<Panel title="Selection" hide={!someElementIsSelected(elements)}>
<PanelSelection
onBringForward={this.moveOneRight}
onBringToFront={this.moveAllRight}
@ -486,7 +485,6 @@ class App extends React.Component<{}, AppState> {
Delete selected
</button>
</Panel>
)}
<PanelCanvas
onClearCanvas={this.clearCanvas}
onViewBackgroundColorChange={val =>