Use new field components (#157)

Use new field components to simplify forms --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
vivid-planet · Feb 13, 2024 · c072ada · c072ada
1 parent a395cc9
commit c072ada
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 29 deletions.
diff --git a/admin/src/common/blocks/HeadlineBlock.tsx b/admin/src/common/blocks/HeadlineBlock.tsx
@@ -1,4 +1,4 @@
-import { Field, FinalFormSelect } from "@comet/admin";
+import { SelectField } from "@comet/admin";
 import { BlockCategory, BlocksFinalForm, createCompositeBlock, createCompositeSetting } from "@comet/blocks-admin";
 import { createRichTextBlock } from "@comet/cms-admin";
 import { MenuItem } from "@mui/material";
@@ -32,21 +32,17 @@ export const HeadlineBlock = createCompositeBlock({
                 defaultValue: "header-one",
                 AdminComponent: ({ state, updateState }) => (
                     <BlocksFinalForm<Pick<HeadlineBlockData, "level">> onSubmit={({ level }) => updateState(level)} initialValues={{ level: state }}>
-                        <Field name="level" label={<FormattedMessage id="headlineBlock.level" defaultMessage="Level" />} fullWidth>
-                            {(props) => (
-                                <FinalFormSelect {...props}>
-                                    <MenuItem value="header-one">
-                                        <FormattedMessage id="headlineBlock.headerOne" defaultMessage="Header One" />
-                                    </MenuItem>
-                                    <MenuItem value="header-two">
-                                        <FormattedMessage id="headlineBlock.headerTwo" defaultMessage="Header Two" />
-                                    </MenuItem>
-                                    <MenuItem value="header-three">
-                                        <FormattedMessage id="headlineBlock.headerThree" defaultMessage="Header Three" />
-                                    </MenuItem>
-                                </FinalFormSelect>
-                            )}
-                        </Field>
+                        <SelectField name="level" label={<FormattedMessage id="headlineBlock.level" defaultMessage="Level" />} fullWidth>
+                            <MenuItem value="header-one">
+                                <FormattedMessage id="headlineBlock.headerOne" defaultMessage="Header One" />
+                            </MenuItem>
+                            <MenuItem value="header-two">
+                                <FormattedMessage id="headlineBlock.headerTwo" defaultMessage="Header Two" />
+                            </MenuItem>
+                            <MenuItem value="header-three">
+                                <FormattedMessage id="headlineBlock.headerThree" defaultMessage="Header Three" />
+                            </MenuItem>
+                        </SelectField>
                     </BlocksFinalForm>
                 ),
             }),

diff --git a/admin/src/products/ProductForm.tsx b/admin/src/products/ProductForm.tsx
@@ -1,11 +1,11 @@
 import { useMutation, useQuery } from "@apollo/client";
 import {
-    Field,
     FinalForm,
-    FinalFormInput,
     FinalFormSaveSplitButton,
     Loading,
     MainContent,
+    TextAreaField,
+    TextField,
     Toolbar,
     ToolbarActions,
     ToolbarBackButton,
@@ -77,20 +77,11 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
             <MainContent>
                 <Card>
                     <CardContent>
-                        <Field
+                        <TextField required fullWidth name="name" label={intl.formatMessage({ id: "products.name", defaultMessage: "Name" })} />
+                        <TextAreaField
                             required
                             fullWidth
-                            name="name"
-                            component={FinalFormInput}
-                            label={intl.formatMessage({ id: "products.name", defaultMessage: "Name" })}
-                        />
-                        <Field
-                            required
-                            fullWidth
-                            multiline
-                            rows={5}
                             name="description"
-                            component={FinalFormInput}
                             label={intl.formatMessage({ id: "products.description", defaultMessage: "Description" })}
                         />
                     </CardContent>