refactor: use renderable guards for tab content (#1021)

* refactor: use renderable guards

* test: cover renderable icon branches

* test: always restore timers in overflow test

Author: QDyanbing

package.json

@@ -45,7 +45,7 @@
     "@rc-component/menu": "~1.6.0",
     "@rc-component/motion": "^1.1.3",
     "@rc-component/resize-observer": "^1.0.0",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {

src/TabNavList/AddButton.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isReactRenderable } from '@rc-component/util';
 import type { EditableConfig, TabsLocale } from '../interface';
 
 export interface AddButtonProps {
@@ -25,7 +26,7 @@ const AddButton = React.forwardRef<HTMLButtonElement, AddButtonProps>((props, re
         editable.onEdit('add', { event });
       }}
     >
-      {editable.addIcon || '+'}
+      {isReactRenderable(editable.addIcon) ? editable.addIcon : '+'}
     </button>
   );
 });

src/TabNavList/ExtraContent.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isReactRenderable } from '@rc-component/util';
 import type { TabBarExtraContent, TabBarExtraMap, TabBarExtraPosition } from '../interface';
 
 interface ExtraContentProps {
@@ -9,7 +10,7 @@ interface ExtraContentProps {
 
 const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>((props, ref) => {
   const { position, prefixCls, extra } = props;
-  if (!extra) {
+  if (!isReactRenderable(extra)) {
     return null;
   }
 
@@ -31,7 +32,7 @@ const ExtraContent = React.forwardRef<HTMLDivElement, ExtraContentProps>((props,
     content = assertExtra.left;
   }
 
-  return content ? (
+  return isReactRenderable(content) ? (
     <div className={`${prefixCls}-extra-content`} ref={ref}>
       {content}
     </div>

src/TabNavList/OperationNode.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import Dropdown from '@rc-component/dropdown';
 import Menu, { MenuItem } from '@rc-component/menu';
-import { KeyCode } from '@rc-component/util';
+import { isReactRenderable, KeyCode } from '@rc-component/util';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
@@ -110,7 +110,11 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
                   onRemoveTab(e, key);
                 }}
               >
-                {closeIcon || editable.removeIcon || '×'}
+                {isReactRenderable(closeIcon)
+                  ? closeIcon
+                  : isReactRenderable(editable.removeIcon)
+                    ? editable.removeIcon
+                    : '×'}
               </button>
             )}
           </MenuItem>

src/TabNavList/TabNode.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import { isReactRenderable } from '@rc-component/util';
 import * as React from 'react';
 import type { EditableConfig, Tab } from '../interface';
 import { genDataNodeKey, getRemovable } from '../util';
@@ -68,7 +69,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
   }
 
   const labelNode = React.useMemo<React.ReactNode>(
-    () => (icon && typeof label === 'string' ? <span>{label}</span> : label),
+    () => (isReactRenderable(icon) && typeof label === 'string' ? <span>{label}</span> : label),
     [label, icon],
   );
 
@@ -121,8 +122,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
             {`Tab ${currentPosition} of ${tabCount}`}
           </div>
         )}
-        {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
-        {label && labelNode}
+        {isReactRenderable(icon) && <span className={`${tabPrefix}-icon`}>{icon}</span>}
+        {isReactRenderable(label) && labelNode}
       </div>
 
       {/* Remove Button */}
@@ -138,7 +139,11 @@ const TabNode: React.FC<TabNodeProps> = props => {
             onRemoveTab(e);
           }}
         >
-          {closeIcon || editable.removeIcon || '×'}
+          {isReactRenderable(closeIcon)
+            ? closeIcon
+            : isReactRenderable(editable.removeIcon)
+              ? editable.removeIcon
+              : '×'}
         </button>
       )}
     </div>

tests/index.test.tsx

@@ -464,6 +464,56 @@ describe('Tabs.Basic', () => {
         container.querySelector('.rc-tabs-tab-remove').querySelector('.close-light'),
       ).toBeTruthy();
     });
+
+    it('should render numeric close and remove icons', () => {
+      const onEdit = jest.fn();
+      const { container } = render(
+        getTabs({
+          editable: { onEdit, removeIcon: 0 },
+          items: [
+            {
+              key: 'close-icon',
+              label: 'Close icon',
+              closeIcon: 0,
+              children: 'Close icon',
+            },
+            {
+              key: 'remove-icon',
+              label: 'Remove icon',
+              children: 'Remove icon',
+            },
+          ],
+        }),
+      );
+
+      const removes = container.querySelectorAll('.rc-tabs-tab-remove');
+      expect(removes).toHaveLength(2);
+      expect(removes[0]).toHaveTextContent('0');
+      expect(removes[1]).toHaveTextContent('0');
+    });
+
+    it.each([false, '', null, undefined])(
+      'should fall back for a non-renderable remove icon: %p',
+      removeIcon => {
+        const onEdit = jest.fn();
+        const { container } = render(
+          getTabs({
+            editable: { onEdit, removeIcon },
+            items: [
+              {
+                key: 'fallback-icon',
+                label: 'Fallback icon',
+                closable: true,
+                children: 'Fallback icon',
+              },
+            ],
+          }),
+        );
+
+        expect(container.querySelector('.rc-tabs-tab-remove')).toHaveTextContent('×');
+      },
+    );
+
     it('should hide closeIcon when closeIcon is set to null or false', () => {
       const onEdit = jest.fn();
       const { container } = render(

tests/overflow.test.tsx

@@ -398,6 +398,54 @@ describe('Tabs.Overflow', () => {
       });
     });
 
+    it('renders numeric remove icons in the dropdown menu', () => {
+      jest.useFakeTimers();
+      try {
+        hackOffsetInfo.container = 20;
+
+        const onEdit = jest.fn();
+        const { container, unmount } = render(
+          getTabs({
+            editable: { onEdit, removeIcon: 0 },
+            items: [
+              {
+                key: 'close-icon',
+                label: 'Close icon',
+                closeIcon: 0,
+                children: 'Close icon',
+              },
+              {
+                key: 'remove-icon',
+                label: 'Remove icon',
+                closeIcon: '',
+                closable: true,
+                children: 'Remove icon',
+              },
+            ],
+          }),
+        );
+
+        triggerResize(container);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        fireEvent.mouseEnter(container.querySelector('.rc-tabs-nav-more'));
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const removes = document.querySelectorAll('.rc-tabs-dropdown-menu-item-remove');
+        expect(removes).toHaveLength(2);
+        expect(removes[0]).toHaveTextContent('0');
+        expect(removes[1]).toHaveTextContent('0');
+
+        unmount();
+      } finally {
+        jest.useRealTimers();
+      }
+    });
+
     it('auto hidden Dropdown', async () => {
       jest.useFakeTimers();