import { CSSProperties, HTMLAttributes, MutableRefObject, ReactNode } from 'react'; import { PaginationProps } from '../pagination/pagination'; import { AvailableVirtualListProps } from '../_class/virtual-list'; import { RowProps, ColProps, GridResponsiveBreakpoint } from '../grid/interface'; declare type ListGridProps = { column?: number; } & Pick & Pick; export declare type ListHandle = { dom: HTMLDivElement; scrollIntoView: (index: number) => void; }; /** * @title List */ export interface ListProps { className?: string | string[]; style?: CSSProperties; paginationInFooter?: boolean; /** * 指定最外层包裹元素的样式 */ wrapperStyle?: CSSProperties; /** * 指定最外层包裹元素的类名 */ wrapperClassName?: string | string[]; /** * 列表渲染数据源,当children存在时,可不传此参数 (dataSource优先级更高) */ dataSource?: T[]; /** * 单个列表渲染函数,当 children 存在时,可不传此参数 */ render?: (item: T, index: number) => ReactNode; /** * 当 dataSource 和 render 存在时,可不传此参数 */ children?: ReactNode; /** * 列表的尺寸 */ size?: 'small' | 'middle' | 'large'; /** * 列表头部 */ header?: ReactNode; /** * 列表底部 */ footer?: ReactNode; /** * 是否使用翻页,也可传入 `Pagination` 的配置 */ pagination?: boolean | PaginationProps; /** * 是否显示边框 * @defaultValue true */ bordered?: boolean; /** * 是否显示分割线 * @defaultValue true */ split?: boolean; /** * 列表栅格配置 */ grid?: ListGridProps; /** * 是否加载中 */ loading?: boolean; /** * 列表项是否可悬浮 */ hoverable?: boolean; /** * 滚动至底部触发函数 */ onReachBottom?: (currentPage: number) => void; /** * 触发底部函数的距离阙值 * @defaultValue 0 */ offsetBottom?: number; /** * 滚动加载数据当前页码 * @defaultValue 1 */ defaultCurrent?: number; /** * 节流延时 * @defaultValue 500 */ throttleDelay?: number; /** * 当前列表的引用 */ listRef?: MutableRefObject; /** * 列表滚动回调函数,参数为列表滚动元素,当onReachBottom无法满足需求,可自定义滚动监听函数。 */ onListScroll?: (elem: Element) => void; /** * 滚动加载状态时,滚动到底部的提示 */ scrollLoading?: string | ReactNode; /** * 没有数据的时候显示的元素 */ noDataElement?: ReactNode; /** * 传递虚拟列表属性,传入此参数以开启虚拟滚动 */ virtualListProps?: AvailableVirtualListProps; } /** * @title List.Item */ export interface ListItemProps extends HTMLAttributes { style?: CSSProperties; className?: string; children?: ReactNode; /** * 列表项下方内容(列表操作组) */ actions?: ReactNode[]; /** * 列表最右侧内容,额外内容 */ extra?: ReactNode; /** * 列表操作组的位置,默认horizontal,出现在右侧;vertical出现在下方。 * @defaultValue horizontal */ actionLayout?: 'horizontal' | 'vertical'; } /** * @title List.Item.Meta */ export interface ListItemMetaProps { children?: ReactNode; className?: string; style?: CSSProperties; /** * 列表元素标题 */ title?: ReactNode; /** * 列表元素的图标 */ avatar?: ReactNode; /** * 列表元素描述内容 */ description?: ReactNode; } export {};