feat: (Tabs-like) add destroyOnClose props to Tabs.Tab

ant-design · Feb 28, 2022 · 1fe3d86 · 1fe3d86
1 parent 5a9d665
commit 1fe3d86
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 38 deletions.
diff --git a/src/components/capsule-tabs/capsule-tabs.tsx b/src/components/capsule-tabs/capsule-tabs.tsx
@@ -20,6 +20,7 @@ export type CapsuleTabProps = {
   title: ReactNode
   disabled?: boolean
   forceRender?: boolean
+  destroyOnClose?: boolean
 } & NativeProps
 
 export const CapsuleTab: FC<CapsuleTabProps> = () => {
@@ -114,6 +115,7 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
             key={pane.key}
             active={active}
             forceRender={pane.props.forceRender}
+            destroyOnClose={pane.props.destroyOnClose}
           >
             <div
               className={`${classPrefix}-content`}

diff --git a/src/components/capsule-tabs/index.en.md b/src/components/capsule-tabs/index.en.md
@@ -14,9 +14,10 @@
 
 ## CapsuleTabs.Tab
 
-| Name        | Description                                       | Type        | Default |
-| ----------- | ------------------------------------------------- | ----------- | ------- |
-| key         | Corresponding to `activeKey`                      | `string`    | -       |
-| title       | The displayed text of the tab header              | `ReactNode` | -       |
-| disabled    | Whether to disable the tab                        | `boolean`   | `false` |
-| forceRender | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| Name           | Description                                       | Type        | Default |
+| -------------- | ------------------------------------------------- | ----------- | ------- |
+| key            | Corresponding to `activeKey`                      | `string`    | -       |
+| title          | The displayed text of the tab header              | `ReactNode` | -       |
+| disabled       | Whether to disable the tab                        | `boolean`   | `false` |
+| forceRender    | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| destroyOnClose | Unmount content when not visible                  | `boolean`   | `false` |
diff --git a/src/components/capsule-tabs/index.zh.md b/src/components/capsule-tabs/index.zh.md
@@ -14,9 +14,10 @@
 
 ## CapsuleTabs.Tab
 
-| 属性        | 说明                        | 类型        | 默认值  |
-| ----------- | --------------------------- | ----------- | ------- |
-| key         | 对应 `activeKey`            | `string`    | -       |
-| title       | 选项卡头显示文字            | `ReactNode` | -       |
-| disabled    | 是否禁用                    | `boolean`   | `false` |
-| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| 属性           | 说明                        | 类型        | 默认值  |
+| -------------- | --------------------------- | ----------- | ------- |
+| key            | 对应 `activeKey`            | `string`    | -       |
+| title          | 选项卡头显示文字            | `ReactNode` | -       |
+| disabled       | 是否禁用                    | `boolean`   | `false` |
+| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| destroyOnClose | 不可见时卸载内容            | `boolean`   | `false` |
diff --git a/src/components/jumbo-tabs/index.en.md b/src/components/jumbo-tabs/index.en.md
@@ -14,10 +14,11 @@
 
 ## JumboTabs.Tab
 
-| Name        | Description                                       | Type        | Default |
-| ----------- | ------------------------------------------------- | ----------- | ------- |
-| key         | Corresponding to `activeKey`                      | `string`    | -       |
-| title       | The displayed text of the tab header              | `ReactNode` | -       |
-| description | The description text                              | `ReactNode` | -       |
-| disabled    | Whether to disable the tab                        | `boolean`   | `false` |
-| forceRender | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| Name           | Description                                       | Type        | Default |
+| -------------- | ------------------------------------------------- | ----------- | ------- |
+| key            | Corresponding to `activeKey`                      | `string`    | -       |
+| title          | The displayed text of the tab header              | `ReactNode` | -       |
+| description    | The description text                              | `ReactNode` | -       |
+| disabled       | Whether to disable the tab                        | `boolean`   | `false` |
+| forceRender    | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| destroyOnClose | Unmount content when not visible                  | `boolean`   | `false` |
diff --git a/src/components/jumbo-tabs/index.zh.md b/src/components/jumbo-tabs/index.zh.md
@@ -14,10 +14,11 @@
 
 ## JumboTabs.Tab
 
-| 属性        | 说明                        | 类型        | 默认值  |
-| ----------- | --------------------------- | ----------- | ------- |
-| key         | 对应 `activeKey`            | `string`    | -       |
-| title       | 选项卡头显示文字            | `ReactNode` | -       |
-| description | 选项卡描述                  | `ReactNode` | -       |
-| disabled    | 是否禁用                    | `boolean`   | `false` |
-| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| 属性           | 说明                        | 类型        | 默认值  |
+| -------------- | --------------------------- | ----------- | ------- |
+| key            | 对应 `activeKey`            | `string`    | -       |
+| title          | 选项卡头显示文字            | `ReactNode` | -       |
+| description    | 选项卡描述                  | `ReactNode` | -       |
+| disabled       | 是否禁用                    | `boolean`   | `false` |
+| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| destroyOnClose | 不可见时卸载内容            | `boolean`   | `false` |
diff --git a/src/components/jumbo-tabs/jumbo-tabs.tsx b/src/components/jumbo-tabs/jumbo-tabs.tsx
@@ -21,6 +21,7 @@ export type JumboTabProps = {
   description: ReactNode
   disabled?: boolean
   forceRender?: boolean
+  destroyOnClose?: boolean
 } & NativeProps
 
 export const JumboTab: FC<JumboTabProps> = () => {
@@ -120,6 +121,7 @@ export const JumboTabs: FC<JumboTabsProps> = props => {
             key={pane.key}
             active={active}
             forceRender={pane.props.forceRender}
+            destroyOnClose={pane.props.destroyOnClose}
           >
             <div
               className={`${classPrefix}-content`}

diff --git a/src/components/tabs/index.en.md b/src/components/tabs/index.en.md
@@ -29,12 +29,13 @@
 
 ## Tabs.Tab
 
-| Name        | Description                                       | Type        | Default |
-| ----------- | ------------------------------------------------- | ----------- | ------- |
-| key         | Corresponding to `activeKey`                      | `string`    | -       |
-| title       | The displayed text of the tab header              | `ReactNode` | -       |
-| disabled    | Whether to disable the tab                        | `boolean`   | `false` |
-| forceRender | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| Name           | Description                                       | Type        | Default |
+| -------------- | ------------------------------------------------- | ----------- | ------- |
+| key            | Corresponding to `activeKey`                      | `string`    | -       |
+| title          | The displayed text of the tab header              | `ReactNode` | -       |
+| disabled       | Whether to disable the tab                        | `boolean`   | `false` |
+| forceRender    | Whether to render the `DOM` structure when hidden | `boolean`   | `false` |
+| destroyOnClose | Unmount content when not visible                  | `boolean`   | `false` |
 
 ## FAQ
 

diff --git a/src/components/tabs/index.zh.md b/src/components/tabs/index.zh.md
@@ -28,12 +28,13 @@
 
 ## Tabs.Tab
 
-| 属性        | 说明                        | 类型        | 默认值  |
-| ----------- | --------------------------- | ----------- | ------- |
-| key         | 对应 `activeKey`            | `string`    | -       |
-| title       | 选项卡头显示文字            | `ReactNode` | -       |
-| disabled    | 是否禁用                    | `boolean`   | `false` |
-| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| 属性           | 说明                        | 类型        | 默认值  |
+| -------------- | --------------------------- | ----------- | ------- |
+| key            | 对应 `activeKey`            | `string`    | -       |
+| title          | 选项卡头显示文字            | `ReactNode` | -       |
+| disabled       | 是否禁用                    | `boolean`   | `false` |
+| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`   | `false` |
+| destroyOnClose | 不可见时卸载内容            | `boolean`   | `false` |
 
 ## FAQ
 

diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
@@ -23,6 +23,7 @@ export type TabProps = {
   title: ReactNode
   disabled?: boolean
   forceRender?: boolean
+  destroyOnClose?: boolean
 } & NativeProps
 
 export const Tab: FC<TabProps> = () => {
@@ -295,6 +296,7 @@ export const Tabs: FC<TabsProps> = p => {
             key={pane.key}
             active={active}
             forceRender={pane.props.forceRender}
+            destroyOnClose={pane.props.destroyOnClose}
           >
             <div
               className={`${classPrefix}-content`}