StyleInspector.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @format
  8. * @flow strict-local
  9. */
  10. 'use strict';
  11. const React = require('react');
  12. const StyleSheet = require('../StyleSheet/StyleSheet');
  13. const Text = require('../Text/Text');
  14. const View = require('../Components/View/View');
  15. class StyleInspector extends React.Component<$FlowFixMeProps> {
  16. render(): React.Node {
  17. if (!this.props.style) {
  18. return <Text style={styles.noStyle}>No style</Text>;
  19. }
  20. const names = Object.keys(this.props.style);
  21. return (
  22. <View style={styles.container}>
  23. <View>
  24. {names.map(name => (
  25. <Text key={name} style={styles.attr}>
  26. {name}:
  27. </Text>
  28. ))}
  29. </View>
  30. <View>
  31. {names.map(name => {
  32. const value = this.props.style[name];
  33. return (
  34. <Text key={name} style={styles.value}>
  35. {typeof value !== 'string' && typeof value !== 'number'
  36. ? JSON.stringify(value)
  37. : value}
  38. </Text>
  39. );
  40. })}
  41. </View>
  42. </View>
  43. );
  44. }
  45. }
  46. const styles = StyleSheet.create({
  47. container: {
  48. flexDirection: 'row',
  49. },
  50. attr: {
  51. fontSize: 10,
  52. color: '#ccc',
  53. },
  54. value: {
  55. fontSize: 10,
  56. color: 'white',
  57. marginLeft: 10,
  58. },
  59. noStyle: {
  60. color: 'white',
  61. fontSize: 10,
  62. },
  63. });
  64. module.exports = StyleInspector;