2017-11-21 13:48:37 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import { SpinProps } from '../spin';
|
|
|
|
import { Store } from './createStore';
|
2018-03-08 20:34:40 +08:00
|
|
|
import { RadioChangeEvent } from '../radio';
|
|
|
|
import { CheckboxChangeEvent } from '../checkbox';
|
2018-05-21 21:52:18 +08:00
|
|
|
import { PaginationConfig } from '../pagination';
|
|
|
|
export { PaginationConfig } from '../pagination';
|
2017-11-21 13:48:37 +08:00
|
|
|
|
2019-02-11 14:52:56 +08:00
|
|
|
export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
|
|
|
|
export type ColumnFilterItem = {
|
2019-02-15 11:15:43 +08:00
|
|
|
text: React.ReactNode;
|
2019-02-11 14:52:56 +08:00
|
|
|
value: string;
|
|
|
|
children?: ColumnFilterItem[];
|
|
|
|
};
|
2017-11-21 13:48:37 +08:00
|
|
|
|
|
|
|
export interface ColumnProps<T> {
|
2018-12-07 16:17:45 +08:00
|
|
|
title?:
|
|
|
|
| React.ReactNode
|
2019-02-11 14:52:56 +08:00
|
|
|
| ((options: { filters: TableStateFilters; sortOrder?: SortOrder }) => React.ReactNode);
|
2017-11-21 13:48:37 +08:00
|
|
|
key?: React.Key;
|
2018-12-25 16:31:02 +08:00
|
|
|
dataIndex?: string; // Note: We can not use generic type here, since we need to support nested key, see #9393
|
2017-11-21 13:48:37 +08:00
|
|
|
render?: (text: any, record: T, index: number) => React.ReactNode;
|
2018-03-21 17:42:19 +08:00
|
|
|
align?: 'left' | 'right' | 'center';
|
2017-11-21 13:48:37 +08:00
|
|
|
filters?: ColumnFilterItem[];
|
|
|
|
onFilter?: (value: any, record: T) => boolean;
|
|
|
|
filterMultiple?: boolean;
|
2018-05-04 00:09:05 +08:00
|
|
|
filterDropdown?: React.ReactNode | ((props: Object) => React.ReactNode);
|
2017-11-21 13:48:37 +08:00
|
|
|
filterDropdownVisible?: boolean;
|
|
|
|
onFilterDropdownVisibleChange?: (visible: boolean) => void;
|
|
|
|
sorter?: boolean | CompareFn<T>;
|
2018-09-17 19:52:24 +08:00
|
|
|
defaultSortOrder?: SortOrder;
|
2017-11-21 13:48:37 +08:00
|
|
|
colSpan?: number;
|
|
|
|
width?: string | number;
|
|
|
|
className?: string;
|
|
|
|
fixed?: boolean | ('left' | 'right');
|
2018-09-23 09:11:09 +08:00
|
|
|
filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
|
2017-11-21 13:48:37 +08:00
|
|
|
filteredValue?: any[];
|
2019-01-15 21:02:43 +08:00
|
|
|
sortOrder?: SortOrder | boolean;
|
2017-11-21 13:48:37 +08:00
|
|
|
children?: ColumnProps<T>[];
|
|
|
|
onCellClick?: (record: T, event: any) => void;
|
2018-10-15 14:02:04 +08:00
|
|
|
onCell?: (record: T, rowIndex: number) => any;
|
2018-02-01 18:54:50 +08:00
|
|
|
onHeaderCell?: (props: ColumnProps<T>) => any;
|
2018-12-22 18:16:02 +08:00
|
|
|
sortDirections?: SortOrder[];
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
2018-12-17 22:42:16 +08:00
|
|
|
export interface AdditionalCellProps {
|
|
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
|
|
[name: string]: any;
|
|
|
|
}
|
|
|
|
|
2017-11-21 13:48:37 +08:00
|
|
|
export interface TableComponents {
|
2018-09-25 19:47:34 +08:00
|
|
|
table?: React.ReactType;
|
2017-11-21 13:48:37 +08:00
|
|
|
header?: {
|
2018-09-25 19:47:34 +08:00
|
|
|
wrapper?: React.ReactType;
|
|
|
|
row?: React.ReactType;
|
|
|
|
cell?: React.ReactType;
|
2017-11-21 13:48:37 +08:00
|
|
|
};
|
|
|
|
body?: {
|
2018-09-25 19:47:34 +08:00
|
|
|
wrapper?: React.ReactType;
|
|
|
|
row?: React.ReactType;
|
|
|
|
cell?: React.ReactType;
|
2017-11-21 13:48:37 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TableLocale {
|
|
|
|
filterTitle?: string;
|
2018-01-11 23:13:42 +08:00
|
|
|
filterConfirm?: React.ReactNode;
|
|
|
|
filterReset?: React.ReactNode;
|
|
|
|
emptyText?: React.ReactNode | (() => React.ReactNode);
|
|
|
|
selectAll?: React.ReactNode;
|
|
|
|
selectInvert?: React.ReactNode;
|
2018-09-17 17:57:01 +08:00
|
|
|
sortTitle?: string;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export type RowSelectionType = 'checkbox' | 'radio';
|
2018-12-07 16:17:45 +08:00
|
|
|
export type SelectionSelectFn<T> = (
|
|
|
|
record: T,
|
|
|
|
selected: boolean,
|
|
|
|
selectedRows: Object[],
|
|
|
|
nativeEvent: Event,
|
|
|
|
) => any;
|
2017-11-21 13:48:37 +08:00
|
|
|
|
2018-08-04 19:20:28 +08:00
|
|
|
export type TableSelectWay = 'onSelect' | 'onSelectMultiple' | 'onSelectAll' | 'onSelectInvert';
|
2018-05-07 12:32:26 +08:00
|
|
|
|
2017-11-21 13:48:37 +08:00
|
|
|
export interface TableRowSelection<T> {
|
|
|
|
type?: RowSelectionType;
|
|
|
|
selectedRowKeys?: string[] | number[];
|
2018-12-21 16:32:48 +08:00
|
|
|
onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => void;
|
2017-11-21 13:48:37 +08:00
|
|
|
getCheckboxProps?: (record: T) => Object;
|
|
|
|
onSelect?: SelectionSelectFn<T>;
|
2018-12-21 16:32:48 +08:00
|
|
|
onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
|
|
|
|
onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
|
2018-12-21 14:56:42 +08:00
|
|
|
onSelectInvert?: (selectedRowKeys: string[] | number[]) => void;
|
2017-11-21 13:48:37 +08:00
|
|
|
selections?: SelectionItem[] | boolean;
|
|
|
|
hideDefaultSelections?: boolean;
|
|
|
|
fixed?: boolean;
|
2018-03-05 18:23:01 +08:00
|
|
|
columnWidth?: string | number;
|
2018-07-24 14:49:23 +08:00
|
|
|
selectWay?: TableSelectWay;
|
2018-07-28 14:57:00 +08:00
|
|
|
columnTitle?: string | React.ReactNode;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
2018-06-02 15:49:11 +08:00
|
|
|
export type SortOrder = 'descend' | 'ascend';
|
|
|
|
export interface SorterResult<T> {
|
|
|
|
column: ColumnProps<T>;
|
|
|
|
order: SortOrder;
|
|
|
|
field: string;
|
|
|
|
columnKey: string;
|
|
|
|
}
|
2018-06-27 17:39:31 +08:00
|
|
|
export type TableSize = 'default' | 'middle' | 'small';
|
2018-10-17 21:22:40 +08:00
|
|
|
export interface ExpandIconProps<T> {
|
|
|
|
prefixCls: string;
|
|
|
|
expanded: boolean;
|
|
|
|
record: T;
|
|
|
|
needIndentSpaced: boolean;
|
|
|
|
expandable: boolean;
|
|
|
|
onExpand: (record: T, event: MouseEvent) => void;
|
|
|
|
}
|
2019-01-17 13:44:15 +08:00
|
|
|
|
|
|
|
export interface TableCurrentDataSource<T> {
|
|
|
|
currentDataSource: T[];
|
|
|
|
}
|
|
|
|
|
2017-11-21 13:48:37 +08:00
|
|
|
export interface TableProps<T> {
|
|
|
|
prefixCls?: string;
|
|
|
|
dropdownPrefixCls?: string;
|
|
|
|
rowSelection?: TableRowSelection<T>;
|
2018-05-21 21:52:18 +08:00
|
|
|
pagination?: PaginationConfig | false;
|
2018-06-27 17:39:31 +08:00
|
|
|
size?: TableSize;
|
2017-11-21 13:48:37 +08:00
|
|
|
dataSource?: T[];
|
|
|
|
components?: TableComponents;
|
|
|
|
columns?: ColumnProps<T>[];
|
|
|
|
rowKey?: string | ((record: T, index: number) => string);
|
|
|
|
rowClassName?: (record: T, index: number) => string;
|
2018-12-07 16:17:45 +08:00
|
|
|
expandedRowRender?: (
|
|
|
|
record: T,
|
|
|
|
index: number,
|
|
|
|
indent: number,
|
|
|
|
expanded: boolean,
|
|
|
|
) => React.ReactNode;
|
2017-12-08 15:36:32 +08:00
|
|
|
defaultExpandAllRows?: boolean;
|
2017-11-21 13:48:37 +08:00
|
|
|
defaultExpandedRowKeys?: string[] | number[];
|
|
|
|
expandedRowKeys?: string[] | number[];
|
2018-10-17 21:22:40 +08:00
|
|
|
expandIcon?: (props: ExpandIconProps<T>) => React.ReactNode;
|
2017-11-21 13:48:37 +08:00
|
|
|
expandIconAsCell?: boolean;
|
|
|
|
expandIconColumnIndex?: number;
|
2017-12-08 15:36:32 +08:00
|
|
|
expandRowByClick?: boolean;
|
2017-11-21 13:48:37 +08:00
|
|
|
onExpandedRowsChange?: (expandedRowKeys: string[] | number[]) => void;
|
|
|
|
onExpand?: (expanded: boolean, record: T) => void;
|
2018-06-02 15:49:11 +08:00
|
|
|
onChange?: (
|
2018-07-17 17:56:24 +08:00
|
|
|
pagination: PaginationConfig,
|
2018-06-02 15:49:11 +08:00
|
|
|
filters: Record<keyof T, string[]>,
|
|
|
|
sorter: SorterResult<T>,
|
2019-01-17 13:44:15 +08:00
|
|
|
extra: TableCurrentDataSource<T>,
|
2018-06-02 15:49:11 +08:00
|
|
|
) => void;
|
2017-11-21 13:48:37 +08:00
|
|
|
loading?: boolean | SpinProps;
|
2019-01-10 16:45:58 +08:00
|
|
|
locale?: TableLocale;
|
2017-11-21 13:48:37 +08:00
|
|
|
indentSize?: number;
|
2018-06-02 15:49:11 +08:00
|
|
|
onRowClick?: (record: T, index: number, event: Event) => void;
|
2017-11-21 13:48:37 +08:00
|
|
|
onRow?: (record: T, index: number) => any;
|
2018-04-02 17:15:17 +08:00
|
|
|
onHeaderRow?: (columns: ColumnProps<T>[], index: number) => any;
|
2017-11-21 13:48:37 +08:00
|
|
|
useFixedHeader?: boolean;
|
|
|
|
bordered?: boolean;
|
|
|
|
showHeader?: boolean;
|
|
|
|
footer?: (currentPageData: Object[]) => React.ReactNode;
|
|
|
|
title?: (currentPageData: Object[]) => React.ReactNode;
|
2018-12-07 16:17:45 +08:00
|
|
|
scroll?: { x?: boolean | number | string; y?: boolean | number | string };
|
2017-11-21 13:48:37 +08:00
|
|
|
childrenColumnName?: string;
|
|
|
|
bodyStyle?: React.CSSProperties;
|
|
|
|
className?: string;
|
|
|
|
style?: React.CSSProperties;
|
2017-11-27 10:53:55 +08:00
|
|
|
children?: React.ReactNode;
|
2019-01-08 17:27:41 +08:00
|
|
|
sortDirections?: SortOrder[];
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface TableStateFilters {
|
|
|
|
[key: string]: string[];
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TableState<T> {
|
2018-05-21 21:52:18 +08:00
|
|
|
pagination: PaginationConfig;
|
2017-11-21 13:48:37 +08:00
|
|
|
filters: TableStateFilters;
|
|
|
|
sortColumn: ColumnProps<T> | null;
|
2018-06-02 15:49:11 +08:00
|
|
|
sortOrder?: SortOrder;
|
2018-07-24 14:49:23 +08:00
|
|
|
pivot?: number;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export type SelectionItemSelectFn = (key: string[]) => any;
|
2019-02-16 11:49:15 +08:00
|
|
|
type GetPopupContainer = (triggerNode?: Element) => HTMLElement;
|
2017-11-21 13:48:37 +08:00
|
|
|
|
|
|
|
export interface SelectionItem {
|
|
|
|
key: string;
|
|
|
|
text: React.ReactNode;
|
|
|
|
onSelect: SelectionItemSelectFn;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectionCheckboxAllProps<T> {
|
|
|
|
store: Store;
|
|
|
|
locale: any;
|
|
|
|
disabled: boolean;
|
|
|
|
getCheckboxPropsByItem: (item: any, index: number) => any;
|
|
|
|
getRecordKey: (record: any, index?: number) => string;
|
|
|
|
data: T[];
|
|
|
|
prefixCls: string | undefined;
|
|
|
|
onSelect: (key: string, index: number, selectFunc: any) => void;
|
|
|
|
hideDefaultSelections?: boolean;
|
|
|
|
selections?: SelectionItem[] | boolean;
|
2019-02-16 11:49:15 +08:00
|
|
|
getPopupContainer?: GetPopupContainer;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectionCheckboxAllState {
|
2018-06-05 20:45:19 +08:00
|
|
|
checked?: boolean;
|
|
|
|
indeterminate?: boolean;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectionBoxProps {
|
|
|
|
store: Store;
|
|
|
|
type?: RowSelectionType;
|
|
|
|
defaultSelection: string[];
|
|
|
|
rowIndex: string;
|
2018-01-31 15:07:53 +08:00
|
|
|
name?: string;
|
2017-11-21 13:48:37 +08:00
|
|
|
disabled?: boolean;
|
2018-03-08 20:34:40 +08:00
|
|
|
onChange: (e: RadioChangeEvent | CheckboxChangeEvent) => void;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectionBoxState {
|
|
|
|
checked?: boolean;
|
|
|
|
}
|
|
|
|
|
2018-05-07 12:32:26 +08:00
|
|
|
export interface SelectionInfo<T> {
|
|
|
|
selectWay: TableSelectWay;
|
|
|
|
record?: T;
|
|
|
|
checked?: boolean;
|
|
|
|
changeRowKeys?: React.Key[];
|
|
|
|
nativeEvent?: Event;
|
|
|
|
}
|
|
|
|
|
2017-11-21 13:48:37 +08:00
|
|
|
export interface FilterMenuProps<T> {
|
|
|
|
locale: TableLocale;
|
|
|
|
selectedKeys: string[];
|
|
|
|
column: ColumnProps<T>;
|
|
|
|
confirmFilter: (column: ColumnProps<T>, selectedKeys: string[]) => any;
|
|
|
|
prefixCls: string;
|
|
|
|
dropdownPrefixCls: string;
|
2019-02-16 11:49:15 +08:00
|
|
|
getPopupContainer?: GetPopupContainer;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
|
|
|
|
2019-02-26 14:26:08 +08:00
|
|
|
export interface FilterMenuState<T> {
|
2017-11-21 13:48:37 +08:00
|
|
|
selectedKeys: string[];
|
2019-02-26 14:26:08 +08:00
|
|
|
valueKeys: { [name: string]: any };
|
2017-11-27 10:53:55 +08:00
|
|
|
keyPathOfSelectedItem: { [key: string]: string };
|
2017-11-21 13:48:37 +08:00
|
|
|
visible?: boolean;
|
2019-02-26 14:26:08 +08:00
|
|
|
prevProps: FilterMenuProps<T>;
|
2017-11-21 13:48:37 +08:00
|
|
|
}
|
2018-09-30 11:17:39 +08:00
|
|
|
|
|
|
|
export type PrepareParamsArgumentsReturn<T> = [
|
|
|
|
any,
|
|
|
|
string[],
|
|
|
|
Object,
|
|
|
|
{
|
2018-12-07 16:17:45 +08:00
|
|
|
currentDataSource: T[];
|
2018-09-30 11:17:39 +08:00
|
|
|
}
|
|
|
|
];
|