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 { interface PanelProps {
title: string; title: string;
defaultCollapsed?: boolean; defaultCollapsed?: boolean;
hide?: boolean;
} }
export const Panel: React.FC<PanelProps> = ({ export const Panel: React.FC<PanelProps> = ({
title, title,
children, children,
defaultCollapsed = false defaultCollapsed = false,
hide = false
}) => { }) => {
const [collapsed, setCollapsed] = useState(defaultCollapsed); const [collapsed, setCollapsed] = useState(defaultCollapsed);
if (hide) return null;
return ( return (
<div className="panel"> <div className="panel">
<h4>{title}</h4> <h4>{title}</h4>

198
src/index.tsx
View file

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