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

refactor: table

pull/4639/head
tangjinzhou 2021-09-06 17:22:08 +08:00
parent 915100e3bb
commit 844700e561
3 changed files with 7 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
components/table/index1.tsx
View File

@ -1,111 +0,0 @@
import type { App, Plugin } from 'vue';
import { defineComponent } from 'vue';
import T, { defaultTableProps } from './Table';
import type Column from './Column';
import type ColumnGroup from './ColumnGroup';
import {
getOptionProps,
getKey,
getPropsData,
getSlot,
flattenChildren,
} from '../_util/props-util';
const Table = defineComponent({
name: 'ATable',
Column: T.Column,
ColumnGroup: T.ColumnGroup,
inheritAttrs: false,
props: defaultTableProps,
methods: {
normalize(elements = []) {
const flattenElements = flattenChildren(elements);
const columns = [];
flattenElements.forEach(element => {
if (!element) {
return;
}
const key = getKey(element);
const style = element.props?.style || {};
const cls = element.props?.class || '';
const props = getPropsData(element);
const { default: children, ...restSlots } = element.children || {};
const column = { ...restSlots, ...props, style, class: cls };
if (key) {
column.key = key;
}
if (element.type?.__ANT_TABLE_COLUMN_GROUP) {
column.children = this.normalize(typeof children === 'function' ? children() : children);
} else {
const customRender = element.children?.default;
column.customRender = column.customRender || customRender;
}
columns.push(column);
});
return columns;
},
updateColumns(cols = []) {
const columns = [];
const { $slots } = this;
cols.forEach(col => {
const { slots = {}, ...restProps } = col;
const column = {
...restProps,
};
Object.keys(slots).forEach(key => {
const name = slots[key];
if (column[key] === undefined && $slots[name]) {
column[key] = $slots[name];
}
});
// if (slotScopeName && $scopedSlots[slotScopeName]) {
// column.customRender = column.customRender || $scopedSlots[slotScopeName]
// }
if (col.children) {
column.children = this.updateColumns(column.children);
}
columns.push(column);
});
return columns;
},
},
render() {
const { normalize, $slots } = this;
const props: any = { ...getOptionProps(this), ...this.$attrs };
const columns = props.columns ? this.updateColumns(props.columns) : normalize(getSlot(this));
let { title, footer } = props;
const {
title: slotTitle,
footer: slotFooter,
expandedRowRender = props.expandedRowRender,
expandIcon,
} = $slots;
title = title || slotTitle;
footer = footer || slotFooter;
const tProps = {
...props,
columns,
title,
footer,
expandedRowRender,
expandIcon: this.$props.expandIcon || expandIcon,
};
return <T {...tProps} ref="table" />;
},
});
/* istanbul ignore next */
Table.install = function (app: App) {
app.component(Table.name, Table);
app.component(Table.Column.name, Table.Column);
app.component(Table.ColumnGroup.name, Table.ColumnGroup);
return app;
};
export const TableColumn = Table.Column;
export const TableColumnGroup = Table.ColumnGroup;
export default Table as typeof Table &
Plugin & {
readonly Column: typeof Column;
readonly ColumnGroup: typeof ColumnGroup;
};

7
components/table/interface.tsx
View File

@ -195,3 +195,10 @@ type TablePaginationPosition =
export interface TablePaginationConfig extends PaginationProps {
position?: TablePaginationPosition[];
}
export interface TransformCellTextProps {
text: any;
column: ColumnType;
record: any;
index: number;
}

260
components/table/interface1.ts
View File

@ -1,260 +0,0 @@
import type { ExtractPropTypes, PropType, UnwrapRef } from 'vue';
import PropTypes, { withUndefined } from '../_util/vue-types';
import { paginationProps as getPaginationProps, paginationConfig } from '../pagination';
import { spinProps } from '../spin';
import { tuple } from '../_util/type';
const PaginationProps = getPaginationProps();
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 = {
title: PropTypes.any,
key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
dataIndex: PropTypes.string,
customRender: PropTypes.func,
customCell: PropTypes.func,
customHeaderCell: PropTypes.func,
align: PropTypes.oneOf(tuple('left', 'right', 'center')),
ellipsis: PropTypes.looseBool,
filters: PropTypes.arrayOf(ColumnFilterItem),
onFilter: {
type: Function as PropType<(value: any, record: any) => boolean>,
},
filterMultiple: PropTypes.looseBool,
filterDropdown: PropTypes.any,
filterDropdownVisible: PropTypes.looseBool,
onFilterDropdownVisibleChange: {
type: Function as PropType<(visible: boolean) => void>,
},
sorter: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]),
defaultSortOrder: PropTypes.oneOf(tuple('ascend', 'descend')),
colSpan: PropTypes.number,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string,
fixed: withUndefined(
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.oneOf(tuple('left', 'right'))]),
),
filterIcon: PropTypes.any,
filteredValue: PropTypes.array,
filtered: PropTypes.looseBool,
defaultFilteredValue: PropTypes.array,
sortOrder: withUndefined(
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.oneOf(tuple('ascend', 'descend'))]),
),
sortDirections: PropTypes.array,
// children?: ColumnProps<T>[];
// onCell?: (record: T) => any;
// onHeaderCell?: (props: ColumnProps<T>) => any;
};
export type ColumnProps = Partial<ExtractPropTypes<typeof columnProps>> & {
slots?: {
title?: string;
filterIcon?: string;
filterDropdown?: string;
customRender?: string;
[key: string]: string | undefined;
};
};
export interface TableComponents {
table?: any;
header?: {
wrapper?: any;
row?: any;
cell?: any;
};
body?: {
wrapper?: any;
row?: any;
cell?: any;
};
}
export const TableLocale = PropTypes.shape({
filterTitle: PropTypes.string,
filterConfirm: PropTypes.any,
filterReset: PropTypes.any,
emptyText: PropTypes.any,
selectAll: PropTypes.any,
selectInvert: PropTypes.any,
sortTitle: PropTypes.string,
expand: PropTypes.string,
collapse: PropTypes.string,
}).loose;
export const RowSelectionType = PropTypes.oneOf(tuple('checkbox', 'radio'));
// export type SelectionSelectFn<T> = (record: T, selected: boolean, selectedRows: Object[]) => any;
export const tableRowSelection = {
type: RowSelectionType,
selectedRowKeys: PropTypes.array,
// onChange?: (selectedRowKeys: string[] | number[], selectedRows: Object[]) => any;
getCheckboxProps: PropTypes.func,
// onSelect?: SelectionSelectFn<T>;
// onSelectAll?: (selected: boolean, selectedRows: Object[], changeRows: Object[]) => any;
// onSelectInvert?: (selectedRows: Object[]) => any;
selections: withUndefined(PropTypes.oneOfType([PropTypes.array, PropTypes.looseBool])),
hideDefaultSelections: PropTypes.looseBool,
fixed: PropTypes.looseBool,
columnWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
selectWay: PropTypes.oneOf(
tuple('onSelect', 'onSelectMultiple', 'onSelectAll', 'onSelectInvert'),
),
columnTitle: PropTypes.any,
};
export type SortOrder = 'descend' | 'ascend';
const paginationProps = paginationConfig();
export const tableProps = {
prefixCls: PropTypes.string,
dropdownPrefixCls: PropTypes.string,
rowSelection: PropTypes.oneOfType([PropTypes.shape(tableRowSelection).loose, Object]),
pagination: withUndefined(
PropTypes.oneOfType([
PropTypes.shape<Partial<ExtractPropTypes<typeof paginationProps>>>(paginationProps).loose,
PropTypes.looseBool,
]),
),
size: PropTypes.oneOf(tuple('default', 'middle', 'small', 'large')),
dataSource: PropTypes.array,
components: PropTypes.object,
columns: {
type: Array as PropType<ColumnProps>,
},
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowClassName: PropTypes.func,
expandedRowRender: PropTypes.any,
defaultExpandAllRows: PropTypes.looseBool,
defaultExpandedRowKeys: PropTypes.array,
expandedRowKeys: PropTypes.array,
expandIconAsCell: PropTypes.looseBool,
expandIconColumnIndex: PropTypes.number,
expandRowByClick: PropTypes.looseBool,
loading: PropTypes.oneOfType([PropTypes.shape(spinProps()).loose, PropTypes.looseBool]),
locale: TableLocale,
indentSize: PropTypes.number,
customRow: PropTypes.func,
customHeaderRow: PropTypes.func,
useFixedHeader: PropTypes.looseBool,
bordered: PropTypes.looseBool,
showHeader: PropTypes.looseBool,
footer: PropTypes.func,
title: PropTypes.func,
scroll: {
type: Object as PropType<{
x?: boolean | number | string;
y?: boolean | number | string;
scrollToFirstRowOnChange?: boolean;
}>,
},
childrenColumnName: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
bodyStyle: PropTypes.style,
sortDirections: {
type: Array as PropType<SortOrder[]>,
},
tableLayout: PropTypes.string,
getPopupContainer: PropTypes.func,
expandIcon: PropTypes.func,
transformCellText: PropTypes.func,
onExpandedRowsChange: PropTypes.func,
onExpand: PropTypes.func,
onChange: PropTypes.func,
onRowClick: PropTypes.func,
// style?: React.CSSProperties;
// children?: React.ReactNode;
};
export type TableRowSelection = Partial<ExtractPropTypes<typeof tableRowSelection>>;
export type TableProps = Partial<ExtractPropTypes<typeof tableProps>>;
export interface TableStateFilters {
[key: string]: string[];
}
export interface TableState {
pagination?: Partial<ExtractPropTypes<typeof PaginationProps>>;
filters?: TableStateFilters;
sortColumn?: ColumnProps | null;
sortOrder?: SortOrder;
columns?: ColumnProps[];
}
export interface TransformCellTextProps {
text: any;
column: ColumnProps;
record: any;
index: number;
}
// export type SelectionItemSelectFn = (key: string[]) => any;
// export interface SelectionItem {
// key: PropTypes.string,
// text: PropTypes.any,
// onSelect: SelectionItemSelectFn;
// }
export type TableStore = UnwrapRef<{
selectedRowKeys: any[];
selectionDirty: boolean;
}>;
export const SelectionCheckboxAllProps = {
propsSymbol: PropTypes.any,
store: PropTypes.any,
locale: PropTypes.any,
disabled: PropTypes.looseBool,
getCheckboxPropsByItem: PropTypes.func,
getRecordKey: PropTypes.func,
data: PropTypes.array,
prefixCls: PropTypes.string,
hideDefaultSelections: PropTypes.looseBool,
selections: PropTypes.oneOfType([PropTypes.array, PropTypes.looseBool]),
getPopupContainer: PropTypes.func,
onSelect: PropTypes.func,
};
// export interface SelectionCheckboxAllState {
// checked: PropTypes.looseBool,
// indeterminate: PropTypes.looseBool,
// }
export const SelectionBoxProps = {
store: PropTypes.any,
type: RowSelectionType,
defaultSelection: PropTypes.array,
rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
name: PropTypes.string,
disabled: PropTypes.looseBool,
id: PropTypes.string,
// onChange: React.ChangeEventHandler<HTMLInputElement>;
};
// export interface SelectionBoxState {
// checked?: PropTypes.looseBool,
// }
export const FilterMenuProps = {
locale: TableLocale,
selectedKeys: PropTypes.array,
column: PropTypes.object,
confirmFilter: PropTypes.func,
prefixCls: PropTypes.string,
dropdownPrefixCls: PropTypes.string,
getPopupContainer: PropTypes.func,
handleFilter: PropTypes.func,
};
// export interface FilterMenuState {
// selectedKeys: string[];
// keyPathOfSelectedItem: { [key: string]: string };
// visible?: PropTypes.looseBool,
// }