mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
c52df02f84
Summary: Changelog: [General][Added] - Added an overlay similar to Inspector.js that allows directly selecting elements on RN from React DevTools This diff updates DevToolsHighlighter into DevToolsOverlay. It now also allows DevTools user to select an element to inspect directly from DevTools. Depends on https://github.com/facebook/react/pull/25111 to work. TODOs: - Currently once an element selected on RN, the inspector toggle isn't turned off automatically. - Fabric support depends on https://github.com/facebook/react/pull/25118 Reviewed By: lunaruan Differential Revision: D38815494 fbshipit-source-id: 7e1e3a78f6594960b5dfaec142bafd3ca4b146af
72 lines
1.8 KiB
JavaScript
72 lines
1.8 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.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
import type {
|
|
HostComponent,
|
|
TouchedViewDataAtPoint,
|
|
} from '../Renderer/shims/ReactNativeTypes';
|
|
|
|
export type HostRef = React.ElementRef<HostComponent<mixed>>;
|
|
export type ReactRenderer = {
|
|
rendererConfig: {
|
|
getInspectorDataForViewAtPoint: (
|
|
inspectedView: ?HostRef,
|
|
locationX: number,
|
|
locationY: number,
|
|
callback: Function,
|
|
) => void,
|
|
...
|
|
},
|
|
};
|
|
|
|
const React = require('react');
|
|
const invariant = require('invariant');
|
|
|
|
const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
const renderers = findRenderers();
|
|
|
|
function findRenderers(): $ReadOnlyArray<ReactRenderer> {
|
|
const allRenderers = Array.from(hook.renderers.values());
|
|
invariant(
|
|
allRenderers.length >= 1,
|
|
'Expected to find at least one React Native renderer on DevTools hook.',
|
|
);
|
|
return allRenderers;
|
|
}
|
|
|
|
module.exports = function getInspectorDataForViewAtPoint(
|
|
inspectedView: ?HostRef,
|
|
locationX: number,
|
|
locationY: number,
|
|
callback: (viewData: TouchedViewDataAtPoint) => boolean,
|
|
) {
|
|
let shouldBreak = false;
|
|
// Check all renderers for inspector data.
|
|
for (let i = 0; i < renderers.length; i++) {
|
|
if (shouldBreak) {
|
|
break;
|
|
}
|
|
const renderer = renderers[i];
|
|
if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
|
|
renderer.rendererConfig.getInspectorDataForViewAtPoint(
|
|
inspectedView,
|
|
locationX,
|
|
locationY,
|
|
viewData => {
|
|
// Only return with non-empty view data since only one renderer will have this view.
|
|
if (viewData && viewData.hierarchy.length > 0) {
|
|
shouldBreak = callback(viewData);
|
|
}
|
|
},
|
|
);
|
|
}
|
|
}
|
|
};
|