From 3eb30296d1c43f5a2e9fe80463b6a7920e7326f7 Mon Sep 17 00:00:00 2001 From: Mio Date: Mon, 16 Dec 2024 00:30:11 +0800 Subject: [PATCH] feat(alert): optimize collapse behavior When message's length is less than maxLine prop, it will not show the collapse button. Optimize message not collapse test --- src/alert/Alert.tsx | 16 +++++++++------- src/alert/__tests__/alert.test.tsx | 7 +++++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx index df6e317211..b57d3ea6b6 100644 --- a/src/alert/Alert.tsx +++ b/src/alert/Alert.tsx @@ -47,7 +47,7 @@ const Alert = forwardRef((props, ref) => { } = useDefaultProps(props, alertDefaultProps); const [closed, setClosed] = React.useState(false); - const [collapsed, setCollapsed] = React.useState(false); + const [collapsed, setCollapsed] = React.useState(true); const iconMap = { success: CheckCircleFilledIcon, @@ -62,7 +62,7 @@ const Alert = forwardRef((props, ref) => { }; const handleCollapse = () => { - setCollapsed(!collapsed); + setCollapsed((collapsed) => !collapsed); }; const renderIconNode = () => { @@ -75,8 +75,8 @@ const Alert = forwardRef((props, ref) => { return (
{message.map((item, index) => { - if (!collapsed) { - if (index < maxLine) { + if (collapsed) { + if (index < +maxLine) { return
{item}
; } } else { @@ -84,9 +84,11 @@ const Alert = forwardRef((props, ref) => { } return true; })} -
- {!collapsed ? t(local.expandText) : t(local.collapseText)} -
+ {+maxLine < message.length && ( +
+ {collapsed ? t(local.expandText) : t(local.collapseText)} +
+ )}
); } diff --git a/src/alert/__tests__/alert.test.tsx b/src/alert/__tests__/alert.test.tsx index baa9a65bf0..cc42f15381 100644 --- a/src/alert/__tests__/alert.test.tsx +++ b/src/alert/__tests__/alert.test.tsx @@ -84,17 +84,20 @@ describe('Alert 组件测试', () => { }); test('message not collapsed', () => { - const massage = [ + const message = [
{text}
,
{text}
,
{text}
, ]; - const { container } = render(); + const { container } = render(); + const { container: container1 } = render(); expect(container.querySelector('.t-alert__collapse')).toBeNull(); expect(container.querySelector('.t-alert__collapse')).not.toBeInTheDocument(); + expect(container1.querySelector('.t-alert__collapse')).toBeNull(); + expect(container1.querySelector('.t-alert__collapse')).not.toBeInTheDocument(); }); test('Alert 展开收起操作', async () => {