@etsoo/react 1.2.16 → 1.2.17

package/lib/mu/DialogButton.d.ts

@@ -1,6 +1,10 @@
 import { Breakpoint, ButtonProps } from '@mui/material';
 import React from 'react';
 export interface DialogButtonProps extends ButtonProps {
+    /**
+     * Button label
+     */
+    buttonLabel?: string;
     /**
      * Dialog content
      */
@@ -22,6 +26,17 @@ export interface DialogButtonProps extends ButtonProps {
      * Show fullscreen dialog
      */
     fullScreen?: boolean;
+    /**
+     * If `true`, the dialog stretches to `maxWidth`.
+     *
+     * Notice that the dialog width grow is limited by the default margin.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Other layouts
+     */
+    inputs?: React.ReactNode;
     /**
      * Max width of the dialog
      */

package/lib/mu/DialogButton.js

@@ -1,21 +1,21 @@
-import { Button, Dialog, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
 import React from 'react';
+import { Labels } from '../app/Labels';
 /**
  * Dialog button
  * @param props Props
  * @returns Component
  */
 export function DialogButton(props) {
+    // Labels shared with NotificationMU
+    const labels = Labels.NotificationMU;
     // Destruct
-    const { children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, icon, maxWidth, onClick, ...rest } = props;
+    const { buttonLabel = labels.alertOK, children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, fullWidth, icon, inputs, maxWidth, onClick, ...rest } = props;
     // Open state
     const [open, setOpen] = React.useState(false);
     const handleClickOpen = () => {
         setOpen(true);
     };
-    const handleClose = () => {
-        setOpen(false);
-    };
     // Onclick handler
     const onClickLocal = (event) => {
         // Stop propagation
@@ -30,8 +30,15 @@ export function DialogButton(props) {
     // Layout
     return (React.createElement(React.Fragment, null,
         icon == null ? (React.createElement(Button, { ...rest, onClick: onClickLocal }, children)) : (React.createElement(IconButton, { ...rest, onClick: onClickLocal, title: children === null || children === void 0 ? void 0 : children.toString() }, icon)),
-        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, maxWidth: maxWidth, open: open, onClose: handleClose },
+        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+                // The dialog will be embeded and the click event will bubble up
+                // Stop propatation but will also cancel onClose and onBackdropClick event
+                event.stopPropagation();
+            } },
             React.createElement(DialogTitle, null, dialogTitle ? dialogTitle : children),
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content)))));
+                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content),
+                inputs),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: () => setOpen(false) }, buttonLabel)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.16",
+    "version": "1.2.17",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/DialogButton.tsx

@@ -3,14 +3,21 @@ import {
     Button,
     ButtonProps,
     Dialog,
+    DialogActions,
     DialogContent,
     DialogContentText,
     DialogTitle,
     IconButton
 } from '@mui/material';
 import React from 'react';
+import { Labels } from '../app/Labels';
 
 export interface DialogButtonProps extends ButtonProps {
+    /**
+     * Button label
+     */
+    buttonLabel?: string;
+
     /**
      * Dialog content
      */
@@ -37,6 +44,19 @@ export interface DialogButtonProps extends ButtonProps {
      */
     fullScreen?: boolean;
 
+    /**
+     * If `true`, the dialog stretches to `maxWidth`.
+     *
+     * Notice that the dialog width grow is limited by the default margin.
+     * @default false
+     */
+    fullWidth?: boolean;
+
+    /**
+     * Other layouts
+     */
+    inputs?: React.ReactNode;
+
     /**
      * Max width of the dialog
      */
@@ -54,15 +74,21 @@ export interface DialogButtonProps extends ButtonProps {
  * @returns Component
  */
 export function DialogButton(props: DialogButtonProps) {
+    // Labels shared with NotificationMU
+    const labels = Labels.NotificationMU;
+
     // Destruct
     const {
+        buttonLabel = labels.alertOK,
         children,
         content,
         contentPre,
         dialogTitle,
         disableScrollLock,
         fullScreen,
+        fullWidth,
         icon,
+        inputs,
         maxWidth,
         onClick,
         ...rest
@@ -75,10 +101,6 @@ export function DialogButton(props: DialogButtonProps) {
         setOpen(true);
     };
 
-    const handleClose = () => {
-        setOpen(false);
-    };
-
     // Onclick handler
     const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
         // Stop propagation
@@ -112,9 +134,15 @@ export function DialogButton(props: DialogButtonProps) {
             <Dialog
                 disableScrollLock={disableScrollLock}
                 fullScreen={fullScreen}
+                fullWidth={fullWidth}
                 maxWidth={maxWidth}
                 open={open}
-                onClose={handleClose}
+                onClose={() => setOpen(false)}
+                onClick={(event) => {
+                    // The dialog will be embeded and the click event will bubble up
+                    // Stop propatation but will also cancel onClose and onBackdropClick event
+                    event.stopPropagation();
+                }}
             >
                 <DialogTitle>
                     {dialogTitle ? dialogTitle : children}
@@ -123,7 +151,13 @@ export function DialogButton(props: DialogButtonProps) {
                     <DialogContentText component={contentPre ? 'pre' : 'span'}>
                         {content}
                     </DialogContentText>
+                    {inputs}
                 </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpen(false)}>
+                        {buttonLabel}
+                    </Button>
+                </DialogActions>
             </Dialog>
         </React.Fragment>
     );