@nexusui/components/core/EventLog/EventLog.container.d.ts

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.

import { TablePaginationProps } from '@mui/material/TablePagination';
import React from 'react';
import { StackProps } from '@mui/material/Stack';
import { IEventFilterProps } from './components/EventFilter';
import { IEventItem } from './components/EventItem';
import { EventFilterOption, EventFilterValue, EventItemModel } from './models';
/** The props type of [[`EventLog`]]. */
export interface IEventLog extends StackProps {
    /**
     * Control whether to use scrolling infinite loading, the default is pagination loading
     * @default false
     */
    infiniteLoad?: boolean;
    /**
     * The event data you want to display
     *
     * ```
     * export type EventSeverity = 'Info' | 'Warning' | 'Error' | 'info' | 'warning' | 'error';
     * export type ActionLink = {
     *   title: string;
     *   onClick: (row: EventItemModel) => void;
     * };
     * export type EventItemModel = {
     *  id: string;
     *  icon: React.ReactElement;
     *  title: string;
     *  description: string;
     *  timestamp: string;
     *  severity: EventSeverity;
     *  links?: ActionLink[];
     *  'data-testid'?: string;
     *  [key: string]: any;
     * };
     * ```
     * @default []
     */
    events: ReadonlyArray<EventItemModel>;
    /**
     * Switch page to fetch data or scroll down in infinite loader
     */
    onFetchData: (page: number, pageSize: number, filter?: EventFilterValue) => void;
    /**
     * Indicate current page data is still under fetching or finished
     */
    loading: boolean;
    /**
     * Total counts of events
     * @default 0
     */
    total: number;
    /**
     * Initial page, default 0
     * @default 0
     */
    initialPage?: number;
    /**
     * Initial Page size, default 50
     * @default 50
     */
    initialPageSize?: number;
    /**
     * Initial filter, default undefined
     */
    initialFilter?: EventFilterValue;
    /**
     * Filter options for selection dropdown config
     *
     * ```
     * export type EventFilterOption<T = string | number> = {
     *   label: string;
     *   options: ISelectOption<T>[];
     *   multiple?: boolean;
     *   startAdornment?: React.ReactNode;
     *   suffix?: string;
     *   renderValue?: (value: T | T[]) => React.ReactNode;
     *   [key: string]: any;
     * }
     * ```
     */
    filterOptions?: Record<string, EventFilterOption>;
    /**
     * Trigger once page change
     */
    onPageChange?: (page: number) => void;
    /**
     * Trigger once pagesize change
     */
    onPageSizeChange?: (pageSize: number) => void;
    /**
     * Trigger once filter change
     * ```
     * export type EventFilterValue<T = string | number> = Record<string, { value: T | T[], [key: string]: any }>
     * ```
     */
    onFilterChange?: (filter: EventFilterValue) => void;
    /**
     * Rows per page options, refer to [props](https://mui.com/zh/material-ui/api/table-pagination/)
     */
    paginationProps?: Omit<TablePaginationProps, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange'>;
    /**
     * Estimated Event item height, this value is used to calculate the estimated total height of a list before its items have all been measured. The total size impacts user scrolling behavior. It is updated whenever new items are measured.
     * @default 117
     */
    itemHeight?: number;
    /**
     * Custom define the event item content
     */
    ItemComponent?: React.FunctionComponent<IEventItem>;
    /**
     * Custom define the event filter content
     */
    FilterComponent?: React.FunctionComponent<IEventFilterProps>;
}
export declare const EventLog: (props: IEventLog) => import("react/jsx-runtime").JSX.Element;