import * as RMWC from '@rmwc/types' ; import React , { useEffect } from 'react' ; import { SwitchProps , SwitchHTMLProps } from '.' ; import { useToggleFoundation } from '@rmwc/toggleable' ; import { useFoundation } from '@rmwc/base' ; import { MDCSwitchFoundation , MDCSwitchAdapter } from '@material/switch' ; export const useSwitchFoundation = ( props ) => { const { renderToggle , toggleRootProps , id } = useToggleFoundation < MDCSwitchFoundation > ( props ) ; const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true , checkboxEl : true } , foundation : ( { rootEl , checkboxEl } ) => { return new MDCSwitchFoundation ( { addClass : ( className ) => rootEl . addClass ( className ) , removeClass : ( className ) => rootEl . removeClass ( className ) , setNativeControlChecked : ( checked ) => checkboxEl . setProp ( 'checked' , checked ) , setNativeControlDisabled : ( disabled ) => checkboxEl . setProp ( 'disabled' , disabled ) , setNativeControlAttr : ( attr , value ) => rootEl . setProp ( attr as any , value ) } as MDCSwitchAdapter ) ; } } ) ; const { checkboxEl } = elements ; useEffect ( ( ) => { checkboxEl . ref && ( foundation as any ) . updateCheckedStyling_ ( ( checkboxEl . ref as HTMLInputElement ) . checked ) ; checkboxEl . ref && foundation . setDisabled ( ( checkboxEl . ref as HTMLInputElement ) . disabled ) ; } , [ checkboxEl . ref , foundation ] ) ; useEffect ( ( ) => { if ( props . checked !== undefined ) { ( foundation as any ) . updateCheckedStyling_ ( props . checked ) ; } } , [ props . checked , foundation ] ) ; useEffect ( ( ) => { if ( props . disabled !== undefined ) { foundation . setDisabled ( props . disabled ) ; } } , [ props . disabled , foundation ] ) ; const handleOnChange = ( evt ) => { foundation . handleChange ( evt as any ) ; props . onChange ?. ( evt ) ; } ; checkboxEl . setProp ( 'onChange' , handleOnChange , true ) ; return { foundation , renderToggle , toggleRootProps , id , ... elements } ; } ;