From 4e45112daa4710b2eebc1edfb096f9b6fc2e62cf Mon Sep 17 00:00:00 2001 From: ascodelife <394922886@qq.com> Date: Sat, 21 Aug 2021 13:14:39 +0800 Subject: [PATCH 1/3] refactor: Move prop destroyInactiveTabPane to TabPane --- src/TabPanelList/TabPane.tsx | 2 +- src/TabPanelList/index.tsx | 7 ++----- src/Tabs.tsx | 16 +++++----------- 3 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx index c21996ab..1346d14c 100644 --- a/src/TabPanelList/TabPane.tsx +++ b/src/TabPanelList/TabPane.tsx @@ -10,6 +10,7 @@ export interface TabPaneProps { forceRender?: boolean; closable?: boolean; closeIcon?: React.ReactNode; + destroyInactiveTabPane?: boolean; // Pass by TabPaneList prefixCls?: string; @@ -17,7 +18,6 @@ export interface TabPaneProps { id?: string; animated?: boolean; active?: boolean; - destroyInactiveTabPane?: boolean; } export default function TabPane({ diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx index ac1d0a9d..06280a16 100644 --- a/src/TabPanelList/index.tsx +++ b/src/TabPanelList/index.tsx @@ -9,7 +9,6 @@ export interface TabPanelListProps { rtl: boolean; animated?: AnimatedConfig; tabPosition?: TabPosition; - destroyInactiveTabPane?: boolean; } export default function TabPanelList({ @@ -18,12 +17,11 @@ export default function TabPanelList({ animated, tabPosition, rtl, - destroyInactiveTabPane, }: TabPanelListProps) { const { prefixCls, tabs } = React.useContext(TabContext); const tabPaneAnimated = animated.tabPane; - const activeIndex = tabs.findIndex(tab => tab.key === activeKey); + const activeIndex = tabs.findIndex((tab) => tab.key === activeKey); return (
@@ -37,7 +35,7 @@ export default function TabPanelList({ : null } > - {tabs.map(tab => { + {tabs.map((tab) => { return React.cloneElement(tab.node, { key: tab.key, prefixCls, @@ -45,7 +43,6 @@ export default function TabPanelList({ id, animated: tabPaneAnimated, active: tab.key === activeKey, - destroyInactiveTabPane, }); })}
diff --git a/src/Tabs.tsx b/src/Tabs.tsx index f04ec146..c33b734f 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -50,7 +50,6 @@ export interface TabsProps extends Omit, 'o tabBarGutter?: number; tabBarStyle?: React.CSSProperties; tabPosition?: TabPosition; - destroyInactiveTabPane?: boolean; onChange?: (activeKey: string) => void; onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void; @@ -81,7 +80,7 @@ function parseTabList(children: React.ReactNode): Tab[] { return null; }) - .filter(tab => tab); + .filter((tab) => tab); } function Tabs( @@ -105,7 +104,6 @@ function Tabs( locale, moreIcon, moreTransitionName, - destroyInactiveTabPane, renderTabBar, onChange, onTabClick, @@ -149,18 +147,18 @@ function Tabs( defaultValue: defaultActiveKey, }); const [activeIndex, setActiveIndex] = useState(() => - tabs.findIndex(tab => tab.key === mergedActiveKey), + tabs.findIndex((tab) => tab.key === mergedActiveKey), ); // Reset active key if not exist anymore useEffect(() => { - let newActiveIndex = tabs.findIndex(tab => tab.key === mergedActiveKey); + let newActiveIndex = tabs.findIndex((tab) => tab.key === mergedActiveKey); if (newActiveIndex === -1) { newActiveIndex = Math.max(0, Math.min(activeIndex, tabs.length - 1)); setMergedActiveKey(tabs[newActiveIndex]?.key); } setActiveIndex(newActiveIndex); - }, [tabs.map(tab => tab.key).join('_'), mergedActiveKey, activeIndex]); + }, [tabs.map((tab) => tab.key).join('_'), mergedActiveKey, activeIndex]); // ===================== Accessibility ==================== const [mergedId, setMergedId] = useMergedState(null, { @@ -238,11 +236,7 @@ function Tabs( {...restProps} > {tabNavBar} - + ); From b334ba683b53da5e1cb8203f226b9acf4a34d751 Mon Sep 17 00:00:00 2001 From: ascodelife <394922886@qq.com> Date: Sat, 21 Aug 2021 13:15:33 +0800 Subject: [PATCH 2/3] test: add test cases --- tests/index.test.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/tests/index.test.tsx b/tests/index.test.tsx index f0917634..584326bd 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -158,8 +158,12 @@ describe('Tabs.Basic', () => { const wrapper = mount( getTabs({ activeKey: 'light', - destroyInactiveTabPane: true, - children: [Light, Bamboo], + children: [ + + Light + , + Bamboo, + ], }), ); @@ -172,6 +176,9 @@ describe('Tabs.Basic', () => { wrapper.setProps({ activeKey: 'bamboo' }); matchText('', 'Bamboo'); + + wrapper.setProps({ activeKey: 'light' }); + matchText('Light', 'Bamboo'); }); describe('editable', () => { From d7130a235ce59259caa067bc2119bfb772cea6d5 Mon Sep 17 00:00:00 2001 From: ascodelife <394922886@qq.com> Date: Sat, 21 Aug 2021 13:15:58 +0800 Subject: [PATCH 3/3] docs: Modify document and examples --- README.md | 2 +- docs/examples/mix.tsx | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2bbf9e03..221cd54a 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,6 @@ React.render( | activeKey | string | - | current active tabPanel's key | | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation | | defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent | -| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab | | direction | `'ltr' | 'rlt'` | `'ltr'` | Layout direction of tabs component | | editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable | | locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text | @@ -100,6 +99,7 @@ React.render( | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs | | tab | ReactNode | - | current tab's title corresponding to current tabPane | | closeIcon | ReactNode | - | Config close icon | +| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab | ## Development diff --git a/docs/examples/mix.tsx b/docs/examples/mix.tsx index 79693c60..a903bfea 100644 --- a/docs/examples/mix.tsx +++ b/docs/examples/mix.tsx @@ -82,7 +82,17 @@ export default () => { setDestroyInactiveTabPane(val => !val)} + onChange={() => { + setTabPanes(tabs => + tabs.map(tab => + React.cloneElement(tab, { + ...tab.props, + destroyInactiveTabPane: !tab.props.destroyInactiveTabPane, + }), + ), + ); + setDestroyInactiveTabPane(val => !val); + }} /> Destroy Inactive TabPane @@ -150,7 +160,6 @@ export default () => { onTabScroll={info => { console.log('Scroll:', info); }} - destroyInactiveTabPane={destroyInactiveTabPane} animated={{ tabPane: animated }} editable={editableConfig} direction={rtl ? 'rtl' : null}