github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: optimize table typescript support (#3087) 

* chore: optimize table typescript support

* chore: update table type

* fix: table type error

* fix: columns shuold not have default value

* fix: sortDirections and scroll should not have default value

* chore: rowSelectionType as tuple
pull/3089/head
Amour1688 2020-11-02 15:52:02 +08:00 committed by GitHub
parent 71a3691edc
commit 0c520520be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/table/Column.tsx
View File

@ -1,9 +1,9 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { ColumnProps } from './interface'; import { columnProps } from './interface';
export default defineComponent({ export default defineComponent({
name: 'ATableColumn', name: 'ATableColumn',
props: ColumnProps, props: columnProps,
render() { render() {
return null; return null;
}, },

50
components/table/Table.tsx
View File

@ -17,11 +17,11 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import { import {
TableProps, tableProps,
TableComponents, TableComponents,
TableState, TableState,
ITableProps, TableProps,
IColumnProps, ColumnProps,
TableStateFilters, TableStateFilters,
} from './interface'; } from './interface';
import Pagination from '../pagination'; import Pagination from '../pagination';
@ -38,15 +38,15 @@ function stopPropagation(e) {
e.stopPropagation(); e.stopPropagation();
} }
function getRowSelection(props: ITableProps) { function getRowSelection(props: TableProps) {
return props.rowSelection || {}; return props.rowSelection || {};
} }
function getColumnKey(column: IColumnProps, index?: number) { function getColumnKey(column: ColumnProps, index?: number) {
return column.key || column.dataIndex || index; 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) { if (a && b && a.key && a.key === b.key) {
return true; 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( return flatFilter(
columns || (state || {}).columns || [], 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 = {}; const filters = {};
getFilteredValueColumns(state, columns).forEach((col: IColumnProps) => { getFilteredValueColumns(state, columns).forEach((col: ColumnProps) => {
const colKey = getColumnKey(col); const colKey = getColumnKey(col);
filters[colKey] = col.filteredValue; filters[colKey] = col.filteredValue;
}); });
@ -117,26 +117,28 @@ function isFiltersChanged(state: TableState, filters: TableStateFilters[]) {
return Object.keys(filters).some(columnKey => filters[columnKey] !== state.filters[columnKey]); 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({ export default defineComponent({
name: 'Table', name: 'Table',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false, inheritAttrs: false,
Column, Column,
ColumnGroup, ColumnGroup,
props: initDefaultProps(TableProps, { props: defaultTableProps,
dataSource: [],
useFixedHeader: false,
// rowSelection: null,
size: 'default',
loading: false,
bordered: false,
indentSize: 20,
locale: {},
rowKey: 'key',
showHeader: true,
sortDirections: ['ascend', 'descend'],
childrenColumnName: 'children',
}),
setup() { setup() {
return { return {

4
components/table/index.tsx
View File

@ -1,5 +1,5 @@
import { App, defineComponent } from 'vue'; import { App, defineComponent } from 'vue';
import T from './Table'; import T, { defaultTableProps } from './Table';
import Column from './Column'; import Column from './Column';
import ColumnGroup from './ColumnGroup'; import ColumnGroup from './ColumnGroup';
import {} from './interface'; import {} from './interface';
@ -9,7 +9,7 @@ const Table = defineComponent({
name: 'ATable', name: 'ATable',
Column: T.Column, Column: T.Column,
ColumnGroup: T.ColumnGroup, ColumnGroup: T.ColumnGroup,
props: T.props, props: defaultTableProps,
inheritAttrs: false, inheritAttrs: false,
methods: { methods: {
normalize(elements = []) { normalize(elements = []) {

44
components/table/interface.ts
View File

@ -1,21 +1,21 @@
import { ExtractPropTypes, PropType } from 'vue';
import PropTypes, { withUndefined } from '../_util/vue-types'; import PropTypes, { withUndefined } from '../_util/vue-types';
import { PaginationProps as getPaginationProps } from '../pagination'; import { PaginationProps as getPaginationProps } from '../pagination';
import { SpinProps as getSpinProps } from '../spin'; import { SpinProps as getSpinProps } from '../spin';
import { Store } from './createStore'; import { Store } from './createStore';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import { ExtractPropTypes } from 'vue';
const PaginationProps = getPaginationProps(); const PaginationProps = getPaginationProps();
const SpinProps = getSpinProps(); const SpinProps = getSpinProps();
// export type CompareFn<T> = ((a: T, b: T) => number); export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
export const ColumnFilterItem = PropTypes.shape({ export const ColumnFilterItem = PropTypes.shape({
text: PropTypes.string, text: PropTypes.string,
value: PropTypes.string, value: PropTypes.string,
children: PropTypes.array, children: PropTypes.array,
}).loose; }).loose;
export const ColumnProps = { export const columnProps = {
title: PropTypes.VNodeChild, title: PropTypes.VNodeChild,
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
dataIndex: PropTypes.string, dataIndex: PropTypes.string,
@ -52,7 +52,7 @@ export const ColumnProps = {
// onHeaderCell?: (props: ColumnProps<T>) => any; // onHeaderCell?: (props: ColumnProps<T>) => any;
}; };
export type IColumnProps = Partial<ExtractPropTypes<typeof ColumnProps>>; export type ColumnProps = Partial<ExtractPropTypes<typeof columnProps>>;
export interface TableComponents { export interface TableComponents {
table?: any; table?: any;
@ -80,10 +80,10 @@ export const TableLocale = PropTypes.shape({
collapse: PropTypes.string, collapse: PropTypes.string,
}).loose; }).loose;
export const RowSelectionType = PropTypes.oneOf(['checkbox', 'radio']); export const RowSelectionType = PropTypes.oneOf(tuple('checkbox', 'radio'));
// export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any; // export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any;
export const TableRowSelection = { export const tableRowSelection = {
type: RowSelectionType, type: RowSelectionType,
selectedRowKeys: PropTypes.array, selectedRowKeys: PropTypes.array,
// onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any; // onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
@ -101,10 +101,12 @@ export const TableRowSelection = {
columnTitle: PropTypes.any, columnTitle: PropTypes.any,
}; };
export const TableProps = { export type SortOrder = 'descend' | 'ascend';
export const tableProps = {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
dropdownPrefixCls: PropTypes.string, dropdownPrefixCls: PropTypes.string,
rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, Object]), rowSelection: PropTypes.oneOfType([PropTypes.shape(tableRowSelection).loose, Object]),
pagination: withUndefined( pagination: withUndefined(
PropTypes.oneOfType([ PropTypes.oneOfType([
PropTypes.shape({ PropTypes.shape({
@ -117,7 +119,9 @@ export const TableProps = {
size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')), size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')),
dataSource: PropTypes.array, dataSource: PropTypes.array,
components: PropTypes.object, components: PropTypes.object,
columns: PropTypes.array, columns: {
type: Array as PropType<ColumnProps>,
},
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowClassName: PropTypes.func, rowClassName: PropTypes.func,
expandedRowRender: PropTypes.any, expandedRowRender: PropTypes.any,
@ -137,10 +141,18 @@ export const TableProps = {
showHeader: PropTypes.looseBool, showHeader: PropTypes.looseBool,
footer: PropTypes.func, footer: PropTypes.func,
title: PropTypes.func, title: PropTypes.func,
scroll: PropTypes.object, scroll: {
type: Object as PropType<{
x?: boolean | number | string;
y?: boolean | number | string;
scrollToFirstRowOnChange?: boolean;
}>,
},
childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
bodyStyle: PropTypes.any, bodyStyle: PropTypes.style,
sortDirections: PropTypes.array, sortDirections: {
type: Array as PropType<SortOrder[]>,
},
tableLayout: PropTypes.string, tableLayout: PropTypes.string,
getPopupContainer: PropTypes.func, getPopupContainer: PropTypes.func,
expandIcon: PropTypes.func, expandIcon: PropTypes.func,
@ -153,9 +165,9 @@ export const TableProps = {
// children?: React.ReactNode; // children?: React.ReactNode;
}; };
export type ITableRowSelection = Partial<ExtractPropTypes<typeof TableRowSelection>>; export type TableRowSelection = Partial<ExtractPropTypes<typeof tableRowSelection>>;
export type ITableProps = Partial<ExtractPropTypes<typeof TableProps>>; export type TableProps = Partial<ExtractPropTypes<typeof tableProps>>;
export interface TableStateFilters { export interface TableStateFilters {
[key: string]: string[]; [key: string]: string[];
@ -164,9 +176,9 @@ export interface TableStateFilters {
export interface TableState { export interface TableState {
pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>; pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>;
filters?: TableStateFilters; filters?: TableStateFilters;
sortColumn?: Partial<ExtractPropTypes<typeof ColumnProps>> | null; sortColumn?: ColumnProps | null;
sortOrder?: string; sortOrder?: string;
columns?: IColumnProps[]; columns?: ColumnProps[];
} }
// export type SelectionItemSelectFn = (key: string[]) => any; // export type SelectionItemSelectFn = (key: string[]) => any;