fix: click away listener for add-node-handle's popper(#433)

codepod-io · Aug 4, 2023 · d452eba · d452eba
1 parent cc917b4
commit d452eba
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 58 deletions.
diff --git a/ui/src/components/nodes/utils.tsx b/ui/src/components/nodes/utils.tsx
@@ -336,6 +336,8 @@ const WrappedHandle = ({ position, children }) => {
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
   };
+  const store = useContext(RepoContext)!;
+  const moved = useStore(store, (state) => state.moved);
   const open = Boolean(anchorEl);
   const handler = React.useCallback((e) => {
     if (e.key === "Escape") {
@@ -351,6 +353,10 @@ const WrappedHandle = ({ position, children }) => {
       document.removeEventListener("keydown", handler);
     };
   }, []);
+  // Remove the popper when the Canvas is moved.
+  React.useEffect(() => {
+    setAnchorEl(null);
+  }, [moved]);
   return (
     <>
       <Handle
@@ -366,9 +372,12 @@ const WrappedHandle = ({ position, children }) => {
             setAnchorEl(null);
           }}
         >
-          <ClickAwayContext.Provider value={() => setAnchorEl(null)}>
-            {children}
-          </ClickAwayContext.Provider>
+          <Box>
+            {/* Must wrap the ClickAwayContext.Provider in this <Box> elem for the click away functionality to work. */}
+            <ClickAwayContext.Provider value={() => setAnchorEl(null)}>
+              {children}
+            </ClickAwayContext.Provider>
+          </Box>
         </ClickAwayListener>
       </Popper>
     </>

diff --git a/ui/src/pages/profile.tsx b/ui/src/pages/profile.tsx
@@ -3,16 +3,9 @@ import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 
 import Paper from "@mui/material/Paper";
-import {
-  Button,
-  ClickAwayListener,
-  Container,
-  Popper,
-  Stack,
-} from "@mui/material";
+import { Container, Stack } from "@mui/material";
 
 import useMe from "../lib/me";
-import React from "react";
 
 export default function Profile() {
   const { loading, me } = useMe();
@@ -41,8 +34,6 @@ export default function Profile() {
                 Name {me.firstname} {me.lastname}
               </Box>
               <Box> Email: {me.email}</Box>
-              <Box>CodePod version 0.4.6</Box>
-              <HandleButton />
             </Stack>
           </Paper>
           <Divider />
@@ -51,48 +42,3 @@ export default function Profile() {
     </Container>
   );
 }
-
-const HandleButton = ({}) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(anchorEl ? null : event.currentTarget);
-  };
-  const open = Boolean(anchorEl);
-
-  const handler = React.useCallback((e) => {
-    console.log("keydown", e.key);
-    if (e.key === "Escape") {
-      setAnchorEl(null);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    document.addEventListener("keydown", handler);
-
-    return () => {
-      document.removeEventListener("keydown", handler);
-    };
-  }, []);
-  return (
-    <>
-      <Button onClick={handleClick}>Hello</Button>
-
-      <Popper open={open} anchorEl={anchorEl} placement={"right"}>
-        <ClickAwayListener
-          onClickAway={() => {
-            console.log("click away!");
-            setAnchorEl(null);
-          }}
-        >
-          <Stack
-            sx={{ border: 1, p: 1, bgcolor: "background.paper" }}
-            spacing={1}
-          >
-            <Button variant="contained">Code</Button>
-            <Button variant="contained">Rich</Button>
-          </Stack>
-        </ClickAwayListener>
-      </Popper>
-    </>
-  );
-};