Skip to content
60 changes: 41 additions & 19 deletions Libraries/Inspector/InspectorPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,43 @@ const ElementProperties = require('ElementProperties');
const NetworkOverlay = require('NetworkOverlay');
const PerformanceOverlay = require('PerformanceOverlay');
const React = require('React');
const PropTypes = require('prop-types');
const ScrollView = require('ScrollView');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const TouchableHighlight = require('TouchableHighlight');
const View = require('View');

class InspectorPanel extends React.Component<$FlowFixMeProps> {
import type {ViewStyleProp} from 'StyleSheet';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unclear type. Using any, Object, Function, $Subtype<...>, or $Supertype<...> types is not safe! (unclear-type)


type Props = $ReadOnly<{|
devtoolsIsOpen?: ?boolean,
inspecting: boolean,
setInspecting: (val: boolean) => void,
perfing: boolean,
setPerfing: (val: boolean) => void,
touchTargeting?: ?boolean,
setTouchTargeting?: ?(val: boolean) => void,
networking?: ?boolean,
setNetworking?: ?(val: boolean) => void,
hierarchy?: any,
selection: number,
setSelection: number => mixed,
inspected?: ?{|
style?: ?ViewStyleProp,
frame?: ?{|
top?: ?number,
left?: ?number,
width?: ?number,
height: ?number,
|},
source?: ?{|
fileName?: string,
lineNumber?: number,
|},
|},
|}>;

class InspectorPanel extends React.Component<Props> {
renderWaiting() {
if (this.props.inspecting) {
return (
Expand Down Expand Up @@ -57,22 +86,22 @@ class InspectorPanel extends React.Component<$FlowFixMeProps> {
<View style={styles.container}>
{!this.props.devtoolsIsOpen && contents}
<View style={styles.buttonRow}>
<Button
<InspectorPanelButton
title={'Inspect'}
pressed={this.props.inspecting}
onClick={this.props.setInspecting}
/>
<Button
<InspectorPanelButton
title={'Perf'}
pressed={this.props.perfing}
onClick={this.props.setPerfing}
/>
<Button
<InspectorPanelButton
title={'Network'}
pressed={this.props.networking}
onClick={this.props.setNetworking}
/>
<Button
<InspectorPanelButton
title={'Touchables'}
pressed={this.props.touchTargeting}
onClick={this.props.setTouchTargeting}
Expand All @@ -83,20 +112,13 @@ class InspectorPanel extends React.Component<$FlowFixMeProps> {
}
}

InspectorPanel.propTypes = {
devtoolsIsOpen: PropTypes.bool,
inspecting: PropTypes.bool,
setInspecting: PropTypes.func,
inspected: PropTypes.object,
perfing: PropTypes.bool,
setPerfing: PropTypes.func,
touchTargeting: PropTypes.bool,
setTouchTargeting: PropTypes.func,
networking: PropTypes.bool,
setNetworking: PropTypes.func,
};
type InspectorPanelButtonProps = $ReadOnly<{|
onClick: (val: boolean) => void,
pressed?: ?boolean,
title?: ?string,
|}>;

class Button extends React.Component<$FlowFixMeProps> {
class InspectorPanelButton extends React.Component<InspectorPanelButtonProps> {
render() {
return (
<TouchableHighlight
Expand Down