Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 14x 14x 14x 14x 1x 1x 14x 1x 1x 14x 2x 2x 2x 14x 4x 3x | /* eslint-disable react/prop-types */
import * as React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import { Box, TextField, Typography } from "@mui/material";
import { useState } from "react";
export default function ChangeName({ showDialog, setShowDialog }) {
const [firstName, setFirstName] = useState("");
const [middleName, setMiddleName] = useState("");
const [lastName, setLastName] = useState("");
const clickCancel = () => {
resetAllFields();
setShowDialog(false);
};
const clickSave = () => {
resetAllFields();
setShowDialog(false);
};
const resetAllFields = () => {
setFirstName("");
setMiddleName("");
setLastName("");
};
return (
<React.Fragment>
<Dialog
open={showDialog}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
fullWidth
>
<DialogTitle
id="alert-dialog-title"
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography variant="body1">Edit Name</Typography>
</DialogTitle>
<DialogContent dividers>
<Box sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<TextField
value={firstName}
onChange={(e) => {
setFirstName(e.target.value);
}}
label="First name"
variant="outlined"
fullWidth
required
/>
<TextField
value={middleName}
onChange={(e) => {
setMiddleName(e.target.value);
}}
label="Middle name"
variant="outlined"
fullWidth
/>
<TextField
value={lastName}
onChange={(e) => {
setLastName(e.target.value);
}}
label="Last name"
variant="outlined"
fullWidth
required
/>
</Box>
</DialogContent>
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
<Button sx={{ width: "150px" }} variant="contained" color="inherit" onClick={clickCancel}>
Cancel
</Button>
<Button
disabled={firstName === "" || lastName === ""}
sx={{ width: "150px" }}
variant="contained"
color="primary"
onClick={clickSave}
>
Save
</Button>
</DialogActions>
</Dialog>
</React.Fragment>
);
}
|