diff --git a/src/_common b/src/_common index 9cfa842e8..f3402b914 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 9cfa842e877482e3f86f92fca49da0abb3ac8144 +Subproject commit f3402b9140f1ede9c89bacee0865281f421beee9 diff --git a/src/table/EnhancedTable.tsx b/src/table/EnhancedTable.tsx index fc6a85c87..135ecfedf 100644 --- a/src/table/EnhancedTable.tsx +++ b/src/table/EnhancedTable.tsx @@ -17,7 +17,8 @@ const EnhancedTable = forwardRef((props, const primaryTableRef = useRef(); // treeInstanceFunctions 属于对外暴露的 Ref 方法 - const { store, dataSource, formatTreeColumn, swapData, ...treeInstanceFunctions } = useTreeData(props); + const { store, dataSource, formatTreeColumn, swapData, onExpandFoldIconClick, ...treeInstanceFunctions } = + useTreeData(props); const treeDataMap = store?.treeDataMap; @@ -48,7 +49,7 @@ const EnhancedTable = forwardRef((props, const onEnhancedTableRowClick: TdPrimaryTableProps['onRowClick'] = (p) => { if (props.tree?.expandTreeNodeOnClick) { - treeInstanceFunctions.toggleExpandData( + onExpandFoldIconClick( { row: p.row, rowIndex: p.index, diff --git a/src/table/_example/editable-cell.jsx b/src/table/_example/editable-cell.jsx index e0b5f4a92..5c6d55d86 100644 --- a/src/table/_example/editable-cell.jsx +++ b/src/table/_example/editable-cell.jsx @@ -115,6 +115,7 @@ export default function EditableCellTable() { title: '申请事项', colKey: 'letters', cell: ({ row }) => row?.letters?.join('、'), + width: 280, edit: { keepEditMode: true, component: Select, diff --git a/src/table/_example/editable-row.jsx b/src/table/_example/editable-row.jsx index b4e7c578c..b525e03a6 100644 --- a/src/table/_example/editable-row.jsx +++ b/src/table/_example/editable-row.jsx @@ -187,6 +187,7 @@ export default function EditableRowTable() { title: '申请事项', colKey: 'letters', cell: ({ row }) => row?.letters?.join('、'), + width: 200, edit: { component: Select, // props, 透传全部属性到 Select 组件 @@ -229,7 +230,6 @@ export default function EditableRowTable() { { title: '操作栏', colKey: 'operate', - width: 150, cell: ({ row }) => { const editable = editableRowKeys.includes(row.key); return ( diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts index 7dd07e841..e176ba214 100644 --- a/src/table/hooks/tree-store.ts +++ b/src/table/hooks/tree-store.ts @@ -1,7 +1,7 @@ /* eslint-disable class-methods-use-this */ /* eslint-disable no-param-reassign */ import get from 'lodash/get'; -import { isRowSelectedDisabled } from '../utils'; +import { isRowSelectedDisabled } from '../../_common/js/table/utils'; import { PrimaryTableCol, TableRowState, TableRowValue, TableRowData } from '../type'; import log from '../../_common/js/log'; diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts index 789bd7afe..42171d59b 100644 --- a/src/table/hooks/useDragSort.ts +++ b/src/table/hooks/useDragSort.ts @@ -10,7 +10,7 @@ import useLatest from '../../_util/useLatest'; import log from '../../_common/js/log'; import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement'; import { BaseTableColumns } from '../interface'; -import { getColumnDataByKey, getColumnIndexByKey } from '../utils'; +import { getColumnDataByKey, getColumnIndexByKey } from '../../_common/js/table/utils'; export default function useDragSort( props: TdPrimaryTableProps, diff --git a/src/table/hooks/useEditableRow.ts b/src/table/hooks/useEditableRow.ts index db5ef07ae..607d7060d 100644 --- a/src/table/hooks/useEditableRow.ts +++ b/src/table/hooks/useEditableRow.ts @@ -4,7 +4,7 @@ import isFunction from 'lodash/isFunction'; import { PrimaryTableProps } from '../interface'; import { validate } from '../../form/formModel'; import { AllValidateResult } from '../../form'; -import { getEditableKeysMap } from '../utils'; +import { getEditableKeysMap } from '../../_common/js/table/utils'; import { PrimaryTableRowEditContext, TableRowData, TableErrorListMap } from '../type'; export type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] }; diff --git a/src/table/hooks/useFilter.tsx b/src/table/hooks/useFilter.tsx index b9ca1768e..fad1cbc7e 100644 --- a/src/table/hooks/useFilter.tsx +++ b/src/table/hooks/useFilter.tsx @@ -2,10 +2,11 @@ import React, { useEffect, useState, MutableRefObject } from 'react'; import isFunction from 'lodash/isFunction'; import useClassName from './useClassName'; import TButton from '../../button'; -import { TdPrimaryTableProps, PrimaryTableCol, TableRowData, FilterValue } from '../type'; +import { TdPrimaryTableProps, PrimaryTableCol, TableRowData, FilterValue, TableFilterChangeContext } from '../type'; import useControlled from '../../hooks/useControlled'; import TableFilterController from '../FilterController'; import { useLocaleReceiver } from '../../locale/LocalReceiver'; +import { getColumnsResetValue } from '../../_common/js/table/utils'; function isFilterValueExist(value: any) { const isArrayTrue = value instanceof Array && value.length; @@ -27,6 +28,7 @@ function filterEmptyData(data: FilterValue) { } export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: MutableRefObject) { + const { columns } = props; const [locale, t] = useLocaleReceiver('table'); const { tableFilterClasses, isFocusClass } = useClassName(); const [isTableOverflowHidden, setIsTableOverflowHidden] = useState(); @@ -101,12 +103,16 @@ export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: M }; setInnerFilterValue(filterValue); if (!column.filter.showConfirmAndReset) { - emitFilterChange(filterValue, column); + emitFilterChange(filterValue, 'filter-change', column); } } - function emitFilterChange(filterValue: FilterValue, column?: PrimaryTableCol) { - setTFilterValue(filterValue, { col: column }); + function emitFilterChange( + filterValue: FilterValue, + trigger: TableFilterChangeContext['trigger'], + column?: PrimaryTableCol, + ) { + setTFilterValue(filterValue, { col: column, trigger }); props.onChange?.({ filter: filterValue }, { trigger: 'filter' }); } @@ -122,15 +128,16 @@ export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: M column.filter.resetValue || '', }; - emitFilterChange(filterValue, column); + emitFilterChange(filterValue, 'reset', column); } function onResetAll() { - emitFilterChange({}, undefined); + const resetValue: { [key: string]: any } = getColumnsResetValue(columns); + emitFilterChange(resetValue, 'clear', undefined); } function onConfirm(column: PrimaryTableCol) { - emitFilterChange(innerFilterValue, column); + emitFilterChange(innerFilterValue, 'confirm', column); } // 图标：内置图标，组件自定义图标，全局配置图标 diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx index d03f30527..6e3a34ca2 100644 --- a/src/table/hooks/useRowSelect.tsx +++ b/src/table/hooks/useRowSelect.tsx @@ -13,7 +13,7 @@ import { TdBaseTableProps, TdPrimaryTableProps, } from '../type'; -import { isRowSelectedDisabled } from '../utils'; +import { isRowSelectedDisabled } from '../../_common/js/table/utils'; import { TableClassName } from './useClassName'; import Checkbox from '../../checkbox'; import Radio from '../../radio'; diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx index 9e2da7292..24b458156 100644 --- a/src/table/hooks/useTreeData.tsx +++ b/src/table/hooks/useTreeData.tsx @@ -309,6 +309,7 @@ export default function useTreeData(props: TdEnhancedTableProps) { getTreeNode, resetData, getTreeExpandedRow, + onExpandFoldIconClick, }; } diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md index 076edecc0..aa4799b37 100644 --- a/src/table/table.en-US.md +++ b/src/table/table.en-US.md @@ -142,7 +142,7 @@ onDataChange | Function | | Typescript：`(data: Array, context: TableDataCh onDisplayColumnsChange | Function | | Typescript：`(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | Typescript：`(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | Typescript：`(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N -onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
trigger on filter value changing | N +onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N onRowEdit | Function | | Typescript：`(context: PrimaryTableRowEditContext) => void`
trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N onRowValidate | Function | | Typescript：`(context: PrimaryTableRowValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N onSelectChange | Function | | Typescript：`(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N diff --git a/src/table/table.md b/src/table/table.md index e760c4f1b..6ef1d1c87 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -142,7 +142,7 @@ onDataChange | Function | | TS 类型：`(data: Array, context: TableDataCha 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`
拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`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; data: T[]; newData: 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; currentRowData: T }`
| N -onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型 | N +onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N onRowEdit | Function | | TS 类型：`(context: PrimaryTableRowEditContext) => void`
行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N onRowValidate | Function | | TS 类型：`(context: PrimaryTableRowValidateContext) => void`
行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`

`type TableValidateTrigger = 'self' \| 'parent'`

`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| 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 diff --git a/src/table/type.ts b/src/table/type.ts index 5a57c6e08..ad8fc49ba 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -558,7 +558,7 @@ export interface TdPrimaryTableProps /** * 过滤参数发生变化时触发，泛型 T 指表格数据类型 */ - onFilterChange?: (filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void; + onFilterChange?: (filterValue: FilterValue, context: TableFilterChangeContext) => void; /** * 行编辑时触发 */ @@ -1096,6 +1096,11 @@ export interface ExpandOptions { currentRowData: T; } +export interface TableFilterChangeContext { + col?: PrimaryTableCol; + trigger: 'filter-change' | 'confirm' | 'reset' | 'clear'; +} + export type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }; export type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }; diff --git a/src/table/utils.ts b/src/table/utils.ts index 737c9fd49..76d9c8d96 100644 --- a/src/table/utils.ts +++ b/src/table/utils.ts @@ -4,7 +4,6 @@ import isObject from 'lodash/isObject'; import { BaseTableCellParams, CellData, - PrimaryTableCol, RowClassNameParams, TableColumnClassName, TableRowData, @@ -94,75 +93,8 @@ export function formatClassNames( return arr; } -export function filterDataByIds( - data: Array = [], - ids: Array = [], - byId = 'id', -): Array { - return data.filter((d: Record = {}) => ids.includes(d[byId])); -} - export const INNER_PRE_NAME = '@@inner-'; -export enum SCROLL_DIRECTION { - X = 'x', - Y = 'y', - UNKNOWN = 'unknown', -} - -let preScrollLeft: any; -let preScrollTop: any; - -export const getScrollDirection = (scrollLeft: number, scrollTop: number): SCROLL_DIRECTION => { - let direction = SCROLL_DIRECTION.UNKNOWN; - if (preScrollTop !== scrollTop) { - direction = SCROLL_DIRECTION.Y; - } else if (preScrollLeft !== scrollLeft) { - direction = SCROLL_DIRECTION.X; - } - preScrollTop = scrollTop; - preScrollLeft = scrollLeft; - return direction; -}; - -export const getRecord = (record: Record) => { - if (!record) { - return record; - } - const result = {}; - Object.keys(record).forEach((key) => { - const descriptor = Object.getOwnPropertyDescriptor(record, key); - descriptor && - Reflect.defineProperty(result, key, { - set(val) { - descriptor.set(val); - }, - get() { - console.warn('The parameter `record` will be deprecated, please use `row` instead'); - return descriptor.get(); - }, - }); - }); - return result; -}; - -export function isRowSelectedDisabled( - selectColumn: PrimaryTableCol, - row: Record, - rowIndex: number, -): boolean { - if (!selectColumn) return false; - let disabled = isFunction(selectColumn.disabled) ? selectColumn.disabled({ row, rowIndex }) : selectColumn.disabled; - if (selectColumn.checkProps) { - if (isFunction(selectColumn.checkProps)) { - disabled = disabled || selectColumn.checkProps({ row, rowIndex }).disabled; - } else if (selectColumn.checkProps === 'object') { - disabled = disabled || selectColumn.checkProps.disabled; - } - } - return !!disabled; -} - // 多级表头，列配置场景，获取 currentRow export function getCurrentRowByKey(columns: T[], key: string): T { if (!columns || !key) return; @@ -181,38 +113,3 @@ export function getAffixProps(mainAffixProps: boolean | Partial, sub if (typeof subAffixProps === 'object') return subAffixProps; return {}; } - -export function getEditableKeysMap(keys: Array, list: any[], rowKey: string) { - const map: { [key: string | number]: boolean } = {}; - for (let i = 0, len = list.length; i < len; i++) { - const rowValue = get(list[i], rowKey); - if (keys.includes(rowValue)) { - map[rowValue] = true; - } - } - return map; -} - -export function getColumnDataByKey(columns: any[], colKey: string): any { - for (let i = 0, len = columns.length; i < len; i++) { - if (columns[i].colKey === colKey) return columns[i]; - if (columns[i].children?.length) { - const t = getColumnDataByKey(columns[i].children, colKey); - if (t) return t; - } - } - return null; -} - -export function getColumnIndexByKey(columns: any[], colKey: string): number { - for (let i = 0, len = columns.length; i < len; i++) { - if (columns[i].colKey === colKey) { - return i; - } - if (columns[i].children?.length) { - const t = getColumnDataByKey(columns[i].children, colKey); - if (t) return i; - } - } - return -1; -} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 8f6961ea9..1c42cc086 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -201185,7 +201185,7 @@ exports[`csr snapshot test > csr test src/table/_example/editable-cell.jsx 1`] = style="min-width: 80px;" /> csr test src/table/_example/editable-cell.jsx 1`] = style="min-width: 80px;" /> csr test src/table/_example/editable-row.jsx 1`] = style="width: 150px;" /> csr test src/table/_example/editable-row.jsx 1`] = style="width: 150px;" /> ssr test src/table/_example/drag-sort.jsx 1`] = `"< exports[`ssr snapshot test > ssr test src/table/_example/drag-sort-handler.jsx 1`] = `"
排序
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; -exports[`ssr snapshot test > ssr test src/table/_example/editable-cell.jsx 1`] = `"
申请人
申请状态
申请事项
创建日期
please select
please select
please select
please select
please select
"`; +exports[`ssr snapshot test > ssr test src/table/_example/editable-cell.jsx 1`] = `"
申请人
申请状态
申请事项
创建日期
please select
please select
please select
please select
please select
"`; -exports[`ssr snapshot test > ssr test src/table/_example/editable-row.jsx 1`] = `"


申请人
申请状态
申请事项
创建日期
操作栏
please enter
please select
please select
保存取消
编辑
编辑
编辑
编辑
"`; +exports[`ssr snapshot test > ssr test src/table/_example/editable-row.jsx 1`] = `"


申请人
申请状态
申请事项
创建日期
操作栏
please enter
please select
please select
保存取消
编辑
编辑
编辑
编辑
"`; exports[`ssr snapshot test > ssr test src/table/_example/ellipsis.jsx 1`] = `"
申请人
审批状态
签署方式（超长标题示例）
邮箱地址
申请事项
审核时间
操作
贾明（kyrieJia）
审批通过电子签署
w.cezkdudy@lhll.au
宣传物料制作费用
2021-11-01
点击查看审批详情
张三（threeZhang)
审批失败纸质签署
r.nmgw@peurezgn.sl
algolia 服务报销
2021-12-01
点击查看审批详情
王芳（fangWang)
审批过期纸质签署
p.cumx@rampblpa.ru
相关周边制作费
2022-01-01
点击查看审批详情
贾明（kyrieJia）
审批通过电子签署
w.cezkdudy@lhll.au
激励奖品快递费
2022-02-01
点击查看审批详情
张三（threeZhang)
审批失败纸质签署
r.nmgw@peurezgn.sl
宣传物料制作费用
2021-11-01
点击查看审批详情
"`;