@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.
90 lines (89 loc) • 2.38 kB
TypeScript
import { ReactNode } from 'react';
import { StackProps } from '@mui/material/Stack';
import { IComplexCard } from '../ComplexCard';
export type ICardsPerRow = {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
};
export type IDataItem = IComplexCard & {
id: string;
};
export interface IVirtualizedCardList<T extends {
id: string;
}> extends StackProps {
/**
* The source data of the Virtualized Card List component.
*
* It is a generic type and will allow the user to render items of their own choosing.
*
* @default []
*/
data: ReadonlyArray<T>;
/**
* Return a custom card component that the user wants to render items
*/
renderCard: (card: T) => ReactNode;
/**
* Specify how many cards will be displayed in a row at different breakpoints.
* If it's specified the property 'cardWidth' will not take effect and the size of card will change as the size of its container changes.
* ```
* export type ICardsPerRow = {
* xs: number;
* sm: number;
* md: number;
* lg: number;
* xl: number;
* };
* ```
*/
cardsPerRow?: ICardsPerRow;
/**
* Indicate the current page data is still under fetching or returned
* @default false
*/
loading?: boolean;
/**
* Total counts of cards
* @default 0
*/
total: number;
/**
* Initial page, default 0
* @default 0
*/
initialPage?: number;
/**
* Page size, default 50
* @default 50
*/
pageSize?: number;
/**
* Specify the width of a Card
* @default 321
*/
cardWidth?: number;
/**
* An empty state component with custom message shows when no data
* @default <EmptyState size={'small'} header={'No data'} />
*/
emptyState?: React.ReactNode;
/**
* A loading state component shows while fetching data
*
*/
loadingState?: React.ReactNode;
/**
* A callback function use for fetching data
*/
onFetchData: (page: number, pageSize: number) => void;
/**
* ID of the selected card to scroll to and highlight
*/
selectedCardId?: string;
}
export declare const VirtualizedCardList: <T extends {
id: string;
}>(props: IVirtualizedCardList<T>) => import("react/jsx-runtime").JSX.Element;