Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed horizontal alignment for collapsable hooks

Browse Source
This commit is contained in:
Brian Vaughn
2019-04-10 12:47:51 -07:00
parent 84a5a13525
commit 40469a190e
4 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/devtools/views/Components/HooksTree.css
+8 -1
View File
@@ -4,7 +4,10 @@
}
.Hook {
padding-left: 0.75rem;
}
.Children {
padding-left: 1rem;
}
.HeaderRow {
@@ -50,3 +53,7 @@
.TruncationIndicator {
color: var(--color-dimmer);
}
.ExpandCollapseToggleSpacer {
width: 1rem;
}
src/devtools/views/Components/HooksTree.js
+19 -12
View File
@@ -121,28 +121,34 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
return (
<div className={styles.Hook}>
<div className={styles.NameValueRow}>
<span className={styles.ExpandCollapseToggleSpacer} />
<span className={styles.Name}>{name}</span>
</div>
<KeyValue depth={1} name="DebugValue" value={value} />
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
<div className={styles.Children}>
<KeyValue depth={1} name="DebugValue" value={value} />
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
</div>
</div>
);
} else {
return (
<div className={styles.Hook}>
<div className={styles.NameValueRow}>
<span className={styles.ExpandCollapseToggleSpacer} />
<span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
<span className={styles.Value}>{displayValue}</span>
</div>
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
<div className={styles.Children}>
<InnerHooksTreeView
canEditHooks={canEditHooks}
hooks={subHooks}
id={id}
/>
</div>
</div>
);
}
@@ -166,7 +172,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
return (
<div className={styles.Hook}>
<KeyValue
depth={0}
depth={1}
name={name}
overrideValueFn={overrideValueFn}
value={value}
@@ -177,6 +183,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
return (
<div className={styles.Hook}>
<div className={styles.NameValueRow}>
<span className={styles.ExpandCollapseToggleSpacer} />
<span
className={
typeof overrideValueFn === 'function'
src/devtools/views/Components/KeyValue.css
+4 -1
View File
@@ -30,9 +30,12 @@
}
.ExpandCollapseToggle {
display: inline-flex;
width: 1rem;
height: 1rem;
padding: 0;
color: var(--color-expand-collapse-toggle);
}
.ExpandCollapseToggleSpacer {
width: 1rem;
}
src/devtools/views/Components/KeyValue.js
+4 -4
View File
@@ -62,7 +62,7 @@ export default function KeyValue({
children = (
<div key="root" className={styles.Item} style={style}>
<div className={styles.ExpandCollapseToggle} />
<div className={styles.ExpandCollapseToggleSpacer} />
<span className={nameClassName}>{name}</span>
{typeof overrideValueFn === 'function' ? (
<EditableValue
@@ -80,7 +80,7 @@ export default function KeyValue({
// TODO Is this type even necessary? Can we just drop it?
children = (
<div key="root" className={styles.Item} style={style}>
<div className={styles.ExpandCollapseToggle} />
<div className={styles.ExpandCollapseToggleSpacer} />
<span className={styles.Name}>{name}</span>
<span className={styles.Value}>{getMetaValueLabel(value)}</span>
</div>
@@ -106,7 +106,7 @@ export default function KeyValue({
{hasChildren ? (
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
) : (
<div className={styles.ExpandCollapseToggle} />
<div className={styles.ExpandCollapseToggleSpacer} />
)}
<span
className={styles.Name}
@@ -137,7 +137,7 @@ export default function KeyValue({
{hasChildren ? (
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
) : (
<div className={styles.ExpandCollapseToggle} />
<div className={styles.ExpandCollapseToggleSpacer} />
)}
<span
className={styles.Name}