From ba0fc585d8a86455e7461d7013cb1794364e51d7 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 16:22:48 +0800 Subject: [PATCH 1/5] feat: render tab bar use panes --- examples/renderTabBar-use-panes.tsx | 34 ++++++++++++++++++++++++ src/TabNavList/index.tsx | 1 + src/Tabs.tsx | 1 + tests/index.test.tsx | 40 ++++++++++++++++++++--------- 4 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 examples/renderTabBar-use-panes.tsx diff --git a/examples/renderTabBar-use-panes.tsx b/examples/renderTabBar-use-panes.tsx new file mode 100644 index 00000000..988f6283 --- /dev/null +++ b/examples/renderTabBar-use-panes.tsx @@ -0,0 +1,34 @@ +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..a0762607 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -139,19 +139,35 @@ 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(); }); - 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(); + }); + }) + it('destroyInactiveTabPane', () => { const wrapper = mount( From 9b18c24d09cd4df7e0d6404b115532ada9d82b17 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 16:28:46 +0800 Subject: [PATCH 2/5] chore: lint --- examples/renderTabBar-use-panes.tsx | 12 +++++------- tests/index.test.tsx | 11 +++++++---- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/examples/renderTabBar-use-panes.tsx b/examples/renderTabBar-use-panes.tsx index 988f6283..c6c3b222 100644 --- a/examples/renderTabBar-use-panes.tsx +++ b/examples/renderTabBar-use-panes.tsx @@ -2,15 +2,13 @@ import React from 'react'; import Tabs, { TabPane } from '../src'; import '../assets/index.less'; -const renderTabBar = (props) => { +const renderTabBar = props => { return (
- { - props.panes.map(pane => { - const key = pane.key - return {key} - }) - } + {props.panes.map(pane => { + const key = pane.key; + return {key}; + })}
); }; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index a0762607..a174d5a6 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -154,10 +154,14 @@ describe('Tabs.Basic', () => { expect(renderTabBar).toHaveBeenCalled(); }); it('has panes property in props', () => { - const renderTabBar = (props) => { + const renderTabBar = props => { return (
- {props.panes.map(pane => tab)} + {props.panes.map(pane => ( + + tab + + ))}
); }; @@ -166,8 +170,7 @@ describe('Tabs.Basic', () => { expect(wrapper.find('[data-key="bamboo"]').length).toBeTruthy(); expect(wrapper.find('[data-key="cute"]').length).toBeTruthy(); }); - }) - + }); it('destroyInactiveTabPane', () => { const wrapper = mount( From a76838578b5fc2d9a12bb4b221b98318d353a8b1 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 16:51:31 +0800 Subject: [PATCH 3/5] fix: lint errors --- .eslintrc.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index ae0b57d7..4de3d095 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": "off", + '@typescript-eslint/no-unused-expressions': ["error"], }, }; From ccdf44ec96546d90fd1356eb3086ba5dee008735 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 16:52:01 +0800 Subject: [PATCH 4/5] fix: quote --- .eslintrc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4de3d095..0697bdce 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,7 +22,7 @@ module.exports = { { devDependencies: true, optionalDependencies: false, peerDependencies: false }, ], 'brace-style': 0, - "no-unused-expressions": "off", - '@typescript-eslint/no-unused-expressions': ["error"], + 'no-unused-expressions': 'off', + '@typescript-eslint/no-unused-expressions': ['error'], }, }; From 475de9e62409d7966b208a83111b296cf0876c14 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 16:54:28 +0800 Subject: [PATCH 5/5] chore --- .eslintrc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 0697bdce..57ff9711 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -22,7 +22,7 @@ module.exports = { { devDependencies: true, optionalDependencies: false, peerDependencies: false }, ], 'brace-style': 0, - 'no-unused-expressions': 'off', - '@typescript-eslint/no-unused-expressions': ['error'], + 'no-unused-expressions': 0, + '@typescript-eslint/no-unused-expressions': 1, }, };