From 1e2216f2782f0420acc092eb6b55ce7056aeaa13 Mon Sep 17 00:00:00 2001
From: dingsheng <727040141@qq.com>
Date: Wed, 30 Jun 2021 19:37:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=20=E4=BF=AE=E5=A4=8D=20collapse=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=90=8C=E6=97=B6=E8=AE=BE=E7=BD=AE=20active?=
 =?UTF-8?q?Key=20=E5=92=8C=20defaultActiveKey=20=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=AF=BC=E8=87=B4=E7=9A=84=20bug=20(#698)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复同时设置 activeKey 和 defaultActiveKey 导致的 bug

* fix: 修复同时设置 activeKey 和 defaultActiveKey 导致的 bug

* perf: 代码优化

* fix: 解决动画丢失问题

Co-authored-by: Jerome Lin <jerome.lin@zhongan.com>
---
 packages/zarm/src/collapse/Collapse.tsx | 27 ++++++++++++-------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/zarm/src/collapse/Collapse.tsx b/packages/zarm/src/collapse/Collapse.tsx
index 8cc25ebd7..666936588 100644
--- a/packages/zarm/src/collapse/Collapse.tsx
+++ b/packages/zarm/src/collapse/Collapse.tsx
@@ -18,12 +18,14 @@ interface CollapseStates {
 
 const getActiveKey = (props: CollapseProps) => {
   const { multiple, activeKey, defaultActiveKey } = props;
+
   let value;
 
   if (typeof activeKey !== 'undefined') {
     value = activeKey;
   }
-  if (typeof defaultActiveKey !== 'undefined') {
+
+  if (!('activeKey' in props) && typeof defaultActiveKey !== 'undefined') {
     value = defaultActiveKey;
   }
 
@@ -50,19 +52,16 @@ export default class Collapse extends Component<CollapseProps, CollapseStates> {
 
   static getDerivedStateFromProps(nextProps: CollapseProps, state: CollapseStates) {
     const newState: CollapseStates = {};
-    if ('activeKey' in nextProps && nextProps.activeKey !== state.prevActiveKey) {
+
+    if ('activeKey' in nextProps && nextProps.activeKey !== state.activeKey) {
       newState.activeKey = getActiveKey(nextProps);
-      newState.prevActiveKey = nextProps.activeKey;
     }
-    if ('animated' in nextProps) {
-      newState.animated = nextProps.animated;
-    }
-    if ('multiple' in nextProps) {
-      newState.multiple = nextProps.multiple;
+
+    if ('activeKey' in newState) {
+      return newState;
     }
-    return 'activeKey' in newState || 'animated' in newState || 'multiple' in newState
-      ? newState
-      : null;
+
+    return null;
   }
 
   onItemChange = (onItemChange, key) => {
@@ -102,7 +101,8 @@ export default class Collapse extends Component<CollapseProps, CollapseStates> {
   };
 
   renderItems = () => {
-    const { activeKey, multiple, animated } = this.state;
+    const { activeKey } = this.state;
+    const { multiple, animated } = this.props;
     return Children.map(this.props.children, (ele: ReactElement<CollapseItemProps>) => {
       const { disabled, onChange } = ele.props;
       const { key } = ele;
@@ -128,10 +128,9 @@ export default class Collapse extends Component<CollapseProps, CollapseStates> {
       defaultActiveKey,
       ...rest
     } = this.props;
-    const { animated: animatedState } = this.state;
 
     const cls = classnames(prefixCls, className, {
-      [`${prefixCls}--animated`]: animatedState,
+      [`${prefixCls}--animated`]: animated,
     });
 
     return (