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
Brian Vaughn committed
Sep 10, 2019 at 14:57 UTC
2c98af77c3633e10ce38f4592718eb08096ceecf
4 files changed
+10
-3
packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+3
-1
@@ -16,6 +16,7 @@ import {useEditableValue} from '../hooks';
16
type OverrideValueFn = (path: Array<string | number>, value: any) => void;
17
18
type EditableValueProps = {|
19
+ className?: string,
20
dataType: string,
21
initialValue: any,
22
overrideValueFn: OverrideValueFn,
@@ -23,6 +24,7 @@ type EditableValueProps = {|
24
|};
25
26
export default function EditableValue({
27
+ className = '',
28
dataType,
29
initialValue,
30
overrideValueFn,
@@ -74,7 +76,7 @@ export default function EditableValue({
76
<Fragment>
77
<input
78
autoComplete="new-password"
77
- className={isValid ? styles.Input : styles.Invalid}
79
+ className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
80
onChange={handleChange}
81
onKeyDown={handleKeyDown}
82
placeholder={placeholder}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.css
+4
@@ -53,3 +53,7 @@
53
display: flex;
54
align-items: center;
55
}
56
+
57
+.EditableValue {
58
+ min-width: 1rem;
59
+}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+2
-1
@@ -82,7 +82,7 @@ export default function InspectedElementTree({
82
</Button>
83
)}
84
</div>
85
- {isEmpty && <div className={styles.Empty}>None</div>}
85
+ {isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
86
{!isEmpty &&
87
(entries: any).map(([name, value]) => (
88
<KeyValue
@@ -104,6 +104,7 @@ export default function InspectedElementTree({
104
/>
105
:
106
<EditableValue
107
+ className={styles.EditableValue}
108
initialValue={''}
109
overrideValueFn={handleNewEntryValue}
110
path={[newPropName]}
packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+1
-1
@@ -358,7 +358,7 @@ function InspectedElementView({
358
inspectPath={inspectPropsPath}
359
overrideValueFn={overridePropsFn}
360
showWhenEmpty={true}
361
- canAddEntries={true}
361
+ canAddEntries={typeof overridePropsFn === 'function'}
362
/>
363
{type === ElementTypeSuspense ? (
364
<InspectedElementTree