NotificationBase

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

Installing

Using npm:

``bash
$ npm install @etsoo/notificationbase
`

Using yarn:

`bash
$ 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:

`ts
/**
* Constructor
* @param type Type
* @param content Content
* @param title Title
* @param align Align
*/
constructor(
type: NotificationType,
content: NotificationContent,
title?: NotificationContent,
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;
`

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:

`ts
/**
* Add notification
* @param notification Notification
* @param top Is insert top
*/
add(notification: INotification, 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 | [NotificationContent, NotificationContent],
callback?: NotificationReturn,
type?: NotificationMessageType,
props?: C
): INotification;

/**
* 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,
title?: NotificationContent,
callback?: NotificationReturn,
props?: C
): INotification;

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

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

/**
* Get notification with id
* @param id Notification id
*/
getById(id: string): INotification | 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,
title?: NotificationContent,
parameters?: NotificationParameters,
props?: C
): INotification;

/**
* Popup component as modal
* @param component Component to popup
* @param anchor Position anchor
* @returns Result
*/
popup(
component: NotificationContent,
anchor?: HTMLElement | string | { left: number; top: number }
): INotification;

/**
* Prompt action
* @param message Message
* @param callback Callback
* @param title Title
* @param props More properties
*/
prompt(
message: NotificationContent,
callback: NotificationReturn,
title?: NotificationContent,
props?: C
): INotification;

/**
* Show loading
* @param title Title
*/
showLoading(title?: NotificationContent): 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,
title?: NotificationContent,
callback?: NotificationReturn,
timespan?: number,
props?: C
): INotification;
``