瀏覽代碼

fix: [Typography] remove unnecessary ellipsis waring when ellipsis no… (#1581)

* fix: [Typography] remove unnecessary ellipsis waring when ellipsis not turn on

* fix: [Typography] Remove the ellipsis warning when omitting is not enabled in Typography

* fix: [Typo] observer parent in ResizeObserver
YyumeiZhang 2 年之前
父節點
當前提交
f898301e6b
共有 2 個文件被更改,包括 41 次插入19 次删除
  1. 17 2
      packages/semi-ui/typography/_story/typography.stories.jsx
  2. 24 17
      packages/semi-ui/typography/base.tsx

+ 17 - 2
packages/semi-ui/typography/_story/typography.stories.jsx

@@ -719,7 +719,7 @@ export const EdgeCases = () => (
         collapseText: '折叠我吧' 
       }} 
       style={{ width: 300 }}>
-        case 2:长度刚好符合预期,不应该省略,不应该显示展开按钮。长度刚好符合预期,不应该省略,不应该显示展开按钮。不应该显示展开的。
+        case 3:长度刚好符合预期,不应该省略,不应该显示展开按钮。长度刚好符合预期,不应该省略,不应该显示展开按钮。不应该显示展开的。
     </Paragraph>
   </>
 );
@@ -793,4 +793,19 @@ export const whiteSpaceNoWrap = () => (
       需要截断这段文字,[此处不可见]
     </Typography.Text>
   </div>
-)
+)
+
+export const TextNoWarning = () => {
+  const { Text } = Typography;
+  return (
+    <div>
+      <div style={{ width: 500 }}>
+        <Text 
+          style={{ width: 300 }}
+        >
+          <div>这是一个非 string 类型的 Text 的 children, 无省略功能,控制台不应该出现和省略相关的 warning</div>
+        </Text>
+      </div>
+    </div>
+  )
+}

+ 24 - 17
packages/semi-ui/typography/base.tsx

@@ -279,13 +279,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         }
         const { expanded } = this.state;
         const canUseCSSEllipsis = this.canUseCSSEllipsis();
-
-        // Currently only text truncation is supported, if there is non-text, 
-        // both css truncation and js truncation should throw a warning
-        warning(
-            'children' in this.props && typeof children !== 'string',
-            "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment."
-        );
+        
 
         // If children is null, css/js truncated flag isTruncate is false
         if (isNull(children)) {
@@ -296,6 +290,13 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             return undefined;
         }
 
+        // Currently only text truncation is supported, if there is non-text, 
+        // both css truncation and js truncation should throw a warning
+        warning(
+            'children' in this.props && typeof children !== 'string',
+            "[Semi Typography] Only children with pure text could be used with ellipsis at this moment."
+        );
+
         if (!rows || rows < 0 || expanded) {
             return undefined;
         }
@@ -631,16 +632,22 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     }
 
     render() {
-        return (
-            <ResizeObserver onResize={this.onResize}>
-                <LocaleConsumer componentName="Typography">     
-                    {(locale: Locale['Typography']) => {
-                        this.expandStr = locale.expand;
-                        this.collapseStr = locale.collapse;
-                        return this.renderTipWrapper();
-                    }}
-                </LocaleConsumer>
-            </ResizeObserver>
+        const content = (
+            <LocaleConsumer componentName="Typography">
+                {(locale: Locale['Typography']) => {
+                    this.expandStr = locale.expand;
+                    this.collapseStr = locale.collapse;
+                    return this.renderTipWrapper();
+                }}
+            </LocaleConsumer>
         );
+        if (this.props.ellipsis) {
+            return (
+                <ResizeObserver onResize={this.onResize} observeParent>
+                    {content}
+                </ResizeObserver>
+            );
+        }
+        return content;
     }
 }