@douyinfe/semi-ui 2.38.3-alpha.2-spin → 2.38.3-alpha.2-patch-3006

package/dist/umd/semi-ui.js

@@ -44222,6 +44222,7 @@ var collapsible = __webpack_require__("v967");
 
 
 
+
 class Collapsible extends BaseComponent {
   constructor(props) {
     super(props);
@@ -44245,7 +44246,8 @@ class Collapsible extends BaseComponent {
       domInRenderTree: false,
       domHeight: 0,
       visible: this.props.isOpen,
-      isTransitioning: false
+      isTransitioning: false,
+      cacheIsOpen: this.props.isOpen
     };
     this.foundation = new collapsible_foundation(this.adapter);
   }
@@ -44281,6 +44283,20 @@ class Collapsible extends BaseComponent {
       }
     });
   }
+  static getDerivedStateFromProps(props, prevState) {
+    const newState = {};
+    const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
+    if (isOpenChanged) {
+      if (props.isOpen || !props.motion) {
+        newState.visible = props.isOpen;
+      }
+    }
+    if (props.motion && isOpenChanged) {
+      newState.isTransitioning = true;
+    }
+    newState.cacheIsOpen = props.isOpen;
+    return newState;
+  }
   componentDidMount() {
     super.componentDidMount();
     this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -44292,22 +44308,14 @@ class Collapsible extends BaseComponent {
     }
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
-    const changedPropKeys = Object.keys(this.props).filter(key => !isEqual_default()(this.props[key], prevProps[key]));
-    const changedStateKeys = Object.keys(this.state).filter(key => !isEqual_default()(this.state[key], prevState[key]));
+    const changedPropKeys = Object.keys(pick_default()(this.props, ['reCalcKey'])).filter(key => !isEqual_default()(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys(pick_default()(this.state, ['domInRenderTree'])).filter(key => !isEqual_default()(this.state[key], prevState[key]));
     if (changedPropKeys.includes("reCalcKey")) {
       this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
     }
     if (changedStateKeys.includes("domInRenderTree") && this.state.domInRenderTree) {
       this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
     }
-    if (changedPropKeys.includes("isOpen")) {
-      if (this.props.isOpen || !this.props.motion) {
-        this.foundation.updateVisible(this.props.isOpen);
-      }
-    }
-    if (this.props.motion && prevProps.isOpen !== this.props.isOpen) {
-      this.foundation.updateIsTransitioning(true);
-    }
   }
   componentWillUnmount() {
     super.componentWillUnmount();