fix: Last one also take in count (#13)

* fix: Last one also take in count

* test: Fix test case

* test: Update test case

Author: zombieJ

src/Overflow.tsx

@@ -6,22 +6,23 @@ import Item from './Item';
 import { useBatchFrameState } from './hooks/useBatchFrameState';
 import RawItem from './RawItem';
 
-export const OverflowContext = React.createContext<{
-  prefixCls: string;
-  responsive: boolean;
-  order: number;
-  registerSize: (key: React.Key, width: number | null) => void;
-  display: boolean;
+export const OverflowContext =
+  React.createContext<{
+    prefixCls: string;
+    responsive: boolean;
+    order: number;
+    registerSize: (key: React.Key, width: number | null) => void;
+    display: boolean;
 
-  invalidate: boolean;
+    invalidate: boolean;
 
-  // Item Usage
-  item?: any;
-  itemKey?: React.Key;
+    // Item Usage
+    item?: any;
+    itemKey?: React.Key;
 
-  // Rest Usage
-  className?: string;
-}>(null);
+    // Rest Usage
+    className?: string;
+  }>(null);
 
 const RESPONSIVE = 'responsive' as const;
 const INVALIDATE = 'invalidate' as const;
@@ -90,7 +91,7 @@ function Overflow<ItemType = any>(
 
   const createUseState = useBatchFrameState();
 
-  const fullySSR = ssr === 'full'
+  const fullySSR = ssr === 'full';
 
   const [containerWidth, setContainerWidth] = createUseState<number>(null);
   const mergedContainerWidth = containerWidth || 0;
@@ -106,13 +107,13 @@ function Overflow<ItemType = any>(
   const [suffixFixedStart, setSuffixFixedStart] = useState<number>(null);
 
   const [displayCount, setDisplayCount] = useState(null);
-    const mergedDisplayCount = React.useMemo(() => {
-      if (displayCount === null && fullySSR) {
-        return Number.MAX_SAFE_INTEGER;
-      }
+  const mergedDisplayCount = React.useMemo(() => {
+    if (displayCount === null && fullySSR) {
+      return Number.MAX_SAFE_INTEGER;
+    }
 
-      return displayCount || 0;
-    }, [displayCount, containerWidth]);
+    return displayCount || 0;
+  }, [displayCount, containerWidth]);
 
   const [restReady, setRestReady] = useState(false);
 
@@ -241,8 +242,11 @@ function Overflow<ItemType = any>(
         totalWidth += currentItemWidth;
 
         if (
-          i === lastIndex - 1 &&
-          totalWidth + getItemWidth(lastIndex)! <= mergedContainerWidth
+          // Only one means `totalWidth` is the final width
+          (lastIndex === 0 && totalWidth <= mergedContainerWidth) ||
+          // Last two width will be the final width
+          (i === lastIndex - 1 &&
+            totalWidth + getItemWidth(lastIndex)! <= mergedContainerWidth)
         ) {
           // Additional check if match the end
           updateDisplayCount(lastIndex);
@@ -255,11 +259,6 @@ function Overflow<ItemType = any>(
             totalWidth - currentItemWidth - suffixWidth + restWidth,
           );
           break;
-        } else if (i === lastIndex) {
-          // Reach the end
-          updateDisplayCount(lastIndex);
-          setSuffixFixedStart(totalWidth - suffixWidth);
-          break;
         }
       }
 
@@ -425,9 +424,9 @@ type FilledOverflowType = ForwardOverflowType & {
 
 ForwardOverflow.displayName = 'Overflow';
 
-((ForwardOverflow as unknown) as FilledOverflowType).Item = RawItem;
-((ForwardOverflow as unknown) as FilledOverflowType).RESPONSIVE = RESPONSIVE;
-((ForwardOverflow as unknown) as FilledOverflowType).INVALIDATE = INVALIDATE;
+(ForwardOverflow as unknown as FilledOverflowType).Item = RawItem;
+(ForwardOverflow as unknown as FilledOverflowType).RESPONSIVE = RESPONSIVE;
+(ForwardOverflow as unknown as FilledOverflowType).INVALIDATE = INVALIDATE;
 
 // Convert to generic type
-export default (ForwardOverflow as unknown) as FilledOverflowType;
+export default ForwardOverflow as unknown as FilledOverflowType;

tests/responsive.spec.tsx

@@ -40,21 +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 ...');
     expect(
-      wrapper
-        .findItems()
-        .find('div')
-        .last()
-        .prop('aria-hidden'),
+      wrapper.findItems().find('div').last().prop('aria-hidden'),
     ).toBeTruthy();
   });
 
@@ -73,6 +64,21 @@ describe('Overflow.Responsive', () => {
     expect(wrapper.findRest().props().display).toBeFalsy();
   });
 
+  it('just fit', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(1)}
+        itemKey="key"
+        renderItem={renderItem}
+        maxCount="responsive"
+      />,
+    );
+    wrapper.initSize(20, 20);
+
+    expect(wrapper.findItems()).toHaveLength(1);
+    expect(wrapper.findRest().props().display).toBeFalsy();
+  });
+
   it('remove to clean up', () => {
     const data = getData(6);
 
@@ -219,4 +225,26 @@ describe('Overflow.Responsive', () => {
       expect(wrapper.findSuffix().props().style.position).toBeFalsy();
     });
   });
+
+  it('render rest directly', () => {
+    const wrapper = mount(
+      <Overflow<ItemType>
+        data={getData(10)}
+        itemKey="key"
+        renderItem={renderItem}
+        maxCount="responsive"
+        renderRawRest={omitItems => {
+          return (
+            <Overflow.Item component="span" className="custom-rest">
+              {omitItems.length}
+            </Overflow.Item>
+          );
+        }}
+      />,
+    );
+
+    wrapper.initSize(100, 20);
+
+    expect(wrapper.find('span.custom-rest').text()).toEqual('6');
+  });
 });