75 lines
1.4 KiB
TypeScript
75 lines
1.4 KiB
TypeScript
import {
|
|
Button,
|
|
CircularProgress,
|
|
makeStyles,
|
|
Typography,
|
|
} from "@material-ui/core";
|
|
import { ReactChild } from "react";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
position: "relative",
|
|
},
|
|
button: {
|
|
marginTop: theme.spacing(2),
|
|
textTransform: "none",
|
|
width: "100%",
|
|
},
|
|
loader: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
left: "50%",
|
|
marginLeft: -12,
|
|
marginBottom: 6,
|
|
},
|
|
error: {
|
|
marginTop: theme.spacing(1),
|
|
textAlign: "center",
|
|
},
|
|
}));
|
|
|
|
export default function ButtonWithLoader({
|
|
disabled,
|
|
onClick,
|
|
showLoader,
|
|
error,
|
|
children,
|
|
className,
|
|
}: {
|
|
disabled?: boolean;
|
|
onClick: () => void;
|
|
showLoader?: boolean;
|
|
error?: string;
|
|
children: ReactChild;
|
|
className?: string;
|
|
}) {
|
|
const classes = useStyles();
|
|
return (
|
|
<>
|
|
<div className={classes.root}>
|
|
<Button
|
|
color="primary"
|
|
variant="contained"
|
|
className={className || classes.button}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</Button>
|
|
{showLoader ? (
|
|
<CircularProgress
|
|
size={24}
|
|
color="inherit"
|
|
className={className || classes.loader}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
{error ? (
|
|
<Typography color="error" className={classes.error}>
|
|
{error}
|
|
</Typography>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|