import { useFoundation } from '@rmwc/base' ; import { FloatingLabelProps , FloatingLabelApi } from '.' ; import { MDCFloatingLabelFoundation , MDCFloatingLabelAdapter } from '@material/floating-label' ; import { EventType , SpecificEventListener } from '@material/base/types' ; import React , { useEffect } from 'react' ; export const useFloatingLabelFoundation = ( props ) => { const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true } , api : ( { foundation } ) : FloatingLabelApi => { return { getWidth ( ) { return foundation . getWidth ( ) ; } } ; } , foundation : ( { rootEl } ) => { return new MDCFloatingLabelFoundation ( { addClass : ( className ) => rootEl . addClass ( className ) , removeClass : ( className ) => rootEl . removeClass ( className ) , getWidth : ( ) => rootEl . ref ?. scrollWidth || 0 , registerInteractionHandler : < K extends EventType > ( evtType , handler ) : void => rootEl . addEventListener ( evtType , handler ) , deregisterInteractionHandler : < K extends EventType > ( evtType , handler ) : void => rootEl . removeEventListener ( evtType , handler ) } as MDCFloatingLabelAdapter ) ; } } ) ; useEffect ( ( ) => { foundation . shake ( ! ! props . shake ) ; } , [ props . shake , foundation ] ) ; useEffect ( ( ) => { foundation . float ( ! ! props . float ) ; } , [ props . float , foundation ] ) ; return { foundation , ... elements } ; } ;