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