import React , { useEffect } from 'react' ; import { useFoundation } from '@rmwc/base' ; import { MDCLineRippleFoundation } from '@material/line-ripple' ; import { EventType , SpecificEventListener } from '@material/base/types' ; import { LineRippleProps } from '.' ; export const useLineRippleFoundation = ( props ) => { const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true } , foundation : ( { rootEl } ) => { return new MDCLineRippleFoundation ( { addClass : ( className ) => rootEl . addClass ( className ) , removeClass : ( className ) => rootEl . removeClass ( className ) , hasClass : ( className ) => rootEl . hasClass ( className ) , setStyle : ( propertyName , value ) => rootEl . setStyle ( propertyName , value ) , registerEventHandler : < K extends EventType > ( evtType , handler ) => rootEl . addEventListener ( evtType , handler ) , deregisterEventHandler : < K extends EventType > ( evtType , handler ) => rootEl . removeEventListener ( evtType , handler ) } ) ; } } ) ; const { rootEl } = elements ; useEffect ( ( ) => { props . active ? foundation . activate ( ) : foundation . deactivate ( ) ; } , [ props . active , foundation ] ) ; useEffect ( ( ) => { typeof props . center === 'number' && foundation . setRippleCenter ( props . center ) ; } , [ props . center , foundation ] ) ; rootEl . setProp ( 'onTransitionEnd' , ( evt ) => foundation . handleTransitionEnd ( evt ) , true ) ; return { foundation , ... elements } ; } ;