@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
74 lines (73 loc) • 2.25 kB
TypeScript
import React from 'react';
import { PopperProps } from '@mui/material/Popper';
import { NotificationData } from './models';
import { OptionType } from '../models';
/**
* The props type of [[`NotificationsPanel`]].
*/
export type INotificationsPanel = PopperProps & {
/**
* notification data source
*
* ```
* interface NotificationData {
user?: IUserInfo;
id: string;
title: ReactNode;
unread?: boolean;
productName: string;
createTime: string | Date;
buttonActions?: ButtonAction[];
menuActions?: MenuItemAction[];
status?: 'warning' | 'error';
}
* ```
*/
notifications: ReadonlyArray<NotificationData>;
/**
* boolean value determine whether only show unread notifications
*/
onlyShowUnread: boolean;
/**
* Wether to show loading status
* @default false
*/
loading?: boolean;
/**
* Default selected filter options
* @default []
*/
selectedFilterOptions?: string[];
/**
* filter options data source
* @default []
*/
filterOptions?: OptionType[];
/**
* Callback function triggered when the close button is clicked, the return values is the filter values.
*/
onFilterChanged?: (filters: string[]) => void;
/**
* Callback fired when the component requests to be closed.
*/
onClose: () => void;
/**
* Callback function when the setting menu clicked.
* Optional value, if provided, will show the notification settings menu
* if you don't want to show the notification settings menu, don't pass in this function.
*/
onClickSetting?: React.MouseEventHandler<HTMLLIElement>;
/**
* Callback fired when the mark all as read button clicked
*/
onMarkAllAsRead: React.MouseEventHandler<HTMLButtonElement>;
/**
* Callback fired when the notification item clicked
*/
onOnlyShowUnread: (showUnread: boolean) => void;
/**
* Callback fired when the notification item clicked
*/
onItemClick: (notification: NotificationData) => void;
};
export declare const NotificationsPanel: (props: INotificationsPanel) => import("react/jsx-runtime").JSX.Element;