refactor: table ts (#2664)

* refactor: table ts * fix: should pass context to onChange correctly
9 years ago · 978b9f98e7
parent 2ed192db52
commit 978b9f98e7
5 changed files with 102 additions and 18 deletions
--- a/components/dropdown/dropdown.tsx
+++ b/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',
--- a/components/radio/radio.tsx
+++ b/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> {
--- a/components/table/Table.tsx
+++ b/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) {
-    const { rowKey } = this.props;
+  getRecordKey(record, index?) {
+    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;
--- a/components/table/filterDropdown.tsx
+++ b/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,
--- a/custom-typings.d.ts
+++ b/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;
 }