import { useSetInterval } from '@fluentui/react-hooks' ; import { useEffect , useRef , useState } from 'react' ; const units = [ ' B' , ' KB' , ' MB' , ' GB' ] ; export function formatSize ( value ) { let index = 0 ; while ( index < units . length && value > 1024 ) { index += 1 ; value /= 1024 ; } return value . toLocaleString ( undefined , { maximumFractionDigits : 2 } ) + units [ index ] ; } export function formatSpeed ( completed , total , speed ) { if ( total === 0 ) { return undefined ; } return `${ formatSize ( completed ) } of ${ formatSize ( total ) } (${ formatSize ( speed ) }/s)` ; } export function useSpeed ( completed , total ) { const completedRef = useRef ( completed ) ; completedRef . current = completed ; const [ debouncedCompleted , setDebouncedCompleted ] = useState ( completed ) ; const [ speed , setSpeed ] = useState ( 0 ) ; const { setInterval , clearInterval } = useSetInterval ( ) ; const intervalIdRef = useRef < number > ( ) ; useEffect ( ( ) => { intervalIdRef . current = setInterval ( ( ) => { setDebouncedCompleted ( debouncedCompleted => { setSpeed ( completedRef . current - debouncedCompleted ) ; return completedRef . current ; } ) ; } , 1000 ) ; return ( ) => { clearInterval ( intervalIdRef . current ! ) ; } ; } , [ total ] ) ; useEffect ( ( ) => { if ( total !== 0 && completed === total ) { setDebouncedCompleted ( debouncedCompleted => { setSpeed ( total - debouncedCompleted ) ; return total ; } ) ; clearInterval ( intervalIdRef . current ! ) ; } } , [ completed , total ] ) ; return [ debouncedCompleted , speed ] ; } export function delay ( time ) { return new Promise ( resolve => { window . setTimeout ( resolve , time ) ; } ) ; }