{"commit":{"authorEmail":"bvaughn@fb.com","subject":"Refactored KeyValue toggle so columns with toggles align better below those without","revision":"4f254c0a05cc6eba1aa8828736ef3617fc54017a","authoredAt":"2019-04-10T11:44:45-07:00","shortRevision":"4f254c0a05","authorName":"Brian Vaughn"},"files":[{"path":"src\/devtools\/views\/Components\/KeyValue.css","status":"M"},{"path":"src\/devtools\/views\/Components\/KeyValue.js","status":"M"}],"body":"","parents":["f0fb1805fe85422e517cecc6b811b366c3f1486b"],"patch":"diff --git a\/src\/devtools\/views\/Components\/KeyValue.css b\/src\/devtools\/views\/Components\/KeyValue.css\nindex 6e01c7153c..3d75d7fa1f 100644\n--- a\/src\/devtools\/views\/Components\/KeyValue.css\n+++ b\/src\/devtools\/views\/Components\/KeyValue.css\n@@ -5,6 +5,7 @@\n .Name {\n color: var(--color-dim);\n flex: 0 0 auto;\n+ user-select: none;\n }\n .EditableName {\n color: var(--color-attribute-name);\n@@ -27,7 +28,7 @@\n font-style: italic;\n }\n \n-.Opener {\n+.ExpandCollapseToggle {\n display: inline-flex;\n width: 1rem;\n height: 1rem;\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.js b\/src\/devtools\/views\/Components\/KeyValue.js\nindex f8361fdecf..a980ef46d3 100644\n--- a\/src\/devtools\/views\/Components\/KeyValue.js\n+++ b\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -1,6 +1,6 @@\n \/\/ @flow\n \n-import React, { useState } from 'react';\n+import React, { useCallback, useState } from 'react';\n import type { Element } from 'react';\n import EditableValue from '.\/EditableValue';\n import Button from '..\/Button';\n@@ -26,11 +26,7 @@ export default function KeyValue({\n path = [],\n value,\n }: KeyValueProps) {\n- const [open, setOpen] = useState(false);\n-\n- const handleToggle = () => {\n- setOpen(prevOpen => !prevOpen);\n- };\n+ const [isOpen, setIsOpen] = useState(true);\n \n const dataType = typeof value;\n const isSimpleType =\n@@ -39,7 +35,9 @@ export default function KeyValue({\n dataType === 'boolean' ||\n value == null;\n \n- const paddingLeft = `${depth * 0.75}rem`;\n+ const style = {\n+ paddingLeft: `${(depth - 1) * 0.75}rem`,\n+ };\n \n let children = null;\n if (isSimpleType) {\n@@ -58,7 +56,8 @@ export default function KeyValue({\n typeof overrideValueFn === 'function' ? styles.EditableName : styles.Name;\n \n children = (\n-

\n+

\n {name}<\/span>\n {typeof overrideValueFn === 'function' ? (\n \n+

\n+

\n {name}<\/span>\n {getMetaValueLabel(value)}<\/span>\n <\/div>\n );\n } else {\n- const opener = (\n- \n- \n- <\/Button>\n- );\n-\n if (Array.isArray(value)) {\n- const showOpener = value.length > 0;\n+ const hasChildren = value.length > 0;\n \n- children = open\n+ children = isOpen\n ? value.map((innerValue, index) => (\n \n- {showOpener && opener}\n+

\n+ {hasChildren ? (\n+ \n+ ) : (\n+

\n+ )}\n {name}<\/span>\n Array<\/span>\n <\/div>\n );\n } else {\n- const showOpener = Object.entries(value).length > 0;\n+ const hasChildren = Object.entries(value).length > 0;\n \n- children = open\n+ children = isOpen\n ? Object.entries(value).map>(([name, value]) => (\n \n- {showOpener && opener}\n+

\n+ {hasChildren ? (\n+ \n+ ) : (\n+

\n+ )}\n {name}<\/span>\n Object<\/span>\n <\/div>\n@@ -156,3 +138,27 @@ export default function KeyValue({\n \n return children;\n }\n+\n+type ExpandCollapseToggleProps = {|\n+ isOpen: boolean,\n+ setIsOpen: Function,\n+|};\n+\n+function ExpandCollapseToggle({\n+ isOpen,\n+ setIsOpen,\n+}: ExpandCollapseToggleProps) {\n+ const handleClick = useCallback(() => {\n+ setIsOpen(prevIsOpen => !prevIsOpen);\n+ }, [setIsOpen]);\n+\n+ return (\n+ \n+ \n+ <\/Button>\n+ );\n+}\n"}

dillon1000/react

Files changed