Skip to content

Commit 6ceac4d

Browse files
committed
highlight matched hoc name
1 parent 3b654cd commit 6ceac4d

File tree

4 files changed

+22
-28
lines changed

4 files changed

+22
-28
lines changed

packages/react-devtools-shared/src/devtools/utils.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
* @flow
88
*/
99

10-
import {
11-
ElementTypeForwardRef,
12-
ElementTypeMemo,
13-
} from 'react-devtools-shared/src/types';
14-
1510
import type {Element} from './views/Components/types';
1611
import type Store from './store';
1712

packages/react-devtools-shared/src/devtools/views/Components/Badge.js

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99

1010
import * as React from 'react';
1111
import {Fragment} from 'react';
12-
import {
13-
ElementTypeMemo,
14-
ElementTypeForwardRef,
15-
} from 'react-devtools-shared/src/types';
1612
import styles from './Badge.css';
1713

1814
import type {ElementType} from 'react-devtools-shared/src/types';
@@ -21,27 +17,24 @@ type Props = {|
2117
className?: string,
2218
hocDisplayNames: Array<string> | null,
2319
type: ElementType,
20+
children: React$Node,
2421
|};
2522

26-
export default function Badge({className, hocDisplayNames, type}: Props) {
27-
let hocDisplayName = null;
23+
export default function Badge({
24+
className,
25+
hocDisplayNames,
26+
type,
27+
children,
28+
}: Props) {
2829
let totalBadgeCount = 0;
29-
let typeLabel = null;
3030

3131
if (hocDisplayNames !== null) {
32-
hocDisplayName = hocDisplayNames[0];
3332
totalBadgeCount += hocDisplayNames.length;
3433
}
3534

36-
if (hocDisplayNames === null && typeLabel === null) {
37-
return null;
38-
}
39-
4035
return (
4136
<Fragment>
42-
<div className={`${styles.Badge} ${className || ''}`}>
43-
{hocDisplayName || typeLabel}
44-
</div>
37+
<div className={`${styles.Badge} ${className || ''}`}>{children}</div>
4538
{totalBadgeCount > 1 && (
4639
<div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
4740
)}

packages/react-devtools-shared/src/devtools/views/Components/Element.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,17 @@ export default function ElementView({data, index, style}: Props) {
137137
"
138138
</Fragment>
139139
)}
140-
<Badge
141-
className={styles.Badge}
142-
hocDisplayNames={hocDisplayNames}
143-
type={type}
144-
/>
140+
{hocDisplayNames !== null ? (
141+
<Badge
142+
className={styles.Badge}
143+
hocDisplayNames={hocDisplayNames}
144+
type={type}>
145+
<DisplayName
146+
displayName={hocDisplayNames[0]}
147+
id={((id: any): number)}
148+
/>
149+
</Badge>
150+
) : null}
145151
</div>
146152
</div>
147153
);

packages/react-devtools-shared/src/utils.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -270,10 +270,10 @@ export function separateDisplayNameAndHOCs(
270270
}
271271
break;
272272
case ElementTypeForwardRef:
273-
hocDisplayNames = ['ForwardRef']
274-
break;
273+
hocDisplayNames = ['ForwardRef'];
274+
break;
275275
case ElementTypeMemo:
276-
hocDisplayNames = ['Memo']
276+
hocDisplayNames = ['Memo'];
277277
break;
278278
default:
279279
break;

0 commit comments

Comments
 (0)