fix(Token): correct render with conditional children (#3404)

skbkontur · Apr 16, 2024 · 0ce8800 · 0ce8800
1 parent 6a75547
commit 0ce8800
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 25 deletions.
diff --git a/packages/react-ui/components/Token/Token.tsx b/packages/react-ui/components/Token/Token.tsx
@@ -2,7 +2,7 @@ import React, { AriaAttributes } from 'react';
 
 import { locale } from '../../lib/locale/decorators';
 import { CrossIcon } from '../../internal/icons/CrossIcon';
-import { emptyHandler, getChildrenText } from '../../lib/utils';
+import { emptyHandler } from '../../lib/utils';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { Theme } from '../../lib/theming/Theme';
 import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
@@ -11,6 +11,7 @@ import { rootNode, TSetRootNode } from '../../lib/rootNode';
 import { isTheme2022 } from '../../lib/theming/ThemeHelpers';
 import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';
 import { SizeProp } from '../../lib/types/props';
+import { reactGetTextContent } from '../../lib/reactGetTextContent';
 
 import { styles, colorStyles } from './Token.styles';
 import { TokenLocale, TokenLocaleHelper } from './locale';
@@ -107,7 +108,7 @@ export class Token extends React.Component<TokenProps> {
     const theme = this.theme;
 
     const validation = getValidation(error, warning);
-    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + getChildrenText(children);
+    const removeButtonAriaLabel = this.locale.removeButtonAriaLabel + ' ' + reactGetTextContent(children);
 
     const icon = isTheme2022(theme) ? (
       <CloseButtonIcon

diff --git a/packages/react-ui/lib/__tests__/reactGetTextContent-test.tsx b/packages/react-ui/lib/__tests__/reactGetTextContent-test.tsx
@@ -52,6 +52,8 @@ const testCase: TextContent[] = [
     label: '123',
     renderNode: () => 123,
   },
+
+  { label: '', renderNode: () => false },
 ];
 
 describe('reactGetTextContent', () => {

diff --git a/packages/react-ui/lib/utils.ts b/packages/react-ui/lib/utils.ts
@@ -224,29 +224,6 @@ export const isKonturIcon = (icon: React.ReactElement) => {
   return Object.prototype.hasOwnProperty.call(icon?.type, '__KONTUR_ICON__');
 };
 
-/**
- * Allows to get text of all nested children as a string
- *
- * @param children React's children
- * @returns Nested child text or an empty string
- */
-export function getChildrenText(children: React.ReactNode): string {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return children.toString();
-  }
-
-  if (Array.isArray(children)) {
-    return children.map((entry) => getChildrenText(entry)).join('');
-  }
-
-  const nextChild = (children as React.ReactElement)?.props.children;
-  if (!nextChild) {
-    return '';
-  }
-
-  return getChildrenText(nextChild);
-}
-
 export function clickOutside() {
   const event = document.createEvent('HTMLEvents');
   event.initEvent('mousedown', true, true);