148 lines
3.1 KiB
TypeScript
148 lines
3.1 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
CircularProgress,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
TextField,
|
|
} from "@mui/material";
|
|
|
|
export function TextInputDialog(p: {
|
|
/**
|
|
* Minimum amount of text that must be entered before the text can be validated
|
|
*/
|
|
minLen?: number;
|
|
|
|
/**
|
|
* Max len of text than can be entered
|
|
*/
|
|
maxLen?: number;
|
|
|
|
/**
|
|
* The title of the dialog
|
|
*/
|
|
title?: string;
|
|
|
|
/**
|
|
* The message shown above the input dialog
|
|
*/
|
|
text: string;
|
|
|
|
/**
|
|
* The label of the text field
|
|
*/
|
|
label: string;
|
|
|
|
/**
|
|
* The current value in the dialog
|
|
*/
|
|
value: string;
|
|
|
|
/**
|
|
* The type of value
|
|
*/
|
|
type?: React.HTMLInputTypeAttribute;
|
|
|
|
/**
|
|
* Function called when the value entered by the user is changed
|
|
*/
|
|
onValueChange: (v: string) => void;
|
|
|
|
/**
|
|
* Specify whether the value is being checked
|
|
*/
|
|
isChecking?: boolean;
|
|
|
|
/**
|
|
* The message shown while the value is checked
|
|
*/
|
|
checkingMessage?: string;
|
|
|
|
/**
|
|
* The text of the submit button
|
|
*/
|
|
submitButton?: string;
|
|
|
|
/**
|
|
* Callback function called when the user click on the submit button
|
|
*/
|
|
onSubmit: (value: string) => void;
|
|
|
|
/**
|
|
* Callback function called when the user click on the submit button
|
|
*/
|
|
onCancel: () => void;
|
|
|
|
/**
|
|
* Specify whether the dialog should be open or not
|
|
*/
|
|
open: boolean;
|
|
|
|
/**
|
|
* Callback function called when the user click outside the dialog
|
|
*/
|
|
onClose: () => void;
|
|
|
|
/**
|
|
* Error message to show on the input text
|
|
*/
|
|
error?: string;
|
|
|
|
/**
|
|
* If set to true (the default), when an error is set, the submit button will be disabled
|
|
*/
|
|
errorIsBlocking?: boolean;
|
|
}): React.ReactElement {
|
|
const canSubmit =
|
|
p.value.length >= (p.minLen ?? 0) &&
|
|
(p.errorIsBlocking === false || p.error === undefined);
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
if (!canSubmit) return;
|
|
|
|
p.onSubmit(p.value);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={p.open} onClose={p.onClose}>
|
|
<Box component="form" noValidate onSubmit={handleSubmit}>
|
|
{p.title && <DialogTitle>{p.title}</DialogTitle>}
|
|
<DialogContent>
|
|
<DialogContentText>{p.text}</DialogContentText>
|
|
<TextField
|
|
disabled={p.isChecking}
|
|
autoFocus
|
|
margin="dense"
|
|
label={p.label}
|
|
type={p.type ?? "text"}
|
|
fullWidth
|
|
variant="standard"
|
|
value={p.value}
|
|
onChange={(e) => p.onValueChange(e.target.value)}
|
|
inputProps={{ maxLength: p.maxLen ?? 255 }}
|
|
error={p.error !== undefined}
|
|
helperText={p.error}
|
|
/>
|
|
|
|
{p.isChecking && (
|
|
<span>
|
|
<CircularProgress size={15} />{" "}
|
|
{p.checkingMessage ?? "Contrôle en cours..."}
|
|
</span>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={p.onClose}>Annuler</Button>
|
|
<Button disabled={!canSubmit} type="submit">
|
|
{p.submitButton ?? "Valider"}
|
|
</Button>
|
|
</DialogActions>
|
|
</Box>
|
|
</Dialog>
|
|
);
|
|
}
|