kopia lustrzana https://github.com/Tldraw/Tldraw
77 wiersze
1.9 KiB
TypeScript
77 wiersze
1.9 KiB
TypeScript
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
import styled from 'styles'
|
|
import React, { useRef } from 'react'
|
|
import state, { useSelector } from 'state'
|
|
import { X } from 'react-feather'
|
|
import { breakpoints, IconButton } from 'components/shared'
|
|
import * as Panel from '../panel'
|
|
import Control from './control'
|
|
import { deepCompareArrays } from 'utils'
|
|
|
|
function handleClose() {
|
|
state.send('CLOSED_CONTROLS')
|
|
}
|
|
|
|
const stopKeyboardPropagation = (e: KeyboardEvent | React.KeyboardEvent) =>
|
|
e.stopPropagation()
|
|
|
|
export default function ControlPanel(): JSX.Element {
|
|
const rContainer = useRef<HTMLDivElement>(null)
|
|
const isOpen = useSelector((s) => Object.keys(s.data.codeControls).length > 0)
|
|
|
|
const codeControls = useSelector(
|
|
(state) => Object.keys(state.data.codeControls),
|
|
deepCompareArrays
|
|
)
|
|
|
|
if (codeControls.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Panel.Root
|
|
ref={rContainer}
|
|
dir="ltr"
|
|
data-bp-desktop
|
|
variant="controls"
|
|
isOpen={isOpen}
|
|
onKeyDown={stopKeyboardPropagation}
|
|
onKeyUp={stopKeyboardPropagation}
|
|
>
|
|
<Panel.Layout>
|
|
<Panel.Header>
|
|
<IconButton bp={breakpoints} size="small" onClick={handleClose}>
|
|
<X />
|
|
</IconButton>
|
|
<h3>Controls</h3>
|
|
</Panel.Header>
|
|
<ControlsList>
|
|
{codeControls.map((id) => (
|
|
<Control key={id} id={id} />
|
|
))}
|
|
</ControlsList>
|
|
</Panel.Layout>
|
|
</Panel.Root>
|
|
)
|
|
}
|
|
|
|
const ControlsList = styled(Panel.Content, {
|
|
padding: 12,
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 4fr',
|
|
gridAutoRows: '24px',
|
|
alignItems: 'center',
|
|
gridColumnGap: '8px',
|
|
gridRowGap: '8px',
|
|
|
|
'& input': {
|
|
font: '$ui',
|
|
fontSize: '$1',
|
|
border: '1px solid $inputBorder',
|
|
backgroundColor: '$input',
|
|
color: '$text',
|
|
height: '100%',
|
|
padding: '0px 6px',
|
|
},
|
|
})
|