react-dialogger 1.1.84 → 1.1.86

package/README.md

@@ -22,7 +22,7 @@ Perfect for applications with dynamic forms, async workflows, and advanced UI or
 To understand why react-dialogger exists and when to use it,
 see the detailed philosophy document:
 
-👉 [Dialogger Philosophy](docs/philosophy.md)
+👉 [Dialogger Philosophy](https://github.com/appinsource2021/react-dialogger-example/blob/main/docs/philosophy.md)
 
 # react-dialogger - Custom Dialog Component Documentation
 

package/components/DialogActionBase.js

@@ -82,7 +82,7 @@ var DialogActionBase = /** @class */ (function (_super) {
     __extends(DialogActionBase, _super);
     function DialogActionBase(props) {
         if (props === void 0) { props = {}; }
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
         _this._options = {
             label: 'Button label',
@@ -196,13 +196,13 @@ var DialogActionBase = /** @class */ (function (_super) {
         _this._inProcess = props.inProcess;
         var converted = (_b = (_a = props.name) === null || _a === void 0 ? void 0 : _a.replace(/action/i, '')) !== null && _b !== void 0 ? _b : props.name;
         var label = (_g = ((_f = (_e = (_d = (_c = _this.props.dialogBaseComponent) === null || _c === void 0 ? void 0 : _c.dialogOptions) === null || _d === void 0 ? void 0 : _d.localText) === null || _e === void 0 ? void 0 : _e[converted]) !== null && _f !== void 0 ? _f : converted)) !== null && _g !== void 0 ? _g : 'Button';
-        var initialIntents = props.dialogBaseComponent.dialogOptions.base.actions.initialIntents;
+        var initialIntents = ((_l = (_k = (_j = (_h = props.dialogBaseComponent) === null || _h === void 0 ? void 0 : _h.dialogOptions) === null || _j === void 0 ? void 0 : _j.base) === null || _k === void 0 ? void 0 : _k.actions) !== null && _l !== void 0 ? _l : {}).initialIntents;
         var mergedIntents = __assign(__assign({}, exports.BASE_INTENTS), initialIntents);
         _this.state = {
             coords: { x: -1, y: -1 },
             isRippling: false,
             // intent: props.intent,
-            options: __assign(__assign(__assign({}, props.options), mergedIntents[props.intent]), { label: label }),
+            options: __assign(__assign(__assign({}, props.options), mergedIntents[props.intent]), { label: (_m = props.options.label) !== null && _m !== void 0 ? _m : label }),
             inProcess: false
         };
         _this._buttonRef = React.createRef();

package/components/DialogBase.d.ts

@@ -36,7 +36,8 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     private readonly _dialogWithBackDropRef;
     protected readonly _parent: Dialog;
     private _accessFrom;
-    private _processingListeners;
+    private readonly _processingListeners;
+    private readonly _abortedListeners;
     constructor(props?: Readonly<BaseDialogProps>);
     private T;
     private readonly _features;
@@ -70,6 +71,7 @@ declare class DialogBase<Values extends FormikProps<Values>> extends Component<B
     };
     updateBody(body: TDialogCallbackFn): void;
     processingListener(listener: (inProcess: boolean) => void): this;
+    onAbort(callbackFn: TDialogCallbackFn<void>): this;
     getDom: () => HTMLDivElement;
     get snackbar(): {
         open: (message: string, severity: TSeverity, key?: string, action?: IDialogSnackbar["action"], autoHideDuration?: number | null) => void;

package/components/DialogBase.js

@@ -70,7 +70,7 @@ var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
         if (props === void 0) { props = {}; }
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, props) || this;
         // ✨✨✨✨✨✨✨✨✨✨✨
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
@@ -148,13 +148,29 @@ var DialogBase = /** @class */ (function (_super) {
             return _this._inProcess;
         };
         _this.close = function (callbackFn) {
+            var handleAbort = function () {
+                _this.setState(function (prevState) { return (__assign(__assign({}, prevState), { aborted: true })); });
+                setTimeout(function () {
+                    for (var _i = 0, _a = _this._abortedListeners; _i < _a.length; _i++) {
+                        var aborted = _a[_i];
+                        if (typeof aborted === "function") {
+                            aborted(_this);
+                        }
+                    }
+                    _this.close(callbackFn);
+                }, 50);
+            };
             setTimeout(function () {
                 var _a, _b, _c, _d;
-                if (_this._footerRef.current.inProcess) {
+                if (_this._footerRef.current.inProcess && !_this.state.aborted) {
                     var notify = (_a = _this._dialogOptions.base.notifyOnClosing) !== null && _a !== void 0 ? _a : "snackbar";
                     if (notify === "snackbar") {
                         var busyMessage = (_d = (_c = (_b = _this._dialogOptions) === null || _b === void 0 ? void 0 : _b.localText) === null || _c === void 0 ? void 0 : _c.busyMessage) !== null && _d !== void 0 ? _d : 'In Process, Please wait...';
-                        _this.snackbar.open(busyMessage, "warning");
+                        _this.snackbar.open(busyMessage, "warning", null, function (key, snackbarRef) { return (0, jsx_runtime_1.jsx)(_components_1.DialogActionBase, { name: 'force_close', onClick: handleAbort, options: {
+                                label: 'Abort',
+                                variant: 'text',
+                                color: '#361540'
+                            } }); });
                     }
                     else {
                         _this._dialogWithBackDropRef.current.baseZoomEffect();
@@ -191,7 +207,8 @@ var DialogBase = /** @class */ (function (_super) {
         _this.state = {
             inProcess: { inProcess: false },
             prevDialogRect: (0, _helpers_1.dialogRectAuto)(),
-            body: props.body
+            body: props.body,
+            aborted: false
         };
         var defaultOptions = {
             base: {
@@ -237,6 +254,7 @@ var DialogBase = /** @class */ (function (_super) {
         _this._dialogWithBackDropRef = (0, react_1.createRef)();
         _this._parent = props.parent;
         _this._processingListeners = (_a = props.processingListeners) !== null && _a !== void 0 ? _a : [];
+        _this._abortedListeners = (_b = props.abortedListeners) !== null && _b !== void 0 ? _b : [];
         _this._features = [];
         return _this;
     }
@@ -413,6 +431,11 @@ var DialogBase = /** @class */ (function (_super) {
         this._processingListeners.push(listener);
         return this;
     };
+    DialogBase.prototype.onAbort = function (callbackFn) {
+        // @ts-ignore
+        this._abortedListeners.push(callbackFn);
+        return this;
+    };
     Object.defineProperty(DialogBase.prototype, "snackbar", {
         // Reference: https://notistack.com/api-reference#mutual-props
         get: function () {

package/models/Dialog.d.ts

@@ -2,7 +2,8 @@ import * as React from "react";
 import { DialogAction } from "./DialogAction";
 import { TInitialHolder, DialogValues, IDialogSize, TDialogStateListenerCallbackType, DialogOptionsType, IDialogApiDef, TDialogCallbackVoidFn, TDialogCallbackFn } from "../types/index.js";
 declare class Dialog {
-    private _processingListeners;
+    private readonly _processingListeners;
+    private readonly _abortedListeners;
     private _stateListener;
     private _keyboardListener;
     private _resizeListener;
@@ -26,6 +27,7 @@ declare class Dialog {
      * Only from init */
     stateListener(listener: TDialogStateListenerCallbackType): this;
     processingListener(listener: (inProcess: boolean) => void): this;
+    onAbort(callbackFn: TDialogCallbackFn<void>): this;
     initialValues(values: DialogValues): this;
     initialHolder(holder: TInitialHolder): this;
     keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;

package/models/Dialog.js

@@ -54,6 +54,9 @@ var appLogger_1 = require("../helpers/appLogger");
 var Dialog = /** @class */ (function () {
     function Dialog(dialogRef, options) {
         var _this = this;
+        // ✨✨✨✨✨✨✨✨✨✨✨
+        this._processingListeners = [];
+        this._abortedListeners = [];
         this._headerRef = React.createRef();
         this.highestZ = function () {
             var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
@@ -117,7 +120,12 @@ var Dialog = /** @class */ (function () {
     };
     Dialog.prototype.processingListener = function (listener) {
         // @ts-ignore
-        this._processingListeners = listener;
+        this._processingListeners.push(listener);
+        return this;
+    };
+    Dialog.prototype.onAbort = function (callbackFn) {
+        // @ts-ignore
+        this._abortedListeners.push(callbackFn);
         return this;
     };
     Dialog.prototype.initialValues = function (values) {
@@ -151,7 +159,7 @@ var Dialog = /** @class */ (function () {
             // Refs
             headerRef: this._headerRef, 
             // Listeners
-            stateListener: this._stateListener, keyboardListener: this._keyboardListener, resizeListener: this._resizeListener, processingListeners: this._processingListeners, 
+            stateListener: this._stateListener, keyboardListener: this._keyboardListener, resizeListener: this._resizeListener, processingListeners: this._processingListeners, abortedListeners: this._abortedListeners, 
             // Others
             dialogSize: this._dialogSize, initialHolder: this._initialHolder, snackbarAnchor: this._snackbarAnchor, root: root, dom: dom, parent: this }, this._apiRef ? { ref: this._apiRef } : null), { onClose: this._onCloseCallback });
         // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/styles/dialog.css

@@ -210,7 +210,7 @@
   overflow: clip;
 }
 .dialog-main .dialog-header {
-  min-height: 64px;
+  min-height: 3rem;
   padding: 10px 20px 10px 20px;
   display: flex;
   flex: 0;
@@ -276,7 +276,7 @@
   z-index: 2;
 }
 .dialog-main .dialog-footer {
-  min-height: 64px;
+  min-height: 3rem;
   border-top: 0.5px solid rgba(0, 0, 0, 0.2);
   padding: 10px 20px 10px 20px;
   bottom: 0;

package/types/DialogActionTypes.d.ts

@@ -17,7 +17,7 @@ export interface ActionProps {
      * @see options.label */
     label?: string;
     onClick: DialogActionType;
-    dialogBaseComponent: DialogBase<any>;
+    dialogBaseComponent?: DialogBase<any>;
     /**
      * @deprecated
      * @see options.variant */
@@ -43,7 +43,7 @@ export interface ActionProps {
     baseStyle?: CSSProperties;
     fontFamily?: string;
     stateListener?: TDialogStateListenerForActionCallbackType;
-    intent: ActionIntentsType;
+    intent?: ActionIntentsType;
 }
 export interface ActionState {
     isRippling: boolean;

package/types/DialogTypes.d.ts

@@ -17,6 +17,12 @@ export interface BaseDialogState {
     fullscreenMode?: boolean;
     prevDialogRect: WithBackdrop['prevDialogRect'];
     body: TDialogCallbackFn;
+    /**
+     * Indicates whether the operation was aborted by the user or the system.
+     * - true: The dialog or background process (e.g., API request) was aborted.
+     * - false: The operation is continuing or completed normally.
+     */
+    aborted: boolean;
 }
 export interface DialogFormikAdapter<Values> extends Omit<FormikProps<any>, 'values' | 'setValues' | 'setFieldValue' | 'validateForm' | 'errors'> {
     values: Values;
@@ -43,6 +49,7 @@ export interface BaseDialogProps {
     keyboardListener: (key: string, dialog: IDialogApiDef) => void;
     resizeListener?: (size: IDialogSize, dialog: IDialogApiDef) => void;
     processingListeners?: Array<(inProcess: boolean) => void>;
+    abortedListeners?: Array<(dialog: IDialogApiDef) => void>;
 }
 export interface IDialogSize {
     width?: ITypeWidth | number;
@@ -139,7 +146,7 @@ export type TDialogStateListenerCallbackType = (values: FormikProps<any>['values
 export type TDialogCallbackFn<T = React.ReactNode | React.ReactElement> = (dialog: IDialogApiDef) => T;
 export type TDialogHeader = TDialogCallbackFn | React.ReactNode | React.JSX.Element;
 export type TDialogCallbackVoidFn = TDialogCallbackFn<void>;
-export interface IDialogApiDef extends Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'updateBody' | 'processingListener' | 'addFeature' | 'getFeature'> {
+export interface IDialogApiDef extends Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'updateBody' | 'processingListener' | 'addFeature' | 'getFeature' | 'onAbort'> {
 }
 export interface IDialogCloseRef extends Pick<DialogBase<any>, 'close'> {
 }