{"files":[{"status":"M","path":"src\/devtools\/views\/Components\/KeyValue.css"},{"status":"M","path":"src\/devtools\/views\/Components\/KeyValue.js"}],"commit":{"shortRevision":"0f955980a3","authoredAt":"2019-04-08T22:42:32-03:00","subject":"Add collapsible icon for object and array types","authorName":"Lucas Cordeiro","revision":"0f955980a3db96e2197e52cb5549e8d46e28fa06","authorEmail":"ecdb.lucas@gmail.com"},"parents":["88e51adc358a1daec7972a226be22d9d6ac90326"],"body":"","patch":"diff --git a\/src\/devtools\/views\/Components\/KeyValue.css b\/src\/devtools\/views\/Components\/KeyValue.css\nindex 2960398106..aef2b78743 100644\n--- a\/src\/devtools\/views\/Components\/KeyValue.css\n+++ b\/src\/devtools\/views\/Components\/KeyValue.css\n@@ -26,3 +26,13 @@\n color: var(--color-dimmer);\n font-style: italic;\n }\n+\n+.Opener {\n+ padding: 0.125rem;\n+ margin-left: -1rem;\n+}\n+\n+.Opener svg {\n+ width: 0.75rem;\n+ height: 0.75rem;\n+}\ndiff --git a\/src\/devtools\/views\/Components\/KeyValue.js b\/src\/devtools\/views\/Components\/KeyValue.js\nindex 3c8156eb64..ffff29664c 100644\n--- a\/src\/devtools\/views\/Components\/KeyValue.js\n+++ b\/src\/devtools\/views\/Components\/KeyValue.js\n@@ -1,7 +1,9 @@\n \/\/ @flow\n \n-import React from 'react';\n+import React, { useState } from 'react';\n import EditableValue from '.\/EditableValue';\n+import Button from '..\/Button';\n+import ButtonIcon from '..\/ButtonIcon';\n import { getMetaValueLabel } from '..\/utils';\n import { meta } from '..\/..\/..\/hydration';\n import styles from '.\/KeyValue.css';\n@@ -23,6 +25,12 @@ 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+\n const dataType = typeof value;\n const isSimpleType =\n dataType === 'number' ||\n@@ -72,45 +80,57 @@ export default function KeyValue({\n <\/div>\n );\n } else {\n+ const opener = (\n+

dillon1000/react

Files changed