feat: 🎸 optimize collapse behavior

When message's length is less than maxLine prop, it will not show the collapse button.
Tencent · Dec 15, 2024 · 8e710d1 · 8e710d1
1 parent 72e9f22
commit 8e710d1
Showing 1 changed file with 9 additions and 7 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>
       );
     }