chore: Add overflow calculation

Author: zombieJ

examples/basic.tsx

@@ -8,8 +8,6 @@ interface ItemType {
   label: string;
 }
 
-const originConsole = console.log;
-
 function createData(count: number): ItemType[] {
   const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
     value: index,

src/Item.tsx

@@ -12,6 +12,7 @@ export interface ItemProps<ItemType> {
   itemKey?: React.Key;
   registerSize: (key: React.Key, width: number) => void;
   children?: React.ReactNode;
+  display?: boolean;
 }
 
 export default function Item<ItemType>(props: ItemProps<ItemType>) {
@@ -24,6 +25,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     itemKey,
     className,
     children,
+    display = true,
   } = props;
 
   // ================================ Effect ================================
@@ -42,7 +44,12 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   const childNode = item !== undefined ? renderItem!(item) : children;
 
   let itemNode = (
-    <div className={classNames(prefixCls, className)}>{childNode}</div>
+    <div
+      className={classNames(prefixCls, className)}
+      style={{ opacity: display ? 1 : 0.2 }}
+    >
+      {childNode}
+    </div>
   );
 
   if (!disabled) {

src/Overflow.tsx

@@ -39,6 +39,8 @@ function Overflow<ItemType = any>(
   );
   const [overflowWidth, setOverflowWidth] = createUseState(0);
 
+  const [displayCount, setDisplayCount] = React.useState(0);
+
   const itemPrefixCls = `${prefixCls}-item`;
 
   // ================================= Item =================================
@@ -79,6 +81,27 @@ function Overflow<ItemType = any>(
     setOverflowWidth(width);
   }
 
+  // ================================ Effect ================================
+  React.useLayoutEffect(() => {
+    console.log('Effect >>>', containerWidth, itemWidths, overflowWidth);
+    if (containerWidth && overflowWidth && data) {
+      let totalWidth = 0;
+
+      const len = data.length;
+
+      for (let i = 0; i < len; i += 1) {
+        const itemWidth = itemWidths.get(getKey(data[i], i)) || 0;
+        totalWidth += itemWidth;
+
+        if (totalWidth + overflowWidth > containerWidth) {
+          setDisplayCount(i - 1);
+        } else if (i === len - 1) {
+          setDisplayCount(len - 1);
+        }
+      }
+    }
+  }, [containerWidth, itemWidths, overflowWidth, getKey, data]);
+
   // ================================ Render ================================
   let overflowNode = (
     <div className={classNames(prefixCls, className)} style={style} ref={ref}>
@@ -94,6 +117,7 @@ function Overflow<ItemType = any>(
             itemKey={key}
             registerSize={registerSize}
             disabled={disabled}
+            display={index <= displayCount}
           />
         );
       })}