highlight matched hoc name

facebook · May 1, 2020 · 6ceac4d · 6ceac4d
1 parent 3b654cd
commit 6ceac4d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 28 deletions.
diff --git 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
@@ -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<string> | 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 (
  <Fragment>
- <div className={`${styles.Badge} ${className || ''}`}>
- {hocDisplayName || typeLabel}
- </div>
+ <div className={`${styles.Badge} ${className || ''}`}>{children}</div>
  {totalBadgeCount > 1 && (
  <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
  )}

diff --git 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) {
  "
  </Fragment>
  )}
- <Badge
- className={styles.Badge}
- hocDisplayNames={hocDisplayNames}
- type={type}
- />
+ {hocDisplayNames !== null ? (
+ <Badge
+ className={styles.Badge}
+ hocDisplayNames={hocDisplayNames}
+ type={type}>
+ <DisplayName
+ displayName={hocDisplayNames[0]}
+ id={((id: any): number)}
+ />
+ </Badge>
+ ) : null}
  </div>
  </div>
  );

diff --git 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;