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 4 years ago committed by GitHub
parent 71a3691edc
commit 0c520520be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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;
},

@ -17,11 +17,11 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
import BaseMixin from '../_util/BaseMixin';
import { defaultConfigProvider } from '../config-provider';
import {
TableProps,
tableProps,
TableComponents,
TableState,
ITableProps,
IColumnProps,
TableProps,
ColumnProps,
TableStateFilters,
} from './interface';
import Pagination from '../pagination';
@ -38,15 +38,15 @@ function stopPropagation(e) {
e.stopPropagation();
}
function getRowSelection(props: ITableProps) {
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;
});
@ -117,13 +117,7 @@ function isFiltersChanged(state: TableState, filters: TableStateFilters[]) {
return Object.keys(filters).some(columnKey => filters[columnKey] !== state.filters[columnKey]);
}
export default defineComponent({
name: 'Table',
mixins: [BaseMixin],
inheritAttrs: false,
Column,
ColumnGroup,
props: initDefaultProps(TableProps, {
export const defaultTableProps = initDefaultProps(tableProps, {
dataSource: [],
useFixedHeader: false,
// rowSelection: null,
@ -136,7 +130,15 @@ export default defineComponent({
showHeader: true,
sortDirections: ['ascend', 'descend'],
childrenColumnName: 'children',
}),
});
export default defineComponent({
name: 'Table',
mixins: [BaseMixin],
inheritAttrs: false,
Column,
ColumnGroup,
props: defaultTableProps,
setup() {
return {

@ -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 = []) {

@ -1,21 +1,21 @@
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();
// 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({
text: PropTypes.string,
value: PropTypes.string,
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<T>) => any;
};
export type IColumnProps = Partial<ExtractPropTypes<typeof ColumnProps>>;
export type ColumnProps = Partial<ExtractPropTypes<typeof columnProps>>;
export interface TableComponents {
table?: any;
@ -80,10 +80,10 @@ 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<T> = (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;
@ -101,10 +101,12 @@ export const TableRowSelection = {
columnTitle: PropTypes.any,
};
export const TableProps = {
export type SortOrder = 'descend' | 'ascend';
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 +119,9 @@ 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<ColumnProps>,
},
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowClassName: PropTypes.func,
expandedRowRender: PropTypes.any,
@ -137,10 +141,18 @@ 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;
}>,
},
childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
bodyStyle: PropTypes.any,
sortDirections: PropTypes.array,
bodyStyle: PropTypes.style,
sortDirections: {
type: Array as PropType<SortOrder[]>,
},
tableLayout: PropTypes.string,
getPopupContainer: PropTypes.func,
expandIcon: PropTypes.func,
@ -153,9 +165,9 @@ export const TableProps = {
// 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 {
[key: string]: string[];
@ -164,9 +176,9 @@ export interface TableStateFilters {
export interface TableState {
pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>;
filters?: TableStateFilters;
sortColumn?: Partial<ExtractPropTypes<typeof ColumnProps>> | null;
sortColumn?: ColumnProps | null;
sortOrder?: string;
columns?: IColumnProps[];
columns?: ColumnProps[];
}
// export type SelectionItemSelectFn = (key: string[]) => any;

Loading…
Cancel
Save