improve mobile experience

commaai · Oct 4, 2022 · 86cdeda · 86cdeda
1 parent dc850d6
commit 86cdeda
Showing 1 changed file with 36 additions and 21 deletions.
diff --git a/src/components/utils/InfoTooltip.js b/src/components/utils/InfoTooltip.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Tooltip, Typography, withStyles } from '@material-ui/core';
+import { ClickAwayListener, Tooltip, Typography, withStyles } from '@material-ui/core';
 import InfoIcon from '@material-ui/icons/InfoOutline';
 
 const styles = (theme) => ({
@@ -68,13 +68,15 @@ const styles = (theme) => ({
     marginBottom: 8,
   },
   icon: {
+    marginLeft: theme.spacing.unit,
     fontSize: 18,
   },
 });
 
 class InfoTooltip extends Component {
   state = {
     arrowRef: null,
+    open: false,
   };
 
   handleArrowRef = node => {
@@ -83,6 +85,14 @@ class InfoTooltip extends Component {
     });
   };
 
+  handleTooltipOpen = () => {
+    this.setState({ open: true });
+  }
+
+  handleTooltipClose = () => {
+    this.setState({ open: false });
+  }
+
   render() {
     const {
       classes,
@@ -91,28 +101,33 @@ class InfoTooltip extends Component {
     } = this.props;
 
     return (
-      <Tooltip
-        title={
-          <React.Fragment>
-            <Typography color="inherit">{ title }</Typography>
-            <span className={classes.arrowArrow} ref={this.handleArrowRef} />
-          </React.Fragment>
-        }
-        classes={{ tooltip: classes.tooltip, popper: classes.arrowPopper }}
-        placement={placement}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(this.state.arrowRef),
-                element: this.state.arrowRef,
+      <ClickAwayListener onClickAway={this.handleTooltipClose}>
+        <Tooltip
+          PopperProps={{
+            popperOptions: {
+              modifiers: {
+                arrow: {
+                  enabled: Boolean(this.state.arrowRef),
+                  element: this.state.arrowRef,
+                },
               },
             },
-          },
-        }}
-      >
-        <InfoIcon className={classes.icon} />
-      </Tooltip>
+          }}
+          title={
+            <React.Fragment>
+              <Typography color="inherit">{ title }</Typography>
+              <span className={classes.arrowArrow} ref={this.handleArrowRef} />
+            </React.Fragment>
+          }
+          onOpen={this.handleTooltipOpen}
+          onClose={this.handleTooltipClose}
+          open={this.state.open}
+          classes={{ tooltip: classes.tooltip, popper: classes.arrowPopper }}
+          placement={placement}
+        >
+          <InfoIcon className={classes.icon} onClick={this.handleTooltipOpen} />
+        </Tooltip>
+      </ClickAwayListener>
     );
   }
 }