{"parents":["47a5fd59cbcdbd5c390491cefe3b9fbb32bf9c44"],"files":[{"status":"M","path":"shells\/dev\/app\/InspectableElements\/CustomHooks.js"},{"status":"M","path":"src\/devtools\/views\/HooksTree.js"},{"status":"M","path":"src\/devtools\/views\/InspectedElementTree.js"},{"status":"M","path":"src\/devtools\/views\/SettingsContext.js"}],"body":"","patch":"diff --git a\/shells\/dev\/app\/InspectableElements\/CustomHooks.js b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\nindex 7e0b318453..d85528eccc 100644\n--- a\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\n+++ b\/shells\/dev\/app\/InspectableElements\/CustomHooks.js\n@@ -11,6 +11,16 @@ import React, {\n useState,\n } from 'react';\n \n+const object = {\n+ string: 'abc',\n+ number: 123,\n+ boolean: true,\n+ null: null,\n+ undefined: undefined,\n+ array: ['a', 'b', 'c'],\n+ object: { foo: 1, bar: 2, baz: 3 },\n+};\n+\n function useNestedInnerHook() {\n return useState(123);\n }\n@@ -18,12 +28,20 @@ function useNestedOuterHook() {\n return useNestedInnerHook();\n }\n \n+function useCustomObject() {\n+ useDebugValue(object);\n+ return useState(123);\n+}\n+\n function FunctionWithHooks(props: any, ref: React$Ref) {\n const [count, updateCount] = useState(0);\n+ const [_, __] = useState(object);\n \n \/\/ Custom hook with a custom debug label\n const debouncedCount = useDebounce(count, 1000);\n \n+ useCustomObject();\n+\n const onClick = useCallback(\n function onClick() {\n updateCount(count + 1);\ndiff --git a\/src\/devtools\/views\/HooksTree.js b\/src\/devtools\/views\/HooksTree.js\nindex f2ec250820..3e6c6a898e 100644\n--- a\/src\/devtools\/views\/HooksTree.js\n+++ b\/src\/devtools\/views\/HooksTree.js\n@@ -2,6 +2,7 @@\n \n import React from 'react';\n import { getMetaValueLabel } from '.\/utils';\n+import { KeyValue } from '.\/InspectedElementTree';\n import styles from '.\/HooksTree.css';\n \n import type { HooksNode, HooksTree } from 'src\/backend\/types';\n@@ -34,31 +35,67 @@ function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {\n \n const isCustomHook = subHooks.length > 0;\n \n- \/\/ Format data for display to mimic the props\/state\/context for now.\n const type = typeof value;\n+\n let displayValue;\n- if (isCustomHook && value === undefined) {\n- displayValue = null;\n- } else if (\n- type === 'number' ||\n- type === 'string' ||\n- type === 'boolean' ||\n- value == null\n- ) {\n+ let isComplexDisplayValue = false;\n+\n+ \/\/ Format data for display to mimic the props\/state\/context for now.\n+ if (type === 'number' || type === 'string' || type === 'boolean') {\n displayValue = value;\n- } else {\n- displayValue = getMetaValueLabel(value);\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = null;\n+ } else if (Array.isArray(value)) {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Array';\n+ } else if (type === 'object') {\n+ isComplexDisplayValue = true;\n+ displayValue = 'Object';\n }\n \n- return (\n-

\n-

\n- {name}: <\/span> {\/* $FlowFixMe *\/}\n- {displayValue}<\/span>\n- <\/div>\n- \n- <\/div>\n- );\n+ if (isCustomHook) {\n+ if (isComplexDisplayValue) {\n+ return (\n+

\n+

\n+ {name}: <\/span>\n+ <\/div>\n+ \n+ \n+ <\/div>\n+ );\n+ } else {\n+ return (\n+

\n+

\n+ {name}: <\/span> {\/* $FlowFixMe *\/}\n+ {displayValue}<\/span>\n+ <\/div>\n+ \n+ <\/div>\n+ );\n+ }\n+ } else {\n+ if (isComplexDisplayValue) {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ } else {\n+ return (\n+

\n+

\n+ {name}: <\/span>\n+ {\/* $FlowFixMe *\/}\n+ {displayValue}<\/span>\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+ }\n }\n \n \/\/ $FlowFixMe\ndiff --git a\/src\/devtools\/views\/InspectedElementTree.js b\/src\/devtools\/views\/InspectedElementTree.js\nindex c83e6b8418..b79fa52f18 100644\n--- a\/src\/devtools\/views\/InspectedElementTree.js\n+++ b\/src\/devtools\/views\/InspectedElementTree.js\n@@ -47,7 +47,7 @@ type KeyValueProps = {|\n value: any,\n |};\n \n-function KeyValue({ depth, name, value }: KeyValueProps) {\n+export function KeyValue({ depth, name, value }: KeyValueProps) {\n const dataType = typeof value;\n const isSimpleType =\n dataType === 'number' ||\n@@ -64,6 +64,10 @@ function KeyValue({ depth, name, value }: KeyValueProps) {\n displayValue = `\"${value}\"`;\n } else if (dataType === 'boolean') {\n displayValue = value ? 'true' : 'false';\n+ } else if (value === null) {\n+ displayValue = 'null';\n+ } else if (value === undefined) {\n+ displayValue = 'undefined';\n }\n \n children = (\n@@ -99,6 +103,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {\n <\/div>\n );\n } else {\n+ \/\/ $FlowFixMe\n children = Object.entries(value).map(([name, value]) => (\n \n ));\ndiff --git a\/src\/devtools\/views\/SettingsContext.js b\/src\/devtools\/views\/SettingsContext.js\nindex 83a429c1b5..2da5bc5822 100644\n--- a\/src\/devtools\/views\/SettingsContext.js\n+++ b\/src\/devtools\/views\/SettingsContext.js\n@@ -132,13 +132,13 @@ function updateThemeVariables(theme: Theme): void {\n updateStyleHelper(theme, 'color-dim');\n updateStyleHelper(theme, 'color-dimmer');\n updateStyleHelper(theme, 'color-dimmest');\n- updateStyleHelper(theme, 'color-search-match');\n- updateStyleHelper(theme, 'color-search-match-current');\n- updateStyleHelper(theme, 'color-text-color');\n updateStyleHelper(theme, 'color-jsx-arrow-brackets');\n updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');\n updateStyleHelper(theme, 'color-tree-node-selected');\n updateStyleHelper(theme, 'color-tree-node-hover');\n+ updateStyleHelper(theme, 'color-search-match');\n+ updateStyleHelper(theme, 'color-search-match-current');\n+ updateStyleHelper(theme, 'color-text-color');\n }\n \n export { SettingsContext, SettingsContextController };\n","commit":{"revision":"0008bb00d7fc2bf2fc3493679434bc1ff2d01f18","authorEmail":"bvaughn@fb.com","authoredAt":"2019-02-14T21:55:09-08:00","authorName":"Brian Vaughn","subject":"Inspectable complex hook values","shortRevision":"0008bb00d7"}}

dillon1000/react

Files changed