44 lines
867 B
TypeScript
44 lines
867 B
TypeScript
import {
|
|
ButtonHTMLAttributes,
|
|
DetailedHTMLProps,
|
|
useEffect,
|
|
useState,
|
|
} from "react";
|
|
import { cn } from "../../../helper/cn";
|
|
|
|
export const Button = ({
|
|
isLoading,
|
|
...props
|
|
}: DetailedHTMLProps<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
HTMLButtonElement
|
|
> & {
|
|
isLoading?: boolean;
|
|
}) => {
|
|
const [isLoadingState, setIsLoadingState] = useState(isLoading);
|
|
|
|
useEffect(() => {
|
|
setIsLoadingState(isLoading);
|
|
}, [isLoading]);
|
|
|
|
return (
|
|
<button
|
|
{...(props as any)}
|
|
className={cn("btn", props.className)}
|
|
disabled={isLoadingState || props.disabled}
|
|
onClick={async (e) => {
|
|
if (props.onClick) {
|
|
setIsLoadingState(true);
|
|
await props.onClick(e);
|
|
setIsLoadingState(false);
|
|
}
|
|
}}
|
|
>
|
|
{isLoadingState && (
|
|
<span className="loading loading-spinner loading-sm"></span>
|
|
)}
|
|
{props.children as any}
|
|
</button>
|
|
);
|
|
};
|