ProgressCircle ProgressCircle.tsx

0% Statements 0/2

0% Branches 0/6

0% Functions 0/1

0% Lines 0/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
 
import { Box, CircularProgress } from '@mui/material';
 
import './styles.scss';
 
export interface Props {
  size?: 'small' | 'medium' | 'large';
  determinate: true | false;
  value?: number;
  /** Returns a human-readable representation of a percentage such as "5%" */
  renderPercentText: (percent: number) => string;
  hideValue?: boolean;
}
 
export default function ProgressCircle(props: Props): JSX.Element {
  const { size = 'small', determinate, value, renderPercentText, hideValue } = props;
 
  return (
    <Box className='circle-container'>
      <CircularProgress variant='determinate' value={100} className={`circle-track circle-track--${size}`} />
      <Box className='label-container'>
        {value && !hideValue && (
          <p className={`progress-circle-label--${size}`}>{renderPercentText(Math.round(value))}</p>
        )}
      </Box>
      <CircularProgress
        value={value}
        variant={determinate ? 'determinate' : 'indeterminate'}
        className={`circle-fill circle-track--${size}`}
      />
    </Box>
  );
}