import * as React from 'react' ; import { handleFunctionProps , noop } from './util' ; const defaultComponentName = 'input' ; const calculateBaseStyle = ( disabled ) => ( { fontSize : '18px' , ... ( ! disabled && { cursor : 'pointer' } ) , padding : 0 , marginTop : '1px' , verticalAlign : 'middle' , position : 'relative' , } ) ; interface CheckboxProps { name : string ; component ? : any ; componentOptions ? : { [ key ] : unknown ; } ; indeterminate ? : boolean ; checked ? : boolean ; disabled ? : boolean ; onClick ? : ( e : React . MouseEvent ) => void ; } function Checkbox ( { name , component = defaultComponentName , componentOptions = { style : { } } , indeterminate = false , checked = false , disabled = false , onClick = noop , } ) { const setCheckboxRef = ( checkbox ) => { if ( checkbox ) { checkbox . indeterminate = indeterminate ; } } ; const TagName = component ; const baseStyle = TagName !== defaultComponentName ? componentOptions . style : calculateBaseStyle ( disabled ) ; const resolvedComponentOptions = React . useMemo ( ( ) => handleFunctionProps ( componentOptions , indeterminate ) , [ componentOptions , indeterminate ] ) ; return ( < TagName type = "checkbox" ref = { setCheckboxRef } style = { baseStyle } onClick = { disabled ? noop : onClick } name = { name } aria - label = { name } checked = { checked } disabled = { disabled } { ... resolvedComponentOptions } onChange = { noop } / > ) ; } export default React . memo ( Checkbox ) ;