Add electron support for AutoResizerRootView

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

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

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

@@ -1,3 +1,53 @@
-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(() => {
+    if (!divRef.current) {
+      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(divRef.current);
+
+    return () => {
+      observer.unobserve();
+    };
+  }, [enabled, maxRelativeHeight]);
+
+  return (
+    <div ref={divRef} style={{ height: 'fit-content', ...style }}>
+      {children}
+    </div>
+  );
+};
+
+export default AutoResizerRootView;