Refactored badges to share code and show +count
Brian Vaughn committed
Jun 1, 2019 at 18:48 UTC
3f0606f3d945a1952e1cbf97ff5b5879c51aee16
11 files changed
+81
-43
src/devtools/views/Components/Badge.css
+6
@@ -9,3 +9,9 @@
9
font-family: var(--font-family-monospace);
10
font-size: var(--font-size-monospace-small);
11
}
12
+
13
+.ExtraLabel {
14
+ font-family: var(--font-family-monospace);
15
+ font-size: var(--font-size-monospace-small);
16
+ color: var(--color-component-badge-count);
17
+}
src/devtools/views/Components/Badge.js
+35
-5
@@ -1,17 +1,47 @@
1
// @flow
2
3
-import React from 'react';
3
+import React, { Fragment } from 'react';
4
+import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
5
import styles from './Badge.css';
6
7
+import type { ElementType } from 'src/types';
8
+
9
type Props = {|
7
- children: string | null,
10
className?: string,
11
+ hocDisplayNames: Array<string> | null,
12
+ type: ElementType,
13
|};
14
11
-export default function Badge({ children, className }: Props) {
12
- if (children === null) {
15
+export default function Badge({ className, hocDisplayNames, type }: Props) {
16
+ let hocDisplayName = null;
17
+ let totalBadgeCount = 0;
18
+ let typeLabel = null;
19
+
20
+ if (hocDisplayNames !== null) {
21
+ hocDisplayName = hocDisplayNames[0];
22
+ totalBadgeCount += hocDisplayNames.length;
23
+ }
24
+
25
+ if (type === ElementTypeMemo) {
26
+ typeLabel = 'Memo';
27
+ totalBadgeCount++;
28
+ } else if (type === ElementTypeForwardRef) {
29
+ typeLabel = 'ForwardRef';
30
+ totalBadgeCount++;
31
+ }
32
+
33
+ if (hocDisplayNames === null && typeLabel === null) {
34
return null;
35
}
36
16
- return <div className={`${styles.Badge} ${className || ''}`}>{children}</div>;
37
+ return (
38
+ <Fragment>
39
+ <div className={`${styles.Badge} ${className || ''}`}>
40
+ {hocDisplayName || typeLabel}
41
+ </div>
42
+ {totalBadgeCount > 1 && (
43
+ <div className={styles.ExtraLabel}>+{totalBadgeCount}</div>
44
+ )}
45
+ </Fragment>
46
+ );
47
}
src/devtools/views/Components/Element.css
+1
@@ -37,6 +37,7 @@
37
--color-component-badge-background: var(
38
--color-component-badge-background-inverted
39
);
40
+ --color-component-badge-count: var(--color-component-badge-count-inverted);
41
--color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
42
--color-attribute-name: var(--color-attribute-name-inverted);
43
--color-attribute-value: var(--color-attribute-value-inverted);
src/devtools/views/Components/Element.js
+5
-12
@@ -7,7 +7,6 @@ import React, {
7
useMemo,
8
useState,
9
} from 'react';
10
-import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
10
import Store from 'src/devtools/store';
11
import Badge from './Badge';
12
import ButtonIcon from '../ButtonIcon';
@@ -89,16 +88,6 @@ export default function ElementView({ data, index, style }: Props) {
88
type,
89
} = ((element: any): Element);
90
92
- // TODO Maybe factor this into a shared util method?
93
- let badge = null;
94
- if (hocDisplayNames !== null) {
95
- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
96
- } else if (type === ElementTypeMemo) {
97
- badge = 'Memo';
98
- } else if (type === ElementTypeForwardRef) {
99
- badge = 'ForwardRef';
100
- }
101
-
91
let className = styles.Element;
92
if (isSelected) {
93
className = treeFocused
@@ -139,7 +128,11 @@ export default function ElementView({ data, index, style }: Props) {
128
</Fragment>
129
)}
130
<span className={styles.Bracket}>></span>
142
- <Badge className={styles.Badge}>{badge}</Badge>
131
+ <Badge
132
+ className={styles.Badge}
133
+ hocDisplayNames={hocDisplayNames}
134
+ type={type}
135
+ />
136
<span className={styles.Padding} />
137
</div>
138
);
src/devtools/views/Components/HocBadges.css
+12
@@ -7,3 +7,15 @@
7
);
8
user-select: none;
9
}
10
+
11
+.Badge {
12
+ display: inline-block;
13
+ background-color: var(--color-component-badge-background);
14
+ color: var(--color-text);
15
+ padding: 0.125rem 0.25rem;
16
+ line-height: normal;
17
+ border-radius: 0.125rem;
18
+ margin-right: 0.25rem;
19
+ font-family: var(--font-family-monospace);
20
+ font-size: var(--font-size-monospace-small);
21
+}
src/devtools/views/Components/HocBadges.js
+4
-2
@@ -27,10 +27,12 @@ export default function HocBadges({ element }: Props) {
27
28
return (
29
<div className={styles.HocBadges}>
30
- <Badge>{typeBadge}</Badge>
30
+ {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
31
{hocDisplayNames !== null &&
32
hocDisplayNames.map(hocDisplayName => (
33
- <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
33
+ <div key={hocDisplayName} className={styles.Badge}>
34
+ {hocDisplayName}
35
+ </div>
36
))}
37
</div>
38
);
src/devtools/views/Components/OwnersStack.css
+1
-1
@@ -101,4 +101,4 @@
101
102
.Badge {
103
margin-left: 0.25rem;
104
-}
\ No newline at end of file
104
+}
src/devtools/views/Components/OwnersStack.js
+5
-12
@@ -18,7 +18,6 @@ import { OwnersListContext } from './OwnersListContext';
18
import { TreeDispatcherContext, TreeStateContext } from './TreeContext';
19
import { useIsOverflowing } from '../hooks';
20
import { StoreContext } from '../context';
21
-import { ElementTypeMemo, ElementTypeForwardRef } from 'src/types';
21
22
import type { Owner } from './types';
23
@@ -248,16 +247,6 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
247
}
248
}, [isInStore, selectOwner, owner]);
249
251
- // TODO Maybe factor this into a shared util method?
252
- let badge = null;
253
- if (hocDisplayNames !== null) {
254
- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
255
- } else if (type === ElementTypeMemo) {
256
- badge = 'Memo';
257
- } else if (type === ElementTypeForwardRef) {
258
- badge = 'ForwardRef';
259
- }
260
-
250
return (
251
<Toggle
252
className={`${styles.Component} ${isInStore ? '' : styles.NotInStore}`}
@@ -266,7 +255,11 @@ function ElementView({ isSelected, owner, selectOwner }: ElementViewProps) {
255
>
256
{displayName}
257
269
- <Badge className={styles.Badge}>{badge}</Badge>
258
+ <Badge
259
+ className={styles.Badge}
260
+ hocDisplayNames={hocDisplayNames}
261
+ type={type}
262
+ />
263
</Toggle>
264
);
265
}
src/devtools/views/Components/SelectedElement.js
+1
-10
@@ -350,15 +350,6 @@ function OwnerView({
350
[dispatch, id]
351
);
352
353
- let badge = null;
354
- if (hocDisplayNames !== null) {
355
- badge = hocDisplayNames.length === 1 ? hocDisplayNames[0] : '…';
356
- } else if (type === ElementTypeMemo) {
357
- badge = 'Memo';
358
- } else if (type === ElementTypeForwardRef) {
359
- badge = 'ForwardRef';
360
- }
361
-
353
return (
354
<Button
355
key={id}
@@ -372,7 +363,7 @@ function OwnerView({
363
>
364
{displayName}
365
</span>
375
- <Badge>{badge}</Badge>
366
+ <Badge hocDisplayNames={hocDisplayNames} type={type} />
367
</Button>
368
);
369
}
src/devtools/views/Settings/SettingsContext.js
+6
@@ -259,6 +259,12 @@ function updateThemeVariables(
259
'color-component-badge-background-inverted',
260
documentElements
261
);
262
+ updateStyleHelper(theme, 'color-component-badge-count', documentElements);
263
+ updateStyleHelper(
264
+ theme,
265
+ 'color-component-badge-count-inverted',
266
+ documentElements
267
+ );
268
updateStyleHelper(theme, 'color-dim', documentElements);
269
updateStyleHelper(theme, 'color-dimmer', documentElements);
270
updateStyleHelper(theme, 'color-dimmest', documentElements);
src/devtools/views/root.css
+5
-1
@@ -40,6 +40,8 @@
40
--light-color-component-name-inverted: #ffffff;
41
--light-color-component-badge-background: rgba(0, 0, 0, 0.15);
42
--light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
43
+ --light-color-component-badge-count: #777d88;
44
+ --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
45
--light-color-dim: #777d88;
46
--light-color-dimmer: #cfd1d5;
47
--light-color-dimmest: #eff0f1;
@@ -98,9 +100,11 @@
100
--dark-color-commit-gradient-9: #febc38;
101
--dark-color-commit-gradient-text: #000000;
102
--dark-color-component-name: #61dafb;
101
- --dark-color-component-name-inverted: ##282828;
103
+ --dark-color-component-name-inverted: #282828;
104
--dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
105
--dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
106
+ --dark-color-component-badge-count: #8f949d;
107
+ --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
108
--dark-color-dim: #8f949d;
109
--dark-color-dimmer: #777d88;
110
--dark-color-dimmest: #4f5766;