import * as React from "react" ; import { createUseStyles } from "react-jss" ; import classNames from "classnames" ; interface Props { className ? : string ; fillClassName ? : string ; contentClassName ? : string ; current : number ; max : number ; vertical ? : boolean ; renderContents ? : ( current : number , max : number ) => string | JSX . Element ; } const getPercentage = ( current , max ) => Math . floor ( ( current / max ) * 100 ) + "%" ; const getFillStyle = ( { vertical = false , current , max } ) : { height : string ; } | { width : string ; } => ( vertical ? { height : getPercentage ( current , max ) } : { width : getPercentage ( current , max ) } ) ; const useStyles = createUseStyles ( { container : { width : "101%" , height : "100%" , position : "relative" , background : "#636363" , boxSizing : "border-box" } , fill : ( props ) => ( { position : "absolute" , height : "100%" , width : "100%" , boxSizing : "border-box" , ... getFillStyle ( props ) } ) , contents : { position : "absolute" , top : "0" , right : "0.5em" , fontWeight : 700 , lineHeight : "1.75em" } } ) ; const ProgressBar = ( props ) => { const classes = useStyles ( props ) ; const { className , fillClassName = "" , contentClassName = "" , current , max , renderContents , children } = props ; return ( < div className = { classNames ( classes . container , className ) } > < div className = { classNames ( classes . fill , fillClassName ) } /> { renderContents && < span className = { classNames ( classes . contents , contentClassName ) } > { renderContents ( current , max ) } < /span>} { children } < /div>); } ; export { ProgressBar } ;