#92 fix tooltip warning issue

MetaCell · Sep 17, 2024 · 2d8b98f · 2d8b98f
1 parent 0faba79
commit 2d8b98f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 48 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx
@@ -77,7 +77,7 @@ const CustomListItem = ({
     <>
       <FormControlLabel
         control={
-          <Tooltip title={"data.helpText"}>
+          <Tooltip title={data.helpText}>
             <CustomSwitch checked={data.checked} onChange={handleSwitchChange} />
           </Tooltip>
         }

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomSwitch.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomSwitch.tsx
@@ -1,6 +1,7 @@
 import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
 import type React from "react";
+import { forwardRef } from "react";
 import { vars } from "../../theme/variables.ts";
 
 const { white, brand600, gray100 } = vars;
@@ -16,57 +17,60 @@ interface CustomSwitchProps {
   disabled?: boolean;
 }
 
-const CustomSwitch: React.FC<CustomSwitchProps> = ({ width, height, thumbDimension, checkedPosition, checked, onChange, showTooltip, disabled }) => {
-  return (
-    <Tooltip title={showTooltip ? (checked ? "Hide" : "Show") : ""}>
-      <Switch
-        focusVisibleClassName=".Mui-focusVisible"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        sx={(theme) => ({
-          marginRight: ".5rem",
-          width: width ?? 23,
-          height: height ?? 13,
-          padding: 0,
-          "& .MuiSwitch-switchBase": {
+const CustomSwitch = forwardRef<HTMLButtonElement, CustomSwitchProps>(
+  ({ width, height, thumbDimension, checkedPosition, checked, onChange, showTooltip, disabled }, ref) => {
+    return (
+      <Tooltip title={showTooltip ? (checked ? "Hide" : "Show") : ""}>
+        <Switch
+          focusVisibleClassName=".Mui-focusVisible"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          ref={ref}
+          sx={(theme) => ({
+            marginRight: ".5rem",
+            width: width ?? 23,
+            height: height ?? 13,
             padding: 0,
-            margin: "0.0938rem",
-            transitionDuration: "300ms",
-            "&.Mui-checked": {
-              transform: checkedPosition ?? "translateX(0.5775rem)",
-              color: white,
-              "& + .MuiSwitch-track": {
-                backgroundColor: brand600,
-                opacity: 1,
-                border: 0,
+            "& .MuiSwitch-switchBase": {
+              padding: 0,
+              margin: "0.0938rem",
+              transitionDuration: "300ms",
+              "&.Mui-checked": {
+                transform: checkedPosition ?? "translateX(0.5775rem)",
+                color: white,
+                "& + .MuiSwitch-track": {
+                  backgroundColor: brand600,
+                  opacity: 1,
+                  border: 0,
+                },
+                "&.Mui-disabled + .MuiSwitch-track": {
+                  opacity: 0.5,
+                },
               },
-              "&.Mui-disabled + .MuiSwitch-track": {
-                opacity: 0.5,
+              "&.Mui-disabled .MuiSwitch-thumb": {
+                color: gray100,
               },
             },
-            "&.Mui-disabled .MuiSwitch-thumb": {
-              color: gray100,
+            "& .MuiSwitch-thumb": {
+              boxSizing: "border-box",
+              width: thumbDimension ?? 10.24,
+              height: thumbDimension ?? 10.24,
+              boxShadow: "none",
             },
-          },
-          "& .MuiSwitch-thumb": {
-            boxSizing: "border-box",
-            width: thumbDimension ?? 10.24,
-            height: thumbDimension ?? 10.24,
-            boxShadow: "none",
-          },
-          "& .MuiSwitch-track": {
-            borderRadius: 26 / 2,
-            backgroundColor: gray100,
-            opacity: 1,
-            transition: theme.transitions.create(["background-color"], {
-              duration: 500,
-            }),
-          },
-        })}
-      />
-    </Tooltip>
-  );
-};
+            "& .MuiSwitch-track": {
+              borderRadius: 26 / 2,
+              backgroundColor: gray100,
+              opacity: 1,
+              transition: theme.transitions.create(["background-color"], {
+                duration: 500,
+              }),
+            },
+          })}
+        />
+      </Tooltip>
+    );
+  },
+);
 
 export default CustomSwitch;