@etsoo/react 1.5.48 → 1.5.51

package/__tests__/mu/NotifierMUTests.tsx

@@ -78,6 +78,33 @@ test('Confirm tests', async () => {
     jest.runOnlyPendingTimers();
 });
 
+test('Confirm tests without cancel button', async () => {
+    // Click
+    const handleClick = jest.fn();
+
+    act(() => {
+        // Add the notification
+        notifier.confirm('Confirm message', undefined, handleClick, {
+            cancelButton: false
+        });
+    });
+
+    // Button
+    const button = root.getElementsByTagName('button');
+
+    expect(button.length).toBe(1);
+    expect(button[0].innerHTML).toContain('OK');
+
+    await act(async () => {
+        button[0].click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    // Fast forward
+    jest.runOnlyPendingTimers();
+});
+
 test('Prompt tests', async () => {
     // Click
     const handleClick = jest.fn((result: boolean) => {
@@ -107,6 +134,33 @@ test('Prompt tests', async () => {
     jest.runOnlyPendingTimers();
 });
 
+test('Prompt tests with form submit', async () => {
+    // Click
+    const handleClick = jest.fn((result: boolean) => {
+        expect(result).toBeTruthy();
+    });
+
+    act(() => {
+        // Add the notification
+        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
+            type: 'switch',
+            required: false
+        });
+    });
+
+    await act(async () => {
+        (
+            root
+                .getElementsByTagName('form')[0]
+                .elements.namedItem('okButton') as HTMLButtonElement
+        )?.click();
+    });
+
+    expect(handleClick).toBeCalled();
+
+    jest.runOnlyPendingTimers();
+});
+
 test('Message tests', (done) => {
     // Callback
     const callback = jest.fn(() => done());

package/lib/mu/NotifierMU.js

@@ -77,7 +77,7 @@ export class NotificationMU extends NotificationReact {
         var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
-        const { okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const { okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
@@ -86,7 +86,7 @@ export class NotificationMU extends NotificationReact {
                 React.createElement(DialogContentText, null, this.content),
                 inputs),
             React.createElement(DialogActions, null,
-                React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, cancelLabel),
+                cancelButton && (React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, cancelLabel)),
                 React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(true), autoFocus: true, ...primaryButton }, okLabel))));
     }
     createMessageColor() {
@@ -119,7 +119,7 @@ export class NotificationMU extends NotificationReact {
         var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
-        const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, type, fullScreen, fullWidth = true, maxWidth, primaryButton, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         const inputRef = React.createRef();
         const errorRef = React.createRef();
         const setError = (error) => {
@@ -200,7 +200,10 @@ export class NotificationMU extends NotificationReact {
             localInputs = inputs;
         }
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
-            React.createElement("form", null,
+            React.createElement("form", { onSubmit: (event) => {
+                    var _a;
+                    return (_a = event.currentTarget.elements.namedItem('okButton')) === null || _a === void 0 ? void 0 : _a.click();
+                } },
                 React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                     React.createElement(Info, { color: "primary" }),
                     React.createElement("span", { className: "dialogTitle" }, title)),
@@ -209,12 +212,12 @@ export class NotificationMU extends NotificationReact {
                     localInputs,
                     React.createElement(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })),
                 React.createElement(DialogActions, null,
-                    React.createElement(Button, { color: "secondary", onClick: () => {
+                    cancelButton && (React.createElement(Button, { color: "secondary", onClick: () => {
                             if (this.onReturn)
                                 this.onReturn(undefined);
                             this.dismiss();
-                        } }, cancelLabel),
-                    React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, ...primaryButton }, okLabel)))));
+                        } }, cancelLabel)),
+                    React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))));
     }
     // Create loading
     createLoading(_props, className) {

package/lib/notifier/Notifier.d.ts

@@ -27,6 +27,10 @@ export interface NotificationReactCallProps extends NotificationCallProps {
      * OK label
      */
     okLabel?: string;
+    /**
+     * false to hide cancel button
+     */
+    cancelButton?: boolean;
     /**
      * Cancel label
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.48",
+    "version": "1.5.51",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.9.3",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.9.3",
-        "@etsoo/appscript": "^1.2.62",
+        "@etsoo/appscript": "^1.2.63",
         "@etsoo/notificationbase": "^1.1.4",
         "@etsoo/shared": "^1.1.40",
         "@mui/icons-material": "^5.8.4",
-        "@mui/material": "^5.9.1",
+        "@mui/material": "^5.9.2",
         "@types/pica": "^9.0.1",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/react": "^18.0.15",
@@ -82,8 +82,8 @@
         "@babel/runtime-corejs3": "^7.18.9",
         "@types/jest": "^28.1.6",
         "@types/react-test-renderer": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.30.7",
-        "@typescript-eslint/parser": "^5.30.7",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
         "eslint": "^8.20.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/mu/NotifierMU.tsx

@@ -144,6 +144,7 @@ export class NotificationMU extends NotificationReact {
         const {
             okLabel = labels.confirmYes,
             cancelLabel = labels.confirmNo,
+            cancelButton = true,
             inputs,
             fullScreen,
             fullWidth = true,
@@ -170,12 +171,14 @@ export class NotificationMU extends NotificationReact {
                     {inputs}
                 </DialogContent>
                 <DialogActions>
-                    <LoadingButton
-                        color="secondary"
-                        onClick={async () => await this.returnValue(false)}
-                    >
-                        {cancelLabel}
-                    </LoadingButton>
+                    {cancelButton && (
+                        <LoadingButton
+                            color="secondary"
+                            onClick={async () => await this.returnValue(false)}
+                        >
+                            {cancelLabel}
+                        </LoadingButton>
+                    )}
                     <LoadingButton
                         color="primary"
                         onClick={async () => await this.returnValue(true)}
@@ -230,6 +233,7 @@ export class NotificationMU extends NotificationReact {
         const {
             cancelLabel = labels.promptCancel,
             okLabel = labels.promptOK,
+            cancelButton = true,
             inputs,
             type,
             fullScreen,
@@ -354,7 +358,15 @@ export class NotificationMU extends NotificationReact {
                 maxWidth={maxWidth}
                 fullScreen={fullScreen}
             >
-                <form>
+                <form
+                    onSubmit={(event) =>
+                        (
+                            event.currentTarget.elements.namedItem(
+                                'okButton'
+                            ) as HTMLButtonElement
+                        )?.click()
+                    }
+                >
                     <IconDialogTitle className="draggable-dialog-title">
                         <Info color="primary" />
                         <span className="dialogTitle">{title}</span>
@@ -370,19 +382,22 @@ export class NotificationMU extends NotificationReact {
                         />
                     </DialogContent>
                     <DialogActions>
-                        <Button
-                            color="secondary"
-                            onClick={() => {
-                                if (this.onReturn) this.onReturn(undefined);
-                                this.dismiss();
-                            }}
-                        >
-                            {cancelLabel}
-                        </Button>
+                        {cancelButton && (
+                            <Button
+                                color="secondary"
+                                onClick={() => {
+                                    if (this.onReturn) this.onReturn(undefined);
+                                    this.dismiss();
+                                }}
+                            >
+                                {cancelLabel}
+                            </Button>
+                        )}
                         <LoadingButton
                             color="primary"
                             autoFocus
                             onClick={handleSubmit}
+                            name="okButton"
                             {...primaryButton}
                         >
                             {okLabel}

package/src/notifier/Notifier.ts

@@ -44,6 +44,11 @@ export interface NotificationReactCallProps extends NotificationCallProps {
      */
     okLabel?: string;
 
+    /**
+     * false to hide cancel button
+     */
+    cancelButton?: boolean;
+
     /**
      * Cancel label
      */