web-base/react/shared/elements/dialog.jsx

70 lines
1.9 KiB
React
Raw Normal View History

import React, {useState} from "react";
import {
Box,
Button,
Dialog as MuiDialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Input, TextField
} from "@mui/material";
2023-01-14 09:51:46 +01:00
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 || [];
2023-01-18 14:37:34 +01:00
const [inputData, setInputData] = useState({});
2023-01-14 09:51:46 +01:00
let buttons = [];
for (const [index, name] of options.entries()) {
2023-01-14 09:51:46 +01:00
buttons.push(
<Button variant={"outlined"} size={"small"} key={"button-" + name}
onClick={() => { onClose(); onOption(index, inputData); }}>
2023-01-14 09:51:46 +01:00
{name}
2023-01-15 00:32:17 +01:00
</Button>
2023-01-14 09:51:46 +01:00
)
}
let inputElements = [];
for (const input of inputs) {
let inputProps = { ...input };
delete inputProps.name;
delete inputProps.type;
switch (input.type) {
case 'text':
inputElements.push(<TextField
{...inputProps}
size={"small"} fullWidth={true}
key={"input-" + input.name}
value={inputData[input.name] || ""}
onChange={e => setInputData({ ...inputData, [input.name]: e.target.value })}
/>)
break;
}
}
2023-01-18 14:37:34 +01:00
return <MuiDialog
2023-01-15 00:32:17 +01:00
open={show}
onClose={onClose}>
<DialogTitle>
{ props.title }
</DialogTitle>
2023-01-18 14:37:34 +01:00
<DialogContent>
<DialogContentText>
{ props.message }
</DialogContentText>
<Box mt={2}>
{ inputElements }
</Box>
2023-01-18 14:37:34 +01:00
</DialogContent>
<DialogActions>
{ buttons }
2023-01-18 14:37:34 +01:00
</DialogActions>
</MuiDialog>
2023-01-14 09:51:46 +01:00
}