react-native/Libraries/Inspector/StyleInspector.js

66 lines
1.4 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @providesModule StyleInspector
* @flow
*/
'use strict';
var React = require('React');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var View = require('View');
class StyleInspector extends React.Component<$FlowFixMeProps> {
render() {
if (!this.props.style) {
return <Text style={styles.noStyle}>No style</Text>;
}
var names = Object.keys(this.props.style);
return (
<View style={styles.container}>
<View>
{names.map(name => <Text key={name} style={styles.attr}>{name}:</Text>)}
</View>
<View>
{names.map(name => {
var value = typeof this.props.style[name] === 'object' ? JSON.stringify(this.props.style[name]) : this.props.style[name];
return <Text key={name} style={styles.value}>{value}</Text>;
} ) }
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
},
attr: {
fontSize: 10,
color: '#ccc',
},
value: {
fontSize: 10,
color: 'white',
marginLeft: 10,
},
noStyle: {
color: 'white',
fontSize: 10,
},
});
module.exports = StyleInspector;