opacity when invisible

Author: zombieJ

assets/index.less

@@ -3,6 +3,8 @@
 .@{overflow-prefix-cls} {
   display: inline-flex;
   flex-wrap: nowrap;
+  max-width: 100%;
+  // overflow: hidden;
 
   &-item {
     margin-left: 0.5em;

src/Overflow.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import { getFullWidth } from './util';
 import Item from './Item';
 import { useBatchState } from './hooks/useBatchState';
 
@@ -62,6 +61,7 @@ function Overflow<ItemType = any>(
   // ================================= Size =================================
   function onOverflowResize(_: object, element: HTMLElement) {
     setContainerWidth(element.clientWidth);
+    console.log('~~~???>>>', element.clientWidth, element);
   }
 
   function registerSize(key: React.Key, width: number) {
@@ -92,11 +92,23 @@ function Overflow<ItemType = any>(
       for (let i = 0; i < len; i += 1) {
         const itemWidth = itemWidths.get(getKey(data[i], i)) || 0;
         totalWidth += itemWidth;
+        console.log(
+          i,
+          '>>>',
+          totalWidth,
+          itemWidth,
+          overflowWidth,
+          '|',
+          totalWidth + overflowWidth,
+          containerWidth,
+        );
 
         if (totalWidth + overflowWidth > containerWidth) {
           setDisplayCount(i - 1);
+          break;
         } else if (i === len - 1) {
           setDisplayCount(len - 1);
+          break;
         }
       }
     }

src/hooks/useBatchState.tsx

@@ -26,7 +26,8 @@ export function useBatchState() {
     const value = statesRef.current[myIndex];
 
     function setValue(val: any) {
-      statesRef.current[myIndex] = typeof val === 'function' ? val(value) : val;
+      statesRef.current[myIndex] =
+        typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
 
       cancelBeforeFrame(beforeFrameId);