From 8a6d9b92b74a475ec3253c8e298c48c592c40984 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 7 May 2018 12:32:26 +0800 Subject: [PATCH] Improve table types Fix #10374 --- components/checkbox/Checkbox.tsx | 2 +- components/radio/interface.tsx | 2 +- components/table/Table.tsx | 29 ++++++++++++++++++----------- components/table/interface.tsx | 12 +++++++++++- 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 674939d023..1cecd3550c 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -35,7 +35,7 @@ export interface CheckboxChangeEvent { target: CheckboxChangeEventTarget; stopPropagation: () => void; preventDefault: () => void; - nativeEvent: MouseEvent; + nativeEvent: Event; } export default class Checkbox extends React.Component { diff --git a/components/radio/interface.tsx b/components/radio/interface.tsx index 81e04ca216..fadb93ae12 100644 --- a/components/radio/interface.tsx +++ b/components/radio/interface.tsx @@ -37,5 +37,5 @@ export interface RadioChangeEvent { target: RadioChangeEventTarget; stopPropagation: () => void; preventDefault: () => void; - nativeEvent: MouseEvent; + nativeEvent: Event; } diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 1d7811b03c..b1c322dccd 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -28,7 +28,10 @@ import { CompareFn, TableStateFilters, SelectionItemSelectFn, + SelectionInfo, TablePaginationConfig, + TableSelectWay, + TableRowSelection, } from './interface'; import { RadioChangeEvent } from '../radio'; import { CheckboxChangeEvent } from '../checkbox'; @@ -43,6 +46,10 @@ function stopPropagation(e: React.SyntheticEvent) { } } +function getRowSelection(props: TableProps): TableRowSelection { + return props.rowSelection || {}; +} + const defaultPagination = { onChange: noop, onShowSizeChange: noop, @@ -80,7 +87,6 @@ export default class Table extends React.Component, TableState< dataSource: [], prefixCls: 'ant-table', useFixedHeader: false, - rowSelection: null, className: '', size: 'large', loading: false, @@ -121,13 +127,13 @@ export default class Table extends React.Component, TableState< this.CheckboxPropsCache = {}; this.store = createStore({ - selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [], + selectedRowKeys: getRowSelection(props).selectedRowKeys || [], selectionDirty: false, }); } getCheckboxPropsByItem = (item: T, index: number) => { - const { rowSelection = {} } = this.props; + const rowSelection = getRowSelection(this.props); if (!rowSelection.getCheckboxProps) { return {}; } @@ -140,7 +146,7 @@ export default class Table extends React.Component, TableState< } getDefaultSelection() { - const { rowSelection = {} } = this.props; + const rowSelection = getRowSelection(this.props); if (!rowSelection.getCheckboxProps) { return []; } @@ -224,8 +230,9 @@ export default class Table extends React.Component, TableState< }; } - setSelectedRowKeys(selectedRowKeys: string[], { selectWay, record, checked, changeRowKeys, nativeEvent }: any) { - const { rowSelection = {} as any } = this.props; + setSelectedRowKeys(selectedRowKeys: string[], selectionInfo: SelectionInfo) { + const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo; + const rowSelection = getRowSelection(this.props); if (rowSelection && !('selectedRowKeys' in rowSelection)) { this.store.setState({ selectedRowKeys }); } @@ -240,12 +247,12 @@ export default class Table extends React.Component, TableState< rowSelection.onChange(selectedRowKeys, selectedRows); } if (selectWay === 'onSelect' && rowSelection.onSelect) { - rowSelection.onSelect(record, checked, selectedRows, nativeEvent); + rowSelection.onSelect(record!, checked!, selectedRows, nativeEvent!); } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) { 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) { rowSelection.onSelectInvert(selectedRowKeys); } @@ -492,7 +499,7 @@ export default class Table extends React.Component, TableState< .map((item, i) => this.getRecordKey(item, i)); let changeRowKeys: string[] = []; - let selectWay = ''; + let selectWay: TableSelectWay = 'onSelectAll'; let checked; // handle default selection switch (selectionKey) { @@ -544,7 +551,7 @@ export default class Table extends React.Component, TableState< return onSelectFunc(changeableRowKeys); } this.setSelectedRowKeys(selectedRowKeys, { - selectWay: selectWay, + selectWay, checked, changeRowKeys, }); diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 5f0009d3aa..26509c9286 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -59,12 +59,14 @@ export interface TableLocale { } export type RowSelectionType = 'checkbox' | 'radio'; -export type SelectionSelectFn = (record: T, selected: boolean, selectedRows: Object[]) => any; +export type SelectionSelectFn = (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; export interface TablePaginationConfig extends PaginationProps { position?: 'top' | 'bottom' | 'both'; } +export type TableSelectWay = 'onSelect' | 'onSelectAll' | 'onSelectInvert'; + export interface TableRowSelection { type?: RowSelectionType; selectedRowKeys?: string[] | number[]; @@ -171,6 +173,14 @@ export interface SelectionBoxState { checked?: boolean; } +export interface SelectionInfo { + selectWay: TableSelectWay; + record?: T; + checked?: boolean; + changeRowKeys?: React.Key[]; + nativeEvent?: Event; +} + export interface FilterMenuProps { locale: TableLocale; selectedKeys: string[];