services/workbench2/src/components/progress-button/progress-button.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import Button, { ButtonProps } from '@mui/material/Button';
   7 import { CircularProgress } from '@mui/material';
   8 import withStyles from '@mui/styles/withStyles';
   9 import { CircularProgressProps } from '@mui/material/CircularProgress';
  10
  11 interface ProgressButtonProps extends ButtonProps {
  12     loading?: boolean;
  13     progressProps?: CircularProgressProps;
  14 }
  15
  16 export const ProgressButton = ({ loading, progressProps, children, disabled, ...props }: ProgressButtonProps) =>
  17     <Button {...props} disabled={disabled || loading}>
  18         {children}
  19         {loading && <Progress {...progressProps} size={getProgressSize(props.size)} />}
  20     </Button>;
  21
  22 const Progress = withStyles({
  23     root: {
  24         position: 'absolute',
  25     },
  26 })(CircularProgress);
  27
  28 const getProgressSize = (size?: 'small' | 'medium' | 'large') => {
  29     switch (size) {
  30         case 'small':
  31             return 16;
  32         case 'large':
  33             return 24;
  34         default:
  35             return 20;
  36     }
  37 };