Removed FilterList UI for now (collapsed into Settings component)
Brian Vaughn committed
Apr 30, 2019 at 08:17 UTC
eb9705abc87d6b9a03eaec55cdf8465e69e9ab14
3 files changed
+42
-67
src/devtools/views/Settings/FilterList.css
deleted
-4
@@ -1,4 +0,0 @@
1
-.Filter {
2
- display: block;
3
- padding: 0 0 0.5rem;
4
-}
src/devtools/views/Settings/FilterList.js
deleted
-61
@@ -1,61 +0,0 @@
1
-// @flow
2
-
3
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
4
-import { ElementTypeHostComponent } from 'src/types';
5
-import Store from 'src/devtools/store';
6
-import { StoreContext } from '../context';
7
-import { useSubscription } from '../hooks';
8
-
9
-import styles from './FilterList.css';
10
-
11
-import type { FilterPreferences } from 'src/types';
12
-
13
-export default function FilterList(_: {||}) {
14
- const store = useContext(StoreContext);
15
-
16
- const filterPreferencesSubscription = useMemo(
17
- () => ({
18
- getCurrentValue: () => store.filterPreferences,
19
- subscribe: (callback: Function) => {
20
- store.addListener('filterPreferences', callback);
21
- return () => store.removeListener('filterPreferences', callback);
22
- },
23
- }),
24
- [store]
25
- );
26
- const filterPreferences = useSubscription<FilterPreferences, Store>(
27
- filterPreferencesSubscription
28
- );
29
-
30
- const updateFilterPreferences = useCallback(
31
- ({ currentTarget }) => {
32
- const filterPreferences = store.filterPreferences;
33
- if (currentTarget.checked) {
34
- filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
35
- } else {
36
- filterPreferences.hideElementsWithTypes.delete(
37
- ElementTypeHostComponent
38
- );
39
- }
40
- store.filterPreferences = { ...filterPreferences };
41
- },
42
- [store]
43
- );
44
-
45
- // TODO (filter) Disable toggles if isProfiling
46
-
47
- return (
48
- <Fragment>
49
- <label className={styles.Filter}>
50
- <input
51
- type="checkbox"
52
- checked={filterPreferences.hideElementsWithTypes.has(
53
- ElementTypeHostComponent
54
- )}
55
- onChange={updateFilterPreferences}
56
- />{' '}
57
- Hide host components (e.g. <code><div></code>)
58
- </label>
59
- </Fragment>
60
- );
61
-}
src/devtools/views/Settings/Settings.js
+42
-2
@@ -1,15 +1,17 @@
1
// @flow
2
3
import React, { useCallback, useContext, useMemo } from 'react';
4
+import { ElementTypeHostComponent } from 'src/types';
5
import { useSubscription } from '../hooks';
6
import { StoreContext } from '../context';
7
import { SettingsContext } from './SettingsContext';
8
import Store from 'src/devtools/store';
8
-import FilterList from './FilterList';
9
import portaledContent from '../portaledContent';
10
11
import styles from './Settings.css';
12
13
+import type { FilterPreferences } from 'src/types';
14
+
15
function Settings(_: {||}) {
16
const store = useContext(StoreContext);
17
const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
@@ -44,6 +46,35 @@ function Settings(_: {||}) {
46
collapseNodesByDefaultSubscription
47
);
48
49
+ const filterPreferencesSubscription = useMemo(
50
+ () => ({
51
+ getCurrentValue: () => store.filterPreferences,
52
+ subscribe: (callback: Function) => {
53
+ store.addListener('filterPreferences', callback);
54
+ return () => store.removeListener('filterPreferences', callback);
55
+ },
56
+ }),
57
+ [store]
58
+ );
59
+ const filterPreferences = useSubscription<FilterPreferences, Store>(
60
+ filterPreferencesSubscription
61
+ );
62
+
63
+ const updateFilterPreferences = useCallback(
64
+ ({ currentTarget }) => {
65
+ const filterPreferences = store.filterPreferences;
66
+ if (currentTarget.checked) {
67
+ filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
68
+ } else {
69
+ filterPreferences.hideElementsWithTypes.delete(
70
+ ElementTypeHostComponent
71
+ );
72
+ }
73
+ store.filterPreferences = { ...filterPreferences };
74
+ },
75
+ [store]
76
+ );
77
+
78
const updateDisplayDensity = useCallback(
79
({ currentTarget }) => {
80
setDisplayDensity(currentTarget.value);
@@ -145,7 +176,16 @@ function Settings(_: {||}) {
176
Collapse newly added components by default
177
</label>
178
148
- <FilterList />
179
+ <label className={styles.CheckboxOption}>
180
+ <input
181
+ type="checkbox"
182
+ checked={filterPreferences.hideElementsWithTypes.has(
183
+ ElementTypeHostComponent
184
+ )}
185
+ onChange={updateFilterPreferences}
186
+ />{' '}
187
+ Hide host components (e.g. <code><div></code>)
188
+ </label>
189
</div>
190
191
{store.supportsCaptureScreenshots && (