Merge pull request #22 from workfloworchestrator/1694-option-fields

1694 option fields

Author: DutchBen

backend/main.py

@@ -21,7 +21,7 @@
 from pydantic_forms.exceptions import FormException
 from pydantic_forms.core import FormPage as PydanticFormsFormPage
 from pydantic_forms.types import JSON
-from pydantic_forms.validators import LongText, Label, Divider, Hidden
+from pydantic_forms.validators import LongText, Label, Divider, Hidden, Choice
 
 # Choice,
 # CustomerId,
@@ -75,6 +75,19 @@ def example_backend_validation(val: int) -> bool:
 ]
 
 
+class DropdownChoices(Choice):
+    _1 = ("1", "Option 1")
+    _2 = ("2", "Option 2")
+    _3 = ("3", "Option 3")
+    _4 = ("4", "Option 4")
+
+
+class RadioChoices(Choice):
+    _1 = ("1", "Option 1")
+    _2 = ("2", "Option 2")
+    _3 = ("3", "Option 3")
+
+
 @app.post("/form")
 async def form(form_data: list[dict] = []):
     def form_generator(state: State):
@@ -87,6 +100,10 @@ class TestForm(FormPage):
             divider: Divider
             label: Label = "Label"
             hidden: Hidden = "Hidden"
+            # When there are > 3 choices a dropdown will be rendered
+            dropdown: DropdownChoices = ("2")
+            # When there are <= 3 choices a radio group will be rendered
+            radio: RadioChoices = ("3")
 
         form_data_1 = yield TestForm
 

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -5,9 +5,11 @@
  */
 import {
     DividerField,
+    DropdownField,
     HiddenField,
     IntegerField,
     LabelField,
+    RadioField,
     TextAreaField,
 } from '@/components/fields';
 import {
@@ -83,6 +85,35 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             );
         },
     },
+    {
+        id: 'radio',
+        ElementMatch: {
+            Element: RadioField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons.
+            return (
+                field.type === PydanticFormFieldType.STRING &&
+                field.options.length > 0 &&
+                field.options.length <= 3
+            );
+        },
+    },
+    {
+        id: 'dropdown',
+        ElementMatch: {
+            Element: DropdownField,
+            isControlledElement: true,
+        },
+        matcher(field) {
+            // We are looking for a single value from a set list of options. With more than 3 options, use a dropdown.
+            return (
+                field.type === PydanticFormFieldType.STRING &&
+                field.options.length >= 4
+            );
+        },
+    },
 ];
 // If nothing  matches, it defaults to Text field in the mapToComponent function
 export default defaultComponentMatchers;

frontend/packages/pydantic-forms/src/components/fields/DropdownField.tsx

@@ -0,0 +1,30 @@
+/**
+ * Pydantic Forms
+ *
+ * Text component
+ */
+import React from 'react';
+
+import { PydanticFormControlledElementProps } from '@/types';
+
+export const DropdownField = ({
+    value,
+    onChange,
+    pydanticFormField,
+}: PydanticFormControlledElementProps) => {
+    return (
+        <select
+            value={value}
+            onChange={(e) => {
+                onChange(e.target.value);
+            }}
+            disabled={!!pydanticFormField.attributes.disabled}
+        >
+            {pydanticFormField.options?.map((option) => (
+                <option key={option.value} value={option.value}>
+                    {option.label}
+                </option>
+            ))}
+        </select>
+    );
+};

frontend/packages/pydantic-forms/src/components/fields/RadioField.tsx

@@ -0,0 +1,34 @@
+/**
+ * Pydantic Forms
+ *
+ * Text component
+ */
+import React from 'react';
+
+import { PydanticFormControlledElementProps } from '@/types';
+
+export const RadioField = ({
+    value,
+    onChange,
+    pydanticFormField,
+}: PydanticFormControlledElementProps) => {
+    const { options, id } = pydanticFormField;
+
+    return (
+        <div>
+            {options.map((option, key) => (
+                <div key={key}>
+                    <input
+                        type="radio"
+                        id={option.value}
+                        name={id}
+                        value={option.value}
+                        checked={value === option.value}
+                        onChange={(e) => onChange(e.target.value)}
+                    />
+                     <label htmlFor={option.value}>{option.label}</label>
+                </div>
+            ))}
+        </div>
+    );
+};

frontend/packages/pydantic-forms/src/components/fields/index.ts

@@ -6,3 +6,5 @@ export * from './TextAreaField';
 export * from './LabelField';
 export * from './DividerField';
 export * from './HiddenField';
+export * from './DropdownField';
+export * from './RadioField';