chore: RM MessageChanel

Author: zombieJ

package.json

@@ -43,7 +43,8 @@
   "dependencies": {
     "@babel/runtime": "^7.11.1",
     "classnames": "^2.2.1",
-    "rc-resize-observer": "^0.3.0"
+    "rc-resize-observer": "^0.3.0",
+    "rc-util": "^5.5.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",

src/Overflow.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import Item from './Item';
-import { useBatchState } from './hooks/useBatchState';
+import { useBatchFrameState } from './hooks/useBatchFrameState';
 
 export interface OverflowProps<ItemType> {
   prefixCls?: string;
@@ -30,7 +30,7 @@ function Overflow<ItemType = any>(
     maxCount = 'responsive',
   } = props;
 
-  const createUseState = useBatchState();
+  const createUseState = useBatchFrameState();
 
   const [containerWidth, setContainerWidth] = createUseState(0);
   const [itemWidths, setItemWidths] = createUseState(
@@ -39,6 +39,7 @@ function Overflow<ItemType = any>(
   const [overflowWidth, setOverflowWidth] = createUseState(0);
 
   const [displayCount, setDisplayCount] = React.useState(0);
+  const [restReady, setRestReady] = React.useState(false);
 
   const itemPrefixCls = `${prefixCls}-item`;
 
@@ -58,6 +59,13 @@ function Overflow<ItemType = any>(
     [renderItem],
   );
 
+  function updateDisplayCount(count: number, notReady?: boolean) {
+    setDisplayCount(count);
+    if (!notReady) {
+      setRestReady(count < data.length - 1);
+    }
+  }
+
   // ================================= Size =================================
   function onOverflowResize(_: object, element: HTMLElement) {
     setContainerWidth(element.clientWidth);
@@ -92,18 +100,18 @@ function Overflow<ItemType = any>(
 
         // Break since data not ready
         if (itemWidth === undefined) {
-          setDisplayCount(i - 1);
+          updateDisplayCount(i - 1, true);
           break;
         }
 
         // Find best match
         totalWidth += itemWidth;
 
         if (totalWidth + overflowWidth > containerWidth) {
-          setDisplayCount(i - 1);
+          updateDisplayCount(i - 1);
           break;
         } else if (i === len - 1) {
-          setDisplayCount(len - 1);
+          updateDisplayCount(len - 1);
           break;
         }
       }
@@ -138,6 +146,7 @@ function Overflow<ItemType = any>(
         className={`${itemPrefixCls}-rest`}
         disabled={disabled}
         registerSize={registerOverflowSize}
+        display={restReady}
       >
         Overflow
       </Item>

src/hooks/useBatchState.tsx renamed to src/hooks/useBatchFrameState.tsx

@@ -1,11 +1,11 @@
 import { useRef, useState } from 'react';
-import { beforeFrame, cancelBeforeFrame } from '../util';
+import raf from 'rc-util/lib/raf';
 
 /**
  * State generate. Return a `setState` but it will flush all state with one render to save perf.
  * This is not a realization of `unstable_batchedUpdates`.
  */
-export function useBatchState() {
+export function useBatchFrameState() {
   const [, forceUpdate] = useState({});
   const statesRef = useRef<any[]>([]);
   let walkingIndex = 0;
@@ -29,10 +29,10 @@ export function useBatchState() {
       statesRef.current[myIndex] =
         typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
 
-      cancelBeforeFrame(beforeFrameId);
+      raf.cancel(beforeFrameId);
 
       // Flush with batch
-      beforeFrameId = beforeFrame(() => {
+      beforeFrameId = raf(() => {
         forceUpdate({});
       });
     }