mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
157 lines
4.8 KiB
TypeScript
157 lines
4.8 KiB
TypeScript
/*
|
|
* QQQ - Low-code Application Framework for Engineers.
|
|
* Copyright (C) 2021-2022. Kingsrook, LLC
|
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
|
* contact@kingsrook.com
|
|
* https://github.com/Kingsrook/
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import {InputAdornment, InputLabel} from "@mui/material";
|
|
import Box from "@mui/material/Box";
|
|
import Switch from "@mui/material/Switch";
|
|
import {ErrorMessage, Field, useFormikContext} from "formik";
|
|
import React, {SyntheticEvent, useState} from "react";
|
|
import QBooleanFieldSwitch from "qqq/components/QDynamicFormField/QBooleanFieldSwitch";
|
|
import MDBox from "qqq/components/Temporary/MDBox";
|
|
import MDInput from "qqq/components/Temporary/MDInput";
|
|
import MDTypography from "qqq/components/Temporary/MDTypography";
|
|
|
|
// Declaring props types for FormField
|
|
interface Props
|
|
{
|
|
label: string;
|
|
name: string;
|
|
displayFormat: string;
|
|
value: any;
|
|
type: string;
|
|
isEditable?: boolean;
|
|
|
|
[key: string]: any;
|
|
|
|
bulkEditMode?: boolean;
|
|
bulkEditSwitchChangeHandler?: any;
|
|
}
|
|
|
|
function QDynamicFormField({
|
|
label, name, displayFormat, value, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, ...rest
|
|
}: Props): JSX.Element
|
|
{
|
|
const [ switchChecked, setSwitchChecked ] = useState(false);
|
|
const [ isDisabled, setIsDisabled ] = useState(!isEditable || bulkEditMode);
|
|
|
|
const {setFieldValue} = useFormikContext();
|
|
|
|
const inputLabelProps = {};
|
|
if (type.toLowerCase().match("(date|time)"))
|
|
{
|
|
// @ts-ignore
|
|
inputLabelProps.shrink = true;
|
|
}
|
|
|
|
const inputProps = {};
|
|
if (displayFormat && displayFormat.startsWith("$"))
|
|
{
|
|
// @ts-ignore
|
|
inputProps.startAdornment = <InputAdornment position="start">$</InputAdornment>;
|
|
}
|
|
if (displayFormat && displayFormat.endsWith("%%"))
|
|
{
|
|
// @ts-ignore
|
|
inputProps.endAdornment = <InputAdornment position="end">%</InputAdornment>;
|
|
}
|
|
|
|
// @ts-ignore
|
|
const handleOnWheel = (e) =>
|
|
{
|
|
if (type.toLowerCase().match("number"))
|
|
{
|
|
e.target.blur();
|
|
}
|
|
};
|
|
|
|
|
|
const field = () =>
|
|
(type == "checkbox" ?
|
|
<QBooleanFieldSwitch name={name} label={label} value={value} isDisabled={isDisabled} /> :
|
|
<>
|
|
<Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
|
|
onKeyPress={(e: any) =>
|
|
{
|
|
if(e.key === "Enter")
|
|
{
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
/>
|
|
<MDBox mt={0.75}>
|
|
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
|
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} /></div>}
|
|
</MDTypography>
|
|
</MDBox>
|
|
</>
|
|
);
|
|
|
|
const bulkEditSwitchChanged = () =>
|
|
{
|
|
const newSwitchValue = !switchChecked;
|
|
setSwitchChecked(newSwitchValue);
|
|
setIsDisabled(!newSwitchValue);
|
|
bulkEditSwitchChangeHandler(name, newSwitchValue);
|
|
};
|
|
|
|
if (bulkEditMode)
|
|
{
|
|
return (
|
|
<Box mb={1.5} display="flex" flexDirection="row">
|
|
<Box alignItems="baseline" pt={1}>
|
|
<Switch
|
|
id={`bulkEditSwitch-${name}`}
|
|
checked={switchChecked}
|
|
onClick={bulkEditSwitchChanged}
|
|
/>
|
|
</Box>
|
|
<Box width="100%">
|
|
{/* for checkboxes, if we put the whole thing in a label, we get bad overly aggressive toggling of the outer switch... */}
|
|
{(type == "checkbox" ?
|
|
field() :
|
|
<label htmlFor={`bulkEditSwitch-${name}`}>
|
|
{field()}
|
|
</label>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
else
|
|
{
|
|
return (
|
|
<MDBox mb={1.5}>
|
|
{field()}
|
|
</MDBox>
|
|
);
|
|
}
|
|
}
|
|
|
|
QDynamicFormField.defaultProps = {
|
|
bulkEditMode: false,
|
|
isEditable: true,
|
|
bulkEditSwitchChangeHandler: () =>
|
|
{
|
|
},
|
|
};
|
|
|
|
export default QDynamicFormField;
|