[Table] fix some problems (#2492)

* fix(table): some problemns

* feat: update common

src/table/EnhancedTable.tsx

@@ -17,7 +17,8 @@ const EnhancedTable = forwardRef<EnhancedTableRef, TEnhancedTableProps>((props,
   const primaryTableRef = useRef<EnhancedTableRef>();
 
   // 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<EnhancedTableRef, TEnhancedTableProps>((props,
 
   const onEnhancedTableRowClick: TdPrimaryTableProps['onRowClick'] = (p) => {
     if (props.tree?.expandTreeNodeOnClick) {
-      treeInstanceFunctions.toggleExpandData(
+      onExpandFoldIconClick(
         {
           row: p.row,
           rowIndex: p.index,

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,

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 (

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';
 

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,

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<TableRowData> & { errorList: AllValidateResult[] };

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<any>) {
+  const { columns } = props;
   const [locale, t] = useLocaleReceiver('table');
   const { tableFilterClasses, isFocusClass } = useClassName();
   const [isTableOverflowHidden, setIsTableOverflowHidden] = useState<boolean>();
@@ -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<TableRowData>['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);
   }
 
   // 图标：内置图标，组件自定义图标，全局配置图标

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';

src/table/hooks/useTreeData.tsx

@@ -309,6 +309,7 @@ export default function useTreeData(props: TdEnhancedTableProps) {
     getTreeNode,
     resetData,
     getTreeExpandedRow,
+    onExpandFoldIconClick,
   };
 }
 

src/table/table.en-US.md

@@ -142,7 +142,7 @@ onDataChange | Function |  | Typescript：`(data: Array<T>, context: TableDataCh
 onDisplayColumnsChange | Function |  | Typescript：`(value: CheckboxGroupValue) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`import { CheckboxGroupValue } from '@Checkbox'`<br/> | N
 onDragSort | Function |  | Typescript：`(context: DragSortContext<T>) => void`<br/>trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`<br/><br/>`import { SortableEvent, SortableOptions } from 'sortablejs'`<br/> | N
 onExpandChange | Function |  | Typescript：`(expandedRowKeys: Array<string \| number>, options: ExpandOptions<T>) => void`<br/>trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface ExpandOptions<T> { expandedRowData: Array<T>; currentRowData: T }`<br/> | N
-onFilterChange | Function |  | Typescript：`(filterValue: FilterValue, context: { col?: PrimaryTableCol<T> }) => void`<br/>trigger on filter value changing | N
+onFilterChange | Function |  | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext<T>) => void`<br/>trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface TableFilterChangeContext<T> { col?: PrimaryTableCol<T>; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`<br/> | N
 onRowEdit | Function |  | Typescript：`(context: PrimaryTableRowEditContext<T>) => void`<br/>trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`type PrimaryTableRowEditContext<T> = PrimaryTableCellParams<T> & { value: any; editedRow: T }`<br/> | N
 onRowValidate | Function |  | Typescript：`(context: PrimaryTableRowValidateContext<T>) => void`<br/>trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`type PrimaryTableRowValidateContext<T> = { result: TableRowValidateResult<T>[]; trigger: TableValidateTrigger }`<br/><br/>`type TableValidateTrigger = 'self' \| 'parent'`<br/><br/>`export type TableRowValidateResult<T> = PrimaryTableCellParams<T> & { errorList: AllValidateResult[]; value: any }`<br/> | N
 onSelectChange | Function |  | Typescript：`(selectedRowKeys: Array<string \| number>, options: SelectOptions<T>) => void`<br/>trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface SelectOptions<T> { selectedRowData: Array<T>; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`<br/> | N

src/table/table.md

@@ -142,7 +142,7 @@ onDataChange | Function |  | TS 类型：`(data: Array<T>, context: TableDataCha
 onDisplayColumnsChange | Function |  | TS 类型：`(value: CheckboxGroupValue) => void`<br/>确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`import { CheckboxGroupValue } from '@Checkbox'`<br/> | N
 onDragSort | Function |  | TS 类型：`(context: DragSortContext<T>) => void`<br/>拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface DragSortContext<T> { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`<br/><br/>`import { SortableEvent, SortableOptions } from 'sortablejs'`<br/> | N
 onExpandChange | Function |  | TS 类型：`(expandedRowKeys: Array<string \| number>, options: ExpandOptions<T>) => void`<br/>展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface ExpandOptions<T> { expandedRowData: Array<T>; currentRowData: T }`<br/> | N
-onFilterChange | Function |  | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol<T> }) => void`<br/>过滤参数发生变化时触发，泛型 T 指表格数据类型 | N
+onFilterChange | Function |  | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext<T>) => void`<br/>过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface TableFilterChangeContext<T> { col?: PrimaryTableCol<T>; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`<br/> | N
 onRowEdit | Function |  | TS 类型：`(context: PrimaryTableRowEditContext<T>) => void`<br/>行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`type PrimaryTableRowEditContext<T> = PrimaryTableCellParams<T> & { value: any; editedRow: T }`<br/> | N
 onRowValidate | Function |  | TS 类型：`(context: PrimaryTableRowValidateContext<T>) => void`<br/>行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`type PrimaryTableRowValidateContext<T> = { result: TableRowValidateResult<T>[]; trigger: TableValidateTrigger }`<br/><br/>`type TableValidateTrigger = 'self' \| 'parent'`<br/><br/>`export type TableRowValidateResult<T> = PrimaryTableCellParams<T> & { errorList: AllValidateResult[]; value: any }`<br/> | N
 onSelectChange | Function |  | TS 类型：`(selectedRowKeys: Array<string \| number>, options: SelectOptions<T>) => void`<br/>选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。<br/>`interface SelectOptions<T> { selectedRowData: Array<T>; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`<br/> | N

src/table/type.ts

@@ -558,7 +558,7 @@ export interface TdPrimaryTableProps<T extends TableRowData = TableRowData>
   /**
    * 过滤参数发生变化时触发，泛型 T 指表格数据类型
    */
-  onFilterChange?: (filterValue: FilterValue, context: { col?: PrimaryTableCol<T> }) => void;
+  onFilterChange?: (filterValue: FilterValue, context: TableFilterChangeContext<T>) => void;
   /**
    * 行编辑时触发
    */
@@ -1096,6 +1096,11 @@ export interface ExpandOptions<T> {
   currentRowData: T;
 }
 
+export interface TableFilterChangeContext<T> {
+  col?: PrimaryTableCol<T>;
+  trigger: 'filter-change' | 'confirm' | 'reset' | 'clear';
+}
+
 export type PrimaryTableRowEditContext<T> = PrimaryTableCellParams<T> & { value: any; editedRow: T };
 
 export type PrimaryTableRowValidateContext<T> = { result: TableRowValidateResult<T>[]; trigger: TableValidateTrigger };

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<object> = [],
-  ids: Array<string | number> = [],
-  byId = 'id',
-): Array<object> {
-  return data.filter((d: Record<string, any> = {}) => 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<any, any>) => {
-  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<string, any>,
-  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<T extends { colKey?: string; children?: any[] }>(columns: T[], key: string): T {
   if (!columns || !key) return;
@@ -181,38 +113,3 @@ export function getAffixProps(mainAffixProps: boolean | Partial<AffixProps>, sub
   if (typeof subAffixProps === 'object') return subAffixProps;
   return {};
 }
-
-export function getEditableKeysMap(keys: Array<string | number>, 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;
-}

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;"
               />
               <col
-                style="min-width: 80px;"
+                style="width: 280px;"
               />
               <col
                 style="min-width: 80px;"
@@ -201968,7 +201968,7 @@ exports[`csr snapshot test > csr test src/table/_example/editable-cell.jsx 1`] =
               style="min-width: 80px;"
             />
             <col
-              style="min-width: 80px;"
+              style="width: 280px;"
             />
             <col
               style="min-width: 80px;"
@@ -202868,13 +202868,13 @@ exports[`csr snapshot test > csr test src/table/_example/editable-row.jsx 1`] =
                   style="width: 150px;"
                 />
                 <col
-                  style="min-width: 80px;"
+                  style="width: 200px;"
                 />
                 <col
                   style="width: 150px;"
                 />
                 <col
-                  style="width: 150px;"
+                  style="min-width: 80px;"
                 />
               </colgroup>
               <thead
@@ -203464,13 +203464,13 @@ exports[`csr snapshot test > csr test src/table/_example/editable-row.jsx 1`] =
                 style="width: 150px;"
               />
               <col
-                style="min-width: 80px;"
+                style="width: 200px;"
               />
               <col
                 style="width: 150px;"
               />
               <col
-                style="width: 150px;"
+                style="min-width: 80px;"
               />
             </colgroup>
             <thead