From 2f70df9041cb8de5b0daca5b0abd4578c154e3ec Mon Sep 17 00:00:00 2001
From: Nick Reiley <bloomber111@gmail.com>
Date: Sat, 2 May 2020 03:42:06 +0500
Subject: [PATCH] highlight matched hoc name

---
 .../src/devtools/views/Components/Badge.js         | 12 +++---------
 .../src/devtools/views/Components/Element.js       | 14 +++++++++-----
 2 files changed, 12 insertions(+), 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
index 6d937c72ebd86..cc98b3e1dac26 100644
--- 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
index 1fa40035efdd7..7b103833445a1 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,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>
   );