[DevTools] Improve HOC search UX (#18802)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Nick Reiley committed
May 15, 2020 at 22:37 UTC
7c080902ef4ad7b061c0377ee72d0a343cf42ea5
7 files changed
+51
-60
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+3
@@ -626,4 +626,7 @@ exports[`Store should show the right display names for special component types 1
626
<MyComponent> [ForwardRef]
627
▾ <Suspense>
628
<MyComponent5>
629
+ <Baz> [withFoo][withBar]
630
+ <Baz> [Memo][withFoo][withBar]
631
+ <Baz> [ForwardRef][withFoo][withBar]
632
`;
packages/react-devtools-shared/src/__tests__/store-test.js
+13
@@ -871,6 +871,16 @@ describe('Store', () => {
871
const MyComponent5 = (props, ref) => null;
872
const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
873
874
+ const FakeHigherOrderComponent = () => null;
875
+ FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
876
+
877
+ const MemoizedFakeHigherOrderComponent = React.memo(
878
+ FakeHigherOrderComponent,
879
+ );
880
+ const ForwardRefFakeHigherOrderComponent = React.forwardRef(
881
+ FakeHigherOrderComponent,
882
+ );
883
+
884
const App = () => (
885
<React.Fragment>
886
<MyComponent />
@@ -882,6 +892,9 @@ describe('Store', () => {
892
<React.Suspense fallback="Loading...">
893
<LazyComponent />
894
</React.Suspense>
895
+ <FakeHigherOrderComponent />
896
+ <MemoizedFakeHigherOrderComponent />
897
+ <ForwardRefFakeHigherOrderComponent />
898
</React.Fragment>
899
);
900
packages/react-devtools-shared/src/devtools/utils.js
-18
@@ -7,11 +7,6 @@
7
* @flow
8
*/
9
10
-import {
11
- ElementTypeForwardRef,
12
- ElementTypeMemo,
13
-} from 'react-devtools-shared/src/types';
14
-
10
import type {Element} from './views/Components/types';
11
import type Store from './store';
12
@@ -30,19 +25,6 @@ export function printElement(element: Element, includeWeight: boolean = false) {
25
if (element.hocDisplayNames !== null) {
26
hocDisplayNames = [...element.hocDisplayNames];
27
}
33
- if (element.type === ElementTypeMemo) {
34
- if (hocDisplayNames === null) {
35
- hocDisplayNames = ['Memo'];
36
- } else {
37
- hocDisplayNames.push('Memo');
38
- }
39
- } else if (element.type === ElementTypeForwardRef) {
40
- if (hocDisplayNames === null) {
41
- hocDisplayNames = ['ForwardRef'];
42
- } else {
43
- hocDisplayNames.push('ForwardRef');
44
- }
45
- }
28
29
const hocs =
30
hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;
packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+8
-23
@@ -9,10 +9,6 @@
9
10
import * as React from 'react';
11
import {Fragment} from 'react';
12
-import {
13
- ElementTypeMemo,
14
- ElementTypeForwardRef,
15
-} from 'react-devtools-shared/src/types';
12
import styles from './Badge.css';
13
14
import type {ElementType} from 'react-devtools-shared/src/types';
@@ -21,35 +17,24 @@ type Props = {|
17
className?: string,
18
hocDisplayNames: Array<string> | null,
19
type: ElementType,
20
+ children: React$Node,
21
|};
22
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) {
29
let totalBadgeCount = 0;
29
- let typeLabel = null;
30
31
if (hocDisplayNames !== null) {
32
- hocDisplayName = hocDisplayNames[0];
32
totalBadgeCount += hocDisplayNames.length;
33
}
34
36
- if (type === ElementTypeMemo) {
37
- typeLabel = 'Memo';
38
- totalBadgeCount++;
39
- } else if (type === ElementTypeForwardRef) {
40
- typeLabel = 'ForwardRef';
41
- totalBadgeCount++;
42
- }
43
-
44
- if (hocDisplayNames === null && typeLabel === null) {
45
- return null;
46
- }
47
-
35
return (
36
<Fragment>
50
- <div className={`${styles.Badge} ${className || ''}`}>
51
- {hocDisplayName || typeLabel}
52
- </div>
37
+ <div className={`${styles.Badge} ${className || ''}`}>{children}</div>
38
{totalBadgeCount > 1 && (
39
<div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
40
)}
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+11
-5
@@ -137,11 +137,17 @@ export default function ElementView({data, index, style}: Props) {
137
"
138
</Fragment>
139
)}
140
- <Badge
141
- className={styles.Badge}
142
- hocDisplayNames={hocDisplayNames}
143
- type={type}
144
- />
140
+ {hocDisplayNames !== null && hocDisplayNames.length > 0 ? (
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}
151
</div>
152
</div>
153
);
packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+2
-14
@@ -8,10 +8,6 @@
8
*/
9
10
import * as React from 'react';
11
-import {
12
- ElementTypeForwardRef,
13
- ElementTypeMemo,
14
-} from 'react-devtools-shared/src/types';
11
import styles from './HocBadges.css';
12
13
import type {Element} from './types';
@@ -21,22 +17,14 @@ type Props = {|
17
|};
18
19
export default function HocBadges({element}: Props) {
24
- const {hocDisplayNames, type} = ((element: any): Element);
20
+ const {hocDisplayNames} = ((element: any): Element);
21
26
- let typeBadge = null;
27
- if (type === ElementTypeMemo) {
28
- typeBadge = 'Memo';
29
- } else if (type === ElementTypeForwardRef) {
30
- typeBadge = 'ForwardRef';
31
- }
32
-
33
- if (hocDisplayNames === null && typeBadge === null) {
22
+ if (hocDisplayNames === null) {
23
return null;
24
}
25
26
return (
27
<div className={styles.HocBadges}>
39
- {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
28
{hocDisplayNames !== null &&
29
hocDisplayNames.map(hocDisplayName => (
30
<div key={hocDisplayName} className={styles.Badge}>
packages/react-devtools-shared/src/utils.js
+14
@@ -275,6 +275,20 @@ export function separateDisplayNameAndHOCs(
275
break;
276
}
277
278
+ if (type === ElementTypeMemo) {
279
+ if (hocDisplayNames === null) {
280
+ hocDisplayNames = ['Memo'];
281
+ } else {
282
+ hocDisplayNames.unshift('Memo');
283
+ }
284
+ } else if (type === ElementTypeForwardRef) {
285
+ if (hocDisplayNames === null) {
286
+ hocDisplayNames = ['ForwardRef'];
287
+ } else {
288
+ hocDisplayNames.unshift('ForwardRef');
289
+ }
290
+ }
291
+
292
return [displayName, hocDisplayNames];
293
}
294