import { useEffect , useState } from 'react' ; import { MDCLinearProgressFoundation } from '@material/linear-progress' ; import { useFoundation } from '@rmwc/base' ; import { LinearProgressProps } from '.' ; export const useLinearProgressFoundation = ( props ) => { const { foundation , ... elements } = useFoundation ( { props , elements : { rootEl : true } , foundation : ( { rootEl } ) => { return new MDCLinearProgressFoundation ( { addClass : ( className ) => rootEl . addClass ( className ) , getPrimaryBar : ( ) => { return ( rootEl . ref ?. querySelector ( MDCLinearProgressFoundation . strings . PRIMARY_BAR_SELECTOR ) || null ) ; } , forceLayout : ( ) => rootEl . ref ?. offsetWidth , getBuffer : ( ) => rootEl . ref ?. querySelector ( MDCLinearProgressFoundation . strings . BUFFER_SELECTOR ) || null , hasClass : ( className ) => rootEl . hasClass ( className ) , removeClass : ( className ) => rootEl . removeClass ( className ) , setStyle : ( el , styleProperty , value ) => { ( el . style as any ) [ styleProperty ] = value ; } } ) ; } } ) ; const [ determinate , setDeterminate ] = useState < boolean | undefined > ( undefined ) ; useEffect ( ( ) => { foundation . setProgress ( props . progress || 0 ) ; const isDeterminate = props . progress !== undefined ; if ( isDeterminate !== determinate ) { foundation . setDeterminate ( isDeterminate ) ; setDeterminate ( isDeterminate ) ; } } , [ props . progress , determinate , foundation ] ) ; useEffect ( ( ) => { foundation . setBuffer ( props . buffer || 0 ) ; } , [ props . buffer , foundation ] ) ; useEffect ( ( ) => { foundation . setReverse ( ! ! props . reversed ) ; } , [ props . reversed , foundation ] ) ; useEffect ( ( ) => { props . closed ? foundation . close ( ) : foundation . open ( ) ; } , [ props . closed , foundation ] ) ; return { foundation , ... elements } ; } ;