highlight matched hoc name

facebook · May 1, 2020 · 2f70df9 · 2f70df9
1 parent 3b654cd
commit 2f70df9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -21,26 +21,20 @@ 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}
+ {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,15 @@ 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>
  );