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

package/lib/cjs/collapsible/index.d.ts

@@ -21,6 +21,7 @@ interface CollapsibleState extends CollapsibleFoundationState {
     domHeight: number;
     visible: boolean;
     isTransitioning: boolean;
+    cacheIsOpen: boolean;
 }
 declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
     static defaultProps: {
@@ -36,6 +37,7 @@ declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleSta
     private resizeObserver;
     constructor(props: CollapsibleProps);
     get adapter(): CollapsibleAdapter<CollapsibleProps, CollapsibleState>;
+    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState): Partial<CollapsibleState>;
     static getEntryInfo: (entry: ResizeObserverEntry) => {
         isShown: boolean;
         height: number;

package/lib/cjs/collapsible/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
 var _react = _interopRequireDefault(require("react"));
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/collapsible/foundation"));
@@ -36,7 +37,8 @@ class Collapsible extends _baseComponent.default {
       domInRenderTree: false,
       domHeight: 0,
       visible: this.props.isOpen,
-      isTransitioning: false
+      isTransitioning: false,
+      cacheIsOpen: this.props.isOpen
     };
     this.foundation = new _foundation.default(this.adapter);
   }
@@ -72,6 +74,20 @@ class Collapsible extends _baseComponent.default {
       }
     });
   }
+  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);
@@ -83,22 +99,14 @@ class Collapsible extends _baseComponent.default {
     }
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
-    const changedPropKeys = Object.keys(this.props).filter(key => !(0, _isEqual2.default)(this.props[key], prevProps[key]));
-    const changedStateKeys = Object.keys(this.state).filter(key => !(0, _isEqual2.default)(this.state[key], prevState[key]));
+    const changedPropKeys = Object.keys((0, _pick2.default)(this.props, ['reCalcKey'])).filter(key => !(0, _isEqual2.default)(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys((0, _pick2.default)(this.state, ['domInRenderTree'])).filter(key => !(0, _isEqual2.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();

package/lib/cjs/form/baseForm.d.ts

@@ -138,7 +138,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         preventScroll?: boolean;
         showRestTagsPopover?: boolean;
         restTagsPopoverProps?: import("../popover").PopoverProps;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/cjs/form/field.d.ts

@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     preventScroll?: boolean;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: import("../popover").PopoverProps;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

package/lib/cjs/modal/confirm.d.ts

@@ -145,11 +145,11 @@ export declare function withError(props: ModalReactProps): {
     size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
     style?: React.CSSProperties;
     className?: string;
-    motion?: boolean;
     getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
     direction?: any;
+    motion?: boolean;
     width?: string | number;
     height?: string | number;
     mask?: boolean;
@@ -204,10 +204,10 @@ export declare function withError(props: ModalReactProps): {
         title?: string;
         name?: string;
         value?: string | number | readonly string[];
-        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         form?: string;
         slot?: string;
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         hidden?: boolean;
         color?: string;
         content?: string;

package/lib/es/collapsible/index.d.ts

@@ -21,6 +21,7 @@ interface CollapsibleState extends CollapsibleFoundationState {
     domHeight: number;
     visible: boolean;
     isTransitioning: boolean;
+    cacheIsOpen: boolean;
 }
 declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
     static defaultProps: {
@@ -36,6 +37,7 @@ declare class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleSta
     private resizeObserver;
     constructor(props: CollapsibleProps);
     get adapter(): CollapsibleAdapter<CollapsibleProps, CollapsibleState>;
+    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState): Partial<CollapsibleState>;
     static getEntryInfo: (entry: ResizeObserverEntry) => {
         isShown: boolean;
         height: number;

package/lib/es/collapsible/index.js

@@ -1,3 +1,4 @@
+import _pick from "lodash/pick";
 import _isEqual from "lodash/isEqual";
 import React from 'react';
 import CollapsibleFoundation from '@douyinfe/semi-foundation/lib/es/collapsible/foundation';
@@ -29,7 +30,8 @@ class Collapsible extends BaseComponent {
       domInRenderTree: false,
       domHeight: 0,
       visible: this.props.isOpen,
-      isTransitioning: false
+      isTransitioning: false,
+      cacheIsOpen: this.props.isOpen
     };
     this.foundation = new CollapsibleFoundation(this.adapter);
   }
@@ -65,6 +67,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);
@@ -76,22 +92,14 @@ class Collapsible extends BaseComponent {
     }
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
-    const changedPropKeys = Object.keys(this.props).filter(key => !_isEqual(this.props[key], prevProps[key]));
-    const changedStateKeys = Object.keys(this.state).filter(key => !_isEqual(this.state[key], prevState[key]));
+    const changedPropKeys = Object.keys(_pick(this.props, ['reCalcKey'])).filter(key => !_isEqual(this.props[key], prevProps[key]));
+    const changedStateKeys = Object.keys(_pick(this.state, ['domInRenderTree'])).filter(key => !_isEqual(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();

package/lib/es/form/baseForm.d.ts

@@ -138,7 +138,7 @@ declare class Form<Values extends Record<string, any> = any> extends BaseCompone
         preventScroll?: boolean;
         showRestTagsPopover?: boolean;
         restTagsPopoverProps?: import("../popover").PopoverProps;
-    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
     static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
     static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & React.RefAttributes<any>>;
     static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;

package/lib/es/form/field.d.ts

@@ -86,7 +86,7 @@ declare const FormSelect: import("react").ComponentType<import("utility-types").
     preventScroll?: boolean;
     showRestTagsPopover?: boolean;
     restTagsPopoverProps?: import("../popover").PopoverProps;
-} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "motion" | "getPopupContainer" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+} & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "getPopupContainer" | "motion" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay"> & import("react").RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
 declare const FormCheckboxGroup: import("react").ComponentType<import("utility-types").Subtract<import("../checkbox/checkboxGroup").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;
 declare const FormCheckbox: import("react").ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox/checkbox").CheckboxProps & import("./interface").RCIncludeType>;
 declare const FormRadioGroup: import("react").ComponentType<import("utility-types").Subtract<import("../radio/radioGroup").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps & import("react").RefAttributes<any>>;

package/lib/es/modal/confirm.d.ts

@@ -145,11 +145,11 @@ export declare function withError(props: ModalReactProps): {
     size?: import("@douyinfe/semi-foundation/lib/es/modal/modalFoundation").Size;
     style?: React.CSSProperties;
     className?: string;
-    motion?: boolean;
     getPopupContainer?: () => HTMLElement;
     footer?: React.ReactNode;
     header?: React.ReactNode;
     direction?: any;
+    motion?: boolean;
     width?: string | number;
     height?: string | number;
     mask?: boolean;
@@ -204,10 +204,10 @@ export declare function withError(props: ModalReactProps): {
         title?: string;
         name?: string;
         value?: string | number | readonly string[];
-        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         form?: string;
         slot?: string;
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
         hidden?: boolean;
         color?: string;
         content?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.38.3-alpha.2-spin",
+    "version": "2.38.3-alpha.2-patch-3006",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.3-alpha.2-spin",
-        "@douyinfe/semi-animation-react": "2.38.3-alpha.2-spin",
-        "@douyinfe/semi-foundation": "2.38.3-alpha.2-spin",
-        "@douyinfe/semi-icons": "2.38.3-alpha.2-spin",
-        "@douyinfe/semi-illustrations": "2.38.3-alpha.2-spin",
-        "@douyinfe/semi-theme-default": "2.38.3-alpha.2-spin",
+        "@douyinfe/semi-animation": "2.38.3-alpha.2-patch-3006",
+        "@douyinfe/semi-animation-react": "2.38.3-alpha.2-patch-3006",
+        "@douyinfe/semi-foundation": "2.38.3-alpha.2-patch-3006",
+        "@douyinfe/semi-icons": "2.38.3-alpha.2-patch-3006",
+        "@douyinfe/semi-illustrations": "2.38.3-alpha.2-patch-3006",
+        "@douyinfe/semi-theme-default": "2.38.3-alpha.2-patch-3006",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "9ebe9a7f7d63097175ad03eef7a55cdd65a4c3c2",
+    "gitHead": "3e02e0b8a1c3e479662e4c0e96fdcbd1b88b7c84",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",