mirror of
https://github.com/status-im/react-native.git
synced 2025-01-15 20:15:11 +00:00
15907419f3
Summary: The `InspectorOverlay` component was getting unwieldy, so I broke it into three components: - Inspector - InspectorOverlay - InspectorPanel and added @flow types. The inspector was also living under the `ReactIOS` directory, and I moved it up into the `Libraries` directory, as the inspector will soon be usable [on Android](https://phabricator.fb.com/D2138319). All features of the inspector should remain functional, with the addition of one feature: - you can toggle "touch to inspect" by tapping the "Inspect" button at the bottom of the inspection panel. When inspection is disabled, the panel remains, but you can interact with the app normally without touches being intercepted @public Test Plan: Open the inspector: - touch to inspect things, verify that margin, padding, size and position are reported correctly, and that the component hierarchy is navigable. - tap the "Inspect" button, and verify that you can interact with the app normally. {F22548949} [Video of toggling inspection](https://www.latest.facebook.com/pxlcld/mrs9)
120 lines
2.7 KiB
JavaScript
120 lines
2.7 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule InspectorPanel
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var React = require('React');
|
|
var StyleSheet = require('StyleSheet');
|
|
var Text = require('Text');
|
|
var View = require('View');
|
|
var ElementProperties = require('ElementProperties');
|
|
var TouchableHighlight = require('TouchableHighlight');
|
|
|
|
var PropTypes = React.PropTypes;
|
|
|
|
class InspectorPanel extends React.Component {
|
|
renderWaiting() {
|
|
if (this.props.inspecting) {
|
|
return (
|
|
<Text style={styles.waitingText}>
|
|
Tap something to inspect it
|
|
</Text>
|
|
);
|
|
}
|
|
return <Text style={styles.waitingText}>Nothing is inspected</Text>;
|
|
}
|
|
|
|
render() {
|
|
var contents;
|
|
if (this.props.inspected) {
|
|
contents = (
|
|
<ElementProperties
|
|
style={this.props.inspected.style}
|
|
frame={this.props.inspected.frame}
|
|
hierarchy={this.props.hierarchy}
|
|
selection={this.props.selection}
|
|
setSelection={this.props.setSelection}
|
|
/>
|
|
);
|
|
} else {
|
|
contents = (
|
|
<View style={styles.waiting}>
|
|
{this.renderWaiting()}
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
{contents}
|
|
<View style={styles.buttonRow}>
|
|
<Button
|
|
title={'Inspect'}
|
|
pressed={this.props.inspecting}
|
|
onClick={this.props.setInspecting}/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
InspectorPanel.propTypes = {
|
|
inspecting: PropTypes.bool,
|
|
setInspecting: PropTypes.func,
|
|
inspected: PropTypes.object,
|
|
};
|
|
|
|
class Button extends React.Component {
|
|
render() {
|
|
return (
|
|
<TouchableHighlight onPress={() => this.props.onClick(!this.props.pressed)} style={[
|
|
styles.button,
|
|
this.props.pressed && styles.buttonPressed
|
|
]}>
|
|
<Text style={styles.buttonText}>{this.props.title}</Text>
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
buttonRow: {
|
|
flexDirection: 'row',
|
|
},
|
|
button: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
margin: 2,
|
|
height: 30,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
buttonPressed: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
},
|
|
buttonText: {
|
|
textAlign: 'center',
|
|
color: 'white',
|
|
margin: 5,
|
|
},
|
|
container: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
},
|
|
waiting: {
|
|
height: 100,
|
|
},
|
|
waitingText: {
|
|
fontSize: 20,
|
|
textAlign: 'center',
|
|
marginVertical: 20,
|
|
},
|
|
});
|
|
|
|
module.exports = InspectorPanel;
|