fix: [Notice] update the logic of checking the number of lines

alibaba · May 14, 2021 · 1fcd117 · 1fcd117
1 parent 4096ee3
commit 1fcd117
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/src/components/Notice/index.tsx b/src/components/Notice/index.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
+import countLines from '../../utils/countLines';
 
 export interface NoticeProps {
   content: string;
@@ -11,8 +12,6 @@ export interface NoticeProps {
   onLinkClick?: (url: string) => void;
 }
 
-const COLLAPSED_MAX_HEIGHT = 48;
-
 export const Notice: React.FC<NoticeProps> = (props) => {
   const { content, url, hasClose = true, onLinkClick, onClose } = props;
   // 展开还是收起状态
@@ -34,7 +33,8 @@ export const Notice: React.FC<NoticeProps> = (props) => {
   }
 
   useEffect(() => {
-    if (contentRef.current && contentRef.current.offsetHeight > COLLAPSED_MAX_HEIGHT) {
+    const cont = contentRef.current;
+    if (cont && countLines(cont) > 2) {
       setHasMore(true);
       setCollapsed(true);
     }
@@ -52,7 +52,7 @@ export const Notice: React.FC<NoticeProps> = (props) => {
         />
       )}
       <div className="Notice-content">
-        <p className={clsx('Notice-text', { collapsed })} ref={contentRef}>
+        <p className={clsx('Notice-text', { collapsed })} data-overflow={hasMore} ref={contentRef}>
           <Icon className="Notice-icon" type="bullhorn" />
           {url ? (
             <a href={url} onClick={handleLinkClick}>
@@ -70,6 +70,7 @@ export const Notice: React.FC<NoticeProps> = (props) => {
               size="lg"
               aria-expanded={!collapsed}
               onClick={handleToggle}
+              aria-label="Toggle Notice"
             />
           </div>
         )}

diff --git a/src/components/Notice/style.less b/src/components/Notice/style.less
@@ -1,4 +1,6 @@
 .Notice {
+  @icon-size: @font-size-root * 1.5;
+
   position: absolute;
   z-index: @zindex-notice;
   top: @notice-top;
@@ -20,10 +22,10 @@
       -webkit-line-clamp: 2;
       text-overflow: ellipsis;
     }
-    &:not(.collapsed)::after {
+    &[data-overflow="true"]:not(.collapsed)::after {
       content: '';
       display: inline-block;
-      width: (@notice-more-font-size + 6px);
+      width: (@icon-size + 6px);
       height: @notice-content-font-size;
     }
     a {
@@ -42,10 +44,9 @@
     top: 50%;
     top: ~'min(50%, 33px)';
     transform: translateY(-50%);
-    font-size: @notice-close-font-size;
 
     & + .Notice-content {
-      margin-left: (@notice-close-font-size + @gutter - @icon-button-lg-padding);
+      margin-left: (@icon-size + $left);
     }
   }
   .Icon {
@@ -70,16 +71,7 @@
 }
 
 .Notice-more {
-  display: block;
-  color: @notice-more-color;
-  font-size: @notice-more-font-size;
-  transition: 0.3s;
-
   &[aria-expanded='true'] {
     transform: rotate(180deg);
   }
-  &:hover,
-  &:active {
-    background: transparent;
-  }
 }
diff --git a/src/utils/countLines.ts b/src/utils/countLines.ts
@@ -0,0 +1,6 @@
+export default function countLines(el: Element) {
+  const styles = window.getComputedStyle(el, null);
+  const lh = parseInt(styles.lineHeight, 10);
+  const h = parseInt(styles.height, 10);
+  return Math.round(h / lh);
+}