64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { Group, RadioItem } from './shared'
|
|
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}>
|
|
<RadioItem value={DashStyle.Solid} isActive={dash === DashStyle.Solid}>
|
|
<DashSolidIcon />
|
|
</RadioItem>
|
|
<RadioItem value={DashStyle.Dashed} isActive={dash === DashStyle.Dashed}>
|
|
<DashDashedIcon />
|
|
</RadioItem>
|
|
<RadioItem value={DashStyle.Dotted} isActive={dash === DashStyle.Dotted}>
|
|
<DashDottedIcon />
|
|
</RadioItem>
|
|
</Group>
|
|
)
|
|
}
|
|
|
|
function DashSolidIcon() {
|
|
return (
|
|
<svg width="16" height="16">
|
|
<path d="M 3,8 L 13,8" strokeWidth={3} strokeLinecap="round" />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function DashDashedIcon() {
|
|
return (
|
|
<svg width="16" height="16">
|
|
<path
|
|
d="M 2,8 L 14,8"
|
|
strokeWidth={3}
|
|
strokeLinecap="round"
|
|
strokeDasharray="4 4"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
function DashDottedIcon() {
|
|
return (
|
|
<svg width="16" height="16">
|
|
<path
|
|
d="M 3,8 L 14,8"
|
|
strokeWidth={3}
|
|
strokeLinecap="round"
|
|
strokeDasharray="1 4"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|