From a120cd4ad289119cd66a88cd4a2e4f8a68c61839 Mon Sep 17 00:00:00 2001
From: Gasim Gasimzada <me@gasim.xyz>
Date: Wed, 8 Jan 2020 11:39:09 +0400
Subject: [PATCH] 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
---
 src/components/Panel.tsx |   7 +-
 src/index.tsx            | 198 +++++++++++++++++++--------------------
 2 files changed, 104 insertions(+), 101 deletions(-)

diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 4ecbe3fbb..ecb3638c0 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -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>
diff --git a/src/index.tsx b/src/index.tsx
index 691ac16f0..d4ad3d5ef 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -381,112 +381,110 @@ class App extends React.Component<{}, AppState> {
               this.forceUpdate();
             }}
           />
-          {someElementIsSelected(elements) && (
-            <Panel title="Selection">
-              <PanelSelection
-                onBringForward={this.moveOneRight}
-                onBringToFront={this.moveAllRight}
-                onSendBackward={this.moveOneLeft}
-                onSendToBack={this.moveAllLeft}
-              />
+          <Panel title="Selection" hide={!someElementIsSelected(elements)}>
+            <PanelSelection
+              onBringForward={this.moveOneRight}
+              onBringToFront={this.moveAllRight}
+              onSendBackward={this.moveOneLeft}
+              onSendToBack={this.moveAllLeft}
+            />
 
-              <PanelColor
-                title="Stroke Color"
-                onColorChange={this.changeStrokeColor}
-                colorValue={getSelectedAttribute(
-                  elements,
-                  element => element.strokeColor
-                )}
-              />
-
-              {hasBackground(elements) && (
-                <>
-                  <PanelColor
-                    title="Background Color"
-                    onColorChange={this.changeBackgroundColor}
-                    colorValue={getSelectedAttribute(
-                      elements,
-                      element => element.backgroundColor
-                    )}
-                  />
-
-                  <h5>Fill</h5>
-                  <ButtonSelect
-                    options={[
-                      { value: "solid", text: "Solid" },
-                      { value: "hachure", text: "Hachure" },
-                      { value: "cross-hatch", text: "Cross-hatch" }
-                    ]}
-                    value={getSelectedAttribute(
-                      elements,
-                      element => element.fillStyle
-                    )}
-                    onChange={value => {
-                      this.changeProperty(element => {
-                        element.fillStyle = value;
-                      });
-                    }}
-                  />
-                </>
+            <PanelColor
+              title="Stroke Color"
+              onColorChange={this.changeStrokeColor}
+              colorValue={getSelectedAttribute(
+                elements,
+                element => element.strokeColor
               )}
+            />
 
-              {hasStroke(elements) && (
-                <>
-                  <h5>Stroke Width</h5>
-                  <ButtonSelect
-                    options={[
-                      { value: 1, text: "Thin" },
-                      { value: 2, text: "Bold" },
-                      { value: 4, text: "Extra Bold" }
-                    ]}
-                    value={getSelectedAttribute(
-                      elements,
-                      element => element.strokeWidth
-                    )}
-                    onChange={value => {
-                      this.changeProperty(element => {
-                        element.strokeWidth = value;
-                      });
-                    }}
-                  />
+            {hasBackground(elements) && (
+              <>
+                <PanelColor
+                  title="Background Color"
+                  onColorChange={this.changeBackgroundColor}
+                  colorValue={getSelectedAttribute(
+                    elements,
+                    element => element.backgroundColor
+                  )}
+                />
 
-                  <h5>Sloppiness</h5>
-                  <ButtonSelect
-                    options={[
-                      { value: 0, text: "Draftsman" },
-                      { value: 1, text: "Artist" },
-                      { value: 3, text: "Cartoonist" }
-                    ]}
-                    value={getSelectedAttribute(
-                      elements,
-                      element => element.roughness
-                    )}
-                    onChange={value =>
-                      this.changeProperty(element => {
-                        element.roughness = value;
-                      })
-                    }
-                  />
-                </>
-              )}
+                <h5>Fill</h5>
+                <ButtonSelect
+                  options={[
+                    { value: "solid", text: "Solid" },
+                    { value: "hachure", text: "Hachure" },
+                    { value: "cross-hatch", text: "Cross-hatch" }
+                  ]}
+                  value={getSelectedAttribute(
+                    elements,
+                    element => element.fillStyle
+                  )}
+                  onChange={value => {
+                    this.changeProperty(element => {
+                      element.fillStyle = value;
+                    });
+                  }}
+                />
+              </>
+            )}
 
-              <h5>Opacity</h5>
-              <input
-                type="range"
-                min="0"
-                max="100"
-                onChange={this.changeOpacity}
-                value={
-                  getSelectedAttribute(elements, element => element.opacity) ||
-                  0 /* Put the opacity at 0 if there are two conflicting ones */
-                }
-              />
+            {hasStroke(elements) && (
+              <>
+                <h5>Stroke Width</h5>
+                <ButtonSelect
+                  options={[
+                    { value: 1, text: "Thin" },
+                    { value: 2, text: "Bold" },
+                    { value: 4, text: "Extra Bold" }
+                  ]}
+                  value={getSelectedAttribute(
+                    elements,
+                    element => element.strokeWidth
+                  )}
+                  onChange={value => {
+                    this.changeProperty(element => {
+                      element.strokeWidth = value;
+                    });
+                  }}
+                />
 
-              <button onClick={this.deleteSelectedElements}>
-                Delete selected
-              </button>
-            </Panel>
-          )}
+                <h5>Sloppiness</h5>
+                <ButtonSelect
+                  options={[
+                    { value: 0, text: "Draftsman" },
+                    { value: 1, text: "Artist" },
+                    { value: 3, text: "Cartoonist" }
+                  ]}
+                  value={getSelectedAttribute(
+                    elements,
+                    element => element.roughness
+                  )}
+                  onChange={value =>
+                    this.changeProperty(element => {
+                      element.roughness = value;
+                    })
+                  }
+                />
+              </>
+            )}
+
+            <h5>Opacity</h5>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              onChange={this.changeOpacity}
+              value={
+                getSelectedAttribute(elements, element => element.opacity) ||
+                0 /* Put the opacity at 0 if there are two conflicting ones */
+              }
+            />
+
+            <button onClick={this.deleteSelectedElements}>
+              Delete selected
+            </button>
+          </Panel>
           <PanelCanvas
             onClearCanvas={this.clearCanvas}
             onViewBackgroundColorChange={val =>