react Architecture Docs
Home / File/ RecordToggle.js — react Source File

RecordToggle.js — react Source File

Architecture documentation for RecordToggle.js, a javascript file in the react codebase. 7 imports, 3 dependents.

File javascript BabelCompiler Validation 7 imports 3 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6["RecordToggle.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  6c4f87a5_052e_5ad2_3388_1e4392b92a53["ProfilerContext.js"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> 6c4f87a5_052e_5ad2_3388_1e4392b92a53
  9ea21ec5_fa94_addf_2e9e_733a096e272f["RecordToggle.css"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> 9ea21ec5_fa94_addf_2e9e_733a096e272f
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  e9f156a7_3128_029f_c78c_3f0bdd3d3035["NoProfilingData.js"]
  e9f156a7_3128_029f_c78c_3f0bdd3d3035 --> 6d843aa4_d682_7d74_cb4d_ebf8de9d5de6
  2e59ff66_9c56_6e37_8843_8e474e6b0d70["Profiler.js"]
  2e59ff66_9c56_6e37_8843_8e474e6b0d70 --> 6d843aa4_d682_7d74_cb4d_ebf8de9d5de6
  81e36eca_e88d_c59e_ac55_acf33fa441bb["RecordingInProgress.js"]
  81e36eca_e88d_c59e_ac55_acf33fa441bb --> 6d843aa4_d682_7d74_cb4d_ebf8de9d5de6
  style 6d843aa4_d682_7d74_cb4d_ebf8de9d5de6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * 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 {useContext} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {ProfilerContext} from './ProfilerContext';

import styles from './RecordToggle.css';

export type Props = {
  disabled?: boolean,
};

export default function RecordToggle({disabled}: Props): React.Node {
  const {isProfiling, startProfiling, stopProfiling} =
    useContext(ProfilerContext);

  let className = styles.InactiveRecordToggle;
  if (disabled) {
    className = styles.DisabledRecordToggle;
  } else if (isProfiling) {
    className = styles.ActiveRecordToggle;
  }

  const isMac =
    typeof navigator !== 'undefined' &&
    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  const shortcut = isMac ? '⌘E' : 'Ctrl+E';
  const title = `${isProfiling ? 'Stop' : 'Start'} profiling - ${shortcut}`;

  return (
    <Button
      className={className}
      disabled={disabled}
      onClick={isProfiling ? stopProfiling : startProfiling}
      testName="ProfilerToggleButton"
      title={title}>
      <ButtonIcon type="record" />
    </Button>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does RecordToggle.js do?
RecordToggle.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in RecordToggle.js?
RecordToggle.js defines 1 function(s): RecordToggle.
What does RecordToggle.js depend on?
RecordToggle.js imports 7 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, ProfilerContext.js, RecordToggle.css, react.
What files import RecordToggle.js?
RecordToggle.js is imported by 3 file(s): NoProfilingData.js, Profiler.js, RecordingInProgress.js.
Where is RecordToggle.js in the architecture?
RecordToggle.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Profiler).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free