From 15f0219fb63c761206de2b1d5e6066aa8d101d63 Mon Sep 17 00:00:00 2001 From: duanbaosheng <1065140483@qq.com> Date: Tue, 11 Oct 2022 16:50:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(collapse):=201.=20defaultExpandAll=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=B2=A1=E6=9C=89=E7=94=9F=E6=95=88=202.=20?= =?UTF-8?q?=E5=8C=85=E5=90=ABform=E8=A1=A8=E5=8D=95=E7=9A=84=E6=97=B6?= =?UTF-8?q?=E5=80=99=E6=A0=B7=E5=BC=8F=E5=87=BA=E7=8E=B0=E6=BA=A2=E5=87=BA?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1579)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(collapse): 1. defaultExpandAll 属性没有生效 2. 包含form表单的时候样式出现溢出问题 * fix(collapse): defaultExpandAll没有生效,包含form组件的时候样式出现问题 --- src/collapse/Collapse.tsx | 6 ++- .../__snapshots__/collapse.test.tsx.snap | 38 ++++++++++++------- src/collapse/__tests__/collapse.test.tsx | 4 +- src/collapse/_example/base.jsx | 2 +- src/collapse/_usage/index.jsx | 2 +- 5 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/collapse/Collapse.tsx b/src/collapse/Collapse.tsx index 327666f86..4d10bb8d0 100644 --- a/src/collapse/Collapse.tsx +++ b/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); }; diff --git a/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap b/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap index f568dfbce..01be93df9 100644 --- a/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap +++ b/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap @@ -15,10 +15,10 @@ exports[`base.jsx 1`] = ` class="t-collapse-panel__header t-is-clickable" >
+
+
+ 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 +
+
{ // 渲染测试 test('create', async () => { const { container, queryByText } = render(); - 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 = () => ( - + 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 diff --git a/src/collapse/_example/base.jsx b/src/collapse/_example/base.jsx index 43ded2e46..089c91e12 100644 --- a/src/collapse/_example/base.jsx +++ b/src/collapse/_example/base.jsx @@ -4,7 +4,7 @@ import { Collapse, TagInput } from 'tdesign-react'; export default function CollapseExample() { const { Panel } = Collapse; return ( - + 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 diff --git a/src/collapse/_usage/index.jsx b/src/collapse/_usage/index.jsx index 4c3be4423..1dc027cbd 100644 --- a/src/collapse/_usage/index.jsx +++ b/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);