diff --git a/.eslintrc.js b/.eslintrc.js
index ae0b57d7..57ff9711 100644
--- a/.eslintrc.js
+++ b/.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,
},
};
diff --git a/examples/renderTabBar-use-panes.tsx b/examples/renderTabBar-use-panes.tsx
new file mode 100644
index 00000000..c6c3b222
--- /dev/null
+++ b/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 (
+
+ {props.panes.map(pane => {
+ const key = pane.key;
+ return {key};
+ })}
+
+ );
+};
+
+export default () => {
+ return (
+
+
+
+ Content of Tab Pane 1
+
+
+ Content of Tab Pane 2
+
+
+ Content of Tab Pane 3
+
+
+
+ );
+};
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 418c5ceb..cb607cd2 100644
--- a/src/TabNavList/index.tsx
+++ b/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;
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index f20a9a20..991d9873 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -201,6 +201,7 @@ function Tabs(
onTabScroll,
extra: tabBarExtraContent,
style: tabBarStyle,
+ panes: children,
};
if (renderTabBar) {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 5df2632c..a174d5a6 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -139,18 +139,37 @@ describe('Tabs.Basic', () => {
).toEqual(33);
});
- it('tabNavBar', () => {
- const renderTabBar = jest.fn((props, Component) => {
- return (
-
- {node => {node}}
-
- );
+ describe('renderTabBar', () => {
+ it('works', () => {
+ const renderTabBar = jest.fn((props, Component) => {
+ return (
+
+ {node => {node}}
+
+ );
+ });
+ 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 (
+
+ {props.panes.map(pane => (
+
+ tab
+
+ ))}
+
+ );
+ };
+ 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', () => {