WEBAPP: P8PDialog - поддержка настройки ширины (width) и полноразмерности (fullWidth)

app/components/p8p_dialog.js

@@ -13,12 +13,25 @@ import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/
 import { BUTTONS } from "../../app.text"; //Общие текстовые ресурсы
 import { P8P_INPUT, P8PInput } from "./p8p_input"; //Поле ввода
 
+//---------
+//Константы
+//---------
+
+//Типовая ширина диалога
+const P8P_DIALOG_WIDTH = {
+    XS: "xs",
+    SM: "sm",
+    MD: "md",
+    LG: "lg",
+    XL: "xl"
+};
+
 //-----------
 //Тело модуля
 //-----------
 
 //Диалог
-const P8PDialog = ({ title, inputs = [], children, onOk, onCancel, onClose }) => {
+const P8PDialog = ({ title, width, fullWidth, inputs = [], children, onOk, onCancel, onClose }) => {
     //Состояние диалога
     const [state, setState] = useState({});
 
@@ -42,7 +55,7 @@ const P8PDialog = ({ title, inputs = [], children, onOk, onCancel, onClose }) =>
 
     //Формирование представления
     return (
-        <Dialog onClose={handleClose} open>
+        <Dialog onClose={handleClose} open {...{ ...(width ? { maxWidth: width } : {}), ...(fullWidth === true ? { fullWidth: true } : {}) }}>
             <DialogTitle>{title}</DialogTitle>
             <DialogContent>
                 {inputs.map((input, i) => (
@@ -62,6 +75,8 @@ const P8PDialog = ({ title, inputs = [], children, onOk, onCancel, onClose }) =>
 //Контроль свойств - Диалог
 P8PDialog.propTypes = {
     title: PropTypes.string.isRequired,
+    width: PropTypes.oneOf(Object.values(P8P_DIALOG_WIDTH)),
+    fullWidth: PropTypes.bool,
     inputs: PropTypes.arrayOf(PropTypes.shape(P8P_INPUT)),
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
     onOk: PropTypes.func,
@@ -73,4 +88,4 @@ P8PDialog.propTypes = {
 //Интерфейс модуля
 //----------------
 
-export { P8PDialog };
+export { P8PDialog, P8P_DIALOG_WIDTH };