chore: rename destroyInactiveTabPane => destroyOnHidden (#830)

* chore: rename destroyInactiveTabPane => destroyOnClose

* fix: fix

Author: li-jia-nan

README.md

@@ -17,7 +17,6 @@ React Tabs component.
 [bundlephobia-url]: https://bundlephobia.com/result?p=rc-tabs
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tabs
 
-
 ## Screenshot
 
 <img src='https://zos.alipayobjects.com/rmsportal/JwLASrsOYJuFRIt.png' width='408'>
@@ -45,7 +44,7 @@ online example: https://tabs.react-component.now.sh/
 import Tabs from 'rc-tabs';
 import ReactDom from 'react-dom';
 
-const callback = (key) => {
+const callback = key => {
   console.log(key);
 };
 
@@ -112,7 +111,7 @@ ReactDom.render(
 | tabBarPosition | `'left' \| 'right' \| 'top' \| 'bottom'` | `'top'` | tab nav 's position |
 | tabBarStyle | style | - | tab nav style |
 | tabPosition | `'left' or 'right' or 'top' or 'bottom'` | `'top'` | tab nav 's position |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| destroyOnHidden | boolean | false | whether destroy inactive TabPane when change tab |
 | onChange | (key) => void | - | called when tabPanel is changed |
 | onTabClick | (key) => void | - | called when tab click |
 | onTabScroll | ({ direction }) => void | - | called when tab scroll |
@@ -137,16 +136,15 @@ ReactDom.render(
 | prefixCls | string | `'rc-tabs-tab'` | prefix class name, use to custom style |
 | id | string | - | unique identifier |
 | animated | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | config animation |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| destroyOnHidden | boolean | false | whether destroy inactive TabPane when change tab |
 | active | boolean | false | active feature of tab item |
 | tabKey | string | - | key linked to tab |
 
-
 ### TabPane(support in older versions)
 
 | name | type | default | description |
 | --- | --- | --- | --- |
-| destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
+| destroyOnHidden | 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 |
@@ -182,10 +180,6 @@ rc-tabs is released under the MIT license.
 
 ### Responsive Tabs
 
-There are 3 cases when handling responsive tabs:
-![image](https://user-images.githubusercontent.com/27722486/156315099-7e6eda9d-ab77-4b16-9b49-1727c5ec8b26.png)
+There are 3 cases when handling responsive tabs: ![image](https://user-images.githubusercontent.com/27722486/156315099-7e6eda9d-ab77-4b16-9b49-1727c5ec8b26.png)
 
-We get hidden tabs through [useVisibleRange.ts](https://github.com/react-component/tabs/blob/master/src/hooks/useVisibleRange.ts).
-If enconter the third case, in order to make tabs responsive, some tabs should be hidden. 
-So we minus `addSize` when calculating `basicSize` manully, even though there's no addNode in container.
-In this way, case 3 turns to case 2, tabs become stable again.
+We get hidden tabs through [useVisibleRange.ts](https://github.com/react-component/tabs/blob/master/src/hooks/useVisibleRange.ts). If enconter the third case, in order to make tabs responsive, some tabs should be hidden. So we minus `addSize` when calculating `basicSize` manully, even though there's no addNode in container. In this way, case 3 turns to case 2, tabs become stable again.

docs/examples/mix.tsx

@@ -24,7 +24,7 @@ export default () => {
   const [fixHeight, setFixHeight] = React.useState(true);
   const [rtl, setRTL] = React.useState(false);
   const [editable, setEditable] = React.useState(true);
-  const [destroyInactiveTabPane, setDestroyInactiveTabPane] = React.useState(false);
+  const [destroyOnHidden, setDestroyOnHidden] = React.useState(false);
   const [destroy, setDestroy] = React.useState(false);
   const [animated, setAnimated] = React.useState(true);
   const [tabPanes, setTabPanes] = React.useState(getTabPanes(10));
@@ -86,8 +86,8 @@ export default () => {
         <label>
           <input
             type="checkbox"
-            checked={destroyInactiveTabPane}
-            onChange={() => setDestroyInactiveTabPane(val => !val)}
+            checked={destroyOnHidden}
+            onChange={() => setDestroyOnHidden(val => !val)}
           />
           Destroy Inactive TabPane
         </label>
@@ -155,7 +155,7 @@ export default () => {
             onTabScroll={info => {
               console.log('Scroll:', info);
             }}
-            destroyInactiveTabPane={destroyInactiveTabPane}
+            destroyOnHidden={destroyOnHidden}
             animated={{ tabPane: animated }}
             editable={editableConfig}
             direction={rtl ? 'rtl' : null}

src/TabPanelList/TabPane.tsx

@@ -18,7 +18,7 @@ export interface TabPaneProps {
   id?: string;
   animated?: boolean;
   active?: boolean;
-  destroyInactiveTabPane?: boolean;
+  destroyOnHidden?: boolean;
 }
 
 const TabPane = React.forwardRef<HTMLDivElement, TabPaneProps>((props, ref) => {

src/TabPanelList/index.tsx

@@ -10,21 +10,14 @@ export interface TabPanelListProps {
   id: string;
   animated?: AnimatedConfig;
   tabPosition?: TabPosition;
-  destroyInactiveTabPane?: boolean;
+  destroyOnHidden?: boolean;
   contentStyle?: React.CSSProperties;
   contentClassName?: string;
 }
 
 const TabPanelList: React.FC<TabPanelListProps> = props => {
-  const {
-    id,
-    activeKey,
-    animated,
-    tabPosition,
-    destroyInactiveTabPane,
-    contentStyle,
-    contentClassName,
-  } = props;
+  const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } =
+    props;
   const { prefixCls, tabs } = React.useContext(TabContext);
   const tabPaneAnimated = animated.tabPane;
 
@@ -43,7 +36,7 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
             forceRender,
             style: paneStyle,
             className: paneClassName,
-            destroyInactiveTabPane: itemDestroyInactiveTabPane,
+            destroyOnHidden: itemDestroyOnHidden,
             ...restTabProps
           } = item;
           const active = key === activeKey;
@@ -52,7 +45,7 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
               key={key}
               visible={active}
               forceRender={forceRender}
-              removeOnLeave={!!(destroyInactiveTabPane || itemDestroyInactiveTabPane)}
+              removeOnLeave={!!(destroyOnHidden ?? itemDestroyOnHidden)}
               leavedClassName={`${tabPanePrefixCls}-hidden`}
               {...animated.tabPaneMotion}
             >

src/Tabs.tsx

@@ -56,7 +56,7 @@ export interface TabsProps
   tabBarGutter?: number;
   tabBarStyle?: React.CSSProperties;
   tabPosition?: TabPosition;
-  destroyInactiveTabPane?: boolean;
+  destroyOnHidden?: boolean;
 
   onChange?: (activeKey: string) => void;
   onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
@@ -95,7 +95,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     tabBarExtraContent,
     locale,
     more,
-    destroyInactiveTabPane,
+    destroyOnHidden,
     renderTabBar,
     onChange,
     onTabClick,
@@ -210,7 +210,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
       >
         <TabNavListWrapper {...tabNavBarProps} renderTabBar={renderTabBar} />
         <TabPanelList
-          destroyInactiveTabPane={destroyInactiveTabPane}
+          destroyOnHidden={destroyOnHidden}
           {...sharedProps}
           contentStyle={styles?.content}
           contentClassName={tabsClassNames?.content}

tests/index.test.tsx

@@ -312,10 +312,10 @@ describe('Tabs.Basic', () => {
     });
   });
 
-  it('destroyInactiveTabPane', () => {
+  it('destroyOnHidden', () => {
     const props = {
       activeKey: 'light',
-      destroyInactiveTabPane: true,
+      destroyOnHidden: true,
       items: [
         {
           key: 'light',
@@ -346,20 +346,20 @@ describe('Tabs.Basic', () => {
     matchText('Bamboo');
   });
 
-  it('destroyInactiveTabPane from TabPane', () => {
+  it('destroyOnHidden from TabPane', () => {
     const props = {
       activeKey: 'light',
 
       items: [
         {
           key: 'light',
           children: 'Light',
-          destroyInactiveTabPane: true,
+          destroyOnHidden: true,
         },
         {
           key: 'bamboo',
           children: 'Bamboo',
-          destroyInactiveTabPane: true,
+          destroyOnHidden: true,
         },
       ] as any,
     };