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

CE-604 Show null values as a switch that isn't leaning towards yes or no; add bgcolor gray when field is disabled

Browse Source
This commit is contained in:
darin.kelkhoff
2023-10-20 10:14:37 -05:00
parent 60a8baff35
commit 91d38a1d15
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,13 +19,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {InputLabel} from "@mui/material";
import {Box, InputLabel} from "@mui/material";
import Stack from "@mui/material/Stack";
import {styled} from "@mui/material/styles";
import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography";
import {useFormikContext} from "formik";
import React, {SyntheticEvent} from "react";
import colors from "qqq/assets/theme/base/colors";
const AntSwitch = styled(Switch)(({theme}) => ({
width: 28,
@ -60,6 +61,9 @@ const AntSwitch = styled(Switch)(({theme}) => ({
duration: 200,
}),
},
"&.nullSwitch .MuiSwitch-thumb": {
width: 24,
},
"& .MuiSwitch-track": {
borderRadius: 16 / 2,
opacity: 1,
@ -78,6 +82,7 @@ interface Props
}
function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
{
const {setFieldValue} = useFormikContext();
@ -96,8 +101,10 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
setFieldValue(name, !value);
}
const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";
return (
<>
<Box bgcolor={isDisabled ? colors.grey[200] : ""}>
<InputLabel shrink={true}>{label}</InputLabel>
<Stack direction="row" spacing={1} alignItems="center">
<Typography
@ -107,7 +114,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}>
No
</Typography>
<AntSwitch name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
<AntSwitch className={classNullSwitch} name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
<Typography
fontSize="0.875rem"
color={value === true ? "auto" : "#bfbfbf"}
@ -116,7 +123,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
Yes
</Typography>
</Stack>
</>
</Box>
);
}