feat: render tab bar use panes (#291)

* feat: render tab bar use panes

* chore: lint

* fix: lint errors

* fix: quote

* chore

Author: 07akioni

.eslintrc.js

@@ -22,5 +22,7 @@ module.exports = {
       { devDependencies: true, optionalDependencies: false, peerDependencies: false },
     ],
     'brace-style': 0,
+    'no-unused-expressions': 0,
+    '@typescript-eslint/no-unused-expressions': 1,
   },
 };

examples/renderTabBar-use-panes.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Tabs, { TabPane } from '../src';
+import '../assets/index.less';
+
+const renderTabBar = props => {
+  return (
+    <div>
+      {props.panes.map(pane => {
+        const key = pane.key;
+        return <span key={key}>{key}</span>;
+      })}
+    </div>
+  );
+};
+
+export default () => {
+  return (
+    <div style={{ height: 2000 }}>
+      <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
+        <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
+          Content of Tab Pane 1
+        </TabPane>
+        <TabPane tab="Tab 2" key="2">
+          Content of Tab Pane 2
+        </TabPane>
+        <TabPane tab="Tab 3" key="3">
+          Content of Tab Pane 3
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};

src/TabNavList/index.tsx

@@ -28,6 +28,7 @@ export interface TabNavListProps {
   tabPosition: TabPosition;
   activeKey: string;
   rtl: boolean;
+  panes: React.ReactNode;
   animated?: AnimatedConfig;
   extra?: React.ReactNode;
   editable?: EditableConfig;

src/Tabs.tsx

@@ -201,6 +201,7 @@ function Tabs(
     onTabScroll,
     extra: tabBarExtraContent,
     style: tabBarStyle,
+    panes: children,
   };
 
   if (renderTabBar) {

tests/index.test.tsx

@@ -139,18 +139,37 @@ describe('Tabs.Basic', () => {
     ).toEqual(33);
   });
 
-  it('tabNavBar', () => {
-    const renderTabBar = jest.fn((props, Component) => {
-      return (
-        <div className="my-wrapper">
-          <Component {...props}>{node => <span className="my-node">{node}</span>}</Component>
-        </div>
-      );
+  describe('renderTabBar', () => {
+    it('works', () => {
+      const renderTabBar = jest.fn((props, Component) => {
+        return (
+          <div className="my-wrapper">
+            <Component {...props}>{node => <span className="my-node">{node}</span>}</Component>
+          </div>
+        );
+      });
+      const wrapper = mount(getTabs({ renderTabBar }));
+      expect(wrapper.find('.my-wrapper').length).toBeTruthy();
+      expect(wrapper.find('.my-node').length).toBeTruthy();
+      expect(renderTabBar).toHaveBeenCalled();
+    });
+    it('has panes property in props', () => {
+      const renderTabBar = props => {
+        return (
+          <div>
+            {props.panes.map(pane => (
+              <span key={pane.key} data-key={pane.key}>
+                tab
+              </span>
+            ))}
+          </div>
+        );
+      };
+      const wrapper = mount(getTabs({ renderTabBar }));
+      expect(wrapper.find('[data-key="light"]').length).toBeTruthy();
+      expect(wrapper.find('[data-key="bamboo"]').length).toBeTruthy();
+      expect(wrapper.find('[data-key="cute"]').length).toBeTruthy();
     });
-    const wrapper = mount(getTabs({ renderTabBar }));
-    expect(wrapper.find('.my-wrapper').length).toBeTruthy();
-    expect(wrapper.find('.my-node').length).toBeTruthy();
-    expect(renderTabBar).toHaveBeenCalled();
   });
 
   it('destroyInactiveTabPane', () => {