tldraw/components/style-panel/quick-dash-select.tsx

58 lines
1.6 KiB
TypeScript
Raw Normal View History

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { breakpoints, IconButton } from 'components/shared'
2021-06-02 21:17:38 +00:00
import Tooltip from 'components/tooltip'
import React, { memo } from 'react'
import state, { useSelector } from 'state'
import { DashStyle } from 'types'
import {
DropdownContent,
Item,
2021-07-01 22:11:09 +00:00
DashDrawIcon,
DashDottedIcon,
DashSolidIcon,
DashDashedIcon,
2021-06-03 12:06:39 +00:00
} from '../shared'
const dashes = {
2021-07-01 22:11:09 +00:00
[DashStyle.Draw]: <DashDrawIcon />,
[DashStyle.Solid]: <DashSolidIcon />,
[DashStyle.Dashed]: <DashDashedIcon />,
[DashStyle.Dotted]: <DashDottedIcon />,
}
function changeDashStyle(dash: DashStyle): void {
state.send('CHANGED_STYLE', { dash })
}
function QuickdashSelect(): JSX.Element {
const dash = useSelector((s) => s.values.selectedStyle.dash)
return (
<DropdownMenu.Root dir="ltr">
<DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
2021-06-02 21:17:38 +00:00
<Tooltip label="Dash">{dashes[dash]}</Tooltip>
</DropdownMenu.Trigger>
<DropdownMenu.DropdownMenuRadioGroup
as={DropdownContent}
sideOffset={8}
direction="vertical"
value={dash}
onValueChange={changeDashStyle}
>
{Object.keys(DashStyle).map((dashStyle: DashStyle) => (
<DropdownMenu.DropdownMenuRadioItem
as={Item}
key={dashStyle}
isActive={dash === dashStyle}
value={dashStyle}
>
{dashes[dashStyle]}
</DropdownMenu.DropdownMenuRadioItem>
))}
</DropdownMenu.DropdownMenuRadioGroup>
</DropdownMenu.Root>
)
}
export default memo(QuickdashSelect)