import { ReactNode } from 'react'; import { CheckboxValue } from '../Checkbox'; /** 分页控件的对齐方式 */ export declare type DataTablePaginationAlign = 'center' | 'right'; /** 分页行为的配置项 */ export declare type DataTablePaginationOptions = { /** * 对齐方式 * @default 'right' */ align?: DataTablePaginationAlign; /** 当前页 */ currentPage: number; /** * 每页有多少 `record` * @default 10 */ pageSize?: number; /** `records` 总数 */ total: number; /** * `currentPage` 或者 `pageSize` 发生改变后触发 * @param nextPage 下一页的页码 0 开始 * @param nextPageSize 下一个 pageSize */ onChange?(nextPage: number, nextPageSize: number): void; }; /** 行选择类型 */ export declare type DataTableSelectionType = 'single' | 'multiple'; /** 行选择选中项变更的回调函数 */ export declare type DataTableSelectionChangeHandler = (ids: string[]) => void; /** 排序方式 */ export declare type DataTableSortOrder = 'desc' | 'asc' | 'none'; /** 排序的配置项 */ export interface DataTableColumnSortOptions { /** 排序方式 */ order: DataTableSortOrder; /** 响应排序方式变更的回调函数 */ onChange: (order: DataTableSortOrder) => void; } /** 列固定的方向 */ export declare type DataTableColumnFixType = 'left' | 'right'; export declare type DataTableColumnSelectFilterValue = CheckboxValue; export declare type DataTableColumnSelectFilterItem = { text: string; value: T; }; export declare type DataTableColumnSelectFilterCallback = (value: T) => void; export declare type DataTableColumnMultiSelectFilterOptions = { type: 'multi-select'; value: T[]; /** * 过滤项 */ optionItems: Array>; onChange: DataTableColumnSelectFilterCallback; }; export declare type DataTableColumnSelectFilterOptions = { type: 'select'; value: T | null; /** * 过滤项 */ optionItems: Array>; onChange: DataTableColumnSelectFilterCallback; }; export declare type DataTableColumnFilterOptions = DataTableColumnSelectFilterOptions | DataTableColumnMultiSelectFilterOptions; export interface DataTableCommonColumnOptions { /** * column 的标识,作用类似 `key` 之于 React list,帮助 `Table` 将状态变更前后的 column 项正确地对应上; * `DataTable` 默认会使用字符串值的 `accessor` 作为 column 的 id,如果 column 没有对应的 accessor, * 且 column 列表会动态变化(如某列在特定条件下才会展示),建议给该 column 显式指定 `id` */ id?: string; title: ReactNode; /** * 列宽度(含 padding) * @default 'auto' */ width?: string; /** 对排序行为的配置 */ sort?: DataTableColumnSortOptions; filter?: DataTableColumnFilterOptions; /** 固定列,left 表示表格左侧的固定列,right 表示右侧 */ fixed?: DataTableColumnFixType; } /** 列的渲染函数 */ export declare type DataTableCellRender = (value: K extends keyof R ? R[K] : void, record: R, index: number) => ReactNode; /** 列配置项(指定 `accessor`) */ export interface DataTableColumnOptionsWithAccessor extends DataTableCommonColumnOptions { /** 当前列对应的字段名,用于从 Record 中读取当前列所需的数据;若指定,会作为 `Column` prop `id` 的默认值 */ accessor: K; render?: DataTableCellRender; } /** 列配置项(不指定 `accessor`) */ export interface DataTableColumnOptionsWithoutAccessor extends DataTableCommonColumnOptions { render?: DataTableCellRender; } /** 列配置项 */ export declare type DataTableColumnOptions = (K extends keyof R ? DataTableColumnOptionsWithAccessor : DataTableColumnOptionsWithoutAccessor); export declare type InternalColumnOptions = DataTableCommonColumnOptions & { /** 会确保有(基于外部指定的 id、accessor、index 等信息) */ internalId: string; accessor?: string; render: DataTableCellRender; }; export declare type InternalRecord = { id: string; data: R; }; /** 行选择配置项 */ export declare type DataTableSelectionOptions = { /** * 行选择类型 * + `multiple` 多选 * + `single` 单选 * @default 'multiple' */ type?: DataTableSelectionType; /** 当前选中的 ID 集合;ID 即通过 `recordIdAccessor` 得到的数据唯一标识 */ selectedIds: string[]; /** 当前选中的 ID 集合变更后触发的回调 */ onChange?: DataTableSelectionChangeHandler; /** 固定行选择这一列,用法同 `Column` prop `fixed` */ fixed?: 'left'; /** 控制是否禁用某行行选择 */ disableWhen?: (record: R, index: number) => boolean; /** 控制是否隐藏某行行选择 */ hiddenWhen?: (record: R, index: number) => boolean; }; export declare type InternalSelectionOptions = DataTableSelectionOptions & { type: DataTableSelectionType; onChange: DataTableSelectionChangeHandler; };