import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { LabelProps as ReakitLabelProps } from 'reakit/ts' ; import { formikField , reduxFormField } from '../adaptors/fields' ; import Text from '../Text' ; import _Radio , { RadioIcon , HiddenRadio } from './styled' ; export type LocalRadioProps = { /** An accessible id for the radio */ a11yId ? : string ; /** Automatically focus on the radio */ autoFocus ? : boolean ; checked ? : boolean ; className ? : string ; /** Is the radio checked by default */ defaultChecked ? : boolean ; /** Disables the radio */ disabled ? : boolean ; /** Makes the radio required and sets aria-invalid to true */ isRequired ? : boolean ; /** radio label */ label : string ; name ? : string ; radioRef ? : React . RefObject < any > ; /** State of the radio. Can be any color in the palette. */ state ? : string ; /** Controlled value of the radio */ value ? : string ; /** Function to invoke when focus is lost */ onBlur ? : React . FocusEventHandler < HTMLInputElement > ; /** Function to invoke when input has changed */ onChange ? : React . FormEventHandler < HTMLInputElement > ; /** Function to invoke when input is focused */ onFocus ? : React . FocusEventHandler < HTMLInputElement > ; } ; export type RadioProps = ReakitLabelProps & LocalRadioProps ; export type RadioComponents = { Formik : React . FunctionComponent < RadioProps > ; ReduxForm : React . FunctionComponent < RadioProps > ; } ; export const Radio = ( { a11yId , autoFocus , checked , className , defaultChecked , disabled , isRequired , label , onBlur , onChange , onFocus , name , radioRef , state , value , ... props } ) => ( < _Radio aria - describedby = "label" aria - invalid = { state === 'danger' } aria - label = { label } aria - required = { isRequired } { ... props } > < HiddenRadio autoFocus = { autoFocus } checked = { checked } elementRef = { radioRef } defaultChecked = { defaultChecked } disabled = { disabled } id = { a11yId } onBlur = { onBlur } onChange = { onChange } onFocus = { onFocus } name = { name } state = { state } type = "radio" value = { value } / > < RadioIcon state = { state } /> < Text id = "label" htmlFor = { a11yId } marginLeft = "minor-2" > { label } < /Text> < /_Radio>); Radio . Formik = formikField ( Radio , { isCheckbox : true } ) ; Radio . ReduxForm = reduxFormField ( Radio , { isCheckbox : true } ) ; export const radioPropTypes = { a11yId : PropTypes . string , autoFocus : PropTypes . bool , checked : PropTypes . oneOfType ( [ PropTypes . bool , PropTypes . string ] ) as PropTypes . Validator < LocalRadioProps [ 'checked' ] > , className : PropTypes . string , defaultChecked : PropTypes . bool , disabled : PropTypes . bool , isRequired : PropTypes . bool , label : PropTypes . string . isRequired , onBlur : PropTypes . func , onChange : PropTypes . func , onFocus : PropTypes . func , name : PropTypes . string , radioRef : PropTypes . object as PropTypes . Validator < LocalRadioProps [ 'radioRef' ] > , state : PropTypes . string , value : PropTypes . string } ; Radio . propTypes = radioPropTypes ; export const radioDefaultProps = { a11yId : undefined , autoFocus : false , checked : undefined , className : undefined , defaultChecked : undefined , disabled : false , isRequired : false , onBlur : undefined , onChange : undefined , onFocus : undefined , name : undefined , radioRef : undefined , state : undefined , value : undefined } ; Radio . defaultProps = radioDefaultProps ; const C = Radio ; export default C ;