function SettingsContextController()

in src/devtools/views/Settings/SettingsContext.js [43:148]
100 lines of code
10 McCabe index (conditional complexity)

function SettingsContextController({
  browserTheme,
  children,
  rootContainer,
  networkPortalContainer,
  settingsPortalContainer,
}: Props) {
  const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
    'Relay::DevTools::displayDensity',
    'compact'
  );
  const [theme, setTheme] = useLocalStorage<Theme>(
    'Relay::DevTools::theme',
    'auto'
  );

  const documentElements = useMemo<DocumentElements>(() => {
    const array: Array<HTMLElement> = [
      ((document.documentElement: any): HTMLElement),
    ];
    if (rootContainer != null) {
      array.push(
        ((rootContainer.ownerDocument.documentElement: any): HTMLElement)
      );
    }
    if (networkPortalContainer != null) {
      array.push(
        ((networkPortalContainer.ownerDocument
          .documentElement: any): HTMLElement)
      );
    }
    if (settingsPortalContainer != null) {
      array.push(
        ((settingsPortalContainer.ownerDocument
          .documentElement: any): HTMLElement)
      );
    }
    return array;
  }, [networkPortalContainer, rootContainer, settingsPortalContainer]);

  const computedStyle = getComputedStyle((document.body: any));
  const comfortableLineHeight = parseInt(
    computedStyle.getPropertyValue('--comfortable-line-height-data'),
    10
  );
  const compactLineHeight = parseInt(
    computedStyle.getPropertyValue('--compact-line-height-data'),
    10
  );

  useLayoutEffect(() => {
    switch (displayDensity) {
      case 'comfortable':
        updateDisplayDensity('comfortable', documentElements);
        break;
      case 'compact':
        updateDisplayDensity('compact', documentElements);
        break;
      default:
        throw Error(`Unsupported displayDensity value "${displayDensity}"`);
    }
  }, [displayDensity, documentElements]);

  useLayoutEffect(() => {
    switch (theme) {
      case 'light':
        updateThemeVariables('light', documentElements);
        break;
      case 'dark':
        updateThemeVariables('dark', documentElements);
        break;
      case 'auto':
        updateThemeVariables(browserTheme, documentElements);
        break;
      default:
        throw Error(`Unsupported theme value "${theme}"`);
    }
  }, [browserTheme, theme, documentElements]);

  const value = useMemo(
    () => ({
      displayDensity,
      setDisplayDensity,
      theme,
      setTheme,
      lineHeight:
        displayDensity === 'compact'
          ? compactLineHeight
          : comfortableLineHeight,
    }),
    [
      comfortableLineHeight,
      compactLineHeight,
      displayDensity,
      setDisplayDensity,
      setTheme,
      theme,
    ]
  );

  return (
    <SettingsContext.Provider value={value}>
      {children}
    </SettingsContext.Provider>
  );
}