Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 1x 1x 1x 7x 7x 7x 7x 7x 3x 3x 7x 3x 2x 2x 7x 1x | import { ChangeEventHandler, ForwardedRef, KeyboardEventHandler } from "react"
import Toggle from "./Toggle"
import prepareComponent from "@bluframe/grapple/prepareComponent"
export interface Props {
checked?: boolean
className?: string
disabled?: boolean
defaultChecked?: boolean
inputId?: string
label?: string
name: string
// eslint-disable-next-line no-unused-vars
onChange?: (checked: boolean) => void
ref?: ForwardedRef<HTMLInputElement>
}
export interface ComponentProps extends Omit<Props, "onChange"> {
labelId?: string
onChange: ChangeEventHandler<HTMLInputElement>
onKeyDown: KeyboardEventHandler<HTMLLabelElement>
switchId?: string
}
const usePrepareComponent = (props: Props): ComponentProps => {
Iif (props.checked !== undefined && props.defaultChecked !== undefined) {
throw new Error("Toggle: cannot have both checked and defaultChecked props")
}
Iif (props.defaultChecked !== undefined && props.onChange) {
throw new Error(
"Toggle: cannot have defaultChecked prop with onChange prop"
)
}
const labelId = props.inputId && `${props.inputId}-label`
const switchId = props.inputId && `${props.inputId}-switch`
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
event.stopPropagation()
props.onChange?.(event.target.checked)
}
const onKeyDown: KeyboardEventHandler<HTMLLabelElement> = (event) => {
if (event.key === " " || event.key === "Enter") {
if (!props.disabled) {
event.currentTarget.parentElement?.querySelector("input")?.click()
}
}
}
return {
...props,
labelId,
onChange,
onKeyDown,
switchId
}
}
export default prepareComponent<Props, ComponentProps>(usePrepareComponent)(
Toggle
)
|