material-ui-popup-state added

Author: pashidlos

package-lock.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "konva": "^4.2.2",
+    "material-ui-popup-state": "^1.6.1",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-debounce-input": "^3.2.2",

package.json

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Button,
+  Popper,
+  Fade,
+  Paper,
+  Typography,
+  Box,
+  makeStyles,
+} from "@material-ui/core";
+import {
+  usePopupState,
+  bindToggle,
+  bindPopper,
+} from "material-ui-popup-state/hooks";
+
+const useStyles = makeStyles((theme) => ({
+  popperContainer: {
+    zIndex: 1400,
+  },
+}));
+
+export const CommentsPopper = () => {
+  const classes = useStyles();
+  const popupState = usePopupState({
+    variant: "popper",
+    popupId: "demoPopper",
+  });
+  return (
+    <React.Fragment>
+      <Button color="primary" {...bindToggle(popupState)}>
+        Comments
+      </Button>
+      <Popper
+        {...bindPopper(popupState)}
+        transition
+        className={classes.popperContainer}
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <Typography>The content of the Popper.</Typography>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+    </React.Fragment>
+  );
+};

src/components/CommentsPopper.tsx

@@ -37,6 +37,7 @@ import useImage from "use-image";
 import { routes } from "../constants";
 import { useTestRunDispatch, updateTestRun, selectTestRun } from "../contexts";
 import { DrawArea } from "./DrawArea";
+import { CommentsPopper } from "./CommentsPopper";
 
 const useStyles = makeStyles((theme) => ({
   imageContainer: {
@@ -202,6 +203,9 @@ const TestDetailsModal: React.FunctionComponent<{
               Baseline history
             </Button>
           </Grid>
+          <Grid item>
+            <CommentsPopper />
+          </Grid>
           <Grid item>
             <Paper variant="outlined">
               <Grid container justify="center">