fix(table): fix onChange calls twice (#2046)

* fix(table): fix onChange calls twice

* fix(table): add span wrapper for expand icon

Co-authored-by: maxin <maxin@growingio.com>

src/table/Table.tsx

@@ -146,22 +146,24 @@ export function Table<RecordType>(
   const expandIcon: RenderExpandIcon<RecordType> = (expandProps) => {
     const { expanded, onExpand, record, expandable: expandableProp } = expandProps;
     if (expandableProp) {
-      return expanded ? (
-        <ArrowDownOutlined
-          size="12px"
-          className={`${prefixCls}-expanded-icon`}
-          onClick={(event) => {
-            isFunction(onExpand) && onExpand(record, event as React.MouseEvent<HTMLElement, MouseEvent>);
-          }}
-        />
-      ) : (
-        <ArrowRightOutlined
-          size="12px"
-          className={`${prefixCls}-to_expand-icon`}
-          onClick={(event) => {
-            isFunction(onExpand) && onExpand(record, event as React.MouseEvent<HTMLElement, MouseEvent>);
-          }}
-        />
+      return (
+        <span className={expanded ? `${prefixCls}-expanded-icon` : `${prefixCls}-to_expand-icon`}>
+          {expanded ? (
+            <ArrowDownOutlined
+              size="12px"
+              onClick={(event) => {
+                isFunction(onExpand) && onExpand(record, event as React.MouseEvent<HTMLElement, MouseEvent>);
+              }}
+            />
+          ) : (
+            <ArrowRightOutlined
+              size="12px"
+              onClick={(event) => {
+                isFunction(onExpand) && onExpand(record, event as React.MouseEvent<HTMLElement, MouseEvent>);
+              }}
+            />
+          )}
+        </span>
       );
     }
     return <div className={`${prefixCls}-expanded-placeholder`} />;
@@ -197,7 +199,6 @@ export function Table<RecordType>(
                 column={column}
                 updateSorterStates={updateSorterStates}
                 updateFilterStates={updateFilterStates}
-                onTriggerStateUpdate={onTriggerStateUpdate}
                 columnKey={columnKey}
               />
             ),
@@ -213,7 +214,7 @@ export function Table<RecordType>(
       });
     }
     return renderTitle(columns);
-  }, [columns, sortStates, filterStates, prefixCls, updateSorterStates, updateFilterStates, onTriggerStateUpdate]);
+  }, [columns, sortStates, filterStates, prefixCls, updateSorterStates, updateFilterStates]);
 
   const composedColumns = compose(transformSelectionPipeline, transformShowIndexPipeline)(transformColumnTitle);
 

src/table/Title.tsx

@@ -12,7 +12,7 @@ const getNextSortDirection = (sortDirections: SortOrder[], current: SortOrder):
   current === null ? sortDirections[0] : sortDirections[sortDirections.indexOf(current) + 1];
 
 const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement => {
-  const { prefixCls, column, onTriggerStateUpdate, sorterState, updateSorterStates, columnKey } = props;
+  const { prefixCls, column, sorterState, updateSorterStates, columnKey } = props;
 
   const { align, sorter, sortDirections = defaultSortDirections, sortPriorityOrder } = column;
 
@@ -66,7 +66,7 @@ const Title = <RecordType,>(props: TitleProps<RecordType>): React.ReactElement =
     }
     const { filteredKeys, filters } = filterState;
     const handleFilterPopoverClick = (newFilteredKeys: Key[]): void => {
-      onTriggerStateUpdate({ filterStates: updateFilterStates({ ...filterState, filteredKeys: newFilteredKeys }) });
+      updateFilterStates({ ...filterState, filteredKeys: newFilteredKeys });
     };
 
     return (

src/table/demos/Table.stories.tsx

@@ -140,7 +140,7 @@ export const Filtering = () => {
     []
   );
 
-  return <Table<DataSourceType> columns={columns} rowKey="id" dataSource={dataSource} />;
+  return <Table<DataSourceType> columns={columns} rowKey="id" onChange={action('filter')} dataSource={dataSource} />;
 };
 
 // ----------------------- Filtering -----------------------//

src/table/interface.ts

@@ -122,7 +122,6 @@ interface TitleProps<RecordType> {
   column: ColumnType<RecordType>;
   updateSorterStates: (sortState: SortState<RecordType>) => SortState<RecordType>;
   updateFilterStates: (filterState: FilterState<RecordType>) => Record<string, string[]>;
-  onTriggerStateUpdate: (onTriggerStateUpdateProps?: OnTriggerStateUpdateProps<RecordType>) => void;
   columnKey: Key;
 }