fix(collapse): 1. defaultExpandAll 属性没有生效 2. 包含form表单的时候样式出现溢出问题 (#1579)

* fix(collapse): 1. defaultExpandAll 属性没有生效 2. 包含form表单的时候样式出现溢出问题

* fix(collapse): defaultExpandAll没有生效,包含form组件的时候样式出现问题

src/collapse/Collapse.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classnames from 'classnames';
 import { TdCollapseProps, CollapsePanelValue, CollapseValue } from './type';
 import { StyledProps } from '../common';
@@ -21,9 +21,10 @@ const Collapse = forwardRefWithStatics(
     const { defaultExpandAll, disabled, expandIconPlacement, expandOnRowClick, expandIcon, ...rest } = props;
     const { children, className, style, expandMutex, borderless, onChange } = rest;
     const [collapseValue, setCollapseValue] = useControlled(props, 'value', onChange);
+    const collapseValues = useRef(collapseValue);
 
     const updateCollapseValue = (value: CollapsePanelValue) => {
-      let newValue: CollapseValue = [].concat(collapseValue || []);
+      let newValue: CollapseValue = [].concat(collapseValues.current || []);
       const index = newValue.indexOf(value);
       if (index >= 0) {
         newValue.splice(index, 1);
@@ -32,6 +33,7 @@ const Collapse = forwardRefWithStatics(
       } else {
         newValue.push(value);
       }
+      collapseValues.current = [...newValue];
       setCollapseValue(newValue);
     };
 

src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap

@@ -15,10 +15,10 @@ exports[`base.jsx 1`] = `
           class="t-collapse-panel__header t-is-clickable"
         >
           <svg
-            class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
+            class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
             fill="none"
             height="16"
-            style="transform: rotate(-90deg);"
+            style="transform: rotate(180deg);"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +36,7 @@ exports[`base.jsx 1`] = `
           />
         </div>
         <div
-          class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+          class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
           style="height: 0px;"
         >
           <div
@@ -57,10 +57,10 @@ exports[`base.jsx 1`] = `
           class="t-collapse-panel__header t-is-clickable"
         >
           <svg
-            class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
+            class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
             fill="none"
             height="16"
-            style="transform: rotate(180deg);"
+            style="transform: rotate(-90deg);"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -78,7 +78,7 @@ exports[`base.jsx 1`] = `
           />
         </div>
         <div
-          class="t-collapse-panel__body t-slide-down-enter-active appear appear-active"
+          class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed exit exit-active"
           style="height: 0px;"
         >
           <div
@@ -99,10 +99,10 @@ exports[`base.jsx 1`] = `
           class="t-collapse-panel__header t-is-clickable"
         >
           <svg
-            class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
+            class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
             fill="none"
             height="16"
-            style="transform: rotate(-90deg);"
+            style="transform: rotate(180deg);"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +120,7 @@ exports[`base.jsx 1`] = `
           />
         </div>
         <div
-          class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+          class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
           style="height: 0px;"
         >
           <div
@@ -206,10 +206,10 @@ exports[`base.jsx 1`] = `
           class="t-collapse-panel__header t-is-clickable"
         >
           <svg
-            class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
+            class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
             fill="none"
             height="16"
-            style="transform: rotate(-90deg);"
+            style="transform: rotate(180deg);"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -226,6 +226,16 @@ exports[`base.jsx 1`] = `
             class="t-collapse-panel__header--blank"
           />
         </div>
+        <div
+          class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
+          style="height: 0px;"
+        >
+          <div
+            class="t-collapse-panel__content"
+          >
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </div>
+        </div>
       </div>
     </div>
     <div
@@ -238,10 +248,10 @@ exports[`base.jsx 1`] = `
           class="t-collapse-panel__header t-is-clickable"
         >
           <svg
-            class="t-fake-arrow t-collapse-panel__icon t-collapse-panel__icon--left"
+            class="t-fake-arrow t-fake-arrow--active t-collapse-panel__icon t-collapse-panel__icon--left"
             fill="none"
             height="16"
-            style="transform: rotate(-90deg);"
+            style="transform: rotate(180deg);"
             viewBox="0 0 16 16"
             width="16"
             xmlns="http://www.w3.org/2000/svg"
@@ -259,7 +269,7 @@ exports[`base.jsx 1`] = `
           />
         </div>
         <div
-          class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+          class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
           style="height: 0px;"
         >
           <div

src/collapse/__tests__/collapse.test.tsx

@@ -25,14 +25,14 @@ describe('Collapse Unit Test', () => {
   // 渲染测试
   test('create', async () => {
     const { container, queryByText } = render(<CollapseTestComponent />);
-    expect(container.firstChild.classList.contains('t-collapse')).toBeTruthy();
+    expect(container.firstElementChild.classList.contains('t-collapse')).toBeTruthy();
     expect(queryByText(panelContent)).toBeInTheDocument();
   });
 
   // 测试点击事件
   test('click event', async () => {
     const CollapseTest = () => (
-      <Collapse defaultExpandAll defaultValue="default">
+      <Collapse defaultExpandAll defaultValue={['default']}>
         <Panel header="这是一个折叠标题" value="default">
           这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
         </Panel>

src/collapse/_example/base.jsx

@@ -4,7 +4,7 @@ import { Collapse, TagInput } from 'tdesign-react';
 export default function CollapseExample() {
   const { Panel } = Collapse;
   return (
-    <Collapse defaultValue="default">
+    <Collapse defaultExpandAll defaultValue={['default']}>
       <Panel header="这是一个折叠标题">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </Panel>

src/collapse/_usage/index.jsx

@@ -10,9 +10,9 @@ import BaseUsage, {
 } from "@site/src/components/BaseUsage";
 import jsxToString from "react-element-to-jsx-string";
 
+import { Collapse } from "tdesign-react";
 import configProps from "./props.json";
 
-import { Collapse } from "tdesign-react";
 
 export default function Usage() {
   const [configList, setConfigList] = useState(configProps);