refactor(AsyncButton): add disabled property

This commit is contained in:
Lukas Jakob 2023-02-27 09:24:31 -06:00
parent 57f86812b3
commit 4e9408ee3e

View File

@ -2,6 +2,7 @@ import "./AsyncButton.css";
import { useState } from "react";
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
disabled?: boolean;
onClick(e: React.MouseEvent): Promise<void> | void;
children?: React.ReactNode;
}
@ -31,7 +32,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
const [loading, setLoading] = useState<boolean>(false);
async function handle(e: React.MouseEvent) {
if (loading) return;
if (loading || props.disabled) return;
setLoading(true);
try {
if (typeof props.onClick === "function") {
@ -46,7 +47,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
}
return (
<button type="button" disabled={loading} {...props} onClick={handle}>
<button type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
<span style={{visibility: (loading ? "hidden" : "visible")}}>{props.children}</span>
{loading && <Loader className="spinner" />}
</button>