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', () => {