fix: fix collapsible keepDOM

DouyinFE · Mar 25, 2024 · 51cb12f · 51cb12f
1 parent 2650b4f
commit 51cb12f
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 176 deletions.
diff --git a/content/show/collapse/index-en-US.md b/content/show/collapse/index-en-US.md
@@ -172,19 +172,20 @@ import { IconCopy } from '@douyinfe/semi-icons';
 ### Collapse
 
 | Properties | Instructions | type | Default | version |
-| --- | --- | --- | --- | --- |
-| accordion | Accordion mode | boolean | `false` | - |
-| activeKey | Controlled property, key of the currently expanded panel | string \| string[] | - | - |
-| className | className of Collapse | string | '' | - |
-| clickHeaderToExpand | Click Header to expand and collapse, otherwise only respond to click arrow | boolean | true | 2.32.0 |
-| collapseIcon | Custom collapsing icons | ReactNode | `<IconChevronDown />` | - |
-| defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | - |
-| expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | - |
-| keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0 |
-| motion | Toggle whether to have animation | boolean | `true` | 1.4.0 |
-| expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0 |
-| style | Inline CSS style | CSSProperties | {} | - |
-| onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | - |
+| --- | --- | --- | --- |---------|
+| accordion | Accordion mode | boolean | `false` | -       |
+| activeKey | Controlled property, key of the currently expanded panel | string \| string[] | - | -       |
+| className | className of Collapse | string | '' | -       |
+| clickHeaderToExpand | Click Header to expand and collapse, otherwise only respond to click arrow | boolean | true | 2.32.0  |
+| collapseIcon | Custom collapsing icons | ReactNode | `<IconChevronDown />` | -       |
+| defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | -       |
+| expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | -       |
+| keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0  |
+| motion | Toggle whether to have animation | boolean | `true` | 1.4.0   |
+| expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0  |
+| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `false` | 2.25.1  |
+| style | Inline CSS style | CSSProperties | {} | -       |
+| onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | -       |
 
 ### Collapse.Panel
 | Properties | Instructions                                                                                                            | type | Default | version       |

diff --git a/content/show/collapse/index.md b/content/show/collapse/index.md
@@ -170,20 +170,21 @@ import { IconCopy } from '@douyinfe/semi-icons';
 
 ### Collapse
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| accordion | 手风琴模式 | boolean | `false` | - |
-| activeKey | 受控属性, 当前展开的面板的 key | string \| string[] | 无 | - |
-| className | 样式类名 | string | '' | - |
+| 属性 | 说明 | 类型 | 默认值 | 版本     |
+| --- | --- | --- | --- |--------|
+| accordion | 手风琴模式 | boolean | `false` | -      |
+| activeKey | 受控属性, 当前展开的面板的 key | string \| string[] | 无 | -      |
+| className | 样式类名 | string | '' | -      |
 | clickHeaderToExpand | 点击 Header 展开收起，否则只响应点击箭头 | boolean | true | 2.32.0 |
-| collapseIcon | 自定义折叠图标 | ReactNode | `<IconChevronDown />` | - |
-| defaultActiveKey | 初始化选中面板的 key | string \| string[] | 无 | - |
-| expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | - |
+| collapseIcon | 自定义折叠图标 | ReactNode | `<IconChevronDown />` | -      |
+| defaultActiveKey | 初始化选中面板的 key | string \| string[] | 无 | -      |
+| expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | -      |
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | bool | `false` | 0.25.0 |
-| motion | 是否开启动画 | boolean | `true` | 1.4.0 |
-| style | 内联 CSS 样式 | CSSProperties | {} | - |
-| onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | - |
+| motion | 是否开启动画 | boolean | `true` | 1.4.0  |
+| lazyRender | 配合 keepDOM 使用，为 true 时挂载时不会渲染组件 | boolean | `false` | 2.25.1 |
+| style | 内联 CSS 样式 | CSSProperties | {} | -      |
+| onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | -      |
 
 ### Collapse.Panel
 

diff --git a/content/show/collapsible/index-en-US.md b/content/show/collapsible/index-en-US.md
@@ -178,18 +178,18 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 ## API reference
 
 | Properties | Instructions                                                                                               | type | Default | version |
-| --- |------------------------------------------------------------------------------------------------------------| --- | --- | --- |
-| className | Class name                                                                                                 | string | - | 0.34.0 |
-| collapseHeight | Collapse height                                                                                            | number | 0 | 1.0.0 |
-| duration | Time of animation execution                                                                                | number | 250 | - |
+| --- |------------------------------------------------------------------------------------------------------------| --- |---------| --- |
+| className | Class name                                                                                                 | string | -       | 0.34.0 |
+| collapseHeight | Collapse height                                                                                            | number | 0       | 1.0.0 |
+| duration | Time of animation execution                                                                                | number | 250     | - |
 | isOpen | Toggle whether to expand the content area                                                                  | boolean | `false` | - |
 | keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default                                         | boolean | `false` | 0.25.0 |
-| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `true` | 2.24 |
-| motion | Toggle whether to turn on animation                                                                        | Motion | `true` | - |
-| onMotionEnd | Animation end callback                                                                                     | () => void | - | - |
-| reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | - | 1.5.0 |
-| style | Style object                                                                                               | CSSProperties | - | 0.34.0 |
-| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)  | string |-| 2.3.0|
+| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `false` | 2.24 |
+| motion | Toggle whether to turn on animation                                                                        | Motion | `true`  | - |
+| onMotionEnd | Animation end callback                                                                                     | () => void | -       | - |
+| reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | -       | 1.5.0 |
+| style | Style object                                                                                               | CSSProperties | -       | 0.34.0 |
+| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)  | string | -       | 2.3.0|
 
 ## Accessibility
 

diff --git a/content/show/collapsible/index.md b/content/show/collapsible/index.md
@@ -208,20 +208,20 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 ## API 参考
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| -- | --- | --- | --- | --- |
-| className | 类名 | string | - | 0.34.0 |
-| collapseHeight | 折叠高度 | number | 0 | 1.0.0 |
-| duration | 动画执行的时间 | number | 250 | - |
-| fade | 是否开启淡入淡出 | boolean | false | 2.21.0 |
+| 属性 | 说明 | 类型 | 默认值     | 版本 |
+| -- | --- | --- |---------| --- |
+| className | 类名 | string | -       | 0.34.0 |
+| collapseHeight | 折叠高度 | number | 0       | 1.0.0 |
+| duration | 动画执行的时间 | number | 250     | - |
+| fade | 是否开启淡入淡出 | boolean | false   | 2.21.0 |
 | isOpen | 是否展开内容区域 | boolean | `false` | - |
 | keepDOM | 是否保留隐藏的面板 DOM 树，默认销毁 | boolean | `false` | 0.25.0 |
-| lazyRender | 配合 keepDOM 使用，为 true 时挂载时不会渲染组件 | boolean | `true` | 2.24 |
-| motion | 是否开启动画 | boolean | `true` | - |
-| onMotionEnd | 动画结束的回调 | () => void | - | - |
-| reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number \| string | - | 1.5.0 |
-| style | 样式 | CSSProperties | - | 0.34.0 |
-| id | id | html id string type | - | 2.3.0 |
+| lazyRender | 配合 keepDOM 使用，为 true 时挂载时不会渲染组件 | boolean | `false` | 2.24 |
+| motion | 是否开启动画 | boolean | `true`  | - |
+| onMotionEnd | 动画结束的回调 | () => void | -       | - |
+| reCalcKey | 当 reCalcKey 改变时，将重新计算子节点的高度，用于优化动态渲染时的计算 | number \| string | -       | 1.5.0 |
+| style | 样式 | CSSProperties | -       | 0.34.0 |
+| id | id | html id string type | -       | 2.3.0 |
 ## Accessibility
 
 ### ARIA

diff --git a/packages/semi-ui/collapse/collapse-context.tsx b/packages/semi-ui/collapse/collapse-context.tsx
@@ -9,10 +9,11 @@ export interface CollapseContextType{
     keepDOM: boolean;
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: React.MouseEvent) => void;
-    motion: boolean
+    motion: boolean;
+    lazyRender: boolean
 }
 
 
 const CollapseContext = React.createContext<CollapseContextType>({} as CollapseContextType);
 
-export default CollapseContext;
+export default CollapseContext;
diff --git a/packages/semi-ui/collapse/index.tsx b/packages/semi-ui/collapse/index.tsx
@@ -6,24 +6,25 @@ import CollapseFoundation, {
     ArgsType,
     CollapseAdapter,
     CollapseProps,
-    CollapseState
+    CollapseState,
 } from '@douyinfe/semi-foundation/collapse/foundation';
 import BaseComponent from '../_base/baseComponent';
 import CollapsePanel from './item';
 import '@douyinfe/semi-foundation/collapse/collapse.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { isEqual } from 'lodash';
 import CollapseContext from './collapse-context';
-import { getDefaultPropsFromGlobalConfig } from "../_utils";
+import { getDefaultPropsFromGlobalConfig } from '../_utils';
 
 export type { CollapsePanelProps } from './item';
 
-export interface CollapseReactProps extends CollapseProps{
+export interface CollapseReactProps extends CollapseProps {
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
     children?: React.ReactNode;
     style?: CSSProperties;
-    onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void
+    onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
+    lazyRender?: boolean
 }
 
 
@@ -44,24 +45,26 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         className: PropTypes.string,
         keepDOM: PropTypes.bool,
         motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-        expandIconPosition: PropTypes.oneOf(strings.iconPosition)
+        expandIconPosition: PropTypes.oneOf(strings.iconPosition),
+        lazyRender: PropTypes.bool,
     };
 
-    static __SemiComponentName__ = "Collapse";
+    static __SemiComponentName__ = 'Collapse';
 
     static defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
         defaultActiveKey: '',
         clickHeaderToExpand: true,
         onChange: noop,
-        expandIconPosition: 'right'
-    })
+        expandIconPosition: 'right',
+        lazyRender: false,
+    });
 
     constructor(props: CollapseReactProps) {
         super(props);
         this.foundation = new CollapseFoundation(this.adapter);
         const initKeys = this.foundation.initActiveKey();
         this.state = {
-            activeSet: new Set(initKeys)
+            activeSet: new Set(initKeys),
         };
         this.onChange = this.onChange.bind(this);
     }
@@ -98,7 +101,21 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
     };
 
     render() {
-        const { defaultActiveKey, accordion, style, motion, className, keepDOM, expandIconPosition, expandIcon, collapseIcon, children, clickHeaderToExpand, ...rest } = this.props;
+        const {
+            defaultActiveKey,
+            lazyRender,
+            accordion,
+            style,
+            motion,
+            className,
+            keepDOM,
+            expandIconPosition,
+            expandIcon,
+            collapseIcon,
+            children,
+            clickHeaderToExpand,
+            ...rest
+        } = this.props;
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
@@ -112,7 +129,8 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
                         keepDOM,
                         expandIconPosition,
                         onClick: this.onChange,
-                        motion
+                        motion,
+                        lazyRender,
                     }}
                 >
                     {children}

diff --git a/packages/semi-ui/collapse/item.tsx b/packages/semi-ui/collapse/item.tsx
@@ -123,6 +123,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             expandIconPosition,
             activeSet,
             motion,
+            lazyRender
         } = this.context;
         const active = activeSet.has(itemKey);
         const itemCls = cls(className, {
@@ -155,6 +156,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                 {
                     children && (
                         <Collapsible
+                            lazyRender={lazyRender}
                             isOpen={active} keepDOM={keepDOM} motion={motion}
                             onMotionEnd={this.props.onMotionEnd}
                             reCalcKey={reCalcKey}>

diff --git a/packages/semi-ui/collapsible/index.tsx b/packages/semi-ui/collapsible/index.tsx
@@ -43,13 +43,14 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
         duration: 250,
         motion: true,
         keepDOM: false,
-        lazyRender: true,
+        lazyRender: false,
         collapseHeight: 0,
         fade: false
     }) 
     public foundation: CollapsibleFoundation;
     private domRef = React.createRef<HTMLDivElement>();
     private resizeObserver: ResizeObserver | null;
+    private hasRendered: boolean = false;
 
     constructor(props: CollapsibleProps) {
         super(props);
@@ -175,7 +176,12 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
             [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
         }, this.props.className);
 
-        const shouldRender = (this.props.keepDOM && !this.props.lazyRender) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+        const shouldRender = (this.props.keepDOM && (this.props.lazyRender ? this.hasRendered : true)) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+
+        if (shouldRender && !this.hasRendered) {
+            this.hasRendered = true;
+        }
+
 
         return (
             <div