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

119 lines
3.7 KiB
React
Raw Normal View History

import React, {useEffect, useState} from "react";
import {
Box,
Button,
Dialog as MuiDialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
2024-03-27 16:27:26 +01:00
List, ListItem, TextField
} from "@mui/material";
2023-01-14 09:51:46 +01:00
export default function Dialog(props) {
2024-04-07 14:23:59 +02:00
const show = !!props.show;
2023-01-14 09:51:46 +01:00
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
useEffect(() => {
if (props.inputs) {
let initialData = {};
for (const input of props.inputs) {
2024-04-02 15:33:00 +02:00
if (input.type !== "label" && input.hasOwnProperty("name")) {
2024-03-27 16:27:26 +01:00
initialData[input.name] = input.value || "";
}
}
setInputData(initialData);
}
}, [props.inputs]);
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}
2024-04-07 14:23:59 +02:00
onClick={() => {
let res = onOption(index, inputData);
if (res || res === undefined) {
onClose();
setInputData({});
}
}}>
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) {
2024-03-27 16:27:26 +01:00
case 'label':
2024-03-27 20:50:57 +01:00
delete inputProps.value;
2024-03-27 16:27:26 +01:00
inputElements.push(<span {...inputProps}>{input.value}</span>);
break;
case 'text':
2024-04-07 14:23:59 +02:00
case 'number':
case 'password': {
let onChange = (input.type === "number") ?
e => setInputData({ ...inputData, [input.name]: e.target.value.replace(/[^0-9,.]/, '') }) :
e => setInputData({ ...inputData, [input.name]: e.target.value });
inputElements.push(<TextField
{...inputProps}
2024-04-07 14:23:59 +02:00
type={input.type === "number" ? "text" : input.type}
size={"small"} fullWidth={true}
key={"input-" + input.name}
value={inputData[input.name] || ""}
2024-04-07 14:23:59 +02:00
onChange={onChange}
/>)
2024-04-07 14:23:59 +02:00
} break;
2023-01-22 12:32:18 +01:00
case 'list':
delete inputProps.items;
let listItems = input.items.map((item, index) => <ListItem key={"item-" + index}>{item}</ListItem>);
inputElements.push(<Box
{...inputProps}
sx={{marginTop: 1}}
key={"input-" + input.name}
>
<List>
{listItems}
</List>
</Box>);
2024-04-02 15:33:00 +02:00
break;
case 'custom':
let element = inputProps.element;
delete inputProps.element;
inputElements.push(React.createElement(element, inputProps));
break;
default:
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
}