import React , { useCallback , useRef , useEffect } from 'react' ; import { RippleProps } from './' ; import { useFoundation , emptyClientRect } from '@rmwc/base' ; import { matches } from '@rmwc/base' ; import { EventType , SpecificEventListener } from '@material/base/types' ; import { MDCRippleFoundation , util } from '@material/ripple' ; type ActivateEventTypes < S > = React . MouseEvent < S > | React . TouchEvent < S > | React . KeyboardEvent < S > | React . FocusEvent < S > ; export const useRippleFoundation = ( props ) => { const isTouched = useRef ( false ) ; const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true , surfaceEl : true } , foundation : ( { rootEl , surfaceEl , getProps } ) => { return new MDCRippleFoundation ( { browserSupportsCssVars : ( ) => util . supportsCssVariables ( window ) , isUnbounded : ( ) => ! ! getProps ( ) . unbounded , isSurfaceActive : ( ) => { if ( rootEl . ref ) { return matches ( rootEl . ref , ':active' ) ; } return false ; } , isSurfaceDisabled : ( ) => ! ! getProps ( ) . disabled , addClass : ( className ) => { surfaceEl . addClass ( className ) ; } , removeClass : ( className ) => { surfaceEl . removeClass ( className ) ; } , containsEventTarget : ( target ) => ! ! rootEl . ref && rootEl . ref . contains ( target ) , registerInteractionHandler : < K extends EventType > ( evtType , handler ) : void => { } , deregisterInteractionHandler : < K extends EventType > ( evtType , handler ) : void => { } , registerDocumentInteractionHandler : < K extends EventType > ( evtType , handler ) : void => document . documentElement . addEventListener ( evtType , handler , { passive : true } ) , deregisterDocumentInteractionHandler : < K extends EventType > ( evtType , handler ) => document . documentElement . removeEventListener ( evtType , handler ) , registerResizeHandler : ( handler ) : void => window . addEventListener ( 'resize' , handler ) , deregisterResizeHandler : ( handler ) : void => window . removeEventListener ( 'resize' , handler ) , updateCssVariable : ( varName , value ) => surfaceEl . setStyle ( varName , value ) , computeBoundingRect : ( ) => rootEl . ref ? rootEl . ref . getBoundingClientRect ( ) : emptyClientRect , getWindowPageOffset : ( ) => ( { x : window . pageXOffset , y : window . pageYOffset } ) } ) ; } } ) ; const { rootEl } = elements ; const activateRipple = useCallback ( ( evt ) => { evt . persist ( ) ; foundation . activate ( evt ) ; } , [ foundation ] ) ; const deactivateRipple = useCallback ( ( evt ) => { evt . persist ( ) ; foundation . deactivate ( ) ; } , [ foundation ] ) ; const handleFocus = useCallback ( ( evt ) => { props . onFocus ?. ( evt ) ; foundation . handleFocus ( ) ; } , [ foundation , props . onFocus ] ) ; const handleBlur = useCallback ( ( evt ) => { props . onBlur ?. ( evt ) ; foundation . handleBlur ( ) ; } , [ foundation , props . onBlur ] ) ; const handleMouseDown = useCallback ( ( evt ) => { props . onMouseDown ?. ( evt ) ; if ( ! isTouched . current ) { activateRipple ( evt ) ; } isTouched . current = false ; } , [ props . onMouseDown , activateRipple ] ) ; const handleMouseUp = useCallback ( ( evt ) => { props . onMouseUp ?. ( evt ) ; deactivateRipple ( evt ) ; } , [ props . onMouseUp , deactivateRipple ] ) ; const handleTouchStart = useCallback ( ( evt ) => { isTouched . current = true ; props . onTouchStart ?. ( evt ) ; activateRipple ( evt ) ; } , [ props . onTouchStart , activateRipple ] ) ; const handleTouchEnd = useCallback ( ( evt ) => { props . onTouchEnd ?. ( evt ) ; deactivateRipple ( evt ) ; } , [ props . onTouchEnd , deactivateRipple ] ) ; const handleKeyDown = useCallback ( ( evt ) => { props . onKeyDown ?. ( evt ) ; activateRipple ( evt ) ; } , [ props . onKeyDown , activateRipple ] ) ; const handleKeyUp = useCallback ( ( evt ) => { props . onKeyUp ?. ( evt ) ; deactivateRipple ( evt ) ; } , [ props . onKeyUp , deactivateRipple ] ) ; rootEl . setProp ( 'onFocus' , handleFocus , true ) ; rootEl . setProp ( 'onBlur' , handleBlur , true ) ; rootEl . setProp ( 'onMouseDown' , handleMouseDown , true ) ; rootEl . setProp ( 'onMouseUp' , handleMouseUp , true ) ; rootEl . setProp ( 'onTouchStart' , handleTouchStart , true ) ; rootEl . setProp ( 'onTouchEnd' , handleTouchEnd , true ) ; rootEl . setProp ( 'onKeyDown' , handleKeyDown , true ) ; rootEl . setProp ( 'onKeyUp' , handleKeyUp , true ) ; useEffect ( ( ) => { rootEl . setRef ( props . domNode ) ; } , [ rootEl , props . domNode ] ) ; useEffect ( ( ) => { foundation . setUnbounded ( ! ! props . unbounded ) ; } , [ props . unbounded , foundation ] ) ; useEffect ( ( ) => { props . disabled && foundation . handleBlur ( ) ; } , [ props . disabled , foundation ] ) ; return { ... elements } ; } ;