QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
darin.kelkhoff
2024-11-25 10:11:27 -06:00
parent cfca47054e
commit b07d65aaca
2 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/qqq/components/forms/BooleanFieldSwitch.tsx
View File

@ -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" : "";

86
src/qqq/components/forms/DynamicFormField.tsx
View File

@ -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,42 +120,76 @@ 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) =>
{
const beforeStart = e.target.selectionStart;
const beforeEnd = e.target.selectionEnd;
flushSync(() =>
if(isToUpperCase || isToLowerCase)
{
let newValue = e.currentTarget.value;
if (isToUpperCase)
{
newValue = newValue.toUpperCase();
}
if (isToLowerCase)
{
newValue = newValue.toLowerCase();
}
setFieldValue(name, newValue);
});
const beforeStart = e.target.selectionStart;
const beforeEnd = e.target.selectionEnd;
const input = document.getElementById(name) as HTMLInputElement;
if (input)
flushSync(() =>
{
let newValue = e.currentTarget.value;
if (isToUpperCase)
{
newValue = newValue.toUpperCase();
}
if (isToLowerCase)
{
newValue = newValue.toLowerCase();
}
setFieldValue(name, newValue);
onChangeCallback(newValue);
});
const input = document.getElementById(name) as HTMLInputElement;
if (input)
{
input.setSelectionRange(beforeStart, beforeEnd);
}
}
else if(onChangeCallback)
{
input.setSelectionRange(beforeStart, beforeEnd);
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%"