Fix: apply destroyInactiveTabPane from the TabPane (#675)

* apply destroyInactiveTabPane from the TabPane

* added TabPane `destroyInactiveTabPane` to readme

* fixing syntax error

* added unit test

Author: ChuckJonas

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 |

src/TabPanelList/index.tsx

@@ -33,15 +33,15 @@ 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 (
               <CSSMotion
                 key={key}
                 visible={active}
                 forceRender={forceRender}
-                removeOnLeave={!!destroyInactiveTabPane}
+                removeOnLeave={!!(destroyInactiveTabPane || itemDestroyInactiveTabPane)}
                 leavedClassName={`${tabPanePrefixCls}-hidden`}
                 {...animated.tabPaneMotion}
               >

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(<Tabs items={[{key: '"key"', label: 'test'}]} />)
+    render(<Tabs items={[{ key: '"key"', label: 'test' }]} />);
   });
 
   it('key could be number', () => {
-    render(<Tabs items={[{key: 1 as any, label: 'test'}]} />)
-  })
+    render(<Tabs items={[{ key: 1 as any, label: 'test' }]} />);
+  });
 
-  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' });
-  })
+  });
 });