[menu-bar] Add electron support for AutoResizerRootView

CHANGELOG.md

@@ -8,7 +8,7 @@
 
 - Add support for launching Expo updates. ([#134](https://github.com/expo/orbit/pull/134), [#137](https://github.com/expo/orbit/pull/137), [#138](https://github.com/expo/orbit/pull/138), [#144](https://github.com/expo/orbit/pull/144), [#148](https://github.com/expo/orbit/pull/148) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Cache builds by default. ([#156](https://github.com/expo/orbit/pull/156) by [@gabrieldonadel](https://github.com/gabrieldonadel))
-- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 🐛 Bug fixes
 

apps/menu-bar/electron/modules/AutoResizerRootViewManager/main.ts

@@ -0,0 +1,19 @@
+import { BrowserWindow } from 'electron';
+
+async function setPopoverSize(width: number, height: number, event: Electron.IpcMainInvokeEvent) {
+  for (const window of BrowserWindow.getAllWindows()) {
+    if (event.sender === window.webContents) {
+      window.setSize(width, height, true);
+    }
+  }
+}
+
+const AutoResizerRootViewManager: {
+  name: string;
+  setPopoverSize: (width: number, height: number, event: any) => void;
+} = {
+  name: 'AutoResizerRootViewManager',
+  setPopoverSize,
+};
+
+export default AutoResizerRootViewManager;

apps/menu-bar/electron/modules/mainRegistry.ts

@@ -1,6 +1,7 @@
 import { Registry } from 'react-native-electron-modules';
 
+import AutoResizerRootViewManager from './AutoResizerRootViewManager/main';
 import Linking from './Linking/main';
 import MenuBarModule from '../../modules/menu-bar/electron/main';
 
-export const MainModules: Registry = [MenuBarModule, Linking];
+export const MainModules: Registry = [MenuBarModule, Linking, AutoResizerRootViewManager];

apps/menu-bar/modules/menu-bar/electron/preload.ts

@@ -1,8 +1,3 @@
-declare global {
-  // eslint-disable-next-line no-var
-  var screen: { height: number; width: number } | null | undefined;
-}
-
 const MenuBarModule = {
   name: 'MenuBar',
   initialScreenSize: {

apps/menu-bar/src/components/AutoResizerRootView/index.web.tsx

@@ -1,3 +1,54 @@
-import { View } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { requireElectronModule } from 'react-native-electron-modules/build/requireElectronModule';
 
-export default View;
+export const AutoResizerRootViewManager = requireElectronModule<{
+  setPopoverSize: (width: number, height: number) => void;
+}>('AutoResizerRootViewManager');
+
+const AutoResizerRootView = ({
+  maxRelativeHeight,
+  enabled,
+  children,
+  style,
+}: {
+  enabled: boolean;
+  maxRelativeHeight: number;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
+  const divRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const currentDiv = divRef.current;
+    if (!currentDiv) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+
+      if (!enabled || !height) {
+        return;
+      }
+
+      const screenHeight = window.screen.height;
+      const maxHeight = screenHeight * maxRelativeHeight;
+
+      const newHeight = height <= maxHeight ? height : maxHeight;
+
+      AutoResizerRootViewManager.setPopoverSize(width, Math.round(newHeight));
+    });
+
+    observer.observe(currentDiv);
+
+    return () => {
+      observer.unobserve(currentDiv);
+    };
+  }, [enabled, maxRelativeHeight]);
+
+  return (
+    <div ref={divRef} style={{ height: 'fit-content', ...style }}>
+      {children}
+    </div>
+  );
+};
+
+export default AutoResizerRootView;

apps/menu-bar/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["es2019", "dom"]
+  }
 }