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

SettingsModal.js — react Source File

Architecture documentation for SettingsModal.js, a javascript file in the react codebase. 19 imports, 0 dependents.

File javascript BabelCompiler Validation 19 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  33c9bb39_5afe_7433_b39c_5c97384e3323["SettingsModal.js"]
  c590b2f8_e784_4482_1344_3166beeda587["SettingsModalContext.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> c590b2f8_e784_4482_1344_3166beeda587
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  1356ba82_c85f_323e_8c5f_e616c171f6ad["TabBar.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 1356ba82_c85f_323e_8c5f_e616c171f6ad
  cbbc189a_3397_6ee7_339c_6996a36ac0e5["TabBar"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> cbbc189a_3397_6ee7_339c_6996a36ac0e5
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  315baf50_1028_51ca_a9c1_679c6a17ed98["hooks.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  20b264a9_e519_d0f6_5613_b33869edcdbd["ComponentsSettings.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 20b264a9_e519_d0f6_5613_b33869edcdbd
  eee1b576_c90e_a448_c010_79c8672c6ac5["DebuggingSettings.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> eee1b576_c90e_a448_c010_79c8672c6ac5
  65c09e16_b09a_f3c2_ebe5_ad2089ddc6ea["DebuggingSettings"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 65c09e16_b09a_f3c2_ebe5_ad2089ddc6ea
  ba1321bc_42b8_c6c2_e944_8928bf07c59a["GeneralSettings.js"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> ba1321bc_42b8_c6c2_e944_8928bf07c59a
  97a5705e_2739_9ff5_e96e_36e4367e38ad["GeneralSettings"]
  33c9bb39_5afe_7433_b39c_5c97384e3323 --> 97a5705e_2739_9ff5_e96e_36e4367e38ad
  style 33c9bb39_5afe_7433_b39c_5c97384e3323 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 {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
import {SettingsModalContext} from './SettingsModalContext';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import TabBar from '../TabBar';
import {StoreContext} from '../context';
import {
  useLocalStorage,
  useModalDismissSignal,
  useSubscription,
} from '../hooks';
import ComponentsSettings from './ComponentsSettings';
import DebuggingSettings from './DebuggingSettings';
import GeneralSettings from './GeneralSettings';
import ProfilerSettings from './ProfilerSettings';

import styles from './SettingsModal.css';

import type Store from 'react-devtools-shared/src/devtools/store';

type TabID = 'general' | 'debugging' | 'components' | 'profiler';

export default function SettingsModal(): React.Node {
  const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
  const store = useContext(StoreContext);
  const {profilerStore} = store;

  // Updating preferences while profiling is in progress could break things (e.g. filtering)
  // Explicitly disallow it for now.
  const isProfilingSubscription = useMemo(
    () => ({
      getCurrentValue: () => profilerStore.isProfilingBasedOnUserInput,
      subscribe: (callback: Function) => {
        profilerStore.addListener('isProfiling', callback);
        return () => profilerStore.removeListener('isProfiling', callback);
      },
    }),
    [profilerStore],
  );
  const isProfiling = useSubscription<boolean>(isProfilingSubscription);
  if (isProfiling && isModalShowing) {
    setIsModalShowing(false);
  }

  if (!isModalShowing) {
    return null;
  }

  return <SettingsModalImpl store={store} />;
}
// ... (88 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does SettingsModal.js do?
SettingsModal.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 SettingsModal.js?
SettingsModal.js defines 2 function(s): SettingsModal, SettingsModalImpl.
What does SettingsModal.js depend on?
SettingsModal.js imports 19 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, ComponentsSettings.js, DebuggingSettings, DebuggingSettings.js, GeneralSettings, and 11 more.
Where is SettingsModal.js in the architecture?
SettingsModal.js is located at packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Settings).

Analyze Your Own Codebase

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

Try Supermodel Free