Changes display of ForwardRef and Memo components
Subhan committed
May 13, 2019 at 18:57 UTC
ec89ae88b69b5c111ae468ba90d2f8feed2eaabb
3 files changed
+24
-3
src/backend/renderer.js
+2
-2
@@ -462,7 +462,7 @@ export function attach(
462
const functionName = getDisplayName(resolvedType.render, '');
463
return (
464
resolvedType.displayName ||
465
- (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef')
465
+ (functionName !== '' ? functionName : 'ForwardRef')
466
);
467
case HostRoot:
468
return null;
@@ -478,7 +478,7 @@ export function attach(
478
return elementType.displayName;
479
} else {
480
const displayName = type.displayName || type.name;
481
- return displayName ? `Memo(${displayName})` : 'Memo';
481
+ return displayName ? displayName : 'Memo';
482
}
483
default:
484
const typeSymbol = getTypeSymbol(type);
src/devtools/views/Components/Element.css
+10
@@ -73,3 +73,13 @@
73
height: 1rem;
74
color: var(--color-expand-collapse-toggle);
75
}
76
+
77
+.Badge{
78
+ background: var(--color-component-name);
79
+ color: #000;
80
+ line-height: calc(var(--line-height-data) - 0.25rem);
81
+ padding: 0 0.55rem;
82
+ border-radius: 5px;
83
+ margin-left: 0.5rem;
84
+ font-size: calc(var(--font-size-monospace-normal) - 2px);
85
+}
\ No newline at end of file
src/devtools/views/Components/Element.js
+12
-1
@@ -9,7 +9,12 @@ import React, {
9
useRef,
10
useState,
11
} from 'react';
12
-import { ElementTypeClass, ElementTypeFunction } from 'src/types';
12
+import {
13
+ ElementTypeClass,
14
+ ElementTypeFunction,
15
+ ElementTypeMemo,
16
+ ElementTypeForwardRef,
17
+} from 'src/types';
18
import Store from 'src/devtools/store';
19
import ButtonIcon from '../ButtonIcon';
20
import { createRegExp } from '../utils';
@@ -134,6 +139,7 @@ export default function ElementView({ data, index, style }: Props) {
139
140
const showDollarR =
141
isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
142
+ const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef;
143
144
let className = styles.Element;
145
if (isSelected) {
@@ -182,6 +188,11 @@ export default function ElementView({ data, index, style }: Props) {
188
</span>
189
{showDollarR && <span className={styles.DollarR}> == $r</span>}
190
<span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
191
+ {showBadge && (
192
+ <span className={styles.Badge}>
193
+ {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
194
+ </span>
195
+ )}
196
</div>
197
);
198
}