diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js index ecf17a799c005..d4c9d60700d16 100644 --- a/packages/react-devtools-shared/src/devtools/utils.js +++ b/packages/react-devtools-shared/src/devtools/utils.js @@ -7,11 +7,6 @@ * @flow */ -import { - ElementTypeForwardRef, - ElementTypeMemo, -} from 'react-devtools-shared/src/types'; - import type {Element} from './views/Components/types'; import type Store from './store'; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js index 6d937c72ebd86..a2c37b801e170 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js @@ -9,10 +9,6 @@ import * as React from 'react'; import {Fragment} from 'react'; -import { - ElementTypeMemo, - ElementTypeForwardRef, -} from 'react-devtools-shared/src/types'; import styles from './Badge.css'; import type {ElementType} from 'react-devtools-shared/src/types'; @@ -21,27 +17,24 @@ type Props = {| className?: string, hocDisplayNames: Array | null, type: ElementType, + children: React$Node, |}; -export default function Badge({className, hocDisplayNames, type}: Props) { - let hocDisplayName = null; +export default function Badge({ + className, + hocDisplayNames, + type, + children, +}: Props) { let totalBadgeCount = 0; - let typeLabel = null; if (hocDisplayNames !== null) { - hocDisplayName = hocDisplayNames[0]; totalBadgeCount += hocDisplayNames.length; } - if (hocDisplayNames === null && typeLabel === null) { - return null; - } - return ( -
- {hocDisplayName || typeLabel} -
+
{children}
{totalBadgeCount > 1 && (
+{totalBadgeCount - 1}
)} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js index 1fa40035efdd7..46b54511181d9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js @@ -137,11 +137,17 @@ export default function ElementView({data, index, style}: Props) { "
)} - + {hocDisplayNames !== null ? ( + + + + ) : null} ); diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 66081ebcb1072..34757f967b67e 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -270,10 +270,10 @@ export function separateDisplayNameAndHOCs( } break; case ElementTypeForwardRef: - hocDisplayNames = ['ForwardRef'] - break; + hocDisplayNames = ['ForwardRef']; + break; case ElementTypeMemo: - hocDisplayNames = ['Memo'] + hocDisplayNames = ['Memo']; break; default: break;