QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10: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/>. * 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 Stack from "@mui/material/Stack";
import {styled} from "@mui/material/styles"; import {styled} from "@mui/material/styles";
import Switch from "@mui/material/Switch"; import Switch from "@mui/material/Switch";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import {useFormikContext} from "formik"; import {useFormikContext} from "formik";
import React, {SyntheticEvent} from "react"; import React, {SyntheticEvent} from "react";
import colors from "qqq/assets/theme/base/colors";
const AntSwitch = styled(Switch)(({theme}) => ({ const AntSwitch = styled(Switch)(({theme}) => ({
width: 28, width: 28,
@ -60,6 +61,9 @@ const AntSwitch = styled(Switch)(({theme}) => ({
duration: 200, duration: 200,
}), }),
}, },
"&.nullSwitch .MuiSwitch-thumb": {
width: 24,
},
"& .MuiSwitch-track": { "& .MuiSwitch-track": {
borderRadius: 16 / 2, borderRadius: 16 / 2,
opacity: 1, opacity: 1,
@ -78,6 +82,7 @@ interface Props
} }
function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Element
{ {
const {setFieldValue} = useFormikContext(); const {setFieldValue} = useFormikContext();
@ -96,8 +101,10 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
setFieldValue(name, !value); setFieldValue(name, !value);
} }
const classNullSwitch = (value === null || value == undefined || `${value}` == "") ? "nullSwitch" : "";
return ( return (
<> <Box bgcolor={isDisabled ? colors.grey[200] : ""}>
<InputLabel shrink={true}>{label}</InputLabel> <InputLabel shrink={true}>{label}</InputLabel>
<Stack direction="row" spacing={1} alignItems="center"> <Stack direction="row" spacing={1} alignItems="center">
<Typography <Typography
@ -107,7 +114,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}> sx={{cursor: value === false || isDisabled ? "inherit" : "pointer"}}>
No No
</Typography> </Typography>
<AntSwitch name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} /> <AntSwitch className={classNullSwitch} name={name} checked={value} onClick={toggleSwitch} disabled={isDisabled} />
<Typography <Typography
fontSize="0.875rem" fontSize="0.875rem"
color={value === true ? "auto" : "#bfbfbf"} color={value === true ? "auto" : "#bfbfbf"}
@ -116,7 +123,7 @@ function BooleanFieldSwitch({name, label, value, isDisabled}: Props) : JSX.Eleme
Yes Yes
</Typography> </Typography>
</Stack> </Stack>
</> </Box>
); );
} }