#237 - Adding info modal component in total frame component

labhackercd · Dec 16, 2021 · 7ff653c · 7ff653c
1 parent d248abd
commit 7ff653c
Showing 1 changed file with 26 additions and 2 deletions.
diff --git a/src/components/Frames/TotalFrame/index.js b/src/components/Frames/TotalFrame/index.js
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import {
   Grid, Box, Typography,
 } from '@material-ui/core';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import Tooltips from '../../ToolTip/index';
+import InfoModal from '../../InfoModal';
 import { useStyles } from './style';
 
 function TotalsDataFrame(props) {
@@ -16,6 +17,22 @@ function TotalsDataFrame(props) {
     height, children, title, toolTipText, toolTipColor, toolTipAriaLabel, isLast,
   } = props;
 
+  const [open, setOpen] = useState(false);
+  const [mobileView, setMobileView] = useState(false);
+  const handleOpen = () => mobileView && setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  useEffect(() => {
+    const setResponsiveness = () =>
+      window.innerWidth < 1024
+        ? setMobileView(true)
+        : setMobileView(false);
+
+    setResponsiveness();
+
+    window.addEventListener('resize', () => setResponsiveness());
+  }, []);
+
   return (
     <Grid container className={`${isLast ? classes.rootLast : classes.root}`} style={{ height: 'auto', minHeight: '130px' }}>
       <Box className={classes.box}>
@@ -27,7 +44,7 @@ function TotalsDataFrame(props) {
               </Box>
             </Typography>
           </Box>
-          <Box display="flex" alignItems="center">
+          <Box onClick={handleOpen} display="flex" alignItems="center">
             {(toolTipText !== null && toolTipText !== undefined)
               && (
               <Tooltips
@@ -37,6 +54,13 @@ function TotalsDataFrame(props) {
               />
               )}
           </Box>
+          <InfoModal
+            open={open}
+            handleClose={handleClose}
+            title={title}
+            toolTipText={toolTipText}
+            toolTipColor={toolTipColor}
+          />
         </Box>
       </Box>
       <div className={classes.container} style={{ height: 'auto', minHeight: height }}>