33 lines
1007 B
TypeScript
33 lines
1007 B
TypeScript
import "./AsyncButton.css";
|
|
import React, { ForwardedRef } from "react";
|
|
import Spinner from "../Icons/Spinner";
|
|
import useLoading from "Hooks/useLoading";
|
|
import classNames from "classnames";
|
|
|
|
export interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
onClick?: (e: React.MouseEvent) => Promise<void> | void;
|
|
}
|
|
|
|
const AsyncButton = React.forwardRef<HTMLButtonElement, AsyncButtonProps>((props, ref) => {
|
|
const { handle, loading } = useLoading(props.onClick, props.disabled);
|
|
|
|
return (
|
|
<button
|
|
ref={ref as ForwardedRef<HTMLButtonElement>}
|
|
type="button"
|
|
disabled={loading || props.disabled}
|
|
{...props}
|
|
className={classNames("spinner-button", props.className)}
|
|
onClick={handle}>
|
|
<span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span>
|
|
{loading && (
|
|
<span className="spinner-wrapper">
|
|
<Spinner />
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
export default AsyncButton;
|