refactor(AsyncButton): add disabled property
This commit is contained in:
parent
57f86812b3
commit
4e9408ee3e
@ -2,6 +2,7 @@ import "./AsyncButton.css";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
disabled?: boolean;
|
||||||
onClick(e: React.MouseEvent): Promise<void> | void;
|
onClick(e: React.MouseEvent): Promise<void> | void;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
@ -31,7 +32,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
|
|||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
async function handle(e: React.MouseEvent) {
|
async function handle(e: React.MouseEvent) {
|
||||||
if (loading) return;
|
if (loading || props.disabled) return;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
if (typeof props.onClick === "function") {
|
if (typeof props.onClick === "function") {
|
||||||
@ -46,7 +47,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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>
|
<span style={{visibility: (loading ? "hidden" : "visible")}}>{props.children}</span>
|
||||||
{loading && <Loader className="spinner" />}
|
{loading && <Loader className="spinner" />}
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user