PerformanceOverlay.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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
  9. */
  10. 'use strict';
  11. const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
  12. const React = require('react');
  13. const StyleSheet = require('../StyleSheet/StyleSheet');
  14. const Text = require('../Text/Text');
  15. const View = require('../Components/View/View');
  16. class PerformanceOverlay extends React.Component<{...}> {
  17. render(): React.Node {
  18. const perfLogs = PerformanceLogger.getTimespans();
  19. const items = [];
  20. for (const key in perfLogs) {
  21. if (perfLogs[key].totalTime) {
  22. const unit = key === 'BundleSize' ? 'b' : 'ms';
  23. items.push(
  24. <View style={styles.row} key={key}>
  25. <Text style={[styles.text, styles.label]}>{key}</Text>
  26. <Text style={[styles.text, styles.totalTime]}>
  27. {perfLogs[key].totalTime + unit}
  28. </Text>
  29. </View>,
  30. );
  31. }
  32. }
  33. return <View style={styles.container}>{items}</View>;
  34. }
  35. }
  36. const styles = StyleSheet.create({
  37. container: {
  38. height: 100,
  39. paddingTop: 10,
  40. },
  41. label: {
  42. flex: 1,
  43. },
  44. row: {
  45. flexDirection: 'row',
  46. paddingHorizontal: 10,
  47. },
  48. text: {
  49. color: 'white',
  50. fontSize: 12,
  51. },
  52. totalTime: {
  53. paddingRight: 100,
  54. },
  55. });
  56. module.exports = PerformanceOverlay;