Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './progress_bar.module.css';
       3              : 
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6              : interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
       7              :     progress: number;
       8              :     className?: string;
       9              : }
      10              : 
      11            1 : export function ProgressBar(props: ProgressBarProps): React.ReactElement {
      12            1 :     const { className, progress, ...rest } = props;
      13            1 :     const clampedProgress = Math.max(0, Math.min(progress, 100));
      14            1 :     return (
      15            1 :         <div
      16            1 :             {...rest}
      17            1 :             className={classNames(styles.root, className)}
      18            1 :             role="progressbar"
      19            1 :             aria-valuemin={0}
      20            1 :             aria-valuemax={100}
      21            1 :             aria-valuenow={Math.round(clampedProgress)}
      22              :         >
      23            1 :             <div className={styles.fill} style={{ width: `${clampedProgress}%` }} />
      24            1 :         </div>
      25              :     );
      26            1 : }