import React, { useEffect, useRef } from 'react' import Body from '../pb_body/_body' import Icon from '../pb_icon/_icon' import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props' import classnames from 'classnames' import { globalProps, GlobalProps } from '../utilities/globalProps' type CheckboxProps = { aria?: {[key: string]: string}, checked?: boolean, children?: React.ReactChild[] | React.ReactChild, className?: string, dark?: boolean, data?: {[key: string]: string}, error?: boolean, htmlOptions?: {[key: string]: string | number | boolean | Function}, id?: string, indeterminate?: boolean, name?: string, onChange?: (event: React.FormEvent) => void, tabIndex?: number, text?: string, value?: string, } & GlobalProps const Checkbox = (props: CheckboxProps): JSX.Element => { const { aria = {}, checked = false, children, className, dark = false, data = {}, error = false, htmlOptions = {}, id, indeterminate = false, name = '', onChange = () => { void 0 }, tabIndex, text = '', value = '', } = props const checkRef = useRef(null) const ariaProps = buildAriaProps(aria) const dataProps = buildDataProps(data) const htmlProps = buildHtmlProps(htmlOptions) const classes = classnames( buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null), globalProps(props), className ) useEffect(() => { if (checkRef.current) { checkRef.current.checked = checked checkRef.current.indeterminate = indeterminate } }, [indeterminate, checked]) const checkboxChildren = () => { if (children) return (children) else return ( ) } return ( <>{checkboxChildren()} {!indeterminate && } {indeterminate && } {text} ) } export default Checkbox