feat(alert): optimize collapse behavior (#3281)

When message's length is less than maxLine prop, it will not show the collapse button. Optimize message not collapse test
Tencent · Dec 17, 2024 · cd90b04 · cd90b04
1 parent 72e9f22
commit cd90b04
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -47,7 +47,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((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<HTMLDivElement, AlertProps>((props, ref) => {
   };
 
   const handleCollapse = () => {
-    setCollapsed(!collapsed);
+    setCollapsed((collapsed) => !collapsed);
   };
 
   const renderIconNode = () => {
@@ -75,18 +75,20 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       return (
         <div className={`${classPrefix}-alert__description`}>
           {message.map((item, index) => {
-            if (!collapsed) {
-              if (index < maxLine) {
+            if (collapsed) {
+              if (index < +maxLine) {
                 return <div key={index}>{item}</div>;
               }
             } else {
               return <div key={index}>{item}</div>;
             }
             return true;
           })}
-          <div className={`${classPrefix}-alert__collapse`} onClick={handleCollapse}>
-            {!collapsed ? t(local.expandText) : t(local.collapseText)}
-          </div>
+          {+maxLine < message.length && (
+            <div className={`${classPrefix}-alert__collapse`} onClick={handleCollapse}>
+              {collapsed ? t(local.expandText) : t(local.collapseText)}
+            </div>
+          )}
         </div>
       );
     }

diff --git 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 = [
       <div key={0}>{text}</div>,
       <div key={1}>{text}</div>,
       <div key={2} data-testid={testId}>
         {text}
       </div>,
     ];
-    const { container } = render(<Alert title="title content" message={massage} />);
+    const { container } = render(<Alert title="title content" message={message} />);
+    const { container: container1 } = render(<Alert title="title content" message={message} maxLine={4} />);
 
     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 () => {