chore: Use fixed

Author: zombieJ

assets/index.less

@@ -4,6 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
+  position: relative;
 
   &-item {
     background: rgba(0, 255, 0, 0.2);

src/Item.tsx

@@ -6,6 +6,7 @@ export interface ItemProps<ItemType> {
   prefixCls: string;
   item?: ItemType;
   className?: string;
+  style?: React.CSSProperties;
   renderItem?: (item: ItemType) => React.ReactNode;
   responsive?: boolean;
   itemKey?: React.Key;
@@ -24,6 +25,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     registerSize,
     itemKey,
     className,
+    style,
     children,
     display,
     order,
@@ -55,6 +57,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
         overflowY: mergedHidden ? 'hidden' : undefined,
         order: responsive ? order : undefined,
         pointerEvents: mergedHidden ? 'none' : undefined,
+        ...style,
       }}
     >
       {childNode}

src/Overflow.tsx

@@ -55,6 +55,7 @@ function Overflow<ItemType = any>(
   const [restWidth, setRestWidth] = createUseState(0);
 
   const [suffixWidth, setSuffixWidth] = createUseState(0);
+  const [suffixFixedStart, setSuffixFixedStart] = useState<number>(null);
 
   const [displayCount, setDisplayCount] = useState(0);
   const [restReady, setRestReady] = useState(false);
@@ -171,17 +172,26 @@ function Overflow<ItemType = any>(
         ) {
           // Additional check if match the end
           updateDisplayCount(lastIndex);
+          setSuffixFixedStart(null);
           break;
         } else if (totalWidth + mergedRestWidth > containerWidth) {
           // Can not hold all the content to show rest
           updateDisplayCount(i - 1);
+          setSuffixFixedStart(
+            totalWidth - currentItemWidth - suffixWidth + mergedRestWidth,
+          );
           break;
         } else if (i === lastIndex) {
           // Reach the end
           updateDisplayCount(lastIndex);
+          setSuffixFixedStart(totalWidth - suffixWidth);
           break;
         }
       }
+
+      if (suffix && getItemWidth(0) + suffixWidth > containerWidth) {
+        setSuffixFixedStart(null);
+      }
     }
   }, [
     containerWidth,
@@ -195,6 +205,15 @@ function Overflow<ItemType = any>(
   // ================================ Render ================================
   const displayRest = restReady && !!omittedItems.length;
 
+  let suffixStyle: React.CSSProperties = {};
+  if (suffixFixedStart !== null) {
+    suffixStyle = {
+      position: 'absolute',
+      left: suffixFixedStart,
+      top: 0,
+    };
+  }
+
   let overflowNode = (
     <div className={classNames(prefixCls, className)} style={style} ref={ref}>
       {mergedData.map((item, index) => {
@@ -240,6 +259,7 @@ function Overflow<ItemType = any>(
           responsive={isResponsive}
           registerSize={registerSuffixSize}
           display
+          style={suffixStyle}
         >
           {suffix}
         </Item>