75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useSpacing } from "@/styles";
|
|
import { Field, Form, Formik } from "formik";
|
|
import { Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Typography } from "@material-ui/core";
|
|
import { CKEditorField } from "@/field/ckeditor";
|
|
import { Actions } from "@/components/actions";
|
|
import { Cancel, Send } from "mdi-material-ui";
|
|
import { createPortal } from "react-dom";
|
|
import { capitalize } from "@/helpers";
|
|
|
|
export type ContactFormValues = {
|
|
content: string;
|
|
}
|
|
|
|
const initialContactFormValues: ContactFormValues = {
|
|
content: "",
|
|
}
|
|
|
|
export type ContactDialogProps = {
|
|
onSend: (values: ContactFormValues) => void;
|
|
} & DialogProps;
|
|
|
|
export function ContactForm() {
|
|
const { t } = useTranslation();
|
|
const spacing = useSpacing(2);
|
|
|
|
return <div className={ spacing.vertical } style={{ overflow: 'hidden' }}>
|
|
<Field label={ t("forms.contact.field.content") } name="content" component={ CKEditorField }/>
|
|
</div>
|
|
}
|
|
|
|
export function ContactDialog({ onSend, ...props }: ContactDialogProps) {
|
|
const spacing = useSpacing(2);
|
|
const { t } = useTranslation();
|
|
|
|
return <Dialog { ...props } maxWidth="lg">
|
|
<Formik initialValues={ initialContactFormValues } onSubmit={ onSend }>
|
|
<Form className={ spacing.vertical }>
|
|
<DialogTitle>{ capitalize(t("forms.contact.title")) }</DialogTitle>
|
|
<DialogContent>
|
|
<ContactForm />
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Actions>
|
|
<Button variant="contained" color="primary" startIcon={ <Send /> } type="submit">{ t("send") }</Button>
|
|
<Button startIcon={ <Cancel /> } onClick={ ev => props.onClose?.(ev, "escapeKeyDown") }>{ t("cancel") }</Button>
|
|
</Actions>
|
|
</DialogActions>
|
|
</Form>
|
|
</Formik>
|
|
</Dialog>
|
|
}
|
|
|
|
export type ContactActionProps = {
|
|
children: (props: { action: () => void }) => React.ReactNode
|
|
};
|
|
|
|
export function ContactAction({ children }: ContactActionProps) {
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
|
|
const handleClose = () => { setOpen(false) };
|
|
const handleSubmit = (values: ContactFormValues) => {
|
|
setOpen(false);
|
|
}
|
|
|
|
return <>
|
|
{ children({ action: () => setOpen(true) }) }
|
|
{ createPortal(
|
|
<ContactDialog open={ open } onSend={ handleSubmit } onClose={ handleClose }/>,
|
|
document.getElementById("modals") as HTMLElement
|
|
) }
|
|
</>
|
|
}
|