Added truncation UI indicator for hooks. Addressed lint rule violations.
Brian Vaughn committed
Apr 4, 2019 at 14:09 UTC
8d435595cd87dc8a4b44f84741be18790016e694
3 files changed
+38
-10
shells/dev/app/InspectableElements/CustomHooks.js
+23
-6
@@ -32,11 +32,28 @@ function useCustomObject() {
32
return useState(123);
33
}
34
35
-function useVeryDeeplyNestedHook(i) {
36
- useDebugValue(i);
37
- if (i > 0) {
38
- useVeryDeeplyNestedHook(i - 1);
39
- }
35
+function useDeepHookA() {
36
+ useDebugValue('useDeepHookA');
37
+ useDeepHookB();
38
+}
39
+function useDeepHookB() {
40
+ useDebugValue('useDeepHookB');
41
+ useDeepHookC();
42
+}
43
+function useDeepHookC() {
44
+ useDebugValue('useDeepHookC');
45
+ useDeepHookD();
46
+}
47
+function useDeepHookD() {
48
+ useDebugValue('useDeepHookD');
49
+ useDeepHookE();
50
+}
51
+function useDeepHookE() {
52
+ useDebugValue('useDeepHookE');
53
+ useDeepHookF();
54
+}
55
+function useDeepHookF() {
56
+ useDebugValue('useDeepHookF');
57
}
58
59
function FunctionWithHooks(props: any, ref: React$Ref<any>) {
@@ -61,7 +78,7 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
78
useNestedOuterHook();
79
80
// Verify deep nesting doesn't break
64
- useVeryDeeplyNestedHook(50);
81
+ useDeepHookA();
82
83
return <button onClick={onClick}>Count: {debouncedCount}</button>;
84
}
src/devtools/views/Components/HooksTree.css
+4
@@ -46,3 +46,7 @@
46
color: var(--color-dimmer);
47
font-style: italic;
48
}
49
+
50
+.TruncationIndicator {
51
+ color: var(--color-dimmer);
52
+}
src/devtools/views/Components/HooksTree.js
+11
-4
@@ -72,15 +72,22 @@ type HookViewProps = {|
72
73
function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
74
const { name, id: hookID, isStateEditable, subHooks, value } = hook;
75
+
76
+ const bridge = useContext(BridgeContext);
77
+ const store = useContext(StoreContext);
78
+
79
if (hook.hasOwnProperty(meta.inspected)) {
80
// This Hook is too deep and hasn't been hydrated.
81
// TODO: show UI to load its data.
78
- return null;
82
+ return (
83
+ <div className={styles.Hook}>
84
+ <div className={styles.NameValueRow}>
85
+ <span className={styles.TruncationIndicator}>...</span>
86
+ </div>
87
+ </div>
88
+ );
89
}
90
81
- const bridge = useContext(BridgeContext);
82
- const store = useContext(StoreContext);
83
-
91
// TODO Add click and key handlers for toggling element open/close state.
92
93
const isCustomHook = subHooks.length > 0;