kopia lustrzana https://github.com/Tldraw/Tldraw
63 wiersze
1.7 KiB
TypeScript
63 wiersze
1.7 KiB
TypeScript
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
import styled from "styles"
|
|
import React, { useEffect, useRef } from "react"
|
|
import state, { useSelector } from "state"
|
|
import { X, Code, PlayCircle } from "react-feather"
|
|
import { IconButton } from "components/shared"
|
|
import * as Panel from "../panel"
|
|
import Control from "./control"
|
|
import { deepCompareArrays } from "utils/utils"
|
|
|
|
export default function ControlPanel() {
|
|
const rContainer = useRef<HTMLDivElement>(null)
|
|
const codeControls = useSelector(
|
|
(state) => Object.keys(state.data.codeControls),
|
|
deepCompareArrays
|
|
)
|
|
const isOpen = useSelector((s) => Object.keys(s.data.codeControls).length > 0)
|
|
|
|
return (
|
|
<Panel.Root data-bp-desktop ref={rContainer} isOpen={isOpen}>
|
|
{isOpen ? (
|
|
<Panel.Layout>
|
|
<Panel.Header>
|
|
<IconButton onClick={() => state.send("CLOSED_CODE_PANEL")}>
|
|
<X />
|
|
</IconButton>
|
|
<h3>Controls</h3>
|
|
</Panel.Header>
|
|
<ControlsList>
|
|
{codeControls.map((id) => (
|
|
<Control key={id} id={id} />
|
|
))}
|
|
</ControlsList>
|
|
</Panel.Layout>
|
|
) : (
|
|
<IconButton onClick={() => state.send("OPENED_CODE_PANEL")}>
|
|
<Code />
|
|
</IconButton>
|
|
)}
|
|
</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",
|
|
},
|
|
})
|