fix(app-headless-cms): set default value from predefined values (#4201)

webiny · Jul 12, 2024 · aa73c49 · aa73c49
1 parent 33e89bb
commit aa73c49
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 65 deletions.
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/useBind.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/useBind.tsx
@@ -13,6 +13,7 @@ interface UseBindParams {
     name?: string;
     validators?: Validator | Validator[];
     children?: any;
+    defaultValue?: any;
 }
 
 const createFieldCacheKey = (field: CmsModelField) => {
@@ -53,12 +54,16 @@ export function useBind({ Bind, field }: UseBindProps) {
 
             const validators = createValidators(field, field.validation || emptyValidators);
             const listValidators = createValidators(field, field.listValidation || emptyValidators);
-            const defaultValue: string[] | undefined = undefined;
             const isMultipleValues = index === -1 && field.multipleValues;
             const inputValidators = isMultipleValues ? listValidators : validators;
 
             memoizedBindComponents.current[componentId] = function UseBind(params: UseBindParams) {
-                const { name: childName, validators: childValidators, children } = params;
+                const {
+                    name: childName,
+                    validators: childValidators,
+                    children,
+                    defaultValue
+                } = params;
 
                 return (
                     <Bind

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/checkboxes.tsx
@@ -1,11 +1,15 @@
 import React from "react";
 import get from "lodash/get";
-import { CmsModelFieldRendererPlugin } from "~/types";
+import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
 import { Checkbox, CheckboxGroup } from "@webiny/ui/Checkbox";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
+const adaptToField = (field: CmsModelField, value: string) => {
+    return field.type === "number" ? Number(value) : value;
+};
+
 const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-checkboxes-buttons",
@@ -19,42 +23,39 @@ const plugin: CmsModelFieldRendererPlugin = {
         render({ field, getBind }) {
             const Bind = getBind();
 
-            const { values: options = [] } = field.predefinedValues || {
+            const { values: predefinedOptions = [] } = field.predefinedValues || {
                 values: []
             };
 
+            // For `number` field, we want to convert the value to actual Number.
+            const options = predefinedOptions.map(opt => ({
+                ...opt,
+                value: adaptToField(field, opt.value)
+            }));
+
+            const defaults = options.filter(option => option.selected);
+            const defaultValue = defaults.length > 0 ? defaults.map(opt => opt.value) : undefined;
+
             return (
-                <Bind>
-                    {bind => {
-                        return (
-                            <CheckboxGroup
-                                {...bind}
-                                label={field.label}
-                                description={field.helpText}
-                            >
-                                {({ onChange, getValue }) => (
-                                    <React.Fragment>
-                                        {options.map((option, index) => {
-                                            const value =
-                                                field.type === "number"
-                                                    ? Number(option.value)
-                                                    : option.value;
-                                            return (
-                                                <div key={String(option.value) + index}>
-                                                    <Checkbox
-                                                        label={option.label}
-                                                        value={getValue(value)}
-                                                        onChange={onChange(value)}
-                                                        data-testid={`fr.input.${field.label}`}
-                                                    />
-                                                </div>
-                                            );
-                                        })}
-                                    </React.Fragment>
-                                )}
-                            </CheckboxGroup>
-                        );
-                    }}
+                <Bind defaultValue={defaultValue}>
+                    <CheckboxGroup label={field.label} description={field.helpText}>
+                        {({ onChange, getValue }) => (
+                            <React.Fragment>
+                                {options.map((option, index) => {
+                                    return (
+                                        <div key={String(option.value) + index}>
+                                            <Checkbox
+                                                label={option.label}
+                                                value={getValue(option.value)}
+                                                onChange={onChange(option.value)}
+                                                data-testid={`fr.input.${field.label}`}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </React.Fragment>
+                        )}
+                    </CheckboxGroup>
                 </Bind>
             );
         }

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/radioButtons.tsx
@@ -23,8 +23,10 @@ const plugin: CmsModelFieldRendererPlugin = {
                 options: []
             };
 
+            const defaultOption = options.find(opt => opt.selected === true);
+
             return (
-                <Bind>
+                <Bind defaultValue={defaultOption ? defaultOption.value : undefined}>
                     <RadioGroup label={field.label} description={field.helpText}>
                         {({ onChange, getValue }) => (
                             <React.Fragment>

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/select.tsx
@@ -1,24 +1,11 @@
 import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import {
-    CmsEditorFieldPredefinedValuesEntry as Option,
-    CmsModelFieldRendererPlugin
-} from "~/types";
+import { CmsModelFieldRendererPlugin } from "~/types";
 import { Select } from "@webiny/ui/Select";
 
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
-const getDefaultValue = (initialValue?: string | null, options?: Option[]): string | undefined => {
-    if (initialValue) {
-        return initialValue || undefined;
-    } else if (!options) {
-        return undefined;
-    }
-    const selected = options.find(option => !!option.selected);
-    return selected ? selected.value : undefined;
-};
-
 const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-select-box",
@@ -32,23 +19,17 @@ const plugin: CmsModelFieldRendererPlugin = {
         render({ field, getBind }) {
             const Bind = getBind();
 
-            const { values: options } = field.predefinedValues || {};
+            const { values: options = [] } = field.predefinedValues || {};
+            const defaultOption = options.find(option => !!option.selected);
 
             return (
-                <Bind>
-                    {bind => {
-                        const value = getDefaultValue(bind.value, options);
-                        return (
-                            <Select
-                                {...bind}
-                                value={value}
-                                label={field.label}
-                                description={field.helpText}
-                                options={options}
-                                data-testid={`fr.input.select.${field.label}`}
-                            />
-                        );
-                    }}
+                <Bind defaultValue={defaultOption ? defaultOption.value : undefined}>
+                    <Select
+                        label={field.label}
+                        description={field.helpText}
+                        options={options}
+                        data-testid={`fr.input.select.${field.label}`}
+                    />
                 </Bind>
             );
         }