Sha256: ed7c93a5ae2d5ba141fc77efdd3f7729c89cfc95b2f35f757f9ceac3ff06ac2c
Contents?: true
Size: 1.25 KB
Versions: 28
Compression:
Stored size: 1.25 KB
Contents
// @flow
import React from 'react'
import type {
InputCallback,
} from '../types'
import {
buildAriaProps,
buildCss,
buildDataProps,
noop,
} from '../utilities/props'
type Props = {
aria: object,
checked: boolean,
data: object,
onChange: InputCallback<HTMLInputElement>,
onCheck: InputCallback<HTMLInputElement>,
onUncheck: InputCallback<HTMLInputElement>,
size: 'sm' | 'md',
}
const Toggle = ({
aria = {},
checked = false,
data = {},
onChange = noop,
onCheck = noop,
onUncheck = noop,
size = 'md',
...props
}: Props) => {
const ariaProps = buildAriaProps(aria)
const dataProps = buildDataProps(data)
const handleChange = (event) => {
onChange(event)
event.target.checked ?
onCheck(event) :
onUncheck(event)
}
const css = buildCss({
'pb_toggle_kit': true,
[size]: true,
'on': checked,
'off': !checked,
})
return (
<div
{...ariaProps}
{...dataProps}
className={css}
>
<label className="pb_toggle_wrapper">
<input
{...props}
checked={checked}
onChange={handleChange}
type="checkbox"
/>
<div className="pb_toggle_control" />
</label>
</div>
)
}
export default Toggle
Version data entries
28 entries across 28 versions & 1 rubygems