From e1572a63bd3853cde1864abdf969883b7e0ac04f Mon Sep 17 00:00:00 2001
From: AlanQtten <735814735@qq.com>
Date: Tue, 30 Jan 2024 15:05:44 +0800
Subject: [PATCH] feat: add `tabBarRender` and mark `renderTabBar` as
 `deprecated`

---
 README.md                                            |  3 ++-
 docs/demo/renderTabBar-dragable.md                   |  8 --------
 docs/demo/renderTabBar-sticky.md                     | 10 ----------
 docs/demo/renderTabBar-use-panes.md                  |  8 --------
 docs/demo/tabBarRender-draggable.md                  |  8 ++++++++
 docs/demo/tabBarRender-sticky.md                     | 10 ++++++++++
 docs/demo/tabBarRender-use-panes.md                  |  8 ++++++++
 ...abBar-dragable.tsx => tabBarRender-draggable.tsx} |  4 ++--
 ...nderTabBar-sticky.tsx => tabBarRender-sticky.tsx} |  4 ++--
 ...bBar-use-panes.tsx => tabBarRender-use-panes.tsx} |  4 ++--
 src/TabNavList/Wrapper.tsx                           |  8 ++++----
 src/TabNavList/index.tsx                             |  4 ++--
 src/Tabs.tsx                                         | 11 ++++++++---
 src/interface.ts                                     |  6 +++---
 tests/index.test.tsx                                 | 12 ++++++------
 tests/swipe.js                                       |  4 ++--
 16 files changed, 59 insertions(+), 53 deletions(-)
 delete mode 100644 docs/demo/renderTabBar-dragable.md
 delete mode 100644 docs/demo/renderTabBar-sticky.md
 delete mode 100644 docs/demo/renderTabBar-use-panes.md
 create mode 100644 docs/demo/tabBarRender-draggable.md
 create mode 100644 docs/demo/tabBarRender-sticky.md
 create mode 100644 docs/demo/tabBarRender-use-panes.md
 rename docs/examples/{renderTabBar-dragable.tsx => tabBarRender-draggable.tsx} (96%)
 rename docs/examples/{renderTabBar-sticky.tsx => tabBarRender-sticky.tsx} (92%)
 rename docs/examples/{renderTabBar-use-panes.tsx => tabBarRender-use-panes.tsx} (92%)

diff --git a/README.md b/README.md
index 0599bff0..4dde1d2b 100644
--- a/README.md
+++ b/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 |
diff --git a/docs/demo/renderTabBar-dragable.md b/docs/demo/renderTabBar-dragable.md
deleted file mode 100644
index 0d3f38e9..00000000
--- a/docs/demo/renderTabBar-dragable.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: renderTabBar-dragable
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/renderTabBar-dragable.tsx"></code>
diff --git a/docs/demo/renderTabBar-sticky.md b/docs/demo/renderTabBar-sticky.md
deleted file mode 100644
index 0b6c4994..00000000
--- a/docs/demo/renderTabBar-sticky.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: renderTabBar-sticky
-nav:
-  title: Demo
-  path: /demo
----
-
-## renderTabBar-sticky
-
-<code src="../examples/renderTabBar-sticky.tsx"></code>
\ No newline at end of file
diff --git a/docs/demo/renderTabBar-use-panes.md b/docs/demo/renderTabBar-use-panes.md
deleted file mode 100644
index 616e1cfc..00000000
--- a/docs/demo/renderTabBar-use-panes.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: enderTabBar-use-panes
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/renderTabBar-use-panes.tsx"></code>
diff --git a/docs/demo/tabBarRender-draggable.md b/docs/demo/tabBarRender-draggable.md
new file mode 100644
index 00000000..01f0c4a7
--- /dev/null
+++ b/docs/demo/tabBarRender-draggable.md
@@ -0,0 +1,8 @@
+---
+title: tabBarRender-draggable
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/tabBarRender-draggable.tsx"></code>
diff --git a/docs/demo/tabBarRender-sticky.md b/docs/demo/tabBarRender-sticky.md
new file mode 100644
index 00000000..a583c99b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/demo/tabBarRender-use-panes.md b/docs/demo/tabBarRender-use-panes.md
new file mode 100644
index 00000000..e4bd45d9
--- /dev/null
+++ b/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>
diff --git a/docs/examples/renderTabBar-dragable.tsx b/docs/examples/tabBarRender-draggable.tsx
similarity index 96%
rename from docs/examples/renderTabBar-dragable.tsx
rename to docs/examples/tabBarRender-draggable.tsx
index 4416badf..96ea9f65 100644
--- a/docs/examples/renderTabBar-dragable.tsx
+++ b/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>
     );
   }
diff --git a/docs/examples/renderTabBar-sticky.tsx b/docs/examples/tabBarRender-sticky.tsx
similarity index 92%
rename from docs/examples/renderTabBar-sticky.tsx
rename to docs/examples/tabBarRender-sticky.tsx
index bd70e7a0..5edaeeaf 100644
--- a/docs/examples/renderTabBar-sticky.tsx
+++ b/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',
diff --git a/docs/examples/renderTabBar-use-panes.tsx b/docs/examples/tabBarRender-use-panes.tsx
similarity index 92%
rename from docs/examples/renderTabBar-use-panes.tsx
rename to docs/examples/tabBarRender-use-panes.tsx
index a976effe..cdf660fe 100644
--- a/docs/examples/renderTabBar-use-panes.tsx
+++ b/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',
diff --git a/src/TabNavList/Wrapper.tsx b/src/TabNavList/Wrapper.tsx
index a2b4bd50..6381165d 100644
--- a/src/TabNavList/Wrapper.tsx
+++ b/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} />;
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 124583e1..151ed988 100644
--- a/src/TabNavList/index.tsx
+++ b/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;
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 3876e85e..e34d0901 100644
--- a/src/Tabs.tsx
+++ b/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}
diff --git a/src/interface.ts b/src/interface.ts
index ae7d6a9e..fd0a44c7 100644
--- a/src/interface.ts
+++ b/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;
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index bb377a73..1d35095a 100644
--- a/tests/index.test.tsx
+++ b/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();
diff --git a/tests/swipe.js b/tests/swipe.js
index 27b97e9f..1d05e529 100644
--- a/tests/swipe.js
+++ b/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}
       >