import React, {useEffect, useState} from "react"; import { Box, Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogContentText, DialogTitle, List, ListItem, TextField } from "@mui/material"; export default function Dialog(props) { const show = props.show; const onClose = props.onClose || function() { }; const onOption = props.onOption || function() { }; const options = props.options || ["Close"]; const inputs = props.inputs || []; const [inputData, setInputData] = useState({}); useEffect(() => { if (props.inputs) { let initialData = {}; for (const input of props.inputs) { if (input.type !== "label") { initialData[input.name] = input.value || ""; } } setInputData(initialData); } }, [props.inputs]); let buttons = []; for (const [index, name] of options.entries()) { buttons.push( ) } let inputElements = []; for (const input of inputs) { let inputProps = { ...input }; delete inputProps.name; delete inputProps.type; switch (input.type) { case 'label': delete inputProps.value; inputElements.push({input.value}); break; case 'text': case 'password': inputElements.push( setInputData({ ...inputData, [input.name]: e.target.value })} />) break; case 'list': delete inputProps.items; let listItems = input.items.map((item, index) => {item}); inputElements.push( {listItems} ); } } return { props.title } { props.message } { inputElements } { buttons } }