@etsoo/notificationbase 1.1.25 → 1.1.27

package/README.md

@@ -194,6 +194,17 @@ Methods:
         props?: C
     ): INotification<UI, C>;
 
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(
+        component: NotificationContent<UI>,
+        anchor?: HTMLElement | string | { left: number; top: number }
+    ): INotification<UI, C>;
+
     /**
      * Prompt action
      * @param message Message

package/lib/Notification.d.ts

@@ -21,7 +21,8 @@ export declare enum NotificationModalType {
     Loading = 0,
     Confirm = 1,
     Prompt = 2,
-    Error = 3
+    Error = 3,
+    Popup = 6
 }
 /**
  * Message types
@@ -47,6 +48,7 @@ export declare const NotificationType: {
     Confirm: NotificationModalType.Confirm;
     Prompt: NotificationModalType.Prompt;
     Error: NotificationModalType.Error;
+    Popup: NotificationModalType.Popup;
 };
 /**
  * Notification types
@@ -200,9 +202,10 @@ export interface INotification<UI, C extends NotificationCallProps> extends INot
     /**
      * Dismiss it
      * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
      * @returns Is delayed or not
      */
-    dismiss(delaySeconds?: number): boolean;
+    dismiss(delaySeconds?: number, noTrigger?: boolean): boolean;
     /**
      * Dispose it
      */
@@ -300,9 +303,10 @@ export declare abstract class Notification<UI, C extends NotificationCallProps>
     /**
      * Dismiss it
      * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
      * @returns Is delayed or not
      */
-    dismiss(delaySeconds?: number): boolean;
+    dismiss(delaySeconds?: number, noTrigger?: boolean): boolean;
     private removeTimeout;
     /**
      * Dispose it

package/lib/Notification.js

@@ -21,7 +21,8 @@ export var NotificationModalType;
     NotificationModalType[NotificationModalType["Loading"] = 0] = "Loading";
     NotificationModalType[NotificationModalType["Confirm"] = 1] = "Confirm";
     NotificationModalType[NotificationModalType["Prompt"] = 2] = "Prompt";
-    NotificationModalType[NotificationModalType["Error"] = 3] = "Error"; // Alert
+    NotificationModalType[NotificationModalType["Error"] = 3] = "Error";
+    NotificationModalType[NotificationModalType["Popup"] = 6] = "Popup";
 })(NotificationModalType || (NotificationModalType = {}));
 /**
  * Message types
@@ -88,9 +89,10 @@ export class Notification {
     /**
      * Dismiss it
      * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
      * @returns Is delayed or not
      */
-    dismiss(delaySeconds = 0) {
+    dismiss(delaySeconds = 0, noTrigger = false) {
         // If it's closed, return
         if (!this._open)
             return false;
@@ -101,7 +103,9 @@ export class Notification {
             return true;
         }
         // For message, call onReturn
-        if (this.onReturn != null && this.type in NotificationMessageType) {
+        if (!noTrigger &&
+            this.onReturn != null &&
+            this.type in NotificationMessageType) {
             this.onReturn(undefined);
         }
         // Indicate closed
@@ -136,6 +140,6 @@ export class Notification {
             if (result === false)
                 return;
         }
-        this.dismiss();
+        this.dismiss(0, true);
     }
 }

package/lib/NotificationContainer.d.ts

@@ -88,6 +88,16 @@ export interface INotifier<UI, C extends NotificationCallProps> {
      * @param props Props
      */
     message(type: NotificationMessageType, message: NotificationContent<UI>, title?: NotificationContent<UI>, parameters?: NotificationParameters, props?: C): INotification<UI, C>;
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(component: NotificationContent<UI>, anchor?: HTMLElement | string | {
+        left: number;
+        top: number;
+    }): INotification<UI, C>;
     /**
      * Prompt action
      * @param message Message
@@ -224,6 +234,16 @@ export declare abstract class NotificationContainer<UI, C extends NotificationCa
      * @param title Title
      */
     showLoading(title?: NotificationContent<UI>): void;
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(component: NotificationContent<UI>, anchor?: HTMLElement | string | {
+        left: number;
+        top: number;
+    }): INotification<UI, C>;
     /**
      * Show a success message
      * @param message Message

package/lib/NotificationContainer.js

@@ -259,6 +259,24 @@ export class NotificationContainer {
             this.lastLoading = this.addRaw(n);
         }
     }
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(component, anchor) {
+        // Setup
+        const n = {
+            type: NotificationType.Popup,
+            content: component,
+            renderSetup: (options) => {
+                options.anchor = anchor;
+            }
+        };
+        // Add to the collection
+        return this.addRaw(n);
+    }
     /**
      * Show a success message
      * @param message Message

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/notificationbase",
-    "version": "1.1.25",
+    "version": "1.1.27",
     "description": "TypeScript notification component for extending with all features described and partially implemented",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -45,18 +45,18 @@
     },
     "homepage": "https://github.com/ETSOO/NotificationBase#readme",
     "dependencies": {
-        "@etsoo/shared": "^1.2.5"
+        "@etsoo/shared": "^1.2.10"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.8",
-        "@babel/plugin-transform-runtime": "^7.21.4",
-        "@babel/preset-env": "^7.21.5",
-        "@babel/runtime-corejs3": "^7.21.5",
-        "@types/jest": "^29.5.1",
-        "babel-jest": "^29.5.0",
-        "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "ts-jest": "^29.1.0",
-        "typescript": "^5.0.4"
+        "@babel/core": "^7.22.11",
+        "@babel/plugin-transform-runtime": "^7.22.10",
+        "@babel/preset-env": "^7.22.14",
+        "@babel/runtime-corejs3": "^7.22.11",
+        "@types/jest": "^29.5.4",
+        "babel-jest": "^29.6.4",
+        "jest": "^29.6.4",
+        "jest-environment-jsdom": "^29.6.4",
+        "ts-jest": "^29.1.1",
+        "typescript": "^5.2.2"
     }
 }

package/src/Notification.ts

@@ -27,7 +27,8 @@ export enum NotificationModalType {
     Loading = 0,
     Confirm = 1,
     Prompt = 2,
-    Error = 3 // Alert
+    Error = 3, // Alert
+    Popup = 6
 }
 
 /**
@@ -232,9 +233,10 @@ export interface INotification<UI, C extends NotificationCallProps>
     /**
      * Dismiss it
      * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
      * @returns Is delayed or not
      */
-    dismiss(delaySeconds?: number): boolean;
+    dismiss(delaySeconds?: number, noTrigger?: boolean): boolean;
 
     /**
      * Dispose it
@@ -382,9 +384,10 @@ export abstract class Notification<UI, C extends NotificationCallProps>
     /**
      * Dismiss it
      * @param delaySeconds Delay seconds
+     * @param noTrigger No onReturn trigger
      * @returns Is delayed or not
      */
-    dismiss(delaySeconds: number = 0): boolean {
+    dismiss(delaySeconds: number = 0, noTrigger: boolean = false): boolean {
         // If it's closed, return
         if (!this._open) return false;
 
@@ -399,7 +402,11 @@ export abstract class Notification<UI, C extends NotificationCallProps>
         }
 
         // For message, call onReturn
-        if (this.onReturn != null && this.type in NotificationMessageType) {
+        if (
+            !noTrigger &&
+            this.onReturn != null &&
+            this.type in NotificationMessageType
+        ) {
             this.onReturn(undefined);
         }
 
@@ -449,6 +456,6 @@ export abstract class Notification<UI, C extends NotificationCallProps>
             const result = await this.onReturn(value);
             if (result === false) return;
         }
-        this.dismiss();
+        this.dismiss(0, true);
     }
 }

package/src/NotificationContainer.ts

@@ -133,6 +133,17 @@ export interface INotifier<UI, C extends NotificationCallProps> {
         props?: C
     ): INotification<UI, C>;
 
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(
+        component: NotificationContent<UI>,
+        anchor?: HTMLElement | string | { left: number; top: number }
+    ): INotification<UI, C>;
+
     /**
      * Prompt action
      * @param message Message
@@ -510,6 +521,29 @@ export abstract class NotificationContainer<UI, C extends NotificationCallProps>
         }
     }
 
+    /**
+     * Popup component as modal
+     * @param component Component to popup
+     * @param anchor Position anchor
+     * @returns Result
+     */
+    popup(
+        component: NotificationContent<UI>,
+        anchor?: HTMLElement | string | { left: number; top: number }
+    ) {
+        // Setup
+        const n: INotificaseBase<UI, C> = {
+            type: NotificationType.Popup,
+            content: component,
+            renderSetup: (options) => {
+                options.anchor = anchor;
+            }
+        };
+
+        // Add to the collection
+        return this.addRaw(n);
+    }
+
     /**
      * Show a success message
      * @param message Message