Improve table types

Fix #10374
This commit is contained in:
Wei Zhu 2018-05-07 12:32:26 +08:00
parent d93cfdef09
commit 8a6d9b92b7
4 changed files with 31 additions and 14 deletions

View File

@ -35,7 +35,7 @@ export interface CheckboxChangeEvent {
target: CheckboxChangeEventTarget; target: CheckboxChangeEventTarget;
stopPropagation: () => void; stopPropagation: () => void;
preventDefault: () => void; preventDefault: () => void;
nativeEvent: MouseEvent; nativeEvent: Event;
} }
export default class Checkbox extends React.Component<CheckboxProps, {}> { export default class Checkbox extends React.Component<CheckboxProps, {}> {

View File

@ -37,5 +37,5 @@ export interface RadioChangeEvent {
target: RadioChangeEventTarget; target: RadioChangeEventTarget;
stopPropagation: () => void; stopPropagation: () => void;
preventDefault: () => void; preventDefault: () => void;
nativeEvent: MouseEvent; nativeEvent: Event;
} }

View File

@ -28,7 +28,10 @@ import {
CompareFn, CompareFn,
TableStateFilters, TableStateFilters,
SelectionItemSelectFn, SelectionItemSelectFn,
SelectionInfo,
TablePaginationConfig, TablePaginationConfig,
TableSelectWay,
TableRowSelection,
} from './interface'; } from './interface';
import { RadioChangeEvent } from '../radio'; import { RadioChangeEvent } from '../radio';
import { CheckboxChangeEvent } from '../checkbox'; import { CheckboxChangeEvent } from '../checkbox';
@ -43,6 +46,10 @@ function stopPropagation(e: React.SyntheticEvent<any>) {
} }
} }
function getRowSelection<T>(props: TableProps<T>): TableRowSelection<T> {
return props.rowSelection || {};
}
const defaultPagination = { const defaultPagination = {
onChange: noop, onChange: noop,
onShowSizeChange: noop, onShowSizeChange: noop,
@ -80,7 +87,6 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
dataSource: [], dataSource: [],
prefixCls: 'ant-table', prefixCls: 'ant-table',
useFixedHeader: false, useFixedHeader: false,
rowSelection: null,
className: '', className: '',
size: 'large', size: 'large',
loading: false, loading: false,
@ -121,13 +127,13 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
this.CheckboxPropsCache = {}; this.CheckboxPropsCache = {};
this.store = createStore({ this.store = createStore({
selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [], selectedRowKeys: getRowSelection(props).selectedRowKeys || [],
selectionDirty: false, selectionDirty: false,
}); });
} }
getCheckboxPropsByItem = (item: T, index: number) => { getCheckboxPropsByItem = (item: T, index: number) => {
const { rowSelection = {} } = this.props; const rowSelection = getRowSelection(this.props);
if (!rowSelection.getCheckboxProps) { if (!rowSelection.getCheckboxProps) {
return {}; return {};
} }
@ -140,7 +146,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
} }
getDefaultSelection() { getDefaultSelection() {
const { rowSelection = {} } = this.props; const rowSelection = getRowSelection(this.props);
if (!rowSelection.getCheckboxProps) { if (!rowSelection.getCheckboxProps) {
return []; return [];
} }
@ -224,8 +230,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
}; };
} }
setSelectedRowKeys(selectedRowKeys: string[], { selectWay, record, checked, changeRowKeys, nativeEvent }: any) { setSelectedRowKeys(selectedRowKeys: string[], selectionInfo: SelectionInfo<T>) {
const { rowSelection = {} as any } = this.props; const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo;
const rowSelection = getRowSelection(this.props);
if (rowSelection && !('selectedRowKeys' in rowSelection)) { if (rowSelection && !('selectedRowKeys' in rowSelection)) {
this.store.setState({ selectedRowKeys }); this.store.setState({ selectedRowKeys });
} }
@ -240,12 +247,12 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
rowSelection.onChange(selectedRowKeys, selectedRows); rowSelection.onChange(selectedRowKeys, selectedRows);
} }
if (selectWay === 'onSelect' && rowSelection.onSelect) { if (selectWay === 'onSelect' && rowSelection.onSelect) {
rowSelection.onSelect(record, checked, selectedRows, nativeEvent); rowSelection.onSelect(record!, checked!, selectedRows, nativeEvent!);
} else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) { } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) {
const changeRows = data.filter( const changeRows = data.filter(
(row, i) => changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0, (row, i) => changeRowKeys!.indexOf(this.getRecordKey(row, i)) >= 0,
); );
rowSelection.onSelectAll(checked, selectedRows, changeRows); rowSelection.onSelectAll(checked!, selectedRows, changeRows);
} else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) { } else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) {
rowSelection.onSelectInvert(selectedRowKeys); rowSelection.onSelectInvert(selectedRowKeys);
} }
@ -492,7 +499,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
.map((item, i) => this.getRecordKey(item, i)); .map((item, i) => this.getRecordKey(item, i));
let changeRowKeys: string[] = []; let changeRowKeys: string[] = [];
let selectWay = ''; let selectWay: TableSelectWay = 'onSelectAll';
let checked; let checked;
// handle default selection // handle default selection
switch (selectionKey) { switch (selectionKey) {
@ -544,7 +551,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
return onSelectFunc(changeableRowKeys); return onSelectFunc(changeableRowKeys);
} }
this.setSelectedRowKeys(selectedRowKeys, { this.setSelectedRowKeys(selectedRowKeys, {
selectWay: selectWay, selectWay,
checked, checked,
changeRowKeys, changeRowKeys,
}); });

View File

@ -59,12 +59,14 @@ export interface TableLocale {
} }
export type RowSelectionType = 'checkbox' | 'radio'; export type RowSelectionType = 'checkbox' | 'radio';
export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any; export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any;
export interface TablePaginationConfig extends PaginationProps { export interface TablePaginationConfig extends PaginationProps {
position?: 'top' | 'bottom' | 'both'; position?: 'top' | 'bottom' | 'both';
} }
export type TableSelectWay = 'onSelect' | 'onSelectAll' | 'onSelectInvert';
export interface TableRowSelection<T> { export interface TableRowSelection<T> {
type?: RowSelectionType; type?: RowSelectionType;
selectedRowKeys?: string[] | number[]; selectedRowKeys?: string[] | number[];
@ -171,6 +173,14 @@ export interface SelectionBoxState {
checked?: boolean; checked?: boolean;
} }
export interface SelectionInfo<T> {
selectWay: TableSelectWay;
record?: T;
checked?: boolean;
changeRowKeys?: React.Key[];
nativeEvent?: Event;
}
export interface FilterMenuProps<T> { export interface FilterMenuProps<T> {
locale: TableLocale; locale: TableLocale;
selectedKeys: string[]; selectedKeys: string[];