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:
parent
1a6294d3e2
commit
9b3cde9b62
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue