MenuBar and Menu Componenets (#128)

* MenuBar and Menu components

* Tried to add Systray but its a NodeObject

* fixes conflicts

Co-authored-by: Atul R <atulanand94@gmail.com>

Author: gluaxspeed

package-lock.json

@@ -22,17 +22,15 @@
   "dependencies": {
     "@types/react-reconciler": "^0.18.0",
     "phin": "^3.4.1",
+    "@nodegui/nodegui": ">=0.22.0",
     "react-deep-force-update": "^2.1.3",
     "react-proxy": "^2.0.8",
     "react-reconciler": "^0.25.1"
   },
   "peerDependencies": {
-    "@nodegui/nodegui": ">=0.17.0",
-    "@nodegui/qode": "*",
     "react": "^16.9.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "^0.22.0",
     "@types/node": "^14.0.12",
     "prettier": "^2.0.5",
     "react": "^16.13.1",

package.json

@@ -0,0 +1,47 @@
+import { NodeWidget, QAction, QMenu, QMenuSignals } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+export interface MenuProps extends ViewProps<QMenuSignals> {
+  title?: string;
+  actions?: QAction[];
+}
+
+const setMenuProps = (
+  widget: RNMenu,
+  newProps: MenuProps,
+  oldProps: MenuProps
+) => {
+  const setter: MenuProps = {
+    set title(title: string) {
+      widget.setTitle(title);
+    },
+    set actions(actions: QAction[]) {
+      actions.forEach(action => {
+        widget.addAction(action);
+      });
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+export class RNMenu extends QMenu implements RNWidget {
+  setProps(newProps: MenuProps, oldProps: MenuProps): void {
+    setMenuProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "menu";
+};

src/components/Menu/RNMenu.ts

@@ -0,0 +1,44 @@
+import { Fiber } from "react-reconciler";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNMenu, MenuProps } from "./RNMenu";
+import { AppContainer } from "../../reconciler";
+class MenuConfig extends ComponentConfig {
+  
+  tagName = RNMenu.tagName;
+  shouldSetTextContent(nextProps: MenuProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: MenuProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNMenu {
+    const widget = new RNMenu();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNMenu,
+    newProps: MenuProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNMenu,
+    updatePayload: any,
+    oldProps: MenuProps,
+    newProps: MenuProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const Menu = registerComponent<MenuProps>(
+  new MenuConfig()
+);

src/components/Menu/index.ts

@@ -0,0 +1,51 @@
+import { NodeWidget, QMenu, QMenuBar, QMenuBarSignals } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+
+export interface MenuBarProps extends ViewProps<QMenuBarSignals> {
+  nativeMenuBar?: boolean;
+}
+
+const setMenuBarProps = (
+  widget: RNMenuBar,
+  newProps: MenuBarProps,
+  oldProps: MenuBarProps
+) => {
+  const setter: MenuBarProps = {
+    set nativeMenuBar(shouldBeNative: boolean) {
+      widget.setNativeMenuBar(shouldBeNative);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+export class RNMenuBar extends QMenuBar implements RNWidget {
+  setProps(newProps: MenuBarProps, oldProps: MenuBarProps): void {
+    setMenuBarProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: QMenu): void {
+    if (child instanceof QMenu) {
+      this.addMenu(child);
+    } else {
+      console.warn("MenuBar only supports Menu as its children");
+    }
+  }
+  appendChild(child: QMenu): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    console.warn(
+      "Updating menubar is not yet supported. Please help by raising a PR"
+    );
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    console.warn(
+      "Updating menubar is not yet supported. Please help by raising a PR"
+    );
+    throwUnsupported(this);
+  }
+  static tagName = "menubar";
+}

src/components/MenuBar/RNMenuBar.ts

@@ -0,0 +1,42 @@
+import { Fiber } from "react-reconciler";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNMenuBar, MenuBarProps } from "./RNMenuBar";
+import { AppContainer } from "../../reconciler";
+
+class MenuBarConfig extends ComponentConfig {
+  tagName = RNMenuBar.tagName;
+  shouldSetTextContent(nextProps: MenuBarProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: MenuBarProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNMenuBar {
+    const widget = new RNMenuBar();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNMenuBar,
+    newProps: MenuBarProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNMenuBar,
+    updatePayload: any,
+    oldProps: MenuBarProps,
+    newProps: MenuBarProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const MenuBar = registerComponent<MenuBarProps>(new MenuBarConfig());

src/components/MenuBar/index.ts

@@ -1,16 +1,26 @@
-import { QMainWindow, NodeWidget, QMainWindowSignals } from "@nodegui/nodegui";
+import {
+  QMainWindow,
+  NodeWidget,
+  QMainWindowSignals,
+  QMenuBar,
+} from "@nodegui/nodegui";
 import { setViewProps, ViewProps } from "../View/RNView";
 import { RNWidget } from "../config";
 
-export interface WindowProps extends ViewProps<QMainWindowSignals> {}
+export interface WindowProps extends ViewProps<QMainWindowSignals> {
+  menuBar?: QMenuBar;
+}
 
 const setWindowProps = (
   window: RNWindow,
   newProps: WindowProps,
   oldProps: WindowProps
 ) => {
   const setter: WindowProps = {
-    // TODO add more props
+    set menuBar(menubar: QMenuBar) {
+      window.setMenuBar(menubar);
+      console.log("menubar was set");
+    },
   };
   Object.assign(setter, newProps);
   setViewProps(window, newProps, oldProps);
@@ -30,12 +40,21 @@ export class RNWindow extends QMainWindow implements RNWidget {
     }
     child.close();
   }
-  appendInitialChild(child: NodeWidget<any>): void {
-    if (this.centralWidget) {
-      console.warn("MainWindow can't have more than one child node");
+  appendInitialChild(child: NodeWidget<any> | QMenuBar): void {
+    if (child instanceof QMenuBar) {
+      if (!this.menuBar()) {
+        this.setMenuBar(child);
+      } else {
+        console.warn("MainWindow can't have more than one menubar.");
+      }
       return;
     }
-    this.setCentralWidget(child);
+
+    if (!this.centralWidget) {
+      this.setCentralWidget(child);
+    } else {
+      console.warn("MainWindow can't have more than one child node");
+    }
   }
   appendChild(child: NodeWidget<any>): void {
     this.appendInitialChild(child);

src/components/Window/RNWindow.ts

@@ -1,50 +1,31 @@
-import React, { useState } from "react";
-import { Renderer, Window, Button } from "./index";
-import { BoxView } from "./components/BoxView";
-import { useEventHandler } from "./hooks";
-import { QPushButtonSignals, Direction } from "@nodegui/nodegui";
+import React from "react";
+import { Renderer, Window, MenuBar, Menu } from "./index";
+import { QAction, QApplication } from "@nodegui/nodegui";
 
-const App = () => {
-  const [additionalButtons, setAdditionalButtons] = useState<string[]>([]);
-  const [direction, setDirection] = useState<Direction>(Direction.LeftToRight);
+const quitAction = new QAction();
+quitAction.setText("Quit");
+quitAction.addEventListener("triggered", () => {
+  const app = QApplication.instance();
+  app.exit(0);
+});
 
-  const addHandler = useEventHandler<QPushButtonSignals>(
-    {
-      clicked: () =>
-        setAdditionalButtons((buttons) => [
-          ...buttons,
-          `Button ${buttons.length}`,
-        ]),
-    },
-    []
-  );
+const fileActions: QAction[] = [quitAction];
 
-  const removeHandler = useEventHandler<QPushButtonSignals>(
-    {
-      clicked: () =>
-        setAdditionalButtons((buttons) => buttons.slice(0, buttons.length - 1)),
-    },
-    []
-  );
+const sayHi = new QAction();
+sayHi.setText("Hello");
+sayHi.addEventListener("triggered", () => {
+  console.log("hello");
+});
 
-  const toggleDirection = useEventHandler<QPushButtonSignals>(
-    {
-      clicked: () =>
-        setDirection((prevDirection) => ((prevDirection + 1) % 4) as Direction),
-    },
-    []
-  );
+const randActions: QAction[] = [sayHi];
 
+const App = () => {
   return (
     <Window>
-      <BoxView direction={direction}>
-        <Button text="Add" on={addHandler} />
-        <Button text="Remove" on={removeHandler} />
-        <Button text="Toggle direction" on={toggleDirection} />
-        {additionalButtons.map((button) => (
-          <Button key={button} text={button} />
-        ))}
-      </BoxView>
+      <MenuBar>
+        <Menu title={"File"} actions={fileActions} />
+        <Menu title={"Random"} actions={randActions} />
+      </MenuBar>
     </Window>
   );
 };

src/demo.tsx

@@ -8,6 +8,8 @@ export { AnimatedImage } from "./components/AnimatedImage";
 export { Button } from "./components/Button";
 export { CheckBox } from "./components/CheckBox";
 export { LineEdit } from "./components/LineEdit";
+export { Menu } from "./components/Menu";
+export { MenuBar } from "./components/MenuBar";
 export { PlainTextEdit } from "./components/PlainTextEdit";
 export { ProgressBar } from "./components/ProgressBar";
 export { RadioButton } from "./components/RadioButton";