diff --git a/src/components/Form/BaseFormSubmitButton.tsx b/src/components/Form/BaseFormSubmitButton.tsx new file mode 100644 index 00000000..649bac31 --- /dev/null +++ b/src/components/Form/BaseFormSubmitButton.tsx @@ -0,0 +1,33 @@ +import { grid as muiGridSxProps, type GridProps as MuiGridSxProps } from "@mui/system"; +import { styled } from "@mui/material/styles"; +import Button, { type ButtonProps } from "@mui/material/Button"; +import { ButtonLoadingIndicator } from "@/components/Indicators/ButtonLoadingIndicator"; +import type { Simplify } from "type-fest"; + +/** + * A form submit button which shows a loading indicator when `isLoading` is `true`. + * + * > _This is used by `Form/FormSubmitButton` and `StripeForm/StripeFormSubmitButton`_. + */ +export const BaseFormSubmitButton = ({ + label, + type = "button", + isLoading, + ...buttonProps +}: BaseFormSubmitButtonProps) => ( + + {isLoading ? : label} + +); + +const StyledButton = styled(Button, { + shouldForwardProp: (propName: string) => !propName.startsWith("grid"), +})({ + height: "2.75rem", // default is 2.5rem + position: "relative", + ...muiGridSxProps, +}); + +export type BaseFormSubmitButtonProps = Simplify< + { label: string; isLoading: boolean } & Omit & MuiGridSxProps +>; diff --git a/src/components/Form/FormSubmitButton.tsx b/src/components/Form/FormSubmitButton.tsx index a96acd77..9cb2467b 100644 --- a/src/components/Form/FormSubmitButton.tsx +++ b/src/components/Form/FormSubmitButton.tsx @@ -1,10 +1,12 @@ import { useFormikContext } from "formik"; -import { grid as muiGridSxProps, type GridProps as MuiGrisSxProps } from "@mui/system"; -import { styled } from "@mui/material/styles"; -import Button, { type ButtonProps } from "@mui/material/Button"; +import { BaseFormSubmitButton, type BaseFormSubmitButtonProps } from "./BaseFormSubmitButton"; import { formClassNames } from "./classNames"; +import type { Simplify } from "type-fest"; -export const FormSubmitButton = (props: FormSubmitButtonProps) => { +/** + * Formik-integrated submit button (uses {@link BaseFormSubmitButton}). + */ +export const FormSubmitButton = ({ className = "", ...props }: FormSubmitButtonProps) => { const { handleSubmit, isSubmitting } = useFormikContext(); const handleClick = (event: React.MouseEvent) => { @@ -13,22 +15,17 @@ export const FormSubmitButton = (props: FormSubmitButtonProps) => { }; return ( - - Submit - + /> ); }; -const StyledButton = styled(Button, { - shouldForwardProp: (propName: string) => !propName.startsWith("grid"), -})({ - lineHeight: "2rem", - ...muiGridSxProps, -}); - -export type FormSubmitButtonProps = Omit; +export type FormSubmitButtonProps = Simplify< + Omit +>;