PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Only show controls when present

Browse source
This commit is contained in:
Steve Ruiz 2021-06-29 15:58:27 +01:00
parent 364dbe0fd9
commit 9e3d2eb7cd
1 changed files with 21 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
components/controls-panel/controls-panel.tsx
View file

@ -2,18 +2,14 @@
import styled from 'styles' import styled from 'styles'
import React, { useRef } from 'react' import React, { useRef } from 'react'
import state, { useSelector } from 'state' import state, { useSelector } from 'state'
import { X, Code } from 'react-feather' import { X } from 'react-feather'
import { breakpoints, IconButton } from 'components/shared' import { breakpoints, IconButton } from 'components/shared'
import * as Panel from '../panel' import * as Panel from '../panel'
import Control from './control' import Control from './control'
import { deepCompareArrays } from 'utils' import { deepCompareArrays } from 'utils'
function openCodePanel() { function handleClose() {
state.send('CLOSED_CODE_PANEL') state.send('CLOSED_CONTROLS')
}
function closeCodePanel() {
state.send('OPENED_CODE_PANEL')
} }
const stopKeyboardPropagation = (e: KeyboardEvent | React.KeyboardEvent) => const stopKeyboardPropagation = (e: KeyboardEvent | React.KeyboardEvent) =>
@ -22,11 +18,16 @@ const stopKeyboardPropagation = (e: KeyboardEvent | React.KeyboardEvent) =>
export default function ControlPanel(): JSX.Element { export default function ControlPanel(): JSX.Element {
const rContainer = useRef<HTMLDivElement>(null) const rContainer = useRef<HTMLDivElement>(null)
const isOpen = useSelector((s) => Object.keys(s.data.codeControls).length > 0) const isOpen = useSelector((s) => Object.keys(s.data.codeControls).length > 0)
const codeControls = useSelector( const codeControls = useSelector(
(state) => Object.keys(state.data.codeControls), (state) => Object.keys(state.data.codeControls),
deepCompareArrays deepCompareArrays
) )
if (codeControls.length === 0) {
return null
}
return ( return (
<Panel.Root <Panel.Root
ref={rContainer} ref={rContainer}
@ -37,25 +38,19 @@ export default function ControlPanel(): JSX.Element {
onKeyDown={stopKeyboardPropagation} onKeyDown={stopKeyboardPropagation}
onKeyUp={stopKeyboardPropagation} onKeyUp={stopKeyboardPropagation}
> >
{isOpen ? ( <Panel.Layout>
<Panel.Layout> <Panel.Header>
<Panel.Header> <IconButton bp={breakpoints} size="small" onClick={handleClose}>
<IconButton bp={breakpoints} size="small" onClick={closeCodePanel}> <X />
<X /> </IconButton>
</IconButton> <h3>Controls</h3>
<h3>Controls</h3> </Panel.Header>
</Panel.Header> <ControlsList>
<ControlsList> {codeControls.map((id) => (
{codeControls.map((id) => ( <Control key={id} id={id} />
<Control key={id} id={id} /> ))}
))} </ControlsList>
</ControlsList> </Panel.Layout>
</Panel.Layout>
) : (
<IconButton bp={breakpoints} size="small" onClick={openCodePanel}>
<Code />
</IconButton>
)}
</Panel.Root> </Panel.Root>
) )
} }