NotificationBase

TypeScript notification component for extending with all features described and partially implemented.

Installing

Using npm:

$ npm install @etsoo/notificationbase

Using yarn:

$ yarn add @etsoo/notificationbase

Notification

Notification object to display. INotification is the interface. INotificationBase is for data definition.

Properties:

| Name | Description | | ----------: | -------------------------------------- | | align | Readonly, display align | | content | Content to display | | id | Unique id | | inputProps | Input or additional control properties | | modal | Display as modal window or not | | onDismiss | Dismiss callback | | onReturn | Return value callback | | open | Is open or not | | ref | Render result reference | | renderSetup | Setup callback before render | | showIcon | Show icon or not | | timespan | Seconds to auto dismiss | | title | Title | | type | Notification type |

Methods:

    /**
     * Constructor
     * @param type Type
     * @param content Content
     * @param title Title
     * @param align Align
     */
    constructor(
        type: NotificationType,
        content: NotificationContent<UI>,
        title?: NotificationContent<UI>,
        align?: NotificationAlign
    )

    /**
     * Dismiss it
     * @param delaySeconds Delay seconds
     * @returns Is delayed or not
     */
    dismiss(delaySeconds: number = 0): boolean

    /**
     * Dispose it
     */
    dispose()

    /**
     * Render method
     * @param props Props
     * @param className Style class name
     * @param options Other options
     */
    render(
        props: NotificationRenderProps,
        className?: string,
        options?: any
    ): UI | undefined;

    /**
     * Return value
     * Dismiss first, then run callback
     * @param value
     * @returns
     */
    returnValue(value: any): Promise<void>;

NotificationContainer

NotificationContainer is to hold all notifications. INotificationContainer is the interface.

Properties:

| Name | Description | | ------------: | -------------------------------------------- | | notifications | Readonly. Notification collection to display | | isLoading | Is loading bar showing | | isModeling | Is model window showing |

Methods:

    /**
     * Add notification
     * @param notification Notification
     * @param top Is insert top
     */
    add(notification: INotification<UI, C>, top?: boolean): void;

    /**
     * Report error or message
     * @param errorOrTitle Error message or title
     * @param callback Callback
     * @param type Type, default is Error
     * @param props Props
     */
    alert(
        error: NotificationContent<UI> | [NotificationContent<UI>, NotificationContent<UI>],
        callback?: NotificationReturn<void>,
        type?: NotificationMessageType,
        props?: C
    ): INotification<UI, C>;

    /**
     * Align all notification count
     * @param align Align
     */
    alignCount(align: NotificationAlign): number;

    /**
     * Align open notification count
     * @param align Align
     */
    alignOpenCount(align: NotificationAlign): number;

    /**
     * Remove all closed notification
     */
    clear(): void;

    /**
     * Confirm action
     * @param message Message
     * @param title Title
     * @param callback Callback
     * @param props Props
     */
    confirm(
        message: NotificationContent<UI>,
        title?: NotificationContent<UI>,
        callback?: NotificationReturn<boolean>,
        props?: C
    ): INotification<UI, C>;

    /**
     * Dispose all notifications
     */
    dispose(): void;

    /**
     * Get notification with align and id
     * @param align Align
     * @param id Notification id
     */
    get(align: NotificationAlign, id: string): INotification<UI, C> | undefined;

    /**
     * Get notification with id
     * @param id Notification id
     */
    getById(id: string): INotification<UI, C> | undefined;

    /**
     * Hide loading
     * @param force Force to hide, otherwise, only the last one
     */
    hideLoading(force?: boolean): void;

    /**
     * Show a message
     * @param type Message type
     * @param message Message
     * @param title Title
     * @param parameters Parameters
     * @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
     * @param callback Callback
     * @param title Title
     * @param props More properties
     */
    prompt<T = string>(
        message: NotificationContent<UI>,
        callback: NotificationReturn<T>,
        title?: NotificationContent<UI>,
        props?: C
    ): INotification<UI, C>;

    /**
     * Show loading
     * @param title Title
     */
    showLoading(title?: NotificationContent<UI>): void;

    /**
     * Show a success message
     * @param message Message
     * @param title Title
     * @param callback Callback
     * @param timespan Timespan to close
     * @param props Props
     */
    succeed(
        message: NotificationContent<UI>,
        title?: NotificationContent<UI>,
        callback?: NotificationReturn<void>,
        timespan?: number,
        props?: C
    ): INotification<UI, C>;