Merge pull request #4 from react-component/fix-rest

fix: suffix calculation

Author: zombieJ

src/Overflow.tsx

@@ -155,6 +155,13 @@ function Overflow<ItemType = any>(
       const len = mergedData.length;
       const lastIndex = len - 1;
 
+      // When data count change to 0, reset this since not loop will reach
+      if (!len) {
+        updateDisplayCount(0);
+        setSuffixFixedStart(null);
+        return;
+      }
+
       for (let i = 0; i < len; i += 1) {
         const currentItemWidth = getItemWidth(i);
 
@@ -179,7 +186,7 @@ function Overflow<ItemType = any>(
           // Can not hold all the content to show rest
           updateDisplayCount(i - 1);
           setSuffixFixedStart(
-            totalWidth - currentItemWidth - suffixWidth + mergedRestWidth,
+            totalWidth - currentItemWidth - suffixWidth + restWidth,
           );
           break;
         } else if (i === lastIndex) {
@@ -194,14 +201,7 @@ function Overflow<ItemType = any>(
         setSuffixFixedStart(null);
       }
     }
-  }, [
-    containerWidth,
-    itemWidths,
-    mergedRestWidth,
-    suffixWidth,
-    getKey,
-    mergedData,
-  ]);
+  }, [containerWidth, itemWidths, restWidth, suffixWidth, getKey, mergedData]);
 
   // ================================ Render ================================
   const displayRest = restReady && !!omittedItems.length;
@@ -238,7 +238,8 @@ function Overflow<ItemType = any>(
       {/* Rest Count Item */}
       {showRest ? (
         <Item
-          order={displayRest ? displayCount : mergedData.length}
+          // When not show, order should be the last
+          order={displayRest ? displayCount : Number.MAX_SAFE_INTEGER}
           prefixCls={itemPrefixCls}
           className={`${itemPrefixCls}-rest`}
           responsive={isResponsive}

tests/responsive.spec.tsx

@@ -40,7 +40,12 @@ describe('Overflow.Responsive', () => {
     wrapper.initSize(100, 20); // [0][1][2][3][4][+2](5)(6)
     expect(wrapper.findItems()).toHaveLength(6);
     [true, true, true, true, false, false].forEach((display, i) => {
-      expect(wrapper.findItems().at(i).props().display).toBe(display);
+      expect(
+        wrapper
+          .findItems()
+          .at(i)
+          .props().display,
+      ).toBe(display);
     });
     expect(wrapper.findRest()).toHaveLength(1);
     expect(wrapper.findRest().text()).toEqual('+ 2 ...');
@@ -188,5 +193,23 @@ describe('Overflow.Responsive', () => {
 
       expect(wrapper.findSuffix().props().style.position).toBeFalsy();
     });
+
+    it('long to short should keep correct position', () => {
+      const wrapper = mount(
+        <Overflow<ItemType>
+          data={getData(3)}
+          itemKey="key"
+          renderItem={renderItem}
+          maxCount="responsive"
+          suffix="Bamboo"
+        />,
+      );
+
+      wrapper.initSize(20, 20);
+      wrapper.setProps({ data: [] });
+
+      expect(wrapper.findRest().props().order).toEqual(Number.MAX_SAFE_INTEGER);
+      expect(wrapper.findSuffix().props().style.position).toBeFalsy();
+    });
   });
 });