add mulitple mark to check if multiple content diff

Author: zombieJ

src/List.tsx

@@ -177,8 +177,11 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
     const { data, height, itemHeight, disabled, onSkipRender } = this.props;
     const prevData: T[] = this.cachedProps.data || [];
 
-    const changedItemIndex: number =
-      prevData.length !== data.length ? findListDiffIndex(prevData, data, this.getItemKey) : null;
+    let changedItemIndex: number = null;
+    if (prevData.length !== data.length) {
+      const diff = findListDiffIndex(prevData, data, this.getItemKey);
+      changedItemIndex = diff ? diff.index : null;
+    }
 
     if (disabled) {
       // Should trigger `onSkipRender` to tell that diff component is not render in the list

src/utils/algorithmUtil.ts

@@ -40,18 +40,17 @@ export function findListDiffIndex<T>(
   originList: T[],
   targetList: T[],
   getKey: (item: T) => string,
-): number | null {
+): { index: number; multiple: boolean } | null {
   const originLen = originList.length;
   const targetLen = targetList.length;
 
-  // Skip if more than 1 content is diff
-  if (Math.abs(originLen - targetLen) !== 1) {
-    return null;
-  }
-
   let shortList: T[];
   let longList: T[];
 
+  if (originLen === 0 && targetLen === 0) {
+    return null;
+  }
+
   if (originLen < targetLen) {
     shortList = originList;
     longList = targetList;
@@ -62,23 +61,25 @@ export function findListDiffIndex<T>(
 
   const notExistKey = { __EMPTY_ITEM__: true };
   function getItemKey(item: T) {
-    if (item) {
+    if (item !== undefined) {
       return getKey(item);
     }
     return notExistKey;
   }
 
   // Loop to find diff one
-  let diffIndex = 0;
+  let diffIndex: number = null;
+  let multiple = Math.abs(originLen - targetLen) !== 1;
   for (let i = 0; i < longList.length; i += 1) {
     const shortKey = getItemKey(shortList[i]);
     const longKey = getItemKey(longList[i]);
 
     if (shortKey !== longKey) {
-      diffIndex = shortKey === getItemKey(longList[i + 1]) ? i : null;
+      diffIndex = i;
+      multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
       break;
     }
   }
 
-  return diffIndex;
+  return diffIndex === null ? null : { index: diffIndex, multiple };
 }

tests/util.test.js

@@ -53,7 +53,10 @@ describe('Util', () => {
             const targetList = originList.slice();
             targetList.splice(diff, 1);
 
-            expect(findListDiffIndex(originList, targetList, num => num)).toEqual(diff);
+            expect(findListDiffIndex(originList, targetList, num => num)).toEqual({
+              index: diff,
+              multiple: false,
+            });
           });
         }
 
@@ -69,7 +72,10 @@ describe('Util', () => {
             const targetList = originList.slice();
             targetList.splice(diff, 0, 'NEW_ITEM');
 
-            expect(findListDiffIndex(originList, targetList, num => num)).toEqual(diff);
+            expect(findListDiffIndex(originList, targetList, num => num)).toEqual({
+              index: diff,
+              multiple: false,
+            });
           });
         }
 
@@ -84,21 +90,57 @@ describe('Util', () => {
       });
 
       it('small list', () => {
-        expect(findListDiffIndex([0], [], num => num)).toEqual(0);
-        expect(findListDiffIndex([0, 1], [0], num => num)).toEqual(1);
-        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual(null);
-        expect(findListDiffIndex([], [0], num => num)).toEqual(0);
-        expect(findListDiffIndex([0], [0, 1], num => num)).toEqual(1);
+        expect(findListDiffIndex([0], [], num => num)).toEqual({
+          index: 0,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0, 1], [0], num => num)).toEqual({
+          index: 1,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual({
+          index: 1,
+          multiple: true,
+        });
+        expect(findListDiffIndex([], [0], num => num)).toEqual({
+          index: 0,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0], [0, 1], num => num)).toEqual({
+          index: 1,
+          multiple: false,
+        });
       });
 
       it('diff only 1', () => {
-        expect(findListDiffIndex([0, 1, 2], [], num => num)).toEqual(null);
-        expect(findListDiffIndex([0, 1, 2], [1, 2], num => num)).toEqual(0);
-        expect(findListDiffIndex([0, 1, 2], [0, 2], num => num)).toEqual(1);
-        expect(findListDiffIndex([0, 1, 2], [0, 1], num => num)).toEqual(2);
-        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual(null);
-        expect(findListDiffIndex([0, 1, 2], [1], num => num)).toEqual(null);
-        expect(findListDiffIndex([0, 1, 2], [2], num => num)).toEqual(null);
+        expect(findListDiffIndex([0, 1, 2], [], num => num)).toEqual({
+          index: 0,
+          multiple: true,
+        });
+        expect(findListDiffIndex([0, 1, 2], [1, 2], num => num)).toEqual({
+          index: 0,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0, 1, 2], [0, 2], num => num)).toEqual({
+          index: 1,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0, 1, 2], [0, 1], num => num)).toEqual({
+          index: 2,
+          multiple: false,
+        });
+        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual({
+          index: 1,
+          multiple: true,
+        });
+        expect(findListDiffIndex([0, 1, 2], [1], num => num)).toEqual({
+          index: 0,
+          multiple: true,
+        });
+        expect(findListDiffIndex([0, 1, 2], [2], num => num)).toEqual({
+          index: 0,
+          multiple: true,
+        });
       });
     });
   });