SettingsModalImpl() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ SettingsModalImpl() — react Function Reference

Dependency Diagram

graph TD
  f550e32d_9762_bca0_fcc5_006bbaea9c81["SettingsModalImpl()"]
  33c9bb39_5afe_7433_b39c_5c97384e3323["SettingsModal.js"]
  f550e32d_9762_bca0_fcc5_006bbaea9c81 -->|defined in| 33c9bb39_5afe_7433_b39c_5c97384e3323
  style f550e32d_9762_bca0_fcc5_006bbaea9c81 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js lines 64–124

function SettingsModalImpl({store}: ImplProps) {
  const {setIsModalShowing, environmentNames, hookSettings} =
    useContext(SettingsModalContext);
  const dismissModal = useCallback(
    () => setIsModalShowing(false),
    [setIsModalShowing],
  );

  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
    'React::DevTools::selectedSettingsTabID',
    'general',
  );

  const modalRef = useRef<HTMLDivElement | null>(null);
  useModalDismissSignal(modalRef, dismissModal);

  useEffect(() => {
    if (modalRef.current !== null) {
      modalRef.current.focus();
    }
  }, [modalRef]);

  let view = null;
  switch (selectedTabID) {
    case 'components':
      view = <ComponentsSettings environmentNames={environmentNames} />;
      break;
    case 'debugging':
      view = <DebuggingSettings hookSettings={hookSettings} store={store} />;
      break;
    case 'general':
      view = <GeneralSettings />;
      break;
    case 'profiler':
      view = <ProfilerSettings />;
      break;
    default:
      break;
  }

  return (
    <div className={styles.Background}>
      <div className={styles.Modal} ref={modalRef}>
        <div className={styles.Tabs}>
          <TabBar
            currentTab={selectedTabID}
            id="Settings"
            selectTab={selectTab}
            tabs={tabs}
            type="settings"
          />
          <div className={styles.Spacer} />
          <Button onClick={dismissModal} title="Close settings dialog">
            <ButtonIcon type="close" />
          </Button>
        </div>
        <div className={styles.Content}>{view}</div>
      </div>
    </div>
  );
}