From ec024c83713eef66b7096eefc461a85400905acc Mon Sep 17 00:00:00 2001 From: Amour1688 <31695475+Amour1688@users.noreply.github.com> Date: Wed, 19 Aug 2020 15:24:55 +0800 Subject: [PATCH] chore: table props (#2713) * chore: table props * fix: table props --- types/spin.d.ts | 81 ++++---- types/table/column-group.d.ts | 4 +- types/table/column.d.ts | 364 ++++++++++++++++++---------------- types/table/table.d.ts | 72 ++++--- 4 files changed, 277 insertions(+), 244 deletions(-) diff --git a/types/spin.d.ts b/types/spin.d.ts index 4725fa64a..d9c59faef 100644 --- a/types/spin.d.ts +++ b/types/spin.d.ts @@ -5,50 +5,51 @@ import { AntdComponent } from './component'; import { VNodeChild } from 'vue'; +export interface SpinProps { + /** + * specifies a delay in milliseconds for loading state (prevent flush) + * @type number (milliseconds) + */ + delay?: number; + + /** + * vue node of the spinning indicator + * @type any (VNode | slot) + */ + indicator?: VNodeChild | JSX.Element; + + /** + * size of Spin, options: small, default and large + * @default 'default' + * @type string + */ + size?: 'small' | 'default' | 'large'; + + /** + * whether Spin is spinning + * @default true + * @type boolean + */ + spinning?: boolean; + + /** + * customize description content when Spin has children + * @type string + */ + tip?: string; + + /** + * className of wrapper when Spin has children + * @type string + */ + wrapperClassName?: string; +} + export declare class Spin extends AntdComponent { /** * As indicator, you can define the global default spin element * @param param0 indicator */ static setDefaultIndicator({ indicator }: { indicator: any }): void; - $props: { - - /** - * specifies a delay in milliseconds for loading state (prevent flush) - * @type number (milliseconds) - */ - delay?: number; - - /** - * vue node of the spinning indicator - * @type any (VNode | slot) - */ - indicator?: VNodeChild | JSX.Element; - - /** - * size of Spin, options: small, default and large - * @default 'default' - * @type string - */ - size?: 'small' | 'default' | 'large'; - - /** - * whether Spin is spinning - * @default true - * @type boolean - */ - spinning?: boolean; - - /** - * customize description content when Spin has children - * @type string - */ - tip?: string; - - /** - * className of wrapper when Spin has children - * @type string - */ - wrapperClassName?: string; - } + $props: SpinProps; } diff --git a/types/table/column-group.d.ts b/types/table/column-group.d.ts index 90a784d57..880f1c482 100644 --- a/types/table/column-group.d.ts +++ b/types/table/column-group.d.ts @@ -2,8 +2,8 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types +import { VNodeChild, Slots } from 'vue'; import { AntdComponent } from '../component'; -import { VNodeChild } from 'vue'; export declare class ColumnGroup extends AntdComponent { $props: { @@ -18,6 +18,6 @@ export declare class ColumnGroup extends AntdComponent { * such as slots: { title: 'XXX'} * @type object */ - slots?: object; + slots?: Slots; }; } diff --git a/types/table/column.d.ts b/types/table/column.d.ts index 4baca42bc..a67ab22e0 100644 --- a/types/table/column.d.ts +++ b/types/table/column.d.ts @@ -2,8 +2,8 @@ // Definitions by: akki-jat // Definitions: https://github.com/vueComponent/ant-design-vue/types +import { VNodeChild, Slots } from 'vue'; import { AntdComponent } from '../component'; -import { VNodeChild } from 'vue'; export interface ColumnFilterItem { text?: string; @@ -13,179 +13,195 @@ export interface ColumnFilterItem { export declare type SortOrder = 'ascend' | 'descend'; -export interface Record { - text?: any; - record?: object; - index?: number; +export interface RecordProps { + text: any; + record: T; + index: number; } -export declare type CustomRenderFunction = (record: Record) => VNodeChild | JSX.Element; - -export declare class Column extends AntdComponent { - $props: { - /** - * specify how content is aligned - * @default 'left' - * @type string - */ - align?: 'left' | 'right' | 'center'; - - /** - * ellipsize cell content, not working with sorter and filters for now. - * tableLayout would be fixed when ellipsis is true. - * @default false - * @type boolean - */ - ellipsis?: boolean; - - /** - * Span of this column's title - * @type number - */ - colSpan?: number; - - /** - * Display field of the data record, could be set like a.b.c - * @type string - */ - dataIndex?: string; - - /** - * Default filtered values - * @type string[] - */ - defaultFilteredValue?: string[]; - - /** - * Default order of sorted values: 'ascend' 'descend' null - * @type string - */ - defaultSortOrder?: SortOrder; - - /** - * Customized filter overlay - * @type any (slot) - */ - filterDropdown?: any; - - /** - * Whether filterDropdown is visible - * @type boolean - */ - filterDropdownVisible?: boolean; - - /** - * Whether the dataSource is filtered - * @default false - * @type boolean - */ - filtered?: boolean; - - /** - * Controlled filtered value, filter icon will highlight - * @type string[] - */ - filteredValue?: string[]; - - /** - * Customized filter icon - * @default false - * @type any - */ - filterIcon?: any; - - /** - * Whether multiple filters can be selected - * @default true - * @type boolean - */ - filterMultiple?: boolean; - - /** - * Filter menu config - * @type object[] - */ - filters?: ColumnFilterItem[]; - - /** - * Set column to be fixed: true(same as left) 'left' 'right' - * @default false - * @type boolean | string - */ - fixed?: boolean | 'left' | 'right'; - - /** - * Unique key of this column, you can ignore this prop if you've set a unique dataIndex - * @type string - */ - key?: string; - - /** - * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config - * @type Function | ScopedSlot - */ - customRender?: CustomRenderFunction | VNodeChild | JSX.Element; - - /** - * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true - * @type boolean | Function - */ - sorter?: boolean | Function; - - /** - * Order of sorted values: 'ascend' 'descend' false - * @type boolean | string - */ - sortOrder?: boolean | SortOrder; - - /** - * supported sort way, could be 'ascend', 'descend' - * @default ['ascend', 'descend'] - * @type string[] - */ - sortDirections?: string[]; - - /** - * Title of this column - * @type any (string | slot) - */ - title?: VNodeChild | JSX.Element; - - /** - * Width of this column - * @type string | number - */ - width?: string | number; - - /** - * Set props on per cell - * @type Function - */ - customCell?: (record: any, rowIndex: number) => object; - - /** - * Set props on per header cell - * @type object - */ - customHeaderCell?: (column: any) => object; - - /** - * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx - * @type Function - */ - onFilter?: Function; - - /** - * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx - * @type Function - */ - onFilterDropdownVisibleChange?: (visible: boolean) => void; - - /** - * When using columns, you can use this property to configure the properties that support the slot, - * such as slots: { filterIcon: 'XXX'} - * @type object - */ - slots?: object; - }; +export interface FilterDropdownProps { + prefixCls?: string; + setSelectedKeys?: (selectedKeys: string[]) => void; + selectedKeys?: string[]; + confirm?: () => void; + clearFilters?: () => void; + filters?: ColumnFilterItem[]; + getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; + visible?: boolean; +} + +export declare type CustomRenderFunction = (record: RecordProps) => VNodeChild | JSX.Element; + +export interface ColumnProps { + /** + * specify how content is aligned + * @default 'left' + * @type string + */ + align?: 'left' | 'right' | 'center'; + + /** + * ellipsize cell content, not working with sorter and filters for now. + * tableLayout would be fixed when ellipsis is true. + * @default false + * @type boolean + */ + ellipsis?: boolean; + + /** + * Span of this column's title + * @type number + */ + colSpan?: number; + + /** + * Display field of the data record, could be set like a.b.c + * @type string + */ + dataIndex?: string; + + /** + * Default filtered values + * @type string[] + */ + defaultFilteredValue?: string[]; + + /** + * Default order of sorted values: 'ascend' 'descend' null + * @type string + */ + defaultSortOrder?: SortOrder; + + /** + * Customized filter overlay + * @type any (slot) + */ + filterDropdown?: + | VNodeChild + | JSX.Element + | ((props: FilterDropdownProps) => VNodeChild | JSX.Element); + + /** + * Whether filterDropdown is visible + * @type boolean + */ + filterDropdownVisible?: boolean; + + /** + * Whether the dataSource is filtered + * @default false + * @type boolean + */ + filtered?: boolean; + + /** + * Controlled filtered value, filter icon will highlight + * @type string[] + */ + filteredValue?: string[]; + + /** + * Customized filter icon + * @default false + * @type any + */ + filterIcon?: boolean | VNodeChild | JSX.Element; + + /** + * Whether multiple filters can be selected + * @default true + * @type boolean + */ + filterMultiple?: boolean; + + /** + * Filter menu config + * @type object[] + */ + filters?: ColumnFilterItem[]; + + /** + * Set column to be fixed: true(same as left) 'left' 'right' + * @default false + * @type boolean | string + */ + fixed?: boolean | 'left' | 'right'; + + /** + * Unique key of this column, you can ignore this prop if you've set a unique dataIndex + * @type string + */ + key?: string; + + /** + * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config + * @type Function | ScopedSlot + */ + customRender?: CustomRenderFunction | VNodeChild | JSX.Element; + + /** + * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true + * @type boolean | Function + */ + sorter?: boolean | Function; + + /** + * Order of sorted values: 'ascend' 'descend' false + * @type boolean | string + */ + sortOrder?: boolean | SortOrder; + + /** + * supported sort way, could be 'ascend', 'descend' + * @default ['ascend', 'descend'] + * @type string[] + */ + sortDirections?: SortOrder[]; + + /** + * Title of this column + * @type any (string | slot) + */ + title?: VNodeChild | JSX.Element; + + /** + * Width of this column + * @type string | number + */ + width?: string | number; + + /** + * Set props on per cell + * @type Function + */ + customCell?: (record: T, rowIndex: number) => object; + + /** + * Set props on per header cell + * @type object + */ + customHeaderCell?: (column: ColumnProps) => object; + + /** + * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx + * @type Function + */ + onFilter?: (value: any, record: T) => boolean; + + /** + * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx + * @type Function + */ + onFilterDropdownVisibleChange?: (visible: boolean) => void; + + /** + * When using columns, you can use this property to configure the properties that support the slot, + * such as slots: { filterIcon: 'XXX'} + * @type object + */ + slots?: { [key: string]: string }; +} + +export declare class Column extends AntdComponent { + $props: ColumnProps; } diff --git a/types/table/table.d.ts b/types/table/table.d.ts index 953288d85..83f52412d 100644 --- a/types/table/table.d.ts +++ b/types/table/table.d.ts @@ -3,9 +3,9 @@ // Definitions: https://github.com/vueComponent/ant-design-vue/types import { AntdComponent } from '../component'; -import { Spin } from '../spin'; +import { SpinProps } from '../spin'; import { Pagination } from '../pagination'; -import { Column } from './column'; +import { Column, ColumnProps, SortOrder } from './column'; import { ColumnGroup } from './column-group'; import { VNodeChild } from 'vue'; @@ -13,7 +13,14 @@ export declare class PaginationConfig extends Pagination { position?: 'top' | 'bottom' | 'both'; } -export interface customSelection { +export interface SorterResult { + column: ColumnProps; + order: SortOrder; + field: string; + columnKey: string; +} + +export interface SelectionItem { /** * Key * @description Unique key of this selection @@ -36,10 +43,14 @@ export interface customSelection { * @default undefined * @type Function */ - onSelect?: (changeableRowKeys?: any[]) => any; + onSelect?: (changeableRowKeys?: string[]) => void; } -export interface TableRowSelection { +export interface TableCurrentDataSource { + currentDataSource: T[]; +} + +export interface TableRowSelection { /** * checkbox or radio * @default 'checkbox' @@ -57,13 +68,13 @@ export interface TableRowSelection { * Get Checkbox or Radio props * @type Function */ - getCheckboxProps?: (record: any) => any; + getCheckboxProps?: (record: T) => Object; /** * Custom selection config, only displays default selections when set to true * @type boolean | object[] */ - selections?: boolean | customSelection[]; + selections?: boolean | SelectionItem[]; /** * Remove the default Select All and Select Invert selections @@ -94,38 +105,38 @@ export interface TableRowSelection { * Callback executed when selected rows change * @type Function */ - onChange?: (selectedRowKeys: Array, selectedRows: object[]) => any; + onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any; /** * Callback executed when select/deselect one row - * @type Function + * @type FunctionT */ - onSelect?: (record: any, selected: boolean, selectedRows: object[], nativeEvent: Event) => any; + onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any; /** * Callback executed when select/deselect all rows * @type Function */ - onSelectAll?: (selected: boolean, selectedRows: object[], changeRows: object[]) => any; + onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any; /** * Callback executed when row selection is inverted * @type Function */ - onSelectInvert?: (selectedRows: Object[]) => any; + onSelectInvert?: (selectedRows: string[] | number[]) => any; } -export interface TableCustomRecord { - record?: any; +export interface TableCustomRecord { + record?: T; index?: number; } -export interface ExpandedRowRenderRecord extends TableCustomRecord { +export interface ExpandedRowRenderRecord extends TableCustomRecord { indent?: number; expanded?: boolean; } -export declare class Table extends AntdComponent { +export declare class Table extends AntdComponent { static Column: typeof Column; static ColumnGroup: typeof ColumnGroup; @@ -148,7 +159,7 @@ export declare class Table extends AntdComponent { * Columns of table * @type array */ - columns: any[]; + columns?: ColumnProps[]; /** * Override default table elements @@ -160,7 +171,7 @@ export declare class Table extends AntdComponent { * Data record array to be displayed * @type array */ - dataSource: any; + dataSource?: T[]; /** * Expand all rows initially @@ -185,7 +196,7 @@ export declare class Table extends AntdComponent { * Expanded container render for each row * @type Function */ - expandedRowRender?: (record?: ExpandedRowRenderRecord) => any; + expandedRowRender?: (record?: ExpandedRowRenderRecord) => VNodeChild | JSX.Element; /** * Customize row expand Icon. @@ -223,7 +234,7 @@ export declare class Table extends AntdComponent { * @default false * @type boolean | object */ - loading?: boolean | Spin | VNodeChild | JSX.Element; + loading?: boolean | SpinProps | VNodeChild | JSX.Element; /** * i18n text including filter, sort, empty text, etc @@ -242,7 +253,7 @@ export declare class Table extends AntdComponent { * Row's className * @type Function */ - rowClassName?: (record?: TableCustomRecord) => string; + rowClassName?: (record?: TableCustomRecord) => string; /** * Row's unique key, could be a string or function that returns a string @@ -255,7 +266,7 @@ export declare class Table extends AntdComponent { * Row selection config * @type object */ - rowSelection?: TableRowSelection; + rowSelection?: TableRowSelection; /** * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. @@ -283,19 +294,19 @@ export declare class Table extends AntdComponent { * Table title renderer * @type Function | ScopedSlot */ - title?: Function | VNodeChild | JSX.Element; + title?: VNodeChild | JSX.Element; /** * Set props on per header row * @type Function */ - customHeaderRow?: (column: any, index: number) => object; + customHeaderRow?: (column: ColumnProps, index: number) => object; /** * Set props on per row * @type Function */ - customRow?: (record: any, index: number) => object; + customRow?: (record: T, index: number) => object; /** * `table-layout` attribute of table element @@ -329,7 +340,12 @@ export declare class Table extends AntdComponent { * @param sorter * @param currentDataSource */ - onChange?: (pagination: object, filters, sorter, { currentDataSource }) => void; + onChange?: ( + pagination: PaginationConfig, + filters: Partial>, + sorter: SorterResult, + extra: TableCurrentDataSource, + ) => void; /** * Callback executed when the row expand icon is clicked @@ -337,12 +353,12 @@ export declare class Table extends AntdComponent { * @param expanded * @param record */ - onExpand: (expanded, record) => void; + onExpand?: (expande: boolean, record: T) => void; /** * Callback executed when the expanded rows change * @param expandedRows */ - onExpandedRowsChange: (expandedRows: any) => void; + onExpandedRowsChange?: (expandedRows: string[] | number[]) => void; }; }