Re architect the react-nodegui codebase to add room for more widgets like scrollarea

a7ul · a7ul · commit 7a144eb08066 · 2019-09-09T22:11:33.000+02:00
diff --git a/src/components/Button/RNButton.ts b/src/components/Button/RNButton.ts
@@ -1,10 +1,23 @@
-import { QIcon, QPushButton } from "@nodegui/nodegui";
+import { QIcon, QPushButton, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNButton extends QPushButton {
+export class RNButton extends QPushButton implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "button";
 }
-
 export interface ButtonProps extends ViewProps {
   text?: string;
   flat?: boolean;
diff --git a/src/components/CheckBox/RNCheckBox.ts b/src/components/CheckBox/RNCheckBox.ts
@@ -1,7 +1,21 @@
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
-import { QCheckBox } from "@nodegui/nodegui";
+import { QCheckBox, NodeWidget } from "@nodegui/nodegui";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNCheckBox extends QCheckBox {
+export class RNCheckBox extends QCheckBox implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "checkbox";
 }
 
diff --git a/src/components/Dial/RNDial.ts b/src/components/Dial/RNDial.ts
@@ -1,7 +1,20 @@
-import { QDial } from "@nodegui/nodegui";
+import { QDial, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
-
-export class RNDial extends QDial {
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+export class RNDial extends QDial implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "dial";
 }
 
diff --git a/src/components/Image/RNImage.ts b/src/components/Image/RNImage.ts
@@ -1,7 +1,21 @@
-import { QLabel, QPixmap, AspectRatioMode } from "@nodegui/nodegui";
+import { QLabel, QPixmap, AspectRatioMode, NodeWidget } from "@nodegui/nodegui";
 import { TextProps, setProps as setTextProps } from "../Text/RNText";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNImage extends QLabel {
+export class RNImage extends QLabel implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "image";
   originalPixmap?: QPixmap;
   aspectRatioMode?: AspectRatioMode;
diff --git a/src/components/LineEdit/RNLineEdit.ts b/src/components/LineEdit/RNLineEdit.ts
@@ -1,7 +1,20 @@
-import { QLineEdit } from "@nodegui/nodegui";
+import { QLineEdit, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
-
-export class RNLineEdit extends QLineEdit {
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
+export class RNLineEdit extends QLineEdit implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "linedit";
 }
 
diff --git a/src/components/PlainTextEdit/RNPlainTextEdit.ts b/src/components/PlainTextEdit/RNPlainTextEdit.ts
@@ -1,7 +1,21 @@
-import { QPlainTextEdit } from "@nodegui/nodegui";
+import { QPlainTextEdit, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNPlainTextEdit extends QPlainTextEdit {
+export class RNPlainTextEdit extends QPlainTextEdit implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "plaintextedit";
 }
 
diff --git a/src/components/ProgressBar/RNProgressBar.ts b/src/components/ProgressBar/RNProgressBar.ts
@@ -1,7 +1,21 @@
-import { QProgressBar, Orientation } from "@nodegui/nodegui";
+import { QProgressBar, Orientation, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNProgressBar extends QProgressBar {
+export class RNProgressBar extends QProgressBar implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "progressbar";
 }
 
diff --git a/src/components/RadioButton/RNRadioButton.ts b/src/components/RadioButton/RNRadioButton.ts
@@ -1,7 +1,21 @@
-import { QRadioButton } from "@nodegui/nodegui";
+import { QRadioButton, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNRadioButton extends QRadioButton {
+export class RNRadioButton extends QRadioButton implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "radiobutton";
 }
 
diff --git a/src/components/ScrollArea/RNScrollArea.ts b/src/components/ScrollArea/RNScrollArea.ts
@@ -1,12 +1,25 @@
-import { QScrollArea } from "@nodegui/nodegui";
+import { QScrollArea, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
-import { ReactElement } from "react";
+import { RNWidget } from "../config";
 
-export class RNScrollArea extends QScrollArea {
+export class RNScrollArea extends QScrollArea implements RNWidget {
+  removeChild(child: NodeWidget): void {
+    throw new Error("Method not implemented.");
+    //TODO: IMPLEMENT THIS
+  }
+  appendInitialChild(child: NodeWidget): void {
+    this.setWidget(child);
+  }
+  appendChild(child: NodeWidget): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    this.appendInitialChild(child);
+  }
   static tagName = "scrollarea";
 }
 export interface ScrollAreaProps extends ViewProps {
-  children?: ReactElement;
+  // TODO add props
 }
 
 export const setProps = (
@@ -15,10 +28,7 @@ export const setProps = (
   oldProps: ScrollAreaProps
 ) => {
   const setter: ScrollAreaProps = {
-    set children(childWidget: ReactElement) {
-      console.log(childWidget, "childWidget");
-      // widget.setWidget(childWidget);
-    }
+    //TODO add props
   };
   Object.assign(setter, newProps);
   setViewProps(widget, newProps, oldProps);
diff --git a/src/components/ScrollArea/index.ts b/src/components/ScrollArea/index.ts
@@ -1,5 +1,5 @@
 import { registerComponent, ComponentConfig } from "../config";
-import { QScrollArea, NodeWidget } from "@nodegui/nodegui";
+import { NodeWidget } from "@nodegui/nodegui";
 import { Fiber } from "react-reconciler";
 import { RNScrollArea, setProps, ScrollAreaProps } from "./RNScrollArea";
 
@@ -25,7 +25,7 @@ class ScrollAreaConfig extends ComponentConfig {
     newProps: object,
     finishedWork: Fiber
   ): void {
-    setProps(instance as QScrollArea, newProps, oldProps);
+    setProps(instance as RNScrollArea, newProps, oldProps);
   }
 }
 
diff --git a/src/components/SpinBox/RNSpinBox.ts b/src/components/SpinBox/RNSpinBox.ts
@@ -1,9 +1,24 @@
-import { QSpinBox } from "@nodegui/nodegui";
+import { QSpinBox, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNSpinBox extends QSpinBox {
+export class RNSpinBox extends QSpinBox implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "spinbox";
 }
+
 type Range = {
   minimum: number;
   maximum: number;
diff --git a/src/components/Text/RNText.ts b/src/components/Text/RNText.ts
@@ -1,7 +1,21 @@
-import { QLabel } from "@nodegui/nodegui";
+import { QLabel, NodeWidget } from "@nodegui/nodegui";
 import { ViewProps, setProps as setViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+import { throwUnsupported } from "../../utils/helpers";
 
-export class RNText extends QLabel {
+export class RNText extends QLabel implements RNWidget {
+  appendInitialChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget): void {
+    throwUnsupported(this);
+  }
   static tagName = "text";
 }
 
diff --git a/src/components/View/RNView.ts b/src/components/View/RNView.ts
@@ -4,8 +4,10 @@ import {
   QCursor,
   CursorShape,
   NodeWidget,
-  QIcon
+  QIcon,
+  FlexLayout
 } from "@nodegui/nodegui";
+import { RNWidget } from "../config";
 
 export interface ViewProps {
   visible?: boolean;
@@ -28,8 +30,37 @@ export interface ViewProps {
   ref?: any;
 }
 
-export class RNView extends QWidget {
+export class RNView extends QWidget implements RNWidget {
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    if (!this.layout) {
+      console.warn("parent has no layout to insert child before another child");
+      return;
+    }
+    (this.layout as FlexLayout).insertChildBefore(child, beforeChild);
+  }
   static tagName = "view";
+  appendInitialChild(child: NodeWidget): void {
+    this.appendChild(child);
+  }
+  appendChild(child: NodeWidget): void {
+    if (!child) {
+      return;
+    }
+    if (!this.layout) {
+      const flexLayout = new FlexLayout();
+      flexLayout.setFlexNode(this.getFlexNode());
+      this.setLayout(flexLayout);
+      this.layout = flexLayout;
+    }
+    this.layout.addWidget(child);
+  }
+  removeChild(child: NodeWidget) {
+    if (!this.layout) {
+      console.warn("parent has no layout to remove child from");
+      return;
+    }
+    (this.layout as FlexLayout).removeWidget(child);
+  }
 }
 
 export const setProps = (
diff --git a/src/components/Window/RNWindow.ts b/src/components/Window/RNWindow.ts
@@ -1,9 +1,32 @@
-import { QMainWindow } from "@nodegui/nodegui";
-
+import { QMainWindow, NodeWidget, FlexLayout } from "@nodegui/nodegui";
 import { setProps as setViewProps, ViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
 
-export class RNWindow extends QMainWindow {
+export class RNWindow extends QMainWindow implements RNWidget {
   static tagName = "mainwindow";
+  appendInitialChild(child: NodeWidget): void {
+    this.appendChild(child);
+  }
+  appendChild(child: NodeWidget): void {
+    if (!child) {
+      return;
+    }
+    (this.layout as FlexLayout).addWidget(child);
+  }
+  insertBefore(child: NodeWidget, beforeChild: NodeWidget): void {
+    if (!this.layout) {
+      console.warn("window has no layout to insert child before another child");
+      return;
+    }
+    (this.layout as FlexLayout).insertChildBefore(child, beforeChild);
+  }
+  removeChild(child: NodeWidget) {
+    if (!this.layout) {
+      console.warn("parent has no layout to remove child from");
+      return;
+    }
+    (this.layout as FlexLayout).removeWidget(child);
+  }
 }
 
 export interface WindowProps extends ViewProps {
diff --git a/src/components/config.ts b/src/components/config.ts
diff --git a/src/demo.tsx b/src/demo.tsx
diff --git a/src/reconciler/index.ts b/src/reconciler/index.ts
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import { registerComponent, ComponentConfig } from "../config";`
`2`		`-import { QScrollArea, NodeWidget } from "@nodegui/nodegui";`
	`2`	`+import { NodeWidget } from "@nodegui/nodegui";`
`3`	`3`	`import { Fiber } from "react-reconciler";`
`4`	`4`	`import { RNScrollArea, setProps, ScrollAreaProps } from "./RNScrollArea";`
`5`	`5`
`@@ -25,7 +25,7 @@ class ScrollAreaConfig extends ComponentConfig {`
`25`	`25`	`newProps: object,`
`26`	`26`	`finishedWork: Fiber`
`27`	`27`	`): void {`
`28`		`- setProps(instance as QScrollArea, newProps, oldProps);`
	`28`	`+ setProps(instance as RNScrollArea, newProps, oldProps);`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`