mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ruslan Lesiutin
77ec61885f
There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In https://github.com/facebook/react/pull/27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96
109 lines
2.6 KiB
JavaScript
109 lines
2.6 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {useState} from 'react';
|
|
import Store from '../../store';
|
|
import EditableName from './EditableName';
|
|
import {smartParse} from '../../utils';
|
|
import {parseHookPathForEdit} from './utils';
|
|
import styles from './NewArrayValue.css';
|
|
|
|
import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
|
|
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
|
|
|
|
type Props = {
|
|
bridge: FrontendBridge,
|
|
depth: number,
|
|
hidden: boolean,
|
|
hookID?: ?number,
|
|
index: number,
|
|
inspectedElement: InspectedElement,
|
|
path: Array<string | number>,
|
|
store: Store,
|
|
type: 'props' | 'context' | 'hooks' | 'state',
|
|
};
|
|
|
|
export default function NewArrayValue({
|
|
bridge,
|
|
depth,
|
|
hidden,
|
|
hookID,
|
|
index,
|
|
inspectedElement,
|
|
path,
|
|
store,
|
|
type,
|
|
}: Props): React.Node {
|
|
const [key, setKey] = useState<number>(0);
|
|
const [isInvalid, setIsInvalid] = useState(false);
|
|
|
|
// This is a bit of an unusual usage of the EditableName component,
|
|
// but otherwise it acts the way we want for a new Array entry.
|
|
// $FlowFixMe[missing-local-annot]
|
|
const overrideName = (oldPath: any, newPath) => {
|
|
const value = newPath[newPath.length - 1];
|
|
|
|
let parsedValue;
|
|
let newIsInvalid = true;
|
|
try {
|
|
parsedValue = smartParse(value);
|
|
newIsInvalid = false;
|
|
} catch (error) {}
|
|
|
|
if (isInvalid !== newIsInvalid) {
|
|
setIsInvalid(newIsInvalid);
|
|
}
|
|
|
|
if (!newIsInvalid) {
|
|
setKey(key + 1);
|
|
|
|
const {id} = inspectedElement;
|
|
const rendererID = store.getRendererIDForElement(id);
|
|
if (rendererID !== null) {
|
|
let basePath = path;
|
|
if (hookID != null) {
|
|
basePath = parseHookPathForEdit(basePath);
|
|
}
|
|
|
|
bridge.send('overrideValueAtPath', {
|
|
type,
|
|
hookID,
|
|
id,
|
|
path: [...basePath, index],
|
|
rendererID,
|
|
value: parsedValue,
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={key}
|
|
hidden={hidden}
|
|
style={{
|
|
paddingLeft: `${(depth - 1) * 0.75}rem`,
|
|
}}>
|
|
<div className={styles.NewArrayValue}>
|
|
<EditableName
|
|
allowWhiteSpace={true}
|
|
autoFocus={key > 0}
|
|
className={[styles.EditableName, isInvalid && styles.Invalid].join(
|
|
' ',
|
|
)}
|
|
initialValue=""
|
|
overrideName={overrideName}
|
|
path={path}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|