smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add "hide property" to Pane component to hide Panel contents using a prop

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

7
src/components/Panel.tsx
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>

198
src/index.tsx
View file

@ -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 =>