You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
49 lines
1.2 KiB
import type React from "react";
|
|
import type { HTMLProps } from "react";
|
|
|
|
import { Button, majorScale, Pane, Spinner } from "evergreen-ui";
|
|
import { FiSave } from "react-icons/fi";
|
|
|
|
export interface FormProps extends HTMLProps<HTMLFormElement> {
|
|
onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
loading: boolean;
|
|
dirty: boolean;
|
|
}
|
|
|
|
export const Form = ({
|
|
loading,
|
|
dirty,
|
|
children,
|
|
onSubmit,
|
|
...props
|
|
}: FormProps): JSX.Element => {
|
|
return (
|
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
<form onSubmit={onSubmit} style={{ position: "relative" }} {...props}>
|
|
{loading && (
|
|
<Pane
|
|
position="absolute"
|
|
display="flex"
|
|
width="100%"
|
|
height="100%"
|
|
backgroundColor="rgba(67, 90, 111, 0.2)"
|
|
zIndex={10}
|
|
borderRadius={majorScale(1)}
|
|
>
|
|
<Spinner margin="auto" />
|
|
</Pane>
|
|
)}
|
|
{children}
|
|
<Pane display="flex" marginTop={majorScale(2)}>
|
|
<Button
|
|
type="submit"
|
|
marginLeft="auto"
|
|
disabled={!dirty}
|
|
iconBefore={<FiSave />}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Pane>
|
|
</form>
|
|
);
|
|
};
|
|
|