158 lines
4.0 KiB
JavaScript
158 lines
4.0 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';
|
|
|
|
const ElementProperties = require('ElementProperties');
|
|
const NetworkOverlay = require('NetworkOverlay');
|
|
const PerformanceOverlay = require('PerformanceOverlay');
|
|
const React = require('React');
|
|
const ScrollView = require('ScrollView');
|
|
const StyleSheet = require('StyleSheet');
|
|
const Text = require('Text');
|
|
const TouchableHighlight = require('TouchableHighlight');
|
|
const View = require('View');
|
|
|
|
const 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() {
|
|
let contents;
|
|
if (this.props.inspected) {
|
|
contents = (
|
|
<ScrollView style={styles.properties}>
|
|
<ElementProperties
|
|
style={this.props.inspected.style}
|
|
frame={this.props.inspected.frame}
|
|
source={this.props.inspected.source}
|
|
hierarchy={this.props.hierarchy}
|
|
selection={this.props.selection}
|
|
setSelection={this.props.setSelection}
|
|
/>
|
|
</ScrollView>
|
|
);
|
|
} else if (this.props.perfing) {
|
|
contents = (
|
|
<PerformanceOverlay />
|
|
);
|
|
} else if (this.props.networking) {
|
|
contents = (
|
|
<NetworkOverlay />
|
|
);
|
|
} else {
|
|
contents = (
|
|
<View style={styles.waiting}>
|
|
{this.renderWaiting()}
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<View style={styles.container}>
|
|
{!this.props.devtoolsIsOpen && contents}
|
|
<View style={styles.buttonRow}>
|
|
<Button
|
|
title={'Inspect'}
|
|
pressed={this.props.inspecting}
|
|
onClick={this.props.setInspecting}
|
|
/>
|
|
<Button title={'Perf'}
|
|
pressed={this.props.perfing}
|
|
onClick={this.props.setPerfing}
|
|
/>
|
|
<Button title={'Network'}
|
|
pressed={this.props.networking}
|
|
onClick={this.props.setNetworking}
|
|
/>
|
|
<Button title={'Touchables'}
|
|
pressed={this.props.touchTargetting}
|
|
onClick={this.props.setTouchTargetting}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
InspectorPanel.propTypes = {
|
|
devtoolsIsOpen: PropTypes.bool,
|
|
inspecting: PropTypes.bool,
|
|
setInspecting: PropTypes.func,
|
|
inspected: PropTypes.object,
|
|
perfing: PropTypes.bool,
|
|
setPerfing: PropTypes.func,
|
|
touchTargetting: PropTypes.bool,
|
|
setTouchTargetting: PropTypes.func,
|
|
networking: PropTypes.bool,
|
|
setNetworking: PropTypes.func,
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
const 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)',
|
|
},
|
|
properties: {
|
|
height: 200,
|
|
},
|
|
waiting: {
|
|
height: 100,
|
|
},
|
|
waitingText: {
|
|
fontSize: 20,
|
|
textAlign: 'center',
|
|
marginVertical: 20,
|
|
color: 'white',
|
|
},
|
|
});
|
|
|
|
module.exports = InspectorPanel;
|