system-praktyk-front/src/management/page/form.tsx
2021-01-18 23:40:12 +01:00

41 lines
1.7 KiB
TypeScript

import { default as StaticPage } from "@/data/page";
import { identityTransformer, Transformer } from "@/serialization";
import { Field, Form, FormikFormProps } from "formik";
import React from "react";
import { TextField as TextFieldFormik } from "formik-material-ui";
import { Typography } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useSpacing } from "@/styles";
import { CKEditorField } from "@/forms/ckeditor";
export type StaticPageFormValues = StaticPage;
export const initialStaticPageFormValues: StaticPageFormValues = {
slug: "",
title: {
en: "",
pl: "",
},
content: {
en: "",
pl: "",
}
}
export const staticPageFormValuesTransformer: Transformer<StaticPage, StaticPageFormValues> = identityTransformer;
export function StaticPageForm() {
const { t } = useTranslation("management");
const spacing = useSpacing(2);
return <div className={ spacing.vertical }>
<Field label={ t("page.field.slug") } name="slug" fullWidth component={ TextFieldFormik }/>
<Typography variant="subtitle2">{ t("page.field.title") }</Typography>
<Field label={ t("translation:language.pl") } name="title.pl" fullWidth component={ TextFieldFormik }/>
<Field label={ t("translation:language.en") } name="title.en" fullWidth component={ TextFieldFormik }/>
<Typography variant="subtitle2">{ t("page.field.content") }</Typography>
<Field label={ t("translation:language.pl") } name="content.pl" fullWidth component={ CKEditorField }/>
<Field label={ t("translation:language.en") } name="content.en" fullWidth component={ CKEditorField }/>
</div>
}