fix(app-headless-cms): boolean field default value (#3526)

webiny · Sep 15, 2023 · 0fe93dc · 0fe93dc
1 parent ec99365
commit 0fe93dc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/packages/app-headless-cms-common/src/types/model.ts b/packages/app-headless-cms-common/src/types/model.ts
@@ -12,7 +12,7 @@ import { CmsIdentity } from "~/types/shared";
 export type CmsEditorField<T = unknown> = CmsModelField<T>;
 
 export interface CmsModelFieldSettings<T = unknown> {
-    defaultValue?: string | null | undefined;
+    defaultValue?: string | boolean | number | null | undefined;
     defaultSetValue?: string;
     type?: string;
     fields?: CmsModelField<T>[];

diff --git a/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx b/packages/app-headless-cms/src/admin/plugins/fields/boolean.tsx
@@ -2,12 +2,50 @@ import React from "react";
 import { ReactComponent as BooleanIcon } from "@material-design-icons/svg/outlined/toggle_on.svg";
 import { CmsModelFieldTypePlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { Select } from "@webiny/ui/Select";
+import { Cell, Grid } from "@webiny/ui/Grid";
 import { Bind } from "@webiny/form";
+import { Radio, RadioGroup } from "@webiny/ui/Radio";
 
 const t = i18n.ns("app-headless-cms/admin/fields");
 
+interface OptionsProps {
+    onChange: (value: boolean) => void;
+    value?: boolean | "true" | "false";
+}
+
+const Options: React.VFC<OptionsProps> = ({ onChange, value: initialValue }) => {
+    const value = initialValue === true || initialValue === "true";
+
+    return (
+        <RadioGroup label={"Default value"}>
+            {() => {
+                return (
+                    <>
+                        <div>
+                            <Radio
+                                label="True"
+                                value={value}
+                                onChange={() => {
+                                    onChange(true);
+                                }}
+                            />
+                        </div>
+                        <div>
+                            <Radio
+                                label="False"
+                                value={!value}
+                                onChange={() => {
+                                    onChange(false);
+                                }}
+                            />
+                        </div>
+                    </>
+                );
+            }}
+        </RadioGroup>
+    );
+};
+
 const plugin: CmsModelFieldTypePlugin = {
     type: "cms-editor-field-type",
     name: "cms-editor-field-type-boolean",
@@ -25,6 +63,9 @@ const plugin: CmsModelFieldTypePlugin = {
                 validation: [],
                 renderer: {
                     name: ""
+                },
+                settings: {
+                    defaultValue: false
                 }
             };
         },
@@ -33,13 +74,9 @@ const plugin: CmsModelFieldTypePlugin = {
                 <Grid>
                     <Cell span={12}>
                         <Bind name={"settings.defaultValue"}>
-                            <Select
-                                label={t`Default value`}
-                                description={"Default value for the field"}
-                            >
-                                <option value={"true"}>True</option>
-                                <option value={""}>False</option>
-                            </Select>
+                            {bind => {
+                                return <Options onChange={bind.onChange} value={bind.value} />;
+                            }}
                         </Bind>
                     </Cell>
                 </Grid>

diff --git a/packages/ui/src/Input/Input.tsx b/packages/ui/src/Input/Input.tsx
@@ -148,7 +148,7 @@ export const Input: React.FC<InputProps> = props => {
                 onBlur={onBlur}
                 label={label}
                 icon={icon}
-                placeholder={(!label && placeholder) || undefined}
+                placeholder={placeholder}
                 trailingIcon={trailingIcon}
                 rows={rows}
                 className={classNames(