Added badge for enabled filter count
Brian Vaughn committed
May 2, 2019 at 10:53 UTC
4e04907d13e8617dd38ce2f4f6c3c1ff031fed17
2 files changed
+47
-2
src/devtools/views/Components/ToggleCommitFilterModalButton.css
new
+8
@@ -0,0 +1,8 @@
1
+.Wrapper {
2
+ display: flex;
3
+}
4
+
5
+.Label {
6
+ font-size: var(--font-size-sans-small);
7
+ font-family: var(--font-family-sans);
8
+}
src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+39
-2
@@ -8,6 +8,10 @@ import Toggle from '../Toggle';
8
import ButtonIcon from '../ButtonIcon';
9
import Store from 'src/devtools/store';
10
11
+import styles from './ToggleCommitFilterModalButton.css';
12
+
13
+import type { ComponentFilter } from 'src/types';
14
+
15
export default function ToggleCommitFilterModalButton() {
16
const store = useContext(StoreContext);
17
@@ -29,14 +33,47 @@ export default function ToggleCommitFilterModalButton() {
33
);
34
const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
35
36
+ const componentFiltersSubscription = useMemo(
37
+ () => ({
38
+ getCurrentValue: () => store.componentFilters,
39
+ subscribe: (callback: Function) => {
40
+ store.addListener('componentFilters', callback);
41
+ return () => store.removeListener('componentFilters', callback);
42
+ },
43
+ }),
44
+ [store]
45
+ );
46
+ const componentFilters = useSubscription<Array<ComponentFilter>, Store>(
47
+ componentFiltersSubscription
48
+ );
49
+
50
+ const enabledCount = useMemo(
51
+ () =>
52
+ componentFilters.reduce(
53
+ (count, componentFilter) =>
54
+ componentFilter.isEnabled ? count + 1 : count,
55
+ 0
56
+ ),
57
+ [componentFilters]
58
+ );
59
+
60
return (
61
<Toggle
62
isChecked={isModalShowing}
63
isDisabled={isProfiling}
64
onChange={setIsModalShowing}
37
- title="Filter preferences"
65
+ title={
66
+ enabledCount > 0
67
+ ? `Filter preferences (${enabledCount} enabled)`
68
+ : 'Filter preferences'
69
+ }
70
>
39
- <ButtonIcon type="filter" />
71
+ <div className={styles.Wrapper}>
72
+ <ButtonIcon type="filter" />
73
+ {enabledCount > 0 && (
74
+ <span className={styles.Label}>{enabledCount}</span>
75
+ )}
76
+ </div>
77
</Toggle>
78
);
79
}