refactor: table ts (#2664)

* refactor: table ts

* fix: should pass context to onChange correctly

components/dropdown/dropdown.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import RcDropdown from 'rc-dropdown';
 
-export default class Dropdown extends React.Component {
+export interface DropDownProps {
+  trigger: string[];
+  overlay: React.ReactNode;
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+}
+
+export default class Dropdown extends React.Component<DropDownProps, any> {
   static defaultProps = {
     transitionName: 'slide-up',
     prefixCls: 'ant-dropdown',

components/radio/radio.tsx

@@ -14,6 +14,7 @@ export interface RadioProps {
   prefixCls?: string;
   disabled?: boolean;
   className?: string;
+  onChange?: (e: any) => any;
 }
 
 export default class Radio extends React.Component<RadioProps, any> {

components/table/Table.tsx

@@ -32,7 +32,66 @@ const defaultPagination = {
   onShowSizeChange: noop,
 };
 
-export default class Table extends React.Component {
+interface TableRowSelection {
+  type?: 'checkbox' | 'radio';
+  selectedRowKeys?: string[];
+  onChange?: (selectedRowKeys: string[], selectedRows: Object[]) => any;
+  getCheckboxProps?: (record: Object) => Object;
+  onSelect?: (record: Object, selected: boolean, selectedRows: Object[]) => any;
+  onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
+}
+
+interface TableColumnConfig {
+  title?: React.ReactNode;
+  key?: string;
+  dataIndex?: string;
+  render?: (text: any, record: Object, index: number) => React.ReactNode;
+  filters?: string[];
+  onFilter?: (value: any, record: Object) => boolean;
+  filterMultiple?: boolean;
+  filterDropdown?: React.ReactNode;
+  sorter?: boolean | ((a: any, b: any) => number);
+  colSpan?: number;
+  width?: string | number;
+  className?: string;
+  fixed?: boolean | ('left' | 'right');
+  filteredValue?: any[];
+  sortOrder?: boolean | ('ascend' | 'descend');
+}
+
+export interface TableProps {
+  prefixCls?: string;
+  rowSelection?: TableRowSelection;
+  pagination?: any; // 等 Pagination 的 interface，以便直接引用
+  size?: 'default' | 'small';
+  dataSource?: Object[];
+  columns?: TableColumnConfig[];
+  rowKey?: string | ((record: Object, index: number) => string);
+  rowClassName?: (record: Object, index: number) => string;
+  expandedRowRender?: any;
+  defaultExpandedRowKeys?: string[];
+  expandedRowKeys?: string[];
+  expandIconAsCell?: boolean;
+  onChange?: (pagination: any, filters: string[], sorter: Object) => any;
+  loading?: boolean;
+  locale?: Object;
+  indentSize?: number;
+  onRowClick?: (record: Object, index: number) => any;
+  useFixedHeader?: boolean;
+  bordered?: boolean;
+  showHeader?: boolean;
+  footer?: (currentPageData: Object[]) => React.ReactNode;
+  title?: (currentPageData: Object[]) => React.ReactNode;
+  scroll?: { x?: boolean | number, y?: boolean | number};
+}
+
+interface TableContext {
+  antLocale?: {
+    Table?: any,
+  };
+}
+
+export default class Table extends React.Component<TableProps, any> {
   static propTypes = {
     dataSource: React.PropTypes.array,
     prefixCls: React.PropTypes.string,
@@ -65,6 +124,9 @@ export default class Table extends React.Component {
     antLocale: React.PropTypes.object,
   };
 
+  context: TableContext;
+  CheckboxPropsCache: Object;
+
   constructor(props) {
     super(props);
 
@@ -165,7 +227,7 @@ export default class Table extends React.Component {
     }
   }
 
-  setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }) {
+  setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }: any) {
     const { rowSelection = {} } = this.props;
     if (rowSelection && !('selectedRowKeys' in rowSelection)) {
       this.setState({ selectedRowKeys });
@@ -208,15 +270,15 @@ export default class Table extends React.Component {
     return filtersChanged;
   }
 
-  getSortOrderColumns(columns) {
+  getSortOrderColumns(columns?) {
     return (columns || this.props.columns || []).filter(column => 'sortOrder' in column);
   }
 
-  getFilteredValueColumns(columns) {
+  getFilteredValueColumns(columns?) {
     return (columns || this.props.columns || []).filter(column => 'filteredValue' in column);
   }
 
-  getFiltersFromColumns(columns) {
+  getFiltersFromColumns(columns?) {
     let filters = {};
     this.getFilteredValueColumns(columns).forEach(col => {
       filters[this.getColumnKey(col)] = col.filteredValue;
@@ -224,7 +286,7 @@ export default class Table extends React.Component {
     return filters;
   }
 
-  getSortStateFromColumns(columns) {
+  getSortStateFromColumns(columns?) {
     // return fisrt column which sortOrder is not falsy
     const sortedColumn =
       this.getSortOrderColumns(columns).filter(col => col.sortOrder)[0];
@@ -280,7 +342,7 @@ export default class Table extends React.Component {
       this.setState(newState);
     }
 
-    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, newState)));
+    this.props.onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, newState)));
   }
 
   handleFilter = (column, nextFilters) => {
@@ -306,6 +368,7 @@ export default class Table extends React.Component {
     const newState = {
       selectionDirty: false,
       pagination,
+      filters: null,
     };
     const filtersToSetState = assign({}, filters);
     // Remove filters which is controlled
@@ -327,7 +390,7 @@ export default class Table extends React.Component {
     }
 
     this.setState(newState, () => {
-      props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
+      props.onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, {
         selectionDirty: false,
         filters,
         pagination,
@@ -429,7 +492,7 @@ export default class Table extends React.Component {
     }
     this.setState(newState);
 
-    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
+    this.props.onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, {
       selectionDirty: false,
       pagination,
     })));
@@ -476,12 +539,12 @@ export default class Table extends React.Component {
     );
   }
 
-  getRecordKey(record, index) {
+  getRecordKey(record, index?) {
-    const { rowKey } = this.props;
+    const rowKey = this.props.rowKey;
     if (typeof rowKey === 'function') {
       return rowKey(record, index);
     }
-    return record[rowKey] || index;
+    return record[rowKey as string] || index;
   }
 
   renderRowSelection() {
@@ -540,7 +603,7 @@ export default class Table extends React.Component {
     return columns;
   }
 
-  getColumnKey(column, index) {
+  getColumnKey(column, index?) {
     return column.key || column.dataIndex || index;
   }
 
@@ -622,7 +685,7 @@ export default class Table extends React.Component {
     pagination.onShowSizeChange(current, pageSize);
     const nextPagination = assign({}, pagination, { pageSize, current });
     this.setState({ pagination: nextPagination });
-    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
+    this.props.onChange.apply(null, this.prepareParamsArguments(assign({}, this.state, {
       pagination: nextPagination,
     })));
   }
@@ -652,11 +715,11 @@ export default class Table extends React.Component {
       /> : null;
   }
 
-  prepareParamsArguments(state) {
+  prepareParamsArguments(state: any): [any, string[], Object] {
     // 准备筛选、排序、分页的参数
     const pagination = state.pagination;
     const filters = state.filters;
-    const sorter = {};
+    const sorter: any = {};
     if (state.sortColumn && state.sortOrder) {
       sorter.column = state.sortColumn;
       sorter.order = state.sortOrder;

components/table/filterDropdown.tsx

@@ -9,7 +9,18 @@ const FilterDropdownMenuWrapper = ({ onClick, children }) => (
   <div className="ant-table-filter-dropdown" onClick={onClick}>{children}</div>
 );
 
-export default class FilterMenu extends React.Component {
+export interface FilterMenuProps {
+  locale: any;
+  selectedKeys: string[];
+  column: {
+    filterMultiple?: boolean,
+    filterDropdown?: React.ReactNode,
+    filters?: string[]
+  };
+  confirmFilter: (column: Object, selectedKeys: string[]) => any;
+}
+
+export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   static defaultProps = {
     handleFilter() {},
     column: null,

custom-typings.d.ts

@@ -151,6 +151,8 @@ declare module 'rc-progress' {
 }
 
 declare module 'rc-menu' {
+  export const SubMenu: any;
+  export const Item: any;
   export default function(): any;
 }