Merge pull request #2169 from DouyinFE/fix/template-string

fix: Fix the omission exception when children in Typography is a temp…
DouyinFE · Apr 12, 2024 · 3b74c7e · 3b74c7e
2 parents 5f90e63 + 11f2792
commit 3b74c7e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/semi-ui/typography/__test__/typography.test.js b/packages/semi-ui/typography/__test__/typography.test.js
@@ -107,4 +107,21 @@ describe(`Typography`, () => {
         })
         expect(numeral.find('.price').text()).toEqual('1992.15')
     })
+
+    it('children is template string', () => {
+        const { Text } = Typography;
+        const code = 'code'; 
+
+        const typographyParagraph = mount(
+            <Text 
+                style={{  marginTop: 6, color: 'var(--semi-color-text-2)' }}
+                ellipsis={{ showTooltip: { opts: { style: { wordBreak: 'break-word' } } } }}
+                copyable={{ content: code }}
+            >
+                Key: {code}
+            </Text>
+        );
+        expect(typographyParagraph.find('.semi-typography').children().at(0).text()).toEqual('Key: code');
+    });
+
 });
diff --git a/packages/semi-ui/typography/base.tsx b/packages/semi-ui/typography/base.tsx
@@ -391,11 +391,14 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
 
         const extraNode = { expand: this.expandRef.current, copy: this.copyRef && this.copyRef.current };
 
+        // Perform type conversion on children to prevent component crash due to non-string type of children
+        // https://github.com/DouyinFE/semi-design/issues/2167
+        const realChildren = Array.isArray(children) ? children.join('') : String(children);
+
         const content = getRenderText(
             this.wrapperRef.current,
             rows,
-            // Perform type conversion on children to prevent component crash due to non-string type of children
-            String(children),
+            realChildren,
             extraNode,
             ELLIPSIS_STR,
             suffix,
@@ -405,7 +408,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             this.setState({
                 isOverflowed: false,
                 ellipsisContent: content,
-                isTruncated: children !== content,
+                isTruncated: realChildren !== content,
             }, resolve);
         });