fix: Tabs inkBar not show in StrictMode (#628)

* fix: strictMode can get correct offset * chore: merge master * test: update snapshot
react-component · Dec 19, 2022 · 4ec9218 · 4ec9218 · vercel · Dec 19, 2022
1 parent 54912b6
commit 4ec9218
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 70 deletions.
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
-import type { Tab, EditableConfig } from '../interface';
+import * as React from 'react';
+import type { EditableConfig, Tab } from '../interface';
 
 export interface TabNodeProps {
   id: string;
@@ -15,32 +15,25 @@ export interface TabNodeProps {
   renderWrapper?: (node: React.ReactElement) => React.ReactElement;
   removeAriaLabel?: string;
   removeIcon?: React.ReactNode;
-  onRemove: () => void;
   onFocus: React.FocusEventHandler;
   style?: React.CSSProperties;
 }
 
-function TabNode(
-  {
-    prefixCls,
-    id,
-    active,
-    tab: { key, label, disabled, closeIcon },
-    closable,
-    renderWrapper,
-    removeAriaLabel,
-    editable,
-    onClick,
-    onRemove,
-    onFocus,
-    style,
-  }: TabNodeProps,
-  ref: React.Ref<HTMLDivElement>,
-) {
+function TabNode({
+  prefixCls,
+  id,
+  active,
+  tab: { key, label, disabled, closeIcon },
+  closable,
+  renderWrapper,
+  removeAriaLabel,
+  editable,
+  onClick,
+  onFocus,
+  style,
+}: TabNodeProps) {
   const tabPrefix = `${prefixCls}-tab`;
 
-  React.useEffect(() => onRemove, []);
-
   const removable = editable && closable !== false && !disabled;
 
   function onInternalClick(e: React.MouseEvent | React.KeyboardEvent) {
@@ -62,7 +55,8 @@ function TabNode(
   const node: React.ReactElement = (
     <div
       key={key}
-      ref={ref}
+      // ref={ref}
+      data-node-key={key}
       className={classNames(tabPrefix, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
@@ -116,4 +110,4 @@ function TabNode(
   return renderWrapper ? renderWrapper(node) : node;
 }
 
-export default React.forwardRef(TabNode);
+export default TabNode;
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -1,32 +1,31 @@
-import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
 import raf from 'rc-util/lib/raf';
 import { useComposeRef } from 'rc-util/lib/ref';
-import ResizeObserver from 'rc-resize-observer';
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import useOffsets from '../hooks/useOffsets';
 import useRaf, { useRafState } from '../hooks/useRaf';
-import TabNode from './TabNode';
+import useSyncState from '../hooks/useSyncState';
+import useTouchMove from '../hooks/useTouchMove';
+import useVisibleRange from '../hooks/useVisibleRange';
 import type {
-  TabSizeMap,
-  TabPosition,
-  RenderTabBar,
-  TabsLocale,
-  EditableConfig,
   AnimatedConfig,
+  EditableConfig,
   OnTabScroll,
-  TabBarExtraContent,
+  RenderTabBar,
   SizeInfo,
+  TabBarExtraContent,
+  TabPosition,
+  TabSizeMap,
+  TabsLocale,
 } from '../interface';
-import useOffsets from '../hooks/useOffsets';
-import useVisibleRange from '../hooks/useVisibleRange';
-import OperationNode from './OperationNode';
 import TabContext from '../TabContext';
-import useTouchMove from '../hooks/useTouchMove';
-import useRefs from '../hooks/useRefs';
-import AddButton from './AddButton';
-import useSyncState from '../hooks/useSyncState';
 import { stringify } from '../util';
+import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
+import OperationNode from './OperationNode';
+import TabNode from './TabNode';
 
 export interface TabNavListProps {
   id: string;
@@ -88,7 +87,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
   const tabListRef = useRef<HTMLDivElement>();
   const operationsRef = useRef<HTMLDivElement>();
   const innerAddButtonRef = useRef<HTMLButtonElement>();
-  const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
+  // const [getBtnRef, removeBtnRef] = useRefs<HTMLDivElement>();
 
   const tabPositionTopOrBottom = tabPosition === 'top' || tabPosition === 'bottom';
 
@@ -287,13 +286,9 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
         active={key === activeKey}
         renderWrapper={children}
         removeAriaLabel={locale?.removeAriaLabel}
-        ref={getBtnRef(key)}
         onClick={e => {
           onTabClick(key, e);
         }}
-        onRemove={() => {
-          removeBtnRef(key);
-        }}
         onFocus={() => {
           scrollToTab(key);
           doLockAnimation();
@@ -315,7 +310,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     setTabSizes(() => {
       const newSizes: TabSizeMap = new Map();
       tabs.forEach(({ key }) => {
-        const btnNode = getBtnRef(key).current;
+        const btnNode = tabListRef.current.querySelector<HTMLElement>(`[data-node-key="${key}"]`);
         if (btnNode) {
           newSizes.set(key, {
             width: btnNode.offsetWidth,

diff --git a/src/hooks/useRefs.ts b/src/hooks/useRefs.ts
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Tabs.Basic Normal 1`] = `
       >
         <div
           class="rc-tabs-tab"
+          data-node-key="light"
         >
           <div
             aria-controls="rc-tabs-test-panel-light"
@@ -31,6 +32,7 @@ exports[`Tabs.Basic Normal 1`] = `
         </div>
         <div
           class="rc-tabs-tab rc-tabs-tab-active"
+          data-node-key="bamboo"
         >
           <div
             aria-controls="rc-tabs-test-panel-bamboo"
@@ -45,6 +47,7 @@ exports[`Tabs.Basic Normal 1`] = `
         </div>
         <div
           class="rc-tabs-tab"
+          data-node-key="cute"
         >
           <div
             aria-controls="rc-tabs-test-panel-cute"
@@ -118,6 +121,7 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
       >
         <div
           class="rc-tabs-tab rc-tabs-tab-active"
+          data-node-key="light"
         >
           <div
             aria-controls="rc-tabs-test-panel-light"

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/dom';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import React from 'react';
@@ -123,6 +123,34 @@ describe('Tabs.Basic', () => {
     render(getTabs({ items: null }));
   });
 
+  it('strictMode should show correct ink bar', () => {
+    jest.useFakeTimers();
+
+    const { container } = render(
+      <React.StrictMode>
+        <Tabs
+          items={new Array(2).fill(0).map((_, index) => ({
+            label: `Tab ${index}`,
+            key: `${index}`,
+            children: `Content of Tab Pane ${index}`,
+          }))}
+          activeKey="0"
+        />
+      </React.StrictMode>,
+    );
+
+    for (let i = 0; i < 10; i += 1) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+
+    expect(container.querySelector<HTMLElement>('.rc-tabs-ink-bar')).toHaveStyle({
+      width: '20px',
+    });
+    jest.useRealTimers();
+  });
+
   it('same width in windows call resize', async () => {
     const App = () => {
       const [list, setList] = React.useState([