diff --git a/README.md b/README.md
index 4789cf40..4440cece 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,7 @@ React.render(
| name | type | default | description |
| --- | --- | --- | --- |
+| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
| key | string | - | corresponding to activeKey, should be unique |
| 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 |
diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
index 94f730dd..e1171701 100644
--- a/src/TabPanelList/index.tsx
+++ b/src/TabPanelList/index.tsx
@@ -33,7 +33,7 @@ export default function TabPanelList({
})}
>
{tabs.map(
- ({ key, forceRender, style: paneStyle, className: paneClassName, ...restTabProps }) => {
+ ({ key, forceRender, style: paneStyle, className: paneClassName, destroyInactiveTabPane: itemDestroyInactiveTabPane, ...restTabProps }) => {
const active = key === activeKey;
return (
@@ -41,7 +41,7 @@ export default function TabPanelList({
key={key}
visible={active}
forceRender={forceRender}
- removeOnLeave={!!destroyInactiveTabPane}
+ removeOnLeave={!!(destroyInactiveTabPane || itemDestroyInactiveTabPane)}
leavedClassName={`${tabPanePrefixCls}-hidden`}
{...animated.tabPaneMotion}
>
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index c70782d9..dc91c837 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -372,6 +372,42 @@ describe('Tabs.Basic', () => {
matchText('Bamboo');
});
+ it('destroyInactiveTabPane from TabPane', () => {
+ const props = {
+ activeKey: 'light',
+
+ items: [
+ {
+ key: 'light',
+ children: 'Light',
+ destroyInactiveTabPane: true,
+ },
+ {
+ key: 'bamboo',
+ children: 'Bamboo',
+ destroyInactiveTabPane: true,
+ },
+ ] as any,
+ };
+
+ const { container, rerender } = render(getTabs(props));
+
+ function matchText(text: string) {
+ expect(container.querySelectorAll('.rc-tabs-tabpane')).toHaveLength(1);
+ expect(container.querySelector('.rc-tabs-tabpane-active').textContent).toEqual(text);
+ }
+
+ matchText('Light');
+
+ rerender(
+ getTabs({
+ ...props,
+ activeKey: 'bamboo',
+ }),
+ );
+ matchText('Bamboo');
+ });
+
describe('editable', () => {
it('no and', () => {
const onEdit = jest.fn();
@@ -493,12 +529,21 @@ describe('Tabs.Basic', () => {
const removes = container.querySelectorAll('.rc-tabs-tab-remove');
expect(removes.length).toBe(2);
- expect(container.querySelector('[data-node-key="light1"]').querySelector('.rc-tabs-tab-remove')).toBeFalsy();
- expect(container.querySelector('[data-node-key="light2"]').querySelector('.rc-tabs-tab-remove')).toBeFalsy();
- expect(container.querySelector('[data-node-key="light3"]').querySelector('.rc-tabs-tab-remove')).toBeTruthy();
- expect(container.querySelector('[data-node-key="light4"]').querySelector('.rc-tabs-tab-remove')).toBeTruthy();
- expect(container.querySelector('[data-node-key="light5"]').querySelector('.rc-tabs-tab-remove')).toBeFalsy();
-
+ expect(
+ container.querySelector('[data-node-key="light1"]').querySelector('.rc-tabs-tab-remove'),
+ ).toBeFalsy();
+ expect(
+ container.querySelector('[data-node-key="light2"]').querySelector('.rc-tabs-tab-remove'),
+ ).toBeFalsy();
+ expect(
+ container.querySelector('[data-node-key="light3"]').querySelector('.rc-tabs-tab-remove'),
+ ).toBeTruthy();
+ expect(
+ container.querySelector('[data-node-key="light4"]').querySelector('.rc-tabs-tab-remove'),
+ ).toBeTruthy();
+ expect(
+ container.querySelector('[data-node-key="light5"]').querySelector('.rc-tabs-tab-remove'),
+ ).toBeFalsy();
});
});
@@ -577,20 +622,20 @@ describe('Tabs.Basic', () => {
});
it('key contains double quote should not crash', () => {
- render()
+ render();
});
it('key could be number', () => {
- render()
- })
+ render();
+ });
- it('support indicatorSize', async () => {
+ it('support indicatorSize', async () => {
const { container, rerender } = render(getTabs({ indicatorSize: 10 }));
await waitFakeTimer();
expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '10px' });
- rerender(getTabs({ indicatorSize: (origin) => origin - 2 }));
+ rerender(getTabs({ indicatorSize: origin => origin - 2 }));
await waitFakeTimer();
expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '18px' });
- })
+ });
});