Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use ForwardedRef in AsyncButton

Browse Source
This commit is contained in:
Martti Malmi 2023-09-28 12:52:32 +03:00
parent 8b9f55493e
commit b993c3ff3c
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app/src/Element/AsyncButton.tsx
View File

@ -1,15 +1,14 @@
import "./AsyncButton.css";
import { useState } from "react";
import React, { useState, ForwardedRef } from "react";
import Spinner from "../Icons/Spinner";
interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
disabled?: boolean;
onClick(e: React.MouseEvent): Promise<void> | void;
children?: React.ReactNode;
ref?: React.Ref<HTMLButtonElement>;
}
export default function AsyncButton(props: AsyncButtonProps) {
const AsyncButton = React.forwardRef<HTMLButtonElement, AsyncButtonProps>((props, ref) => {
const [loading, setLoading] = useState<boolean>(false);
async function handle(e: React.MouseEvent) {
@ -30,7 +29,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
return (
<button
ref={props.ref}
ref={ref as ForwardedRef<HTMLButtonElement>}
className="spinner-button"
type="button"
disabled={loading || props.disabled}
@ -44,4 +43,6 @@ export default function AsyncButton(props: AsyncButtonProps) {
)}
</button>
);
}
});
export default AsyncButton;