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 * as React from 'react';
   6 import Button, { ButtonProps } from '@material-ui/core/Button';
   7 import { CircularProgress, withStyles } from '@material-ui/core';
   8 import { CircularProgressProps } from '@material-ui/core/CircularProgress';
   9
  10 interface ProgressButtonProps extends ButtonProps {
  11     loading?: boolean;
  12     progressProps?: CircularProgressProps;
  13 }
  14
  15 export const ProgressButton = ({ loading, progressProps, children, disabled, ...props }: ProgressButtonProps) =>
  16     <Button {...props} disabled={disabled || loading}>
  17         {children}
  18         {loading && <Progress {...progressProps} size={getProgressSize(props.size)} />}
  19     </Button>;
  20
  21 const Progress = withStyles({
  22     root: {
  23         position: 'absolute',
  24     },
  25 })(CircularProgress);
  26
  27 const getProgressSize = (size?: 'small' | 'medium' | 'large') => {
  28     switch (size) {
  29         case 'small':
  30             return 16;
  31         case 'large':
  32             return 24;
  33         default:
  34             return 20;
  35     }
  36 };