Add HOC component filter
Brian Vaughn committed
Jun 3, 2019 at 08:51 UTC
a173f4eb85a81b86f1457d901be6fc198e36b728
3 files changed
+37
-7
src/backend/renderer.js
+4
@@ -4,6 +4,7 @@ import { gte } from 'semver';
4
import {
5
ComponentFilterDisplayName,
6
ComponentFilterElementType,
7
+ ComponentFilterHOC,
8
ComponentFilterLocation,
9
ElementTypeClass,
10
ElementTypeContext,
@@ -319,6 +320,9 @@ export function attach(
320
hideElementsWithPaths.add(new RegExp(componentFilter.value, 'i'));
321
}
322
break;
323
+ case ComponentFilterHOC:
324
+ hideElementsWithDisplayNames.add(new RegExp('\\('));
325
+ break;
326
default:
327
console.warn(
328
`Invalid component filter type "${componentFilter.type}"`
src/devtools/views/Components/ComponentFiltersModal.js
+24
-6
@@ -15,8 +15,9 @@ import ButtonIcon from '../ButtonIcon';
15
import Toggle from '../Toggle';
16
import Store from 'src/devtools/store';
17
import {
18
- ComponentFilterElementType,
18
ComponentFilterDisplayName,
19
+ ComponentFilterElementType,
20
+ ComponentFilterHOC,
21
ComponentFilterLocation,
22
ElementTypeClass,
23
ElementTypeContext,
@@ -32,6 +33,7 @@ import {
33
import styles from './ComponentFiltersModal.css';
34
35
import type {
36
+ BooleanComponentFilter,
37
ComponentFilter,
38
ComponentFilterType,
39
ElementType,
@@ -170,15 +172,18 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
172
<option value={ComponentFilterLocation}>location</option>
173
<option value={ComponentFilterDisplayName}>name</option>
174
<option value={ComponentFilterElementType}>type</option>
175
+ <option value={ComponentFilterHOC}>hoc</option>
176
</select>
177
</td>
178
<td className={styles.TableCell}>
176
- {componentFilter.type === ComponentFilterElementType
177
- ? 'equals'
178
- : 'matches'}
179
+ {componentFilter.type === ComponentFilterElementType &&
180
+ 'equals'}
181
+ {(componentFilter.type === ComponentFilterLocation ||
182
+ componentFilter.type === ComponentFilterDisplayName) &&
183
+ 'matches'}
184
</td>
185
<td className={styles.TableCell}>
181
- {componentFilter.type === ComponentFilterElementType ? (
186
+ {componentFilter.type === ComponentFilterElementType && (
187
<select
188
className={styles.Select}
189
value={componentFilter.value}
@@ -205,7 +210,9 @@ function ComponentFiltersModal({ store, setIsModalShowing }: Props) {
210
<option value={ElementTypeProfiler}>profiler</option>
211
<option value={ElementTypeSuspense}>suspense</option>
212
</select>
208
- ) : (
213
+ )}
214
+ {(componentFilter.type === ComponentFilterLocation ||
215
+ componentFilter.type === ComponentFilterDisplayName) && (
216
<input
217
className={styles.Input}
218
type="text"
@@ -311,6 +318,12 @@ function useComponentFilters() {
318
isValid: true,
319
value: '',
320
};
321
+ } else if (type === ComponentFilterHOC) {
322
+ cloned[index] = {
323
+ type: ComponentFilterHOC,
324
+ isEnabled: componentFilter.isEnabled,
325
+ isValid: true,
326
+ };
327
}
328
}
329
return cloned;
@@ -406,6 +419,11 @@ function useComponentFilters() {
419
...((cloned[index]: any): RegExpComponentFilter),
420
isEnabled,
421
};
422
+ } else if (componentFilter.type === ComponentFilterHOC) {
423
+ cloned[index] = {
424
+ ...((cloned[index]: any): BooleanComponentFilter),
425
+ isEnabled,
426
+ };
427
}
428
}
429
return cloned;
src/types.js
+9
-1
@@ -41,8 +41,9 @@ export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
41
export const ComponentFilterElementType = 1;
42
export const ComponentFilterDisplayName = 2;
43
export const ComponentFilterLocation = 3;
44
+export const ComponentFilterHOC = 4;
45
45
-export type ComponentFilterType = 1 | 2 | 3;
46
+export type ComponentFilterType = 1 | 2 | 3 | 4;
47
48
// Hide all elements of types in this Set.
49
// We hide host components only by default.
@@ -61,6 +62,13 @@ export type RegExpComponentFilter = {|
62
value: string,
63
|};
64
65
+export type BooleanComponentFilter = {|
66
+ isEnabled: boolean,
67
+ isValid: boolean,
68
+ type: 4,
69
+|};
70
+
71
export type ComponentFilter =
72
+ | BooleanComponentFilter
73
| ElementTypeComponentFilter
74
| RegExpComponentFilter;