refactor menu component

david-yz-liu · Aug 15, 2024 · 2bcdce0 · 2bcdce0
1 parent 5ab0898
commit 2bcdce0
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 97 deletions.
diff --git a/demo/src/MemoryModelsMenu.tsx b/demo/src/MemoryModelsMenu.tsx
@@ -0,0 +1,42 @@
+import React, { ReactNode, useState } from "react";
+import { Box, Button, Menu } from "@mui/material";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+
+type MemoryModelsMenuPropTypes = {
+    menuName: string;
+    testId: string;
+    menuItems: ReactNode;
+};
+
+export default function MemoryModelsMenu(props: MemoryModelsMenuPropTypes) {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Button
+                onClick={handleClick}
+                data-testid={props.testId}
+                sx={{
+                    textTransform: "none",
+                    "& .MuiSvgIcon-root": {
+                        transition: "transform 0.2s ease-in-out",
+                        transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                    },
+                }}
+            >
+                {props.menuName}
+                <ExpandMoreRoundedIcon />
+            </Button>
+            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+                <Box>{props.menuItems}</Box>
+            </Menu>
+        </>
+    );
+}
diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { Button, Menu, MenuItem } from "@mui/material";
-import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import { Box, MenuItem } from "@mui/material";
+import MemoryModelsMenu from "./MemoryModelsMenu";
 
 import { SAMPLES } from "./sample";
 
@@ -12,14 +12,6 @@ type MemoryModelsSamplePropTypes = {
 
 export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
     const [clickedBtnIndex, setClickedBtnIndex] = useState<Number>(null);
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
 
     useEffect(() => {
         if (clickedBtnIndex !== null) {
@@ -40,31 +32,17 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
     };
 
     return (
-        <>
-            <Button
-                onClick={handleClick}
-                data-testid="sample-inputs-menu"
-                sx={{
-                    textTransform: "none",
-                    "& .MuiSvgIcon-root": {
-                        transition: "transform 0.2s ease-in-out",
-                        transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                    },
-                }}
-            >
-                Sample Inputs
-                <ExpandMoreRoundedIcon />
-            </Button>
-            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-                {SAMPLES.map((sample, index) => (
-                    <MenuItem
-                        key={index}
-                        onClick={() => handleButtonClick(index, sample)}
-                    >
-                        {sample["name"]}
-                    </MenuItem>
-                ))}
-            </Menu>
-        </>
+        <MemoryModelsMenu
+            menuName="Sample Inputs"
+            testId="sample-inputs-menu"
+            menuItems={SAMPLES.map((sample, index) => (
+                <MenuItem
+                    key={index}
+                    onClick={() => handleButtonClick(index, sample)}
+                >
+                    {sample["name"]}
+                </MenuItem>
+            ))}
+        />
     );
 }
diff --git a/demo/src/MemoryModelsUserInput.tsx b/demo/src/MemoryModelsUserInput.tsx
@@ -7,11 +7,10 @@ import {
     Input,
     TextField,
     Tooltip,
-    Menu,
     MenuItem,
 } from "@mui/material";
-import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import DownloadJSONButton from "./DownloadJSONButton";
+import MemoryModelsMenu from "./MemoryModelsMenu";
 
 interface configDataPropTypes {
     useAutomation: boolean;
@@ -119,14 +118,6 @@ function MemoryModelsTextInput(props: MemoryModelsTextInputPropTypes) {
 
 //TODO: Retrieve min and max seeds from memory-viz
 function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) {
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const open = Boolean(anchorEl);
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
     const handleSeedChange = (event) => {
         event.preventDefault();
         props.setConfigData({
@@ -149,57 +140,47 @@ function MemoryModelsConfigInput(props: MemoryModelsConfigInputPropTypes) {
     };
 
     return (
-        <>
-            <Button
-                onClick={handleClick}
-                data-testid="rendering-options-menu"
-                sx={{
-                    textTransform: "none",
-                    "& .MuiSvgIcon-root": {
-                        transition: "transform 0.2s ease-in-out",
-                        transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                    },
-                }}
-            >
-                Rendering Options
-                <ExpandMoreRoundedIcon />
-            </Button>
-            <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-                <MenuItem>
-                    <TextField
-                        label="Seed"
-                        id="config-seed"
-                        variant="outlined"
-                        value={props.configData.overallDrawConfig.seed}
-                        type="number"
-                        onChange={handleSeedChange}
-                        InputProps={{
-                            inputProps: {
-                                min: 0,
-                                max: 2 ** 31,
-                                "data-testid": "config-seed",
-                            },
-                        }}
-                        sx={{
-                            width: "50%",
-                            "& .MuiInputBase-input": { height: "10%" },
-                        }}
-                    />
-                </MenuItem>
-                <MenuItem>
-                    <FormControlLabel
-                        control={
-                            <Checkbox
-                                checked={props.configData.useAutomation}
-                                onChange={handleAutomationChange}
-                            />
-                        }
-                        label="Use automatic layout"
-                        sx={{ width: "50%" }}
-                    />
-                </MenuItem>
-            </Menu>
-        </>
+        <MemoryModelsMenu
+            menuName="Rendering Options"
+            testId="rendering-options-menu"
+            menuItems={
+                <>
+                    <MenuItem>
+                        <TextField
+                            label="Seed"
+                            id="config-seed"
+                            variant="outlined"
+                            value={props.configData.overallDrawConfig.seed}
+                            type="number"
+                            onChange={handleSeedChange}
+                            InputProps={{
+                                inputProps: {
+                                    min: 0,
+                                    max: 2 ** 31,
+                                    "data-testid": "config-seed",
+                                },
+                            }}
+                            sx={{
+                                width: "50%",
+                                "& .MuiInputBase-input": { height: "10%" },
+                            }}
+                        />
+                    </MenuItem>
+                    <MenuItem>
+                        <FormControlLabel
+                            control={
+                                <Checkbox
+                                    checked={props.configData.useAutomation}
+                                    onChange={handleAutomationChange}
+                                />
+                            }
+                            label="Use automatic layout"
+                            sx={{ width: "50%" }}
+                        />
+                    </MenuItem>
+                </>
+            }
+        />
     );
 }
 

diff --git a/demo/src/index.d.ts → demo/src/declarations.d.ts b/demo/src/index.d.ts → demo/src/declarations.d.ts