feat: Auto order of rest Item

Author: zombieJ

assets/index.less

@@ -7,10 +7,8 @@
   // overflow: hidden;
 
   &-item {
-    margin-left: 0.5em;
-    margin-right: 1em;
     background: rgba(0, 255, 0, 0.2);
-    padding: 4px 8px;
-    border: 1px solid red;
+    box-shadow: 0 0 1px black;
+    flex: none;
   }
 }

examples/basic.tsx

@@ -11,12 +11,26 @@ interface ItemType {
 function createData(count: number): ItemType[] {
   const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({
     value: index,
-    label: `Label${index}`,
+    label: `Label ${index}`,
   }));
 
   return data;
 }
 
+function renderItem(item: ItemType) {
+  return (
+    <div
+      style={{
+        margin: '0 16px 0 8px',
+        padding: '4px 8px',
+        background: 'rgba(255, 0, 0, 0.2)',
+      }}
+    >
+      {item.label}
+    </div>
+  );
+}
+
 const Demo = () => {
   const [data, setData] = React.useState(createData(5));
 
@@ -44,7 +58,7 @@ const Demo = () => {
           marginTop: 32,
         }}
       >
-        <Overflow<ItemType> data={data} renderItem={(item) => item.label} />
+        <Overflow<ItemType> data={data} renderItem={renderItem} />
       </div>
     </div>
   );

src/Item.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-import { getFullWidth } from './util';
 
 export interface ItemProps<ItemType> {
   prefixCls: string;
@@ -13,6 +12,7 @@ export interface ItemProps<ItemType> {
   registerSize: (key: React.Key, width: number) => void;
   children?: React.ReactNode;
   display?: boolean;
+  order: number;
 }
 
 export default function Item<ItemType>(props: ItemProps<ItemType>) {
@@ -26,6 +26,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
     className,
     children,
     display = true,
+    order,
   } = props;
 
   // ================================ Effect ================================
@@ -46,7 +47,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   let itemNode = (
     <div
       className={classNames(prefixCls, className)}
-      style={{ opacity: display ? 1 : 0.2 }}
+      style={{ opacity: display ? 1 : 0.2, order }}
     >
       {childNode}
     </div>
@@ -55,9 +56,8 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   if (!disabled) {
     itemNode = (
       <ResizeObserver
-        onResize={(_, element) => {
-          const width = getFullWidth(element);
-          internalRegisterSize(width);
+        onResize={({ offsetWidth }) => {
+          internalRegisterSize(offsetWidth);
         }}
       >
         {itemNode}

src/Overflow.tsx

@@ -61,7 +61,6 @@ 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) {
@@ -83,7 +82,6 @@ function Overflow<ItemType = any>(
 
   // ================================ Effect ================================
   React.useLayoutEffect(() => {
-    console.log('Effect >>>', containerWidth, itemWidths, overflowWidth);
     if (containerWidth && overflowWidth && data) {
       let totalWidth = 0;
 
@@ -92,16 +90,6 @@ 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);
@@ -122,6 +110,7 @@ function Overflow<ItemType = any>(
 
         return (
           <Item<ItemType>
+            order={index}
             key={key}
             item={item}
             prefixCls={itemPrefixCls}
@@ -134,9 +123,11 @@ function Overflow<ItemType = any>(
         );
       })}
 
+      {/* Rest Count Item */}
       <Item
+        order={displayCount}
         prefixCls={itemPrefixCls}
-        className={`${itemPrefixCls}-overflow`}
+        className={`${itemPrefixCls}-rest`}
         disabled={disabled}
         registerSize={registerOverflowSize}
       >