49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import {
|
|
Group,
|
|
Item,
|
|
DashDashedIcon,
|
|
DashDottedIcon,
|
|
DashSolidIcon,
|
|
} from '../shared'
|
|
import * as RadioGroup from '@radix-ui/react-radio-group'
|
|
import { DashStyle } from 'types'
|
|
import state from 'state'
|
|
import { ChangeEvent } from 'react'
|
|
|
|
function handleChange(e: ChangeEvent<HTMLInputElement>) {
|
|
state.send('CHANGED_STYLE', {
|
|
dash: e.currentTarget.value,
|
|
})
|
|
}
|
|
|
|
interface Props {
|
|
dash: DashStyle
|
|
}
|
|
|
|
export default function DashPicker({ dash }: Props) {
|
|
return (
|
|
<Group name="Dash" onValueChange={handleChange}>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Solid}
|
|
isActive={dash === DashStyle.Solid}
|
|
>
|
|
<DashSolidIcon />
|
|
</Item>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Dashed}
|
|
isActive={dash === DashStyle.Dashed}
|
|
>
|
|
<DashDashedIcon />
|
|
</Item>
|
|
<Item
|
|
as={RadioGroup.RadioGroupItem}
|
|
value={DashStyle.Dotted}
|
|
isActive={dash === DashStyle.Dotted}
|
|
>
|
|
<DashDottedIcon />
|
|
</Item>
|
|
</Group>
|
|
)
|
|
}
|