/* @flow */ import React, { useEffect, useRef } from 'react' import Body from '../pb_body/_body.jsx' import Icon from '../pb_icon/_icon.jsx' import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props' import classnames from 'classnames' import { globalProps } from '../utilities/globalProps' type CheckboxProps = { aria?: object, checked?: boolean, children: Node, className?: string, dark?: boolean, data?: object, error?: boolean, id?: string, indeterminate?: boolean, name: string, onChange: (boolean) => void, tabIndex: number, text: string, value: string, } const Checkbox = (props: CheckboxProps) => { const { aria = {}, checked = false, children = null, className, dark = false, data = {}, error = false, id, indeterminate = false, name = '', onChange = () => {}, tabIndex, text = '', value = '', } = props const checkRef = useRef() const dataProps = buildDataProps(data) const ariaProps = buildAriaProps(aria) const classes = classnames( buildCss('pb_checkbox_kit', { checked, error, indeterminate }), globalProps(props), className ) useEffect(() => { if (checkRef.current) { checkRef.current.checked = checked checkRef.current.indeterminate = indeterminate } }, [indeterminate, checked]) return ( {children} {text} ) } export default Checkbox