RecordToggle() — react Function Reference

Architecture documentation for the RecordToggle() function in RecordToggle.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ RecordToggle() — react Function Reference

Dependency Diagram

graph TD
  eb91aeb9_dd00_a762_dc14_0e3194f1eacc["RecordToggle()"]
  6d843aa4_d682_7d74_cb4d_ebf8de9d5de6["RecordToggle.js"]
  eb91aeb9_dd00_a762_dc14_0e3194f1eacc -->|defined in| 6d843aa4_d682_7d74_cb4d_ebf8de9d5de6
  style eb91aeb9_dd00_a762_dc14_0e3194f1eacc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js lines 22–49

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>
  );
}