packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js - main - ashipov/react

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
115 строк4 KB
Andrew Clark
[Codemod] Update copyright header to Meta (#25315)
18 окт 2022, 18:19
18 окт 2022, 18:199cdf8a9
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useContext} from 'react';
import {ProfilerContext} from './ProfilerContext';
import Updaters from './Updaters';
import {formatDuration, formatTime} from './utils';
import {StoreContext} from '../context';
import {getCommitTree} from './CommitTreeBuilder';

import styles from './SidebarCommitInfo.css';

export type Props = {};

export default function SidebarCommitInfo(_: Props): React.Node {
  const {selectedCommitIndex, rootID} = useContext(ProfilerContext);

  const {profilerStore} = useContext(StoreContext);

  if (rootID === null || selectedCommitIndex === null) {
    return <div className={styles.NothingSelected}>Nothing selected</div>;
  }

  const {
    duration,
    effectDuration,
    passiveEffectDuration,
    priorityLevel,
    timestamp,
    updaters,
  } = profilerStore.getCommitData(rootID, selectedCommitIndex);

  const hasCommitPhaseDurations =
    effectDuration !== null || passiveEffectDuration !== null;

  const commitTree =
    updaters !== null
      ? getCommitTree({
          commitIndex: selectedCommitIndex,
          profilerStore,
          rootID,
        })
      : null;

  return (
    <Fragment>
      <div className={styles.Toolbar}>Commit information</div>
      <div className={styles.Content}>
        <ul className={styles.List}>
          {priorityLevel !== null && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Priority</label>:{' '}
              <span className={styles.Value}>{priorityLevel}</span>
            </li>
          )}
          <li className={styles.ListItem}>
            <label className={styles.Label}>Committed at</label>:{' '}
            <span className={styles.Value}>{formatTime(timestamp)}s</span>
          </li>

          {!hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Render duration</label>:{' '}
              <span className={styles.Value}>{formatDuration(duration)}ms</span>
            </li>
          )}

          {hasCommitPhaseDurations && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>Durations</label>
              <ul className={styles.DurationsList}>
                <li className={styles.DurationsListItem}>
                  <label className={styles.Label}>Render</label>:{' '}
                  <span className={styles.Value}>
                    {formatDuration(duration)}ms
                  </span>
                </li>
                {effectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Layout effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(effectDuration)}ms
                    </span>
                  </li>
                )}
                {passiveEffectDuration !== null && (
                  <li className={styles.DurationsListItem}>
                    <label className={styles.Label}>Passive effects</label>:{' '}
                    <span className={styles.Value}>
                      {formatDuration(passiveEffectDuration)}ms
                    </span>
                  </li>
                )}
              </ul>
            </li>
          )}

          {updaters !== null && commitTree !== null && (
            <li className={styles.ListItem}>
              <label className={styles.Label}>What caused this update</label>?
              <Updaters commitTree={commitTree} updaters={updaters} />
            </li>
          )}
        </ul>
      </div>
    </Fragment>
  );
}