import React , { useEffect } from 'react' ; import { SnackbarProps } from '.' ; import { MDCSnackbarFoundation , util } from '@material/snackbar' ; import { closest , triggerWindowResize } from '@rmwc/base' ; import { useFoundation } from '@rmwc/base' ; /** Monkey patch the foundation to accept dynamic reasons rather than just "action" */ MDCSnackbarFoundation . prototype . handleActionButtonClick = function ( evt , reason ) { this . close ( reason ) ; } ; export function useSnackbarFoundation ( props ) { const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true , surfaceEl : true , labelEl : true } , foundation : ( { rootEl , labelEl , emit } ) => { return new MDCSnackbarFoundation ( { addClass : ( className ) => rootEl . addClass ( className ) , removeClass : ( className ) => rootEl . removeClass ( className ) , announce : ( ) => labelEl . ref && util . announce ( labelEl . ref ) , notifyOpening : ( ) => emit ( 'onOpen' , { } ) , notifyOpened : ( ) => { triggerWindowResize ( ) ; emit ( 'onOpened' , { } ) ; } , notifyClosing : ( reason ) => { emit ( 'onClose' , reason ? { reason } : { } ) ; } , notifyClosed : ( reason ) => emit ( 'onClosed' , reason ? { reason } : { } ) } ) ; } } ) ; const { rootEl , surfaceEl } = elements ; const handleKeyDown = ( evt ) => { props . onKeyDown && props . onKeyDown ( evt ) ; foundation . handleKeyDown ( evt ) ; } ; const handleSurfaceClick = ( evt ) => { if ( evt . target instanceof Element ) { let el = evt . target ; const button = closest ( el , '.mdc-button' ) as Element ; if ( button ) { el = button ; } if ( props . dismissesOnAction && el . classList . contains ( 'mdc-snackbar__action' ) ) { foundation . handleActionButtonClick ( evt as MouseEvent , el . dataset . mdcSnackbarAction ) ; } else if ( el . classList . contains ( 'mdc-snackbar__dismiss' ) ) { foundation . handleActionIconClick ( evt as MouseEvent ) ; } } } ; rootEl . setProp ( 'onKeyDown' , handleKeyDown , true ) ; surfaceEl . setProp ( 'onClick' , handleSurfaceClick , true ) ; useEffect ( ( ) => { props . open ? foundation . open ( ) : foundation . close ( ) ; } , [ props . open , foundation ] ) ; useEffect ( ( ) => { if ( props . timeout ) { if ( props . timeout === - 1 ) { foundation . setTimeoutMs ( props . timeout ) ; } else { ( foundation as any ) . autoDismissTimeoutMs_ = props . timeout ; } } } , [ props . timeout , foundation ] ) ; return { foundation , ... elements } ; }