From be57bee1a826f411522b1bf779214ef53f537419 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 27 Jul 2023 15:42:32 +1000
Subject: [PATCH] Add callback for value changes

---
 src/frontend/src/components/forms/ApiForm.tsx | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 97ee69e2e8..9e9a432f8d 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -43,10 +43,12 @@ export type ApiFormFieldType = {
  */
 function ApiFormField({
   field,
-  definitions
+  definitions,
+  onValueChange
 }: {
   field: ApiFormFieldType;
   definitions: ApiFormFieldType[];
+  onValueChange: (fieldName: string, value: any) => void;
 }) {
   // Extract field definition from provided data
   // Where user has provided specific data, override the API definition
@@ -66,17 +68,39 @@ function ApiFormField({
     return def;
   }, [field, definitions]);
 
+  // Callback helper when form value changes
+  function onChange(value: any) {
+    onValueChange(definition.name, value);
+  }
+
   switch (definition.fieldType) {
     case 'url':
     case 'string':
-      return <TextInput {...definition} />;
+      return (
+        <TextInput
+          {...definition}
+          onChange={(event) => onChange(event.currentTarget.value)}
+        />
+      );
     case 'boolean':
-      return <Checkbox radius="sm" {...definition} />;
+      return (
+        <Checkbox
+          radius="sm"
+          {...definition}
+          onChange={(event) => onChange(event.currentTarget.checked)}
+        />
+      );
     case 'integer':
     case 'decimal':
     case 'float':
     case 'number':
-      return <NumberInput radius="sm" {...definition} />;
+      return (
+        <NumberInput
+          radius="sm"
+          {...definition}
+          onChange={(value: number) => onChange(value)}
+        />
+      );
     default:
       return (
         <Alert color="red" title="Error">
@@ -251,6 +275,7 @@ export function ApiForm({
                   key={field.name}
                   field={field}
                   definitions={fieldDefinitions}
+                  onValueChange={(fieldName, value) => {}}
                 />
               ))}
             </Stack>