From 1de037ae0b36d448b20703ce19d1cddff42d0236 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 28 Apr 2022 17:08:52 +0800 Subject: [PATCH 1/4] chore: update table API docs --- src/common.ts | 2 + src/table/table.md | 95 +++++++++++++++++++++++++++++----------------- src/table/type.ts | 18 ++++++++- 3 files changed, 78 insertions(+), 37 deletions(-) diff --git a/src/common.ts b/src/common.ts index 47e1a25c6e..c121684a25 100644 --- a/src/common.ts +++ b/src/common.ts @@ -23,6 +23,8 @@ export interface StyledProps { className?: string; style?: CSSProperties; } + +export type ReactElementProps = React.DetailedHTMLProps, HTMLElement> /** 通用全局变量 */ export type OptionData = { diff --git a/src/table/table.md b/src/table/table.md index 45445d0280..b0cc1fb489 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -7,7 +7,9 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +allowResizeColumnWidth | Boolean | false | 是否允许调整列宽 | N bordered | Boolean | false | 是否显示表格边框 | N +bottomContent | TNode | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页 | N @@ -15,34 +17,36 @@ empty | TNode | '' | 空表格呈现样式，支持全局配置 `GlobalConfigPro firstFullRow | TNode | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array` | N footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N -headerAffixedTop | Boolean | false | 【开发中】表头吸顶 | N -headerAffixProps | Object | - | 【开发中】表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -height | String / Number | - | 表格高度，超出后会出现滚动条。示例：300, '300', '300px'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N +footerAffixedBottom | Boolean | false | 表尾吸底 | N +footerAffixProps | Object | - | 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps` | N +headerAffixedTop | Boolean | false | 表头吸顶 | N +headerAffixProps | Object | - | 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N hover | Boolean | false | 是否显示鼠标悬浮状态 | N lastFullRow | TNode | - | 尾行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N loading | TNode | false | 加载中状态。值为 true 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：300, '300', '300px'。值为数字类型，会自动加上单位 px | N +maxHeight | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N pagination | Object | - | 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。TS 类型：`PaginationProps`，[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -rowAttributes | Object / Array | - | HTML 标签 `tr` 的属性。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=body` 表示属性作用于 `tfoot` 中的元素。
示例一：{ draggable: true }，示例二：[{ draggable: true }, { title: '超出省略显示' }]。TS 类型：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +rowAttributes | Object / Array / Function | - | HTML 标签 `tr` 的属性。类型为 Function 时，参数说明：`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示属性作用于 `tbody` 中的元素；`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一：{ draggable: true }，
示例二：[{ draggable: true }, { title: '超出省略显示' }]。
示例三：() => [{ draggable: true }]。TS 类型：`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N rowClassName | String / Object / Array / Function | - | 行类名，泛型 T 指表格数据类型。`params.row` 表示行数据；`params.rowIndex` 表示行下标；`params.type=body` 表示类名作用于 `tbody` 中的元素；`params.type=body` 表示类名作用于 `tfoot` 中的元素。TS 类型：`ClassName | ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; type?: 'body' | 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N rowKey | String | - | 必需。使用 rowKey 唯一标识一行数据 | Y rowspanAndColspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -scroll | Object | - | 懒加载和虚拟滚动。TS 类型：`TableScroll` | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TableScroll` | N size | String | medium | 表格尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N stripe | Boolean | false | 是否显示斑马纹 | N tableContentWidth | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N tableLayout | String | fixed | 表格布局方式。可选项：auto/fixed | N -topContent | TNode | - | 表格顶部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +topContent | TNode | - | 表格顶部内容，可以用于自定义列设置、顶部查询条件等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N verticalAlign | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N onCellClick | Function | | TS 类型：`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N onPageChange | Function | | TS 类型：`(pageInfo: PageInfo, newDataSource: Array) => void`
分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | N onRowClick | Function | | TS 类型：`(context: RowEventContext) => void`
行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N -onRowDbClick | Function | | TS 类型：`(context: RowEventContext) => void`
行双击时触发，泛型 T 指表格数据类型 | N -onRowHover | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标悬浮到行时触发，泛型 T 指表格数据类型 | N +onRowDblclick | Function | | TS 类型：`(context: RowEventContext) => void`
行双击时触发，泛型 T 指表格数据类型 | N onRowMousedown | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行按下时触发，泛型 T 指表格数据类型 | N onRowMouseenter | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行进入时触发，泛型 T 指表格数据类型 | N onRowMouseleave | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行离开时触发，泛型 T 指表格数据类型 | N +onRowMouseover | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标悬浮到行时触发，泛型 T 指表格数据类型 | N onRowMouseup | Function | | TS 类型：`(context: RowEventContext) => void`
鼠标在表格行按下又弹起时触发，泛型 T 指表格数据类型 | N onScroll | Function | | TS 类型：`(params: { e: WheelEvent }) => void`
表格内容滚动时触发 | N onScrollX | Function | | TS 类型：`(params: { e: WheelEvent }) => void`
已废弃。表格内容横向滚动时触发。请更为使用 `onScroll` 事件 | N @@ -61,10 +65,9 @@ colKey | String | - | 渲染列所需字段 | N ellipsis | TNode | false | 内容超出时，是否显示省略号。值为 `true`，则浮层默认显示单元格内容；值类型为 `Function` 则自定义浮层显示内容；值类型为 `Object`，则自动透传属性到 Popup 组件。TS 类型：`boolean | TNode> | PopupProps`，[Popup API Documents](./popup?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N fixed | String | left | 固定列显示位置。可选项：left/right | N foot | String / Function | - | 自定义表尾内容。TS 类型：`string | TNode | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -minWidth | String / Number | - | 列最小宽度 | N render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' | 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N title | String / Function | - | 自定义表头渲染，优先级高于 render。TS 类型：`string | TNode | TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -width | String / Number | - | 列宽 | N +width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N ### PrimaryTable Props @@ -73,10 +76,14 @@ width | String / Number | - | 列宽 | N className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N asyncLoading | TNode | - | 异步加载状态。值为 `loading` 显示默认文字 “正在加载中，请稍后”，值为 `loading-more` 显示“点击加载更多”，值为其他，表示完全自定义异步加载区域内容。TS 类型：`'loading' | 'load-more' | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -columnController | Object | - | 【开发中】自定义显示列控制器，值为空不会显示。
`columnController.fields` 表示只允许用户对数组里面的列进行显示或隐藏的控制，默认为全部字段。
`columnController.displayType` 是指字段呈现方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐，默认为 `auto-width`。
支持透传 CheckboxGroup 和 Dialog 组件等全部属性。TS 类型：`TableColumnController` `interface TableColumnController { fields?: string[]; displayType: 'fixed-width' | 'auto-width'; checkboxProps?: CheckboxGroupProps; dialogProps?: DialogProps }` `import { CheckboxGroupProps } from '@Checkbox'`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -columnControllerContent | TNode | - | 【开发中】自定义显示列控制器的内容呈现，可以填充任意内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +columnController | Object | - | 自定义显示列控制器，值为空不会显示。具体属性请看下方 `TableColumnController` 文档。TS 类型：`TableColumnController` | N +columnControllerVisible | Boolean | undefined | 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制 | N +defaultColumnControllerVisible | Boolean | undefined | 是否显示列配置弹框控制器，只要该属性值不为 `undefined`，弹框的显示/隐藏完全由该属性控制。非受控属性 | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N -dragSort | Boolean | false | 是否开启拖拽排序 | N +displayColumns | Array | - | 列配置功能中，当前显示的列。TS 类型：`CheckboxGroupValue` | N +defaultDisplayColumns | Array | - | 列配置功能中，当前显示的列。非受控属性。TS 类型：`CheckboxGroupValue` | N +dragSort | String | - | 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用。可选项：row/row-handler/col/drag-col | N +dragSortOptions | Object | - | 拖拽排序扩展参数，具体参数见 [Sortable](https://github.com/SortableJS/Sortable)。TS 类型：`SortableOptions` | N expandedRow | TNode | - | 展开行内容，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] | BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N expandedRowKeys | Array | [] | 展开行。TS 类型：`Array` | N defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型：`Array` | N @@ -84,23 +91,24 @@ expandIcon | TNode | true | 用于控制是否显示「展开图标列」，值 expandOnRowClick | Boolean | - | 是否允许点击行展开 | N filterIcon | TElement | - | 自定义过滤图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filterRow | TNode | - | 自定义过滤状态行及清空筛选等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -filterValue | Object | - | 过滤数据的值。TS 类型：`FilterValue` `type FilterValue = { [key: string]: FilterItemValue }` `type FilterItemValue = string | number | undefined | Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: FilterItemValue }` `type FilterItemValue = string | number | undefined | Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +filterValue | Object | - | 过滤数据的值。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型：`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N multipleSort | Boolean | false | 是否支持多列排序 | N selectedRowKeys | Array | - | 选中的行，控制属性。TS 类型：`Array` | N defaultSelectedRowKeys | Array | - | 选中的行，控制属性。非受控属性。TS 类型：`Array` | N -showDragCol | Boolean | false | 【讨论中-待定】是否显示为通过拖拽图标进行排序 | N sort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N defaultSort | Object / Array | - | 排序控制。sortBy 排序字段；descending 是否进行降序排列。值为数组时，表示正进行多字段排序。非受控属性。TS 类型：`TableSort` `type TableSort = SortInfo | Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N sortIcon | TElement | - | 自定义排序图标，支持全局配置 `GlobalConfigProvider`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序 | N -`Omit, 'columns'>` | - | - | 继承 `Omit, 'columns'>` 中的全部 API | N +sortOnRowDraggable | Boolean | false | 已废弃。允许表格行拖拽时排序。请更为使用 `dragSort="row"` | N +`Omit, 'columns' | 'onCellClick'>` | \- | - | 继承 `Omit, 'columns' | 'onCellClick'>` 中的全部 API | N onAsyncLoadingClick | Function | | TS 类型：`(context: { status: 'loading' | 'load-more' }) => void`
异步加载区域被点击时触发 | N onCellClick | Function | | TS 类型：`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N -onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext>) => void`
分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
| N -onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
【开发中】列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck' }`

`import { CheckboxGroupValue } from '@Checkbox'`
| N -onDataChange | Function | | TS 类型：`(data: Array) => void`
表格数据发生变化时触发，比如：本地排序方法 sorter | N -onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T }`
| N +onChange | Function | | TS 类型：`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发，泛型 T 指表格数据类型，`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'`
| N +onColumnChange | Function | | TS 类型：`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列；`context.currentColumn` 表示本次变化操作的列，值不存在表示全选操作；`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' | 'uncheck'; e?: ChangeEvent }`
| N +onColumnControllerVisibleChange | Function | | TS 类型：`(visible: boolean, context: { trigger: 'cancel' | 'confirm' }) => void`
列配置弹窗显示或隐藏变化时触发 | N +onDataChange | Function | | TS 类型：`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发，第一个参数指变化后的数据，第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发，`currentData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; currentData: T[]; e: SortableEvent; sort: 'row' | 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array }`
| N onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型 | N onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' | 'check'; currentRowKey?: string; currentRowData?: T }`
| N @@ -112,15 +120,17 @@ onSortChange | Function | | TS 类型：`(sort: TableSort, options: SortOptions -- | -- | -- | -- | -- addToColumnController | Boolean | true | 【开发中】是否允许用户选择是否显示当前列，表格属性 `showColumnController` 为真时有效 | N cell | String / Function | - | 自定义单元格渲染，优先级高于 render。泛型 T 指表格数据类型。TS 类型：`string | TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -checkProps | Object / Function | - | 透传参数，colKey 值为 row-select 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型：`CheckProps` `type CheckProps = CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -disabled | Function | - | 是否禁用行选中，colKey 值为 row-select 时，配置有效。TS 类型：`(options: {row: T; rowIndex: number }) => boolean` | N +checkProps | Object / Function | - | 透传参数，`colKey` 值为 `row-select` 时，配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型：`CheckProps` `type CheckProps = CheckboxProps | RadioProps | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps)` `import { CheckboxProps } from '@Checkbox'`，[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array>` | N +colKey | String | - | 渲染列所需字段，必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列 | N +disabled | Function | - | 是否禁用行选中，`colKey` 值为 `row-select` 时，配置有效。TS 类型：`(options: {row: T; rowIndex: number }) => boolean` | N filter | Object | - | 过滤规则，支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件，可通过 `filter.component` 实现，自定义过滤组件需要包含参数 value 和事件 change。TS 类型：`TableColumnFilter` | N render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序，返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型。TS 类型：`boolean | SorterFun` `type SorterFun = (a: T, b: T) => number`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N sortType | String | all | 当前列支持排序的方式，desc 表示当前列只能进行降序排列；asc 表示当前列只能进行升序排列；all 表示当前列既可升序排列，又可以降序排列。可选项：desc/asc/all。TS 类型：`SortType` `type SortType = 'desc' | 'asc' | 'all'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染，插槽名称为 title 的值。优先级高于 render。TS 类型：`string | TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -type | String | single | 行选中有两种模式：单选和多选。`colKey` 值为 `row-select` 时，表示当前列选中项， `type=single/multiple` 有效。可选项：single/multiple | N -`Omit` | - | - | 继承 `Omit` 中的全部 API | N +type | String | single | `colKey` 值为 `row-select` 时表示行选中列，有两种模式：单选和多选。 `type=single` 表示单选，`type=multiple` 表示多选。可选项：single/multiple | N +`Omit` | \- | - | 继承 `Omit` 中的全部 API | N ### EnhancedTable Props @@ -129,7 +139,8 @@ type | String | single | 行选中有两种模式：单选和多选。`colKey` className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N tree | Object | - | 树形结构相关配置。`tree.indent` 表示树结点缩进距离，单位：px，默认为 24px。`tree.treeNodeColumnIndex` 表示树结点在第几列渲染，默认为 0 ，第一列。`tree.childrenKey` 表示树形结构子节点字段，默认为 children。`tree.checkStrictly` 表示树形结构的行选中（多选），父子行选中是否独立，默认独立，值为 true。TS 类型：`TableTreeConfig` `interface TableTreeConfig { indent?: number; treeNodeColumnIndex?: number; childrenKey?: 'children'; checkStrictly?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -`PrimaryTableProps` | - | - | 继承 `PrimaryTableProps` 中的全部 API | N +`PrimaryTableProps` | \- | - | 继承 `PrimaryTableProps` 中的全部 API | N +onTreeExpandChange | Function | | TS 类型：`(context: TableTreeExpandChangeContext) => void`
树形结构，用户操作引起节点展开或收起时触发，代码操作不会触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableTreeExpandChangeContext { row: T; rowIndex: number; rowState: TableRowState }`
| N ### EnhancedTableInstanceFunctions 组件实例方法 @@ -138,8 +149,9 @@ tree | Object | - | 树形结构相关配置。`tree.indent` 表示树结点缩 className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N getData | `(key: TableRowValue)` | `TableRowState` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type TableRowValue = string | number`
-remove | `(key: TableRowValue)` | - | 必需。树形结构中，移除指定节点 -setData | `(key: TableRowValue, newRowData: T)` | - | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型 +remove | `(key: TableRowValue)` | \- | 必需。树形结构中，移除指定节点 +setData | `(key: TableRowValue, newRowData: T)` | \- | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型 +toggleExpandData | `(p: { row: T, rowIndex: number})` | \- | 必需。展开或收起树形行 ### TableRowState @@ -149,19 +161,19 @@ disabled | Boolean | false | 表格行是否禁用选中 | N expandChildrenLength | Number | - | 当前节点展开的子节点数量 | N expanded | Boolean | false | 必需。表格行是否展开 | Y level | Number | - | 当前节点层级。TS 类型：`number` | N -parent | - | - | 父节点。TS 类型：`TableRowState` | N +parent | \- | - | 父节点。TS 类型：`TableRowState` | N path | Array | - | 当前节点路径。TS 类型：`TableRowState[]` | N -row | - | - | 必需。原始表格行数据。TS 类型：`T` | Y +row | \- | - | 必需。原始表格行数据。TS 类型：`T` | Y rowIndex | Number | - | 必需。表格行下标 | Y ### TableColumnFilter 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -component | TElement | - | 用于自定义筛选器，只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +component | Object | - | 用于自定义筛选器。只要保证自定义筛选器包含 value 属性 和 change 事件，即可像内置筛选器一样正常使用，示例：`component: DatePicker`。TS 类型：`() => JSX.Element` | N list | Array | - | 用于配置当前筛选器可选值有哪些，仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型：`Array`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N props | Array | - | 用于透传筛选器属性，可以对筛选器进行任何原组件支持的属性配置。TS 类型：`FilterProps` `type FilterProps = RadioProps | CheckboxProps | InputProps | { [key: string]: any }`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N -resetValue | - | - | 重置时设置的值，示例：'' 或 []。TS 类型：`any` | N +resetValue | \- | - | 重置时设置的值，示例：'' 或 []。TS 类型：`any` | N showConfirmAndReset | Boolean | false | 是否显示重置和确认。值为真，过滤事件（filter-change）会在确定时触发；值为假，则数据变化时会立即触发过滤事件 | N type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选框筛选器、输入框筛选器。TS 类型：`FilterType` `type FilterType = 'input' | 'single' | 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N @@ -171,5 +183,18 @@ type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选 -- | -- | -- | -- | -- bufferSize | Number | 20 | 表示表格除可视区域外，额外渲染的行数，避免表格快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N isFixedRowHeight | Boolean | false | 表示表格每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N -rowHeight | Number | - | 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。
`scroll.type` 为 `lazy` 时，`rowHeight` 用于给未渲染的行节点指定一个初始高度，该属性默认会设置为表格第一行的行高（滚动加载行数量 = 滚动距离 / rowHeight）。
`scroll.type` 为 `virtual` 时，`rowHeight` 用于估算每行的大致高度，从而决定应该渲染哪些行，请尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 | N +rowHeight | Number | - | 表格的行高，不会给``元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 | N +threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 | N type | String | - | 必需。表格滚动加载类型，有两种：懒加载和虚拟滚动。
值为 `lazy` ，表示表格滚动时会进行懒加载，非可视区域内的表格内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；
值为`virtual`时，表示表格会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，表格仅渲染该可视区域内的表格内容，当表格需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y + +### TableColumnController + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +buttonProps | Object | - | 自定义列配置按钮，包括 Button 组件的全部属性。比如：按钮颜色和文本。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +checkboxProps | Object | - | 透传复选框组件全部特性。TS 类型：`CheckboxGroupProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +dialogProps | Object | - | 透传弹框组件全部特性，如：防止滚动穿透。TS 类型：`DialogProps`，[Dialog API Documents](./dialog?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N +displayType | String | auto-width | 指列配置弹框中，各列的字段平铺方式：`fixed-width` 表示固定宽度，每行固定数量，横向和纵向均对齐，`auto-width` 表示宽度随列标题数量自由显示，横向铺满，纵向不要求对齐。可选项：fixed-width/auto-width | N +fields | Array | - | 用于设置允许用户对哪些列进行显示或隐藏的控制，默认为全部字段。TS 类型：`string[]` | N +hideTriggerButton | Boolean | false | 是否隐藏表格组件内置的“列配置”按钮 | N +placement | String | top-right | 列配置按钮基于表格的放置位置：左上角、右上角、左下角、右下角等。可选项：top-left/top-right/bottom-left/bottom-right | N diff --git a/src/table/type.ts b/src/table/type.ts index 874530bd62..ab8b4c3586 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -20,6 +20,11 @@ import { TNode, TElement, OptionData, SizeEnum, ClassName, HTMLElementAttributes import { MouseEvent, WheelEvent, ChangeEvent } from 'react'; export interface TdBaseTableProps { + /** + * 是否允许调整列宽 + * @default false + */ + allowResizeColumnWidth?: boolean; /** * 是否显示表格边框 * @default false @@ -62,6 +67,15 @@ export interface TdBaseTableProps { * @default [] */ footData?: Array; + /** + * 表尾吸底 + * @default false + */ + footerAffixedBottom?: boolean; + /** + * 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性 + */ + footerAffixProps?: AffixProps; /** * 表头吸顶 * @default false @@ -98,7 +112,7 @@ export interface TdBaseTableProps { */ maxHeight?: string | number; /** - * 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。 + * 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true` */ pagination?: PaginationProps; /** @@ -290,7 +304,7 @@ export interface TdPrimaryTableProps */ defaultDisplayColumns?: CheckboxGroupValue; /** - * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用。 + * 拖拽排序方式，值为 `row` 表示行拖拽排序，这种方式无法进行文本复制，慎用。值为`row-handler` 表示通过专门的 拖拽手柄 进行 行拖拽排序。值为 `col` 表示列顺序拖拽，列拖拽功能开发中。`drag-col` 已废弃，请勿使用 */ dragSort?: 'row' | 'row-handler' | 'col' | 'drag-col'; /** From 8a927b8e6c206cacb94736111bab7ca8fa3efb93 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Thu, 28 Apr 2022 17:11:19 +0800 Subject: [PATCH 2/4] chore: update table CHANGELOG --- CHANGELOG.md | 2 +- src/table/table.md | 3 --- src/table/type.ts | 14 -------------- 3 files changed, 1 insertion(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fa6316924..c4c7d6b6e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,7 @@ spline: explain ### BREAKING CHANGES -* Table: 重构 `table` 组件, 样式结构有所变动 ([ea678be](https://github.com/Tencent/tdesign-react/commit/ea678be56e466a5a7f4cfaecdea4413d3753ba09)) [@chaishi](https://github.com/chaishi) [@uyarn](https://github.com/uyarn) +* Table: 重构 `table` 组件, 样式结构有所变动，废弃`minWidth`，`排序功能`使用有所调整，详情请参考API和demo的写法 ([ea678be](https://github.com/Tencent/tdesign-react/commit/ea678be56e466a5a7f4cfaecdea4413d3753ba09)) [@chaishi](https://github.com/chaishi) [@uyarn](https://github.com/uyarn) ### Bug Fixes diff --git a/src/table/table.md b/src/table/table.md index b0cc1fb489..d7344f20c0 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -7,7 +7,6 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -allowResizeColumnWidth | Boolean | false | 是否允许调整列宽 | N bordered | Boolean | false | 是否显示表格边框 | N bottomContent | TNode | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array>` | N @@ -17,8 +16,6 @@ empty | TNode | '' | 空表格呈现样式，支持全局配置 `GlobalConfigPro firstFullRow | TNode | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array` | N footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array` | N -footerAffixedBottom | Boolean | false | 表尾吸底 | N -footerAffixProps | Object | - | 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps` | N headerAffixedTop | Boolean | false | 表头吸顶 | N headerAffixProps | Object | - | 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts) | N height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N diff --git a/src/table/type.ts b/src/table/type.ts index ab8b4c3586..b558a17af7 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -20,11 +20,6 @@ import { TNode, TElement, OptionData, SizeEnum, ClassName, HTMLElementAttributes import { MouseEvent, WheelEvent, ChangeEvent } from 'react'; export interface TdBaseTableProps { - /** - * 是否允许调整列宽 - * @default false - */ - allowResizeColumnWidth?: boolean; /** * 是否显示表格边框 * @default false @@ -67,15 +62,6 @@ export interface TdBaseTableProps { * @default [] */ footData?: Array; - /** - * 表尾吸底 - * @default false - */ - footerAffixedBottom?: boolean; - /** - * 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性 - */ - footerAffixProps?: AffixProps; /** * 表头吸顶 * @default false From 3d349510da687be42064bf679e2414eb4cf26823 Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 28 Apr 2022 17:47:06 +0800 Subject: [PATCH 3/4] Update common.ts --- src/common.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common.ts b/src/common.ts index c121684a25..841ab04365 100644 --- a/src/common.ts +++ b/src/common.ts @@ -24,7 +24,6 @@ export interface StyledProps { style?: CSSProperties; } -export type ReactElementProps = React.DetailedHTMLProps, HTMLElement> /** 通用全局变量 */ export type OptionData = { From e2fd8c6bb1cb696b24f679d2bdb0dcb8ab0ee1bf Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 28 Apr 2022 17:47:18 +0800 Subject: [PATCH 4/4] Update common.ts --- src/common.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common.ts b/src/common.ts index 841ab04365..47e1a25c6e 100644 --- a/src/common.ts +++ b/src/common.ts @@ -23,7 +23,6 @@ export interface StyledProps { className?: string; style?: CSSProperties; } - /** 通用全局变量 */ export type OptionData = {