-
Notifications
You must be signed in to change notification settings - Fork 583
/
CategoriesForm.js
80 lines (76 loc) · 3.32 KB
/
CategoriesForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// @flow
import * as React from "react";
import { i18n } from "@webiny/app/i18n";
import { Form } from "@webiny/form";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input } from "@webiny/ui/Input";
import { Select } from "@webiny/ui/Select";
import { ButtonPrimary } from "@webiny/ui/Button";
import { usePageBuilder } from "@webiny/app-page-builder/hooks/usePageBuilder";
import {
SimpleForm,
SimpleFormHeader,
SimpleFormFooter,
SimpleFormContent
} from "@webiny/app-admin/components/SimpleForm";
import { categoryUrlValidator } from "./validators";
import { CircularProgress } from "@webiny/ui/Progress";
import { validation } from "@webiny/validation";
import { useCrud } from "@webiny/app-admin/hooks/useCrud";
const t = i18n.ns("app-page-builder/admin/categories/form");
const CategoriesForm = () => {
const { theme } = usePageBuilder();
const { form: crudForm } = useCrud();
return (
<Form {...crudForm}>
{({ data, form, Bind }) => (
<SimpleForm>
{crudForm.loading && <CircularProgress />}
<SimpleFormHeader title={data.name || t`New Category`} />
<SimpleFormContent>
<Grid>
<Cell span={6}>
<Bind name="name" validators={validation.create("required")}>
<Input label={t`Name`} />
</Bind>
</Cell>
<Cell span={6}>
<Bind name="slug" validators={validation.create("required")}>
<Input disabled={data.id} label={t`Slug`} />
</Bind>
</Cell>
<Cell span={12}>
<Bind
name="url"
validators={[
validation.create("required"),
categoryUrlValidator
]}
>
<Input disabled={data.id} label={t`URL`} />
</Bind>
</Cell>
<Cell span={6}>
<Bind name="layout" defaultValue={theme.layouts[0].name}>
<Select label={t`Layout`}>
{theme.layouts.map(({ name, title }) => (
<option key={name} value={name}>
{title}
</option>
))}
</Select>
</Bind>
</Cell>
</Grid>
</SimpleFormContent>
<SimpleFormFooter>
<ButtonPrimary onClick={form.submit} align="right">
{t`Save category`}
</ButtonPrimary>
</SimpleFormFooter>
</SimpleForm>
)}
</Form>
);
};
export default CategoriesForm;