Refactored react-tooltips to MUI tooltips #164

stylesuxx · Jan 6, 2022 · 81e2302 · 81e2302
1 parent 40e9162
commit 81e2302
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "react-input-range": "^1.3.0",
     "react-scripts": "4.0.3",
     "react-toastify": "^7.0.3",
-    "react-tooltip": "=4.2.8",
     "scheduler": "0.14.0",
     "sleep": "^6.3.0",
     "web-serial-polyfill": "stylesuxx/web-serial-polyfill#temporary-fix",

diff --git a/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx b/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx
@@ -524,7 +524,7 @@ describe('Esc', () => {
       />
     );
 
-    expect(screen.getByText(/hints:COMMON_MOTOR_DIRECTION/i)).toBeInTheDocument();
+    expect(screen.getByLabelText('hints:COMMON_MOTOR_DIRECTION')).toBeInTheDocument();
     expect(screen.getByText(/escMotorDirection/i)).toBeInTheDocument();
 
     userEvent.click(screen.getByRole(/checkbox/i));

diff --git a/src/Components/Input/Info/index.jsx b/src/Components/Input/Info/index.jsx
@@ -1,9 +1,27 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactTooltip from 'react-tooltip';
+
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 
 import './style.scss';
 
+const BootstrapTooltip = styled(({
+  className,
+  ...props
+}) => (
+  <Tooltip
+    arrow
+    classes={{ popper: className }}
+    title={props.title}
+  >
+    {props.children}
+  </Tooltip>
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: { color: theme.palette.common.black },
+  [`& .${tooltipClasses.tooltip}`]: { backgroundColor: theme.palette.common.black },
+}));
+
 function Info({
   hint,
   inSync,
@@ -16,21 +34,15 @@ function Info({
 
       {hint &&
         <div className="info-wrapper">
-          <span
-            className="info-icon"
-            data-for={`hint-${name}`}
-            data-tip
-          >
-            ?
-          </span>
-
-          <ReactTooltip
-            className="tooltip"
-            effect="solid"
-            id={`hint-${name}`}
-          >
-            {hint}
-          </ReactTooltip>
+          <BootstrapTooltip title={hint}>
+            <span
+              className="info-icon"
+              data-for={`hint-${name}`}
+              data-tip
+            >
+              ?
+            </span>
+          </BootstrapTooltip>
         </div>}
     </span>
   );

diff --git a/src/Components/Input/Info/style.scss b/src/Components/Input/Info/style.scss
@@ -28,8 +28,4 @@
     cursor: pointer;
     z-index: -1;
   }
-
-  .tooltip {
-    max-width: 200px;
-  }
 }
diff --git a/src/Components/Overlay/index.jsx b/src/Components/Overlay/index.jsx
@@ -2,9 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
+
 import CloseIcon from '@mui/icons-material/Close';
 
 function Overlay({

diff --git a/yarn.lock b/yarn.lock
@@ -9864,14 +9864,6 @@ react-toastify@^7.0.3:
   dependencies:
     clsx "^1.1.1"
 
-react-tooltip@=4.2.8:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.8.tgz#270858fee46fab73b66de316271aa94145f7446b"
-  integrity sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==
-  dependencies:
-    prop-types "^15.7.2"
-    uuid "^7.0.3"
-
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -11765,11 +11757,6 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
 uuid@^8.0.0, uuid@^8.3.0:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"