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 { Omit } from '../types' ; import _Switch , { HiddenSwitch , SwitchIcon } from './styled' ; export type LocalSwitchProps = { /** Automatically focus on the switch */ autoFocus ? : boolean ; checked ? : boolean ; className ? : string ; /** Is the switch checked by default? */ defaultChecked ? : boolean ; /** Disables the switch */ disabled ? : boolean ; /** ID for the switch */ id ? : string ; /** Makes the switch required and sets aria-invalid to true */ isRequired ? : boolean ; /** Switch label */ label ? : string ; name ? : string ; palette ? : string ; /** State of the switch. Can be any color in the palette. */ state ? : string ; switchRef ? : React . RefObject < any > ; /** Initial value of the switch */ value ? : string ; /** Function to invoke when focus is lost */ onBlur ? : React . FocusEventHandler < HTMLInputElement > ; /** Function to invoke when switch has changed */ onChange ? : React . FormEventHandler < HTMLInputElement > ; /** Function to invoke when switch is focused */ onFocus ? : React . FocusEventHandler < HTMLInputElement > ; } ; export type SwitchProps = LocalSwitchProps & Omit < ReakitLabelProps , 'children' > ; export type SwitchComponents = { Formik : React . FunctionComponent < SwitchProps > ; ReduxForm : React . FunctionComponent < SwitchProps > ; } ; export const Switch = ( { autoFocus , checked , className , defaultChecked , disabled , id , isRequired , label , onBlur , onChange , onFocus , name , palette , state , switchRef , value , ... props } ) => ( < _Switch aria - describedby = "label" aria - invalid = { state === 'danger' } aria - label = { label } aria - required = { isRequired } disabled = { disabled } { ... props } > < HiddenSwitch autoFocus = { autoFocus } checked = { checked } defaultChecked = { defaultChecked } disabled = { disabled } elementRef = { switchRef } id = { id } onBlur = { onBlur } onChange = { onChange } onFocus = { onFocus } name = { name } palette = { palette } state = { state } type = "checkbox" value = { value } / > < SwitchIcon state = { state } /> { label && ( < Text id = "label" htmlFor = { id } marginLeft = "major-1" > { label } < /Text>)} < /_Switch>); Switch . Formik = formikField ( Switch , { isCheckbox : true } ) ; Switch . ReduxForm = reduxFormField ( Switch , { isCheckbox : true } ) ; export const switchPropTypes = { autoFocus : PropTypes . bool , checked : PropTypes . bool , className : PropTypes . string , defaultChecked : PropTypes . bool , disabled : PropTypes . bool , id : PropTypes . string , isRequired : PropTypes . bool , label : PropTypes . string , name : PropTypes . string , palette : PropTypes . string , state : PropTypes . string , switchRef : PropTypes . object as PropTypes . Validator < LocalSwitchProps [ 'switchRef' ] > , value : PropTypes . string , onBlur : PropTypes . func , onChange : PropTypes . func , onFocus : PropTypes . func } ; Switch . propTypes = switchPropTypes ; export const switchDefaultProps = { autoFocus : false , checked : undefined , className : undefined , defaultChecked : undefined , disabled : false , id : undefined , isRequired : false , label : undefined , onBlur : undefined , onChange : undefined , onFocus : undefined , palette : undefined , name : undefined , state : undefined , switchRef : undefined , value : undefined } ; Switch . defaultProps = switchDefaultProps ; const C = Switch ; export default C ;