Initial 1.3.x rework

2022-07-26 08:52:23 +10:00
parent ff6019098b
commit a2280ab96e
163 changed files with 6383 additions and 14397 deletions
@@ -0,0 +1,49 @@
+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>
+  );
+};