CE-1955 - Add onChangeCallback to form fields; add ability to get a DynamicSelect out of DynamicFormField;

src/qqq/components/forms/BooleanFieldSwitch.tsx

@@ -80,11 +80,12 @@ interface Props
    label: string;
    value: boolean;
    isDisabled: boolean;
+   onChangeCallback?: (newValue: any) => void;
 }
 
 
 
-function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
+function BooleanFieldSwitch({name, label, value, isDisabled, onChangeCallback}: Props) : JSX.Element
 {
    const {setFieldValue} = useFormikContext();
 
@@ -93,6 +94,10 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
       if(!isDisabled)
       {
          setFieldValue(name, newValue);
+         if(onChangeCallback)
+         {
+            onChangeCallback(newValue);
+         }
          event.stopPropagation();
       }
    }
@@ -100,6 +105,10 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
    const toggleSwitch = () =>
    {
       setFieldValue(name, !value);
+      if(onChangeCallback)
+      {
+         onChangeCallback(!value);
+      }
    }
 
    const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";

src/qqq/components/forms/DynamicFormField.tsx

@@ -19,10 +19,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
 import {Box, InputAdornment, InputLabel} from "@mui/material";
 import Switch from "@mui/material/Switch";
 import {ErrorMessage, Field, useFormikContext} from "formik";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
+import DynamicSelect from "qqq/components/forms/DynamicSelect";
 import React, {useMemo, useState} from "react";
 import AceEditor from "react-ace";
 import colors from "qqq/assets/theme/base/colors";
@@ -43,6 +45,8 @@ interface Props
    placeholder?: string;
    backgroundColor?: string;
 
+   onChangeCallback?: (newValue: any) => void;
+
    [key: string]: any;
 
    bulkEditMode?: boolean;
@@ -51,7 +55,7 @@ interface Props
 }
 
 function QDynamicFormField({
-   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, ...rest
+   label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, placeholder, backgroundColor, formFieldObject, onChangeCallback, ...rest
 }: Props): JSX.Element
 {
    const [switchChecked, setSwitchChecked] = useState(false);
@@ -116,9 +120,11 @@ function QDynamicFormField({
    // put the onChange in an object and assign it with a spread          //
    ////////////////////////////////////////////////////////////////////////
    let onChange: any = {};
-   if (isToUpperCase || isToLowerCase)
+   if (isToUpperCase || isToLowerCase || onChangeCallback)
    {
       onChange.onChange = (e: any) =>
+      {
+         if(isToUpperCase || isToLowerCase)
          {
             const beforeStart = e.target.selectionStart;
             const beforeEnd = e.target.selectionEnd;
@@ -135,6 +141,7 @@ function QDynamicFormField({
                   newValue = newValue.toLowerCase();
                }
                setFieldValue(name, newValue);
+               onChangeCallback(newValue);
             });
 
             const input = document.getElementById(name) as HTMLInputElement;
@@ -142,16 +149,47 @@ function QDynamicFormField({
             {
                input.setSelectionRange(beforeStart, beforeEnd);
             }
+         }
+         else if(onChangeCallback)
+         {
+            onChangeCallback(e.currentTarget.value);
+         }
       };
    }
 
+   /***************************************************************************
+    **
+    ***************************************************************************/
+   function dynamicSelectOnChange(newValue?: QPossibleValue)
+   {
+      if(onChangeCallback)
+      {
+         onChangeCallback(newValue == null ? null : newValue.id)
+      }
+   }
+
    let field;
    let getsBulkEditHtmlLabel = true;
-   if (type === "checkbox")
+   if(formFieldObject.possibleValueProps)
+   {
+      field = (<DynamicSelect
+         name={name}
+         fieldPossibleValueProps={formFieldObject.possibleValueProps}
+         isEditable={!isDisabled}
+         fieldLabel={label}
+         initialValue={value}
+         bulkEditMode={bulkEditMode}
+         bulkEditSwitchChangeHandler={bulkEditSwitchChangeHandler}
+         onChange={dynamicSelectOnChange}
+         // otherValues={otherValuesMap}
+         useCase="form"
+      />)
+   }
+   else if (type === "checkbox")
    {
       getsBulkEditHtmlLabel = false;
       field = (<>
-         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} />
+         <BooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} onChangeCallback={onChangeCallback} />
          <Box mt={0.75}>
             <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
                {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
@@ -179,6 +217,10 @@ function QDynamicFormField({
                onChange={(value: string, event: any) =>
                {
                   setFieldValue(name, value, false);
+                  if(onChangeCallback)
+                  {
+                     onChangeCallback(value);
+                  }
                }}
                setOptions={{useWorker: false}}
                width="100%"