feat: support booleans in radios and selects

measuredco · Aug 14, 2023 · acb7a96 · acb7a96
1 parent d7e3190
commit acb7a96
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -155,9 +155,9 @@ A `Field` represents a user input field shown in the Puck interface.
   - **[fieldName]** (`Field`): The Field objects describing the input data for each item
 - **getItemSummary** (`(object, number) => string` [optional]): Function to get the name of each item when using the `array` or `external` field types
 - **defaultItemProps** (`object` [optional]): Default props to pass to each new item added, when using a `array` field type
-- **options** (`object[]`): array of items to render for select-type inputs
+- **options** (`object[]`): array of items to render for select or radio inputs
   - **label** (`string`)
-  - **value** (`string`)
+  - **value** (`string` | `number` | `boolean`)
 - **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
 - **adaptorParams** (`object`): Paramaters passed to the adaptor
 

diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
@@ -140,14 +140,24 @@ export const InputOrGroup = ({
         </div>
         <select
           className={getClassName("input")}
-          onChange={(e) => onChange(e.currentTarget.value)}
+          onChange={(e) => {
+            if (
+              e.currentTarget.value === "true" ||
+              e.currentTarget.value === "false"
+            ) {
+              onChange(Boolean(e.currentTarget.value));
+              return;
+            }
+
+            onChange(e.currentTarget.value);
+          }}
           value={value}
         >
           {field.options.map((option) => (
             <option
               key={option.label + option.value}
               label={option.label}
-              value={option.value}
+              value={option.value as string | number}
             />
           ))}
         </select>
@@ -200,9 +210,19 @@ export const InputOrGroup = ({
               >
                 <input
                   type="radio"
-                  value={option.value}
+                  value={option.value as string | number}
                   name={name}
-                  onChange={(e) => onChange(e.currentTarget.value)}
+                  onChange={(e) => {
+                    if (
+                      e.currentTarget.value === "true" ||
+                      e.currentTarget.value === "false"
+                    ) {
+                      onChange(JSON.parse(e.currentTarget.value));
+                      return;
+                    }
+
+                    onChange(e.currentTarget.value);
+                  }}
                   readOnly={readOnly}
                   defaultChecked={value === option.value}
                 />

diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
@@ -29,7 +29,7 @@ export type Field<
   defaultItemProps?: Props;
   options?: {
     label: string;
-    value: string | number;
+    value: string | number | boolean;
   }[];
 };