Skip to content

Commit

Permalink
DevTools: Props editing interface tweaks (#16740)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Brian Vaughn authored Sep 10, 2019
1 parent 2ce5801 commit 2c98af7
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@ import {useEditableValue} from '../hooks';
type OverrideValueFn = (path: Array<string | number>, value: any) => void;

type EditableValueProps = {|
className?: string,
dataType: string,
initialValue: any,
overrideValueFn: OverrideValueFn,
path: Array<string | number>,
|};

export default function EditableValue({
className = '',
dataType,
initialValue,
overrideValueFn,
Expand Down Expand Up @@ -74,7 +76,7 @@ export default function EditableValue({
<Fragment>
<input
autoComplete="new-password"
className={isValid ? styles.Input : styles.Invalid}
className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
onChange={handleChange}
onKeyDown={handleKeyDown}
placeholder={placeholder}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,7 @@
display: flex;
align-items: center;
}

.EditableValue {
min-width: 1rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export default function InspectedElementTree({
</Button>
)}
</div>
{isEmpty && <div className={styles.Empty}>None</div>}
{isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
{!isEmpty &&
(entries: any).map(([name, value]) => (
<KeyValue
Expand All @@ -104,6 +104,7 @@ export default function InspectedElementTree({
/>
:&nbsp;
<EditableValue
className={styles.EditableValue}
initialValue={''}
overrideValueFn={handleNewEntryValue}
path={[newPropName]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ function InspectedElementView({
inspectPath={inspectPropsPath}
overrideValueFn={overridePropsFn}
showWhenEmpty={true}
canAddEntries={true}
canAddEntries={typeof overridePropsFn === 'function'}
/>
{type === ElementTypeSuspense ? (
<InspectedElementTree
Expand Down

0 comments on commit 2c98af7

Please sign in to comment.