110 lines
2.3 KiB
JavaScript
110 lines
2.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContentText,
|
|
DialogActions,
|
|
DialogContent,
|
|
FormGroup,
|
|
FormControlLabel,
|
|
} from '@material-ui/core';
|
|
import TextInputList from "../Controls/TextInputList";
|
|
|
|
const TransformModal = ({
|
|
open,
|
|
close,
|
|
title,
|
|
body,
|
|
data,
|
|
setData,
|
|
submit
|
|
}) => {
|
|
const handleClick = () => {
|
|
close();
|
|
submit();
|
|
};
|
|
|
|
const handleChange = (key, value) => {
|
|
setData((data) => {
|
|
const {[key]: toChange, ...rest} = data;
|
|
switch (data[key].type) {
|
|
case "boolean":
|
|
toChange.value = !toChange.value;
|
|
break;
|
|
case "list.string":
|
|
toChange.value = value;
|
|
break;
|
|
default:
|
|
}
|
|
return {
|
|
[key]: toChange,
|
|
...rest
|
|
};
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={close}
|
|
>
|
|
<DialogTitle id="alert-dialog-title">
|
|
{title}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
{body && <DialogContentText>
|
|
{body}
|
|
</DialogContentText>}
|
|
<FormGroup>
|
|
{Object.entries(data).map((([key, value]) => {
|
|
switch (value.type) {
|
|
case "boolean":
|
|
return (
|
|
<FormControlLabel
|
|
key={key}
|
|
label={value.label}
|
|
control={
|
|
<Checkbox
|
|
checked={data[key].value}
|
|
onChange={() => handleChange(key)}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
case "list.string":
|
|
return (
|
|
<TextInputList
|
|
key={key}
|
|
label={value.label}
|
|
onChange={(list) => handleChange(key, list)}
|
|
/>
|
|
)
|
|
default:
|
|
return <></>;
|
|
}
|
|
}))}
|
|
</FormGroup>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
label="Test"
|
|
onClick={close}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="secondary"
|
|
onClick={handleClick}
|
|
autoFocus
|
|
>
|
|
Submit
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export default TransformModal; |