From 91d38a1d158030f5473c727ed01b5c93bb14f7de Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Fri, 20 Oct 2023 10:14:37 -0500
Subject: [PATCH] CE-604 Show null values as a switch that isn't leaning
 towards yes or no;  add bgcolor gray when field is disabled

---
 src/qqq/components/forms/BooleanFieldSwitch.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/qqq/components/forms/BooleanFieldSwitch.tsx b/src/qqq/components/forms/BooleanFieldSwitch.tsx
index b9bf72d..00cbc62 100644
--- a/src/qqq/components/forms/BooleanFieldSwitch.tsx
+++ b/src/qqq/components/forms/BooleanFieldSwitch.tsx
@@ -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>
    );
 }