@etsoo/notificationbase
TypeScript icon, indicating that this package has built-in type declarations

1.1.48 • Public • Published

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>;

Package Sidebar

Install

npm i @etsoo/notificationbase

Weekly Downloads

182

Version

1.1.48

License

MIT

Unpacked Size

100 kB

Total Files

28

Last publish

Collaborators

  • garryxiao