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 {};