From 0a83ef90debfebf2beaa263f9bf5f94f77e6929e Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 14:23:06 +0800 Subject: [PATCH 1/6] chore: optimize table typescript support --- components/table/Table.tsx | 36 ++++++++++++++++++----------------- components/table/index.tsx | 4 ++-- components/table/interface.ts | 4 ++-- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/components/table/Table.tsx b/components/table/Table.tsx index acc22fda3f..a6553684fc 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -17,10 +17,10 @@ import initDefaultProps from '../_util/props-util/initDefaultProps'; import BaseMixin from '../_util/BaseMixin'; import { defaultConfigProvider } from '../config-provider'; import { - TableProps, + tableProps, TableComponents, TableState, - ITableProps, + TableProps, IColumnProps, TableStateFilters, } from './interface'; @@ -38,7 +38,7 @@ function stopPropagation(e) { e.stopPropagation(); } -function getRowSelection(props: ITableProps) { +function getRowSelection(props: TableProps) { return props.rowSelection || {}; } @@ -117,26 +117,28 @@ function isFiltersChanged(state: TableState, filters: TableStateFilters[]) { return Object.keys(filters).some(columnKey => filters[columnKey] !== state.filters[columnKey]); } +export const defaultTableProps = initDefaultProps(tableProps, { + dataSource: [], + useFixedHeader: false, + // rowSelection: null, + size: 'default', + loading: false, + bordered: false, + indentSize: 20, + locale: {}, + rowKey: 'key', + showHeader: true, + sortDirections: ['ascend', 'descend'], + childrenColumnName: 'children', +}); + export default defineComponent({ name: 'Table', mixins: [BaseMixin], inheritAttrs: false, Column, ColumnGroup, - props: initDefaultProps(TableProps, { - dataSource: [], - useFixedHeader: false, - // rowSelection: null, - size: 'default', - loading: false, - bordered: false, - indentSize: 20, - locale: {}, - rowKey: 'key', - showHeader: true, - sortDirections: ['ascend', 'descend'], - childrenColumnName: 'children', - }), + props: defaultTableProps, setup() { return { diff --git a/components/table/index.tsx b/components/table/index.tsx index 720dbf88a7..a096b6df46 100644 --- a/components/table/index.tsx +++ b/components/table/index.tsx @@ -1,5 +1,5 @@ import { App, defineComponent } from 'vue'; -import T from './Table'; +import T, { defaultTableProps } from './Table'; import Column from './Column'; import ColumnGroup from './ColumnGroup'; import {} from './interface'; @@ -9,7 +9,7 @@ const Table = defineComponent({ name: 'ATable', Column: T.Column, ColumnGroup: T.ColumnGroup, - props: T.props, + props: defaultTableProps, inheritAttrs: false, methods: { normalize(elements = []) { diff --git a/components/table/interface.ts b/components/table/interface.ts index f916128d3f..e1f0c5c277 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -101,7 +101,7 @@ export const TableRowSelection = { columnTitle: PropTypes.any, }; -export const TableProps = { +export const tableProps = { prefixCls: PropTypes.string, dropdownPrefixCls: PropTypes.string, rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, Object]), @@ -155,7 +155,7 @@ export const TableProps = { export type ITableRowSelection = Partial>; -export type ITableProps = Partial>; +export type TableProps = Partial>; export interface TableStateFilters { [key: string]: string[]; From 8476de74886eef771524025e8f9ff06dd24a6fe3 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 14:35:04 +0800 Subject: [PATCH 2/6] chore: update table type --- components/table/Column.tsx | 4 ++-- components/table/interface.ts | 21 ++++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/components/table/Column.tsx b/components/table/Column.tsx index 671a82ed70..a54fc2fcce 100644 --- a/components/table/Column.tsx +++ b/components/table/Column.tsx @@ -1,9 +1,9 @@ import { defineComponent } from 'vue'; -import { ColumnProps } from './interface'; +import { columnProps } from './interface'; export default defineComponent({ name: 'ATableColumn', - props: ColumnProps, + props: columnProps, render() { return null; }, diff --git a/components/table/interface.ts b/components/table/interface.ts index e1f0c5c277..69544ea94f 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -1,9 +1,9 @@ +import { ExtractPropTypes, PropType } from 'vue'; import PropTypes, { withUndefined } from '../_util/vue-types'; import { PaginationProps as getPaginationProps } from '../pagination'; import { SpinProps as getSpinProps } from '../spin'; import { Store } from './createStore'; import { tuple } from '../_util/type'; -import { ExtractPropTypes } from 'vue'; const PaginationProps = getPaginationProps(); const SpinProps = getSpinProps(); @@ -15,7 +15,7 @@ export const ColumnFilterItem = PropTypes.shape({ children: PropTypes.array, }).loose; -export const ColumnProps = { +export const columnProps = { title: PropTypes.VNodeChild, key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), dataIndex: PropTypes.string, @@ -52,7 +52,7 @@ export const ColumnProps = { // onHeaderCell?: (props: ColumnProps) => any; }; -export type IColumnProps = Partial>; +export type ColumnProps = Partial>; export interface TableComponents { table?: any; @@ -83,7 +83,7 @@ export const TableLocale = PropTypes.shape({ export const RowSelectionType = PropTypes.oneOf(['checkbox', 'radio']); // export type SelectionSelectFn = (record: T, selected: boolean, selectedRows: Object[]) => any; -export const TableRowSelection = { +export const tableRowSelection = { type: RowSelectionType, selectedRowKeys: PropTypes.array, // onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any; @@ -104,7 +104,7 @@ export const TableRowSelection = { export const tableProps = { prefixCls: PropTypes.string, dropdownPrefixCls: PropTypes.string, - rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, Object]), + rowSelection: PropTypes.oneOfType([PropTypes.shape(tableRowSelection).loose, Object]), pagination: withUndefined( PropTypes.oneOfType([ PropTypes.shape({ @@ -117,7 +117,10 @@ export const tableProps = { size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')), dataSource: PropTypes.array, components: PropTypes.object, - columns: PropTypes.array, + columns: { + type: Array as PropType, + default: () => [], + }, rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), rowClassName: PropTypes.func, expandedRowRender: PropTypes.any, @@ -153,7 +156,7 @@ export const tableProps = { // children?: React.ReactNode; }; -export type ITableRowSelection = Partial>; +export type TableRowSelection = Partial>; export type TableProps = Partial>; @@ -164,9 +167,9 @@ export interface TableStateFilters { export interface TableState { pagination?: Partial>; filters?: TableStateFilters; - sortColumn?: Partial> | null; + sortColumn?: ColumnProps | null; sortOrder?: string; - columns?: IColumnProps[]; + columns?: ColumnProps[]; } // export type SelectionItemSelectFn = (key: string[]) => any; From dc336b3ed08695a07f4bd16e7295e4a976e427b2 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 14:44:35 +0800 Subject: [PATCH 3/6] fix: table type error --- components/table/Table.tsx | 14 +++++++------- components/table/interface.ts | 20 ++++++++++++++++---- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/components/table/Table.tsx b/components/table/Table.tsx index a6553684fc..787f46ef4b 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -21,7 +21,7 @@ import { TableComponents, TableState, TableProps, - IColumnProps, + ColumnProps, TableStateFilters, } from './interface'; import Pagination from '../pagination'; @@ -42,11 +42,11 @@ function getRowSelection(props: TableProps) { return props.rowSelection || {}; } -function getColumnKey(column: IColumnProps, index?: number) { +function getColumnKey(column: ColumnProps, index?: number) { return column.key || column.dataIndex || index; } -function isSameColumn(a: IColumnProps, b: IColumnProps): boolean { +function isSameColumn(a: ColumnProps, b: ColumnProps): boolean { if (a && b && a.key && a.key === b.key) { return true; } @@ -94,16 +94,16 @@ function isTheSameComponents(components1: TableComponents = {}, components2: Tab ); } -function getFilteredValueColumns(state: TableState, columns?: IColumnProps) { +function getFilteredValueColumns(state: TableState, columns?: ColumnProps) { return flatFilter( columns || (state || {}).columns || [], - (column: IColumnProps) => typeof column.filteredValue !== 'undefined', + (column: ColumnProps) => typeof column.filteredValue !== 'undefined', ); } -function getFiltersFromColumns(state: TableState, columns: IColumnProps) { +function getFiltersFromColumns(state: TableState, columns: ColumnProps) { const filters = {}; - getFilteredValueColumns(state, columns).forEach((col: IColumnProps) => { + getFilteredValueColumns(state, columns).forEach((col: ColumnProps) => { const colKey = getColumnKey(col); filters[colKey] = col.filteredValue; }); diff --git a/components/table/interface.ts b/components/table/interface.ts index 69544ea94f..2afac585f1 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -8,7 +8,7 @@ import { tuple } from '../_util/type'; const PaginationProps = getPaginationProps(); const SpinProps = getSpinProps(); -// export type CompareFn = ((a: T, b: T) => number); +export type CompareFn = (a: T, b: T, sortOrder?: SortOrder) => number; export const ColumnFilterItem = PropTypes.shape({ text: PropTypes.string, value: PropTypes.string, @@ -101,6 +101,8 @@ export const tableRowSelection = { columnTitle: PropTypes.any, }; +export type SortOrder = 'descend' | 'ascend'; + export const tableProps = { prefixCls: PropTypes.string, dropdownPrefixCls: PropTypes.string, @@ -140,10 +142,20 @@ export const tableProps = { showHeader: PropTypes.looseBool, footer: PropTypes.func, title: PropTypes.func, - scroll: PropTypes.object, + scroll: { + type: Object as PropType<{ + x?: boolean | number | string; + y?: boolean | number | string; + scrollToFirstRowOnChange?: boolean; + }>, + default: () => ({}), + }, childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), - bodyStyle: PropTypes.any, - sortDirections: PropTypes.array, + bodyStyle: PropTypes.style, + sortDirections: { + type: Array as PropType, + default: () => [], + }, tableLayout: PropTypes.string, getPopupContainer: PropTypes.func, expandIcon: PropTypes.func, From 90b8afe0f4a765b40d28081a29bb8a0ae86b29f0 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 15:27:39 +0800 Subject: [PATCH 4/6] fix: columns shuold not have default value --- components/table/interface.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/components/table/interface.ts b/components/table/interface.ts index 2afac585f1..e5d987f4fb 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -121,7 +121,6 @@ export const tableProps = { components: PropTypes.object, columns: { type: Array as PropType, - default: () => [], }, rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), rowClassName: PropTypes.func, From 9125357f5fd5a38d04f99dae6f499107b79843a3 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 15:30:42 +0800 Subject: [PATCH 5/6] fix: sortDirections and scroll should not have default value --- components/table/interface.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/table/interface.ts b/components/table/interface.ts index e5d987f4fb..fb64815355 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -147,13 +147,11 @@ export const tableProps = { y?: boolean | number | string; scrollToFirstRowOnChange?: boolean; }>, - default: () => ({}), }, childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), bodyStyle: PropTypes.style, sortDirections: { type: Array as PropType, - default: () => [], }, tableLayout: PropTypes.string, getPopupContainer: PropTypes.func, From 32fb3a0ca68d705d404f711b553bfb5520b5c8bd Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Mon, 2 Nov 2020 15:41:34 +0800 Subject: [PATCH 6/6] chore: rowSelectionType as tuple --- components/table/interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/interface.ts b/components/table/interface.ts index fb64815355..6821e4b5b8 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -80,7 +80,7 @@ export const TableLocale = PropTypes.shape({ collapse: PropTypes.string, }).loose; -export const RowSelectionType = PropTypes.oneOf(['checkbox', 'radio']); +export const RowSelectionType = PropTypes.oneOf(tuple('checkbox', 'radio')); // export type SelectionSelectFn = (record: T, selected: boolean, selectedRows: Object[]) => any; export const tableRowSelection = {