Skip to content

Commit 2c98af7

Browse files
author
Brian Vaughn
authored
DevTools: Props editing interface tweaks (#16740)
* Fix DevTools new prop input size * Don't allow adding new values unless an overridePropsFn function has been provided. * Do not show empty 'none' label ablve a new prop input
1 parent 2ce5801 commit 2c98af7

File tree

4 files changed

+10
-3
lines changed

4 files changed

+10
-3
lines changed

packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@ import {useEditableValue} from '../hooks';
1616
type OverrideValueFn = (path: Array<string | number>, value: any) => void;
1717

1818
type EditableValueProps = {|
19+
className?: string,
1920
dataType: string,
2021
initialValue: any,
2122
overrideValueFn: OverrideValueFn,
2223
path: Array<string | number>,
2324
|};
2425

2526
export default function EditableValue({
27+
className = '',
2628
dataType,
2729
initialValue,
2830
overrideValueFn,
@@ -74,7 +76,7 @@ export default function EditableValue({
7476
<Fragment>
7577
<input
7678
autoComplete="new-password"
77-
className={isValid ? styles.Input : styles.Invalid}
79+
className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
7880
onChange={handleChange}
7981
onKeyDown={handleKeyDown}
8082
placeholder={placeholder}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,7 @@
5353
display: flex;
5454
align-items: center;
5555
}
56+
57+
.EditableValue {
58+
min-width: 1rem;
59+
}

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default function InspectedElementTree({
8282
</Button>
8383
)}
8484
</div>
85-
{isEmpty && <div className={styles.Empty}>None</div>}
85+
{isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
8686
{!isEmpty &&
8787
(entries: any).map(([name, value]) => (
8888
<KeyValue
@@ -104,6 +104,7 @@ export default function InspectedElementTree({
104104
/>
105105
:&nbsp;
106106
<EditableValue
107+
className={styles.EditableValue}
107108
initialValue={''}
108109
overrideValueFn={handleNewEntryValue}
109110
path={[newPropName]}

packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ function InspectedElementView({
358358
inspectPath={inspectPropsPath}
359359
overrideValueFn={overridePropsFn}
360360
showWhenEmpty={true}
361-
canAddEntries={true}
361+
canAddEntries={typeof overridePropsFn === 'function'}
362362
/>
363363
{type === ElementTypeSuspense ? (
364364
<InspectedElementTree

0 commit comments

Comments
 (0)