49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { Form, Formik, FormikConfig, FormikErrors, FormikProps } from "formik";
|
|
import { Button, Divider } from "@mantine/core";
|
|
|
|
//formik is defined as
|
|
//export declare function Formik<Values extends FormikValues = FormikValues, ExtraProps = {}>(props: FormikConfig<Values> & ExtraProps): React.JSX.Element;
|
|
//we just want to proxy it basically
|
|
export function FormikForm<Values extends object>({
|
|
data = {} as Values,
|
|
onSubmit,
|
|
submitText = "Submit",
|
|
schema,
|
|
onDelete = null,
|
|
closeModal = null,
|
|
createForm = null,
|
|
children,
|
|
...props
|
|
}: Omit<FormikConfig<Values>, "initialValues"> & {
|
|
data?: Values;
|
|
submitText?: string;
|
|
schema?: any;
|
|
onDelete?: () => void;
|
|
closeModal?: () => void;
|
|
createForm?: (values, handleChange, errors, touched) => React.ReactNode;
|
|
children?: React.ReactNode;
|
|
}): JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
return <Formik<Values>
|
|
initialValues={data}
|
|
onSubmit={onSubmit}
|
|
validationSchema={schema}
|
|
{...props}
|
|
>
|
|
{({ values, handleChange, errors, touched, ...other }) => (
|
|
<Form>
|
|
{createForm && createForm(values, handleChange, errors, touched)}
|
|
{children}
|
|
<Divider my="md" />
|
|
<div tw="flex justify-center items-center">
|
|
{onDelete && <Button onClick={onDelete} color="red">{t("Delete")}</Button>}
|
|
{closeModal && <Button onClick={() => closeModal()}>{t("Close")}</Button>}
|
|
<Button type="submit">{submitText}</Button>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>;
|
|
}
|