react-native/Libraries/Inspector/PerformanceOverlay.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 * @flow
 */

'use strict';

const PerformanceLoggerContext = require('PerformanceLoggerContext');
const GlobalPerformanceLogger = require('GlobalPerformanceLogger');
const React = require('React');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const View = require('View');

class PerformanceOverlay extends React.Component<{}> {
  static contextType = PerformanceLoggerContext;
  render() {
    const scopedPerformanceLogger = this.context;
    const perfLogs = {
      ...scopedPerformanceLogger.getTimespans(),
      ...GlobalPerformanceLogger.getTimespans(),
    };
    const items = [];

    for (const key in perfLogs) {
      if (perfLogs[key].totalTime) {
        const unit = key === 'BundleSize' ? 'b' : 'ms';
        items.push(
          <View style={styles.row} key={key}>
            <Text style={[styles.text, styles.label]}>{key}</Text>
            <Text style={[styles.text, styles.totalTime]}>
              {perfLogs[key].totalTime + unit}
            </Text>
          </View>,
        );
      }
    }

    return <View style={styles.container}>{items}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    height: 100,
    paddingTop: 10,
  },
  label: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
    paddingHorizontal: 10,
  },
  text: {
    color: 'white',
    fontSize: 12,
  },
  totalTime: {
    paddingRight: 100,
  },
});

module.exports = PerformanceOverlay;