62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import CircularProgress from "@material-ui/core/CircularProgress";
|
|
import { green } from "@material-ui/core/colors";
|
|
import Button from "@material-ui/core/Button";
|
|
import { PropTypes } from "@material-ui/core";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
wrapper: {
|
|
margin: theme.spacing(1),
|
|
position: "relative",
|
|
},
|
|
buttonProgress: {
|
|
color: green[500],
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
marginTop: -12,
|
|
marginLeft: -12,
|
|
},
|
|
button: {
|
|
margin: theme.spacing(3, 0, 2),
|
|
},
|
|
})
|
|
);
|
|
|
|
interface ButtonWithSpinnerProps {
|
|
children: string;
|
|
onClick?: () => void;
|
|
loading?: boolean;
|
|
type?: "button" | "submit";
|
|
fullWidth?: boolean;
|
|
autoFocus?: boolean;
|
|
className?: string;
|
|
color?: PropTypes.Color;
|
|
}
|
|
|
|
export default function ButtonWithSpinner(props: ButtonWithSpinnerProps) {
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
<Button
|
|
className={`${classes.button} ${props.className}`}
|
|
variant="contained"
|
|
color={props.color || "primary"}
|
|
fullWidth={!!props.fullWidth}
|
|
type={props.type}
|
|
disabled={props.loading}
|
|
onClick={props.onClick}
|
|
autoFocus={props.autoFocus}
|
|
>
|
|
{props.children}
|
|
</Button>
|
|
{props.loading && (
|
|
<CircularProgress size={24} className={classes.buttonProgress} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|