feat: add tabBarRender and mark renderTabBar as deprecated

README.md

@@ -106,7 +106,8 @@ ReactDom.render(
 | activeKey | string | - | current active tabPanel's key |
 | direction | `'ltr' or 'rtl'` | `'ltr'` | Layout direction of tabs component |
 | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
-| renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
+| renderTabBar | (props, TabBarComponent) => ReactElement | - | deprecated, use `tabBarRender` instead |
+| tabBarRender | (props, TabBarComponent) => ReactElement | - | How to render tab bar |
 | tabBarExtraContent | ReactNode \| `{ left: ReactNode, right: ReactNode }` | - | config extra content |
 | tabBarGutter | number | 0 | config tab bar gutter |
 | tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |

docs/demo/tabBarRender-draggable.md

@@ -0,0 +1,8 @@
+---
+title: tabBarRender-draggable
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/tabBarRender-draggable.tsx"></code>

docs/demo/tabBarRender-sticky.md

@@ -0,0 +1,10 @@
+---
+title: tabBarRender-sticky
+nav:
+  title: Demo
+  path: /demo
+---
+
+## tabBarRender-sticky
+
+<code src="../examples/tabBarRender-sticky.tsx"></code>

docs/demo/tabBarRender-use-panes.md

@@ -0,0 +1,8 @@
+---
+title: tabBarRender-use-panes
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/tabBarRender-use-panes.tsx"></code>

docs/examples/renderTabBar-dragable.tsx → docs/examples/tabBarRender-draggable.tsx

@@ -72,7 +72,7 @@ class DraggableTabs extends React.Component<TabsProps> {
     });
   };
 
-  renderTabBar = (props, DefaultTabBar) => (
+  tabBarRender = (props, DefaultTabBar) => (
     <DefaultTabBar {...props}>
       {node => {
         return (
@@ -112,7 +112,7 @@ class DraggableTabs extends React.Component<TabsProps> {
 
     return (
       <DndProvider backend={HTML5Backend}>
-        <Tabs renderTabBar={this.renderTabBar} {...this.props} items={orderTabs} />
+        <Tabs tabBarRender={this.tabBarRender} {...this.props} items={orderTabs} />
       </DndProvider>
     );
   }

docs/examples/renderTabBar-sticky.tsx → docs/examples/tabBarRender-sticky.tsx

@@ -3,7 +3,7 @@ import { StickyContainer, Sticky } from 'react-sticky';
 import Tabs from '../../src';
 import '../../assets/index.less';
 
-const renderTabBar = (props, DefaultTabBar) => (
+const tabBarRender = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
     {({ style }) => (
       <DefaultTabBar
@@ -21,7 +21,7 @@ export default () => {
       <StickyContainer>
         <Tabs
           defaultActiveKey="1"
-          renderTabBar={renderTabBar}
+          tabBarRender={tabBarRender}
           items={[
             {
               key: '1',

docs/examples/renderTabBar-use-panes.tsx → docs/examples/tabBarRender-use-panes.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Tabs from '../../src';
 import '../../assets/index.less';
 
-const renderTabBar = props => {
+const tabBarRender = props => {
   return (
     <div>
       {props.panes.map(pane => {
@@ -18,7 +18,7 @@ export default () => {
     <div style={{ height: 2000 }}>
       <Tabs
         defaultActiveKey="1"
-        renderTabBar={renderTabBar}
+        tabBarRender={tabBarRender}
         items={[
           {
             key: '1',

src/TabNavList/Wrapper.tsx

@@ -1,4 +1,4 @@
-// zombieJ: To compatible with `renderTabBar` usage.
+// zombieJ: To compatible with `tabBarRender` usage.
 
 import * as React from 'react';
 import type { TabNavListProps } from '.';
@@ -10,9 +10,9 @@ export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' |
   TabNavListProps;
 
 // We have to create a TabNavList components.
-const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ renderTabBar, ...restProps }) => {
+const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ tabBarRender, ...restProps }) => {
   const { tabs } = React.useContext(TabContext);
-  if (renderTabBar) {
+  if (tabBarRender) {
     const tabNavBarProps = {
       ...restProps,
       // Legacy support. We do not use this actually
@@ -21,7 +21,7 @@ const TabNavListWrapper: React.FC<TabNavListWrapperProps> = ({ renderTabBar, ...
       )),
     };
 
-    return renderTabBar(tabNavBarProps, TabNavList);
+    return tabBarRender(tabNavBarProps, TabNavList);
   }
 
   return <TabNavList {...restProps} />;

src/TabNavList/index.tsx

@@ -17,7 +17,7 @@ import type {
   AnimatedConfig,
   EditableConfig,
   OnTabScroll,
-  RenderTabBar,
+  TabBarRender,
   SizeInfo,
   TabBarExtraContent,
   TabPosition,
@@ -42,7 +42,7 @@ export interface TabNavListProps {
   moreTransitionName?: string;
   mobile: boolean;
   tabBarGutter?: number;
-  renderTabBar?: RenderTabBar;
+  tabBarRender?: TabBarRender;
   className?: string;
   style?: React.CSSProperties;
   locale?: TabsLocale;

src/Tabs.tsx

@@ -13,7 +13,7 @@ import type {
   AnimatedConfig,
   EditableConfig,
   OnTabScroll,
-  RenderTabBar,
+  TabBarRender,
   Tab,
   TabBarExtraContent,
   TabPosition,
@@ -46,7 +46,9 @@ export interface TabsProps
   defaultActiveKey?: string;
   direction?: 'ltr' | 'rtl';
   animated?: boolean | AnimatedConfig;
-  renderTabBar?: RenderTabBar;
+  /** @deprecated Please use `tabBarRender` instead */
+  renderTabBar?: TabBarRender;
+  tabBarRender?: TabBarRender;
   tabBarExtraContent?: TabBarExtraContent;
   tabBarGutter?: number;
   tabBarStyle?: React.CSSProperties;
@@ -94,6 +96,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     moreTransitionName,
     destroyInactiveTabPane,
     renderTabBar,
+    tabBarRender: customizeTabBarRender,
     onChange,
     onTabClick,
     onTabScroll,
@@ -186,6 +189,8 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     indicator,
   };
 
+  const tabBarRender = customizeTabBarRender ?? renderTabBar
+
   return (
     <TabContext.Provider value={{ tabs, prefixCls }}>
       <div
@@ -203,7 +208,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
         )}
         {...restProps}
       >
-        <TabNavListWrapper {...tabNavBarProps} renderTabBar={renderTabBar} />
+        <TabNavListWrapper {...tabNavBarProps} tabBarRender={tabBarRender} />
         <TabPanelList
           destroyInactiveTabPane={destroyInactiveTabPane}
           {...sharedProps}

src/interface.ts

@@ -27,7 +27,7 @@ export interface Tab extends Omit<TabPaneProps, 'tab'> {
   label: React.ReactNode;
 }
 
-type RenderTabBarProps = {
+type TabBarRenderProps = {
   id: string;
   activeKey: string;
   animated: AnimatedConfig;
@@ -47,8 +47,8 @@ type RenderTabBarProps = {
   panes: React.ReactNode;
 };
 
-export type RenderTabBar = (
-  props: RenderTabBarProps,
+export type TabBarRender = (
+  props: TabBarRenderProps,
   DefaultTabBar: React.ComponentType<TabNavListProps>,
 ) => React.ReactElement;
 

tests/index.test.tsx

@@ -305,22 +305,22 @@ describe('Tabs.Basic', () => {
     });
   });
 
-  describe('renderTabBar', () => {
+  describe('tabBarRender', () => {
     it('works', () => {
-      const renderTabBar = jest.fn((props, Component) => {
+      const tabBarRender = jest.fn((props, Component) => {
         return (
           <div className="my-wrapper">
             <Component {...props}>{node => <span className="my-node">{node}</span>}</Component>
           </div>
         );
       });
-      const { container } = render(getTabs({ renderTabBar }));
+      const { container } = render(getTabs({ tabBarRender }));
       expect(container.querySelector('.my-wrapper')).toBeTruthy();
       expect(container.querySelector('.my-node')).toBeTruthy();
-      expect(renderTabBar).toHaveBeenCalled();
+      expect(tabBarRender).toHaveBeenCalled();
     });
     it('has panes property in props', () => {
-      const renderTabBar = props => {
+      const tabBarRender = props => {
         return (
           <div>
             {props.panes.map(pane => (
@@ -331,7 +331,7 @@ describe('Tabs.Basic', () => {
           </div>
         );
       };
-      const { container } = render(getTabs({ renderTabBar }));
+      const { container } = render(getTabs({ tabBarRender }));
       expect(container.querySelector('[data-key="light"]')).toBeTruthy();
       expect(container.querySelector('[data-key="bamboo"]')).toBeTruthy();
       expect(container.querySelector('[data-key="cute"]')).toBeTruthy();

tests/swipe.js

@@ -37,7 +37,7 @@ class NormalTabs extends Component {
             this.root = root;
           }}
           defaultActiveKey="8"
-          renderTabBar={() => (
+          tabBarRender={() => (
             <SwipeableInkTabBar
               ref={tabBar => {
                 this.tabBar = tabBar;
@@ -81,7 +81,7 @@ describe('rc-swipeable-tabs', () => {
     const wrapper = mount(
       <Tabs
         defaultActiveKey="8"
-        renderTabBar={() => <SwipeableInkTabBar onTabClick={handleTabClick} />}
+        tabBarRender={() => <SwipeableInkTabBar onTabClick={handleTabClick} />}
         renderTabContent={() => <SwipeableTabContent />}
         onChange={handleChange}
       >