Fix DevTools v4.1 editable hook regression (#16867)

* Fixed a regression in hooks editor from a recent EditableValue change

* Fixed a reset/state bug in useEditableValue() hook and removed unnecessary useMemo()
This commit is contained in:
Brian Vaughn 2019-09-23 12:56:01 -07:00 committed by GitHub
parent 1a6294d3e2
commit 9b3cde9b62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 29 deletions

View File

@ -17,7 +17,6 @@ type OverrideValueFn = (path: Array<string | number>, value: any) => void;
type EditableValueProps = {|
className?: string,
dataType: string,
initialValue: any,
overrideValueFn: OverrideValueFn,
path: Array<string | number>,
@ -25,7 +24,6 @@ type EditableValueProps = {|
export default function EditableValue({
className = '',
dataType,
initialValue,
overrideValueFn,
path,

View File

@ -270,10 +270,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
</span>
{typeof overrideValueFn === 'function' ? (
<EditableValue
dataType={type}
initialValue={value}
overrideValueFn={overrideValueFn}
path={[]}
value={value}
/>
) : (
// $FlowFixMe Cannot create span element because in property children

View File

@ -102,10 +102,9 @@ export default function KeyValue({
</span>
{isEditable ? (
<EditableValue
dataType={dataType}
initialValue={value}
overrideValueFn={((overrideValueFn: any): OverrideValueFn)}
path={path}
initialValue={value}
/>
) : (
<span className={styles.Value}>{displayValue}</span>

View File

@ -8,13 +8,7 @@
*/
import throttle from 'lodash.throttle';
import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useState,
} from 'react';
import {useCallback, useEffect, useLayoutEffect, useState} from 'react';
import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
import {
localStorageGetItem,
@ -42,11 +36,14 @@ export function useEditableValue(
const [parsedValue, setParsedValue] = useState(initialValue);
const [isValid, setIsValid] = useState(initialIsValid);
const reset = useCallback(() => {
setEditableValue(smartStringify(initialValue));
setParsedValue(initialValue);
setIsValid(initialIsValid);
}, []);
const reset = useCallback(
() => {
setEditableValue(smartStringify(initialValue));
setParsedValue(initialValue);
setIsValid(initialIsValid);
},
[initialValue, initialIsValid],
);
const update = useCallback(newValue => {
let isNewValueValid = false;
@ -65,17 +62,14 @@ export function useEditableValue(
});
}, []);
return useMemo(
() => ({
editableValue,
hasPendingChanges: smartStringify(initialValue) !== editableValue,
isValid,
parsedValue,
reset,
update,
}),
[editableValue, initialValue, isValid, parsedValue],
);
return {
editableValue,
hasPendingChanges: smartStringify(initialValue) !== editableValue,
isValid,
parsedValue,
reset,
update,
};
}
export function useIsOverflowing(