fix: fix form in sidesheet, form constructor not mount at first trick (#1255)

packages/semi-foundation/modal/modalFoundation.ts

@@ -11,8 +11,7 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
-    getProps: () => ModalProps;
-    setShouldRender:(shouldRender:boolean)=>void
+    getProps: () => ModalProps
 }
 
 export interface ModalProps {
@@ -59,8 +58,7 @@ export interface ModalProps {
 
 export interface ModalState {
     displayNone: boolean;
-    isFullScreen: boolean;
-    shouldRender:boolean
+    isFullScreen: boolean
 }
 
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
@@ -101,9 +99,6 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
         this._adapter.toggleDisplayNone(displayNone, callback);
     };
 
-    setShouldRender=(shouldRender)=>{
-        this._adapter.setShouldRender(shouldRender);
-    }
 
     // // eslint-disable-next-line max-len
     // mergeMotionProp = (motion: Motion, prop: string, cb: () => void) => {

packages/semi-foundation/sideSheet/sideSheetFoundation.ts

@@ -32,8 +32,7 @@ export interface SideSheetProps {
 }
 
 export interface SideSheetState {
-    displayNone: boolean;
-    shouldRender: boolean
+    displayNone: boolean
 }
 
 export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
@@ -43,8 +42,7 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
     notifyVisibleChange: (visible: boolean) => void;
     setOnKeyDownListener: () => void;
     removeKeyDownListener: () => void;
-    toggleDisplayNone: (displayNone: boolean) => void;
-    setShouldRender: (shouldRender: boolean) => void
+    toggleDisplayNone: (displayNone: boolean) => void
 }
 
 
@@ -91,9 +89,6 @@ export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter
         }
     }
 
-    setShouldRender(shouldRender: boolean) {
-        this._adapter.setShouldRender(shouldRender);
-    }
 
     onVisibleChange(visible: boolean) {
         this._adapter.notifyVisibleChange(visible);

packages/semi-ui/modal/Modal.tsx

@@ -121,7 +121,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         this.state = {
             displayNone: !props.visible,
             isFullScreen: props.fullScreen,
-            shouldRender: this.props.visible || (this.props.keepDOM && !this.props.lazyRender)
         };
         this.foundation = new ModalFoundation(this.adapter);
         this.modalRef = React.createRef();
@@ -169,11 +168,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                     this.setState({ isFullScreen });
                 }
             },
-            setShouldRender: (shouldRender)=>{
-                if (shouldRender!==this.state.shouldRender){
-                    this.setState({ shouldRender });
-                }
-            }
         };
     }
 
@@ -251,11 +245,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             this.foundation.beforeShow();
         }
 
-        const shouldRender = this.props.visible || (this.props.keepDOM && (!this.props.lazyRender || this._haveRendered));
-        if (shouldRender === true && this.state.shouldRender === false) {
-            this.foundation.setShouldRender(true);
-        }
-
         if (!prevState.displayNone && this.state.displayNone){
             this.foundation.afterHide();
         }
@@ -278,8 +267,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
     updateState = () => {
         const { visible } = this.props;
         this.foundation.toggleDisplayNone(!visible);
-        const shouldRender = this.props.visible || (this.props.keepDOM && (!this.props.lazyRender || this._haveRendered));
-        this.foundation.setShouldRender(shouldRender);
     };
 
     renderFooter = (): ReactNode => {
@@ -375,9 +362,12 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.displayNone,
         });
 
-        if (this.state.shouldRender){
+        const shouldRender = this.props.visible || (this.props.keepDOM && (!this.props.lazyRender || this._haveRendered)) || (this.props.motion && !this.state.displayNone /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */);
+
+        if (shouldRender){
             this._haveRendered = true;
         }
+
         return (
             <Portal style={wrapperStyle} getPopupContainer={getPopupContainer}>
                 <CSSAnimation
@@ -398,7 +388,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                             >
                                 {
                                     ({ animationClassName: maskAnimationClassName, animationEventsNeedBind: maskAnimationEventsNeedBind })=>{
-                                        return this.state.shouldRender ? <ModalContent
+                                        return shouldRender ? <ModalContent
                                             {...restProps}
                                             contentExtraProps={animationEventsNeedBind}
                                             maskExtraProps={maskAnimationEventsNeedBind}

packages/semi-ui/sideSheet/index.tsx

@@ -86,7 +86,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
 
     constructor(props: SideSheetReactProps) {
         super(props);
-        this.state = { displayNone: !this.props.visible, shouldRender: this.props.visible };
+        this.state = { displayNone: !this.props.visible };
         this.foundation = new SideSheetFoundation(this.adapter);
     }
 
@@ -128,11 +128,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
                     this.setState({ displayNone: displayNone });
                 }
             },
-            setShouldRender: (shouldRender: boolean) => {
-                if (shouldRender !== this.state.shouldRender) {
-                    this.setState({ shouldRender });
-                }
-            }
         };
     }
 
@@ -166,10 +161,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         }
 
 
-        const shouldRender = (this.props.visible || this.props.keepDOM);
-        if (shouldRender === true && this.state.shouldRender === false) {
-            this.foundation.setShouldRender(true);
-        }
 
         if (prevState.displayNone !== this.state.displayNone) {
             this.foundation.onVisibleChange(!this.state.displayNone);
@@ -192,8 +183,6 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
     };
 
     updateState = () => {
-        const shouldRender = (this.props.visible || this.props.keepDOM);
-        this.foundation.setShouldRender(shouldRender);
         this.foundation.toggleDisplayNone(!this.props.visible);
     }
 
@@ -235,7 +224,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
             height: sheetHeight,
             onClose: this.handleCancel,
         };
-
+        const shouldRender = (this.props.visible || this.props.keepDOM) || (this.props.motion && !this.state.displayNone /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */);
         // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
         return <CSSAnimation motion={this.props.motion} animationState={visible ? 'enter' : 'leave'} startClassName={
             visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`
@@ -252,7 +241,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
                         onAnimationEnd={this.updateState /* for no mask case*/}
                     >
                         {({ animationClassName, animationStyle, animationEventsNeedBind }) => {
-                            return this.state.shouldRender ? <SideSheetContent
+                            return shouldRender ? <SideSheetContent
                                 {...contentProps}
                                 maskExtraProps={maskAnimationEventsNeedBind}
                                 wrapperExtraProps={animationEventsNeedBind}