feat: shouldCellUpdate return prev value (#493)

Author: zombieJ

src/Cell/index.tsx

@@ -42,7 +42,7 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   ellipsis?: CellEllipsisType;
   align?: AlignType;
 
-  shouldCellUpdate?: (record: RecordType) => boolean;
+  shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
 
   // Fixed
   fixLeft?: number | false;
@@ -207,9 +207,9 @@ function Cell<RecordType extends DefaultRecordType>(
 const RefCell = React.forwardRef<any, CellProps<any>>(Cell);
 RefCell.displayName = 'Cell';
 
-const MemoCell = React.memo(RefCell, (_, next: CellProps<any>) => {
+const MemoCell = React.memo(RefCell, (prev: CellProps<any>, next: CellProps<any>) => {
   if (next.shouldCellUpdate) {
-    return !next.shouldCellUpdate(next.record);
+    return !next.shouldCellUpdate(next.record, prev.record);
   }
 
   return false;

src/interface.ts

@@ -81,7 +81,7 @@ export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
     record: RecordType,
     index: number,
   ) => React.ReactNode | RenderedCell<RecordType>;
-  shouldCellUpdate?: (record: RecordType) => boolean;
+  shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
   rowSpan?: number;
   width?: number | string;
   onCell?: GetComponentProps<RecordType>;

tests/Table.spec.js

@@ -965,18 +965,24 @@ describe('Table.Basic', () => {
     const record = { key: 1 };
     let shouldUpdate = false;
     let renderTimes = 0;
+    let prev;
+    let next;
 
-    const Demo = () => {
+    const Demo = ({ records }) => {
       const [, forceUpdate] = React.useState({});
 
       return (
         <>
           <Table
-            data={[record]}
+            data={records}
             columns={[
               {
                 dataIndex: 'key',
-                shouldCellUpdate: () => shouldUpdate,
+                shouldCellUpdate: (nextRecord, prevRecord) => {
+                  next = nextRecord;
+                  prev = prevRecord;
+                  return shouldUpdate;
+                },
                 render() {
                   renderTimes += 1;
                   return null;
@@ -994,7 +1000,7 @@ describe('Table.Basic', () => {
       );
     };
 
-    const wrapper = mount(<Demo />);
+    const wrapper = mount(<Demo records={[record]} />);
     renderTimes = 0;
 
     wrapper.find('button').simulate('click');
@@ -1003,5 +1009,12 @@ describe('Table.Basic', () => {
     shouldUpdate = true;
     wrapper.find('button').simulate('click');
     expect(renderTimes).toEqual(1);
+
+    // Should update match prev & next
+    const newRecord = { ...record, next: true };
+    wrapper.setProps({ records: [newRecord] });
+    // wrapper.update();
+    expect(prev).toBe(record);
+    expect(next).toBe(newRecord);
   });
 });