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