Added support for QGridLayout (#221)

* Initial rendering support of GridView

* Keep track of positions of rows and columns

* Added proper errors for foreign children

* Support controlling height and width of units

* Implemented column/row stretching and min sizing

* Fixed stale props being sent to GridRow and fixed removing rows/columns

Author: agg23

package-lock.json

@@ -32,7 +32,7 @@
     "react": "^16.9.0"
   },
   "devDependencies": {
-    "@nodegui/nodegui": "^0.18.0",
+    "@nodegui/nodegui": "^0.21.0",
     "@types/node": "^13.9.3",
     "prettier": "^1.18.2",
     "react": "^16.13.1",

package.json

@@ -0,0 +1,95 @@
+import { FunctionComponentElement } from "react";
+import { Component, NodeWidget } from "@nodegui/nodegui";
+import { RNComponent } from "../../config";
+import { RNGridRow } from "../GridRow/RNGridRow";
+
+export type GridColumnProps = {
+  /**
+   * The number of horizontal units to occupy
+   */
+  width?: number;
+};
+
+const setGridColumnProps = (
+  widget: RNGridColumn,
+  parentRow: RNGridRow,
+  newProps: GridColumnProps,
+  oldProps: GridColumnProps
+) => {
+  if (widget.actualWidget) {
+    // TODO: Optimize this
+    parentRow.parentGrid?.layout?.removeWidget(widget.actualWidget);
+    parentRow.parentGrid?.layout?.addWidget(
+      widget.actualWidget,
+      parentRow.rowIndex ?? 0,
+      widget.columnIndex ?? 0,
+      parentRow.height ?? 1,
+      widget.width ?? 1
+    );
+  }
+
+  const setter: GridColumnProps = {
+    set width(width: number) {
+      widget.width = width;
+    },
+  };
+  Object.assign(setter, newProps);
+};
+
+export class RNGridColumn extends Component implements RNComponent {
+  native: any;
+  actualWidget?: NodeWidget<any>;
+  parentRow?: RNGridRow;
+  latestProps?: GridColumnProps;
+  prevProps?: GridColumnProps;
+  columnIndex?: number;
+  width?: number;
+
+  setParentRowAndUpdateProps(parentRow: RNGridRow, index: number): void {
+    this.parentRow = parentRow;
+    this.columnIndex = index;
+    setGridColumnProps(
+      this,
+      parentRow,
+      this.latestProps ?? {},
+      this.prevProps ?? {}
+    );
+  }
+
+  remove(): void {
+    if (!this.actualWidget) {
+      return;
+    }
+
+    this.parentRow?.parentGrid?.layout?.removeWidget(this.actualWidget);
+    this.actualWidget.close();
+    this.actualWidget = undefined;
+  }
+
+  /* RNComponent */
+
+  setProps(newProps: GridColumnProps, oldProps: GridColumnProps): void {
+    if (this.parentRow) {
+      setGridColumnProps(this, this.parentRow, newProps, oldProps);
+    }
+
+    this.latestProps = newProps;
+    this.prevProps = oldProps;
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    if (this.actualWidget) {
+      throw new Error("Grid column can have only one child");
+    }
+    this.actualWidget = child;
+  }
+  appendChild(child: NodeWidget<any>): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    this.appendInitialChild(child);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    this.remove();
+  }
+  static tagName: string = "gridcolumn";
+}

src/components/GridView/GridColumn/RNGridColumn.ts

@@ -0,0 +1,49 @@
+import { Fiber } from "react-reconciler";
+import { GridColumnProps, RNGridColumn } from "./RNGridColumn";
+import { AppContainer } from "../../../reconciler";
+import { registerComponent, ComponentConfig } from "../../config";
+
+class GridColumnConfig extends ComponentConfig {
+  tagName = RNGridColumn.tagName;
+  shouldSetTextContent(nextProps: GridColumnProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: GridColumnProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNGridColumn {
+    const widget = new RNGridColumn();
+    widget.setProps(newProps, newProps);
+    return widget;
+  }
+  finalizeInitialChildren(
+    instance: RNGridColumn,
+    newProps: GridColumnProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  commitMount(
+    instance: RNGridColumn,
+    newProps: GridColumnProps,
+    internalInstanceHandle: any
+  ): void {
+    return;
+  }
+  commitUpdate(
+    instance: RNGridColumn,
+    updatePayload: any,
+    oldProps: GridColumnProps,
+    newProps: GridColumnProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const GridColumn = registerComponent<GridColumnProps>(
+  new GridColumnConfig()
+);

src/components/GridView/GridColumn/index.ts

@@ -0,0 +1,141 @@
+import { FunctionComponentElement } from "react";
+import { GridColumnProps, RNGridColumn } from "../GridColumn/RNGridColumn";
+import { Component } from "@nodegui/nodegui";
+import { RNComponent } from "../../config";
+import { RNGridView } from "../RNGridView";
+import {
+  DataWithOffset,
+  updateDisplacedChildren,
+  offsetForIndex,
+} from "../utils";
+
+export type GridRowProps = {
+  children:
+    | Array<FunctionComponentElement<GridColumnProps>>
+    | FunctionComponentElement<GridColumnProps>;
+
+  /**
+   * The number of vertical units to occupy
+   */
+  height?: number;
+};
+
+const setGridRowProps = (
+  widget: RNGridRow,
+  parentGrid: RNGridView,
+  newProps: Omit<GridRowProps, "children">,
+  oldProps: Omit<GridRowProps, "children">
+) => {
+  const setter: Omit<GridRowProps, "children"> = {
+    set height(height: number) {
+      widget.height = height;
+    },
+  };
+  Object.assign(setter, newProps);
+};
+
+export class RNGridRow extends Component implements RNComponent {
+  native: any;
+  parentGrid?: RNGridView;
+  latestProps?: GridRowProps;
+  prevProps?: GridRowProps;
+  childColumns: Array<DataWithOffset<RNGridColumn>> = [];
+  rowIndex?: number;
+  height?: number;
+
+  setParentGridAndUpdateProps(parentGrid: RNGridView, index: number): void {
+    this.parentGrid = parentGrid;
+    this.rowIndex = index;
+    setGridRowProps(
+      this,
+      parentGrid,
+      this.latestProps ?? {},
+      this.prevProps ?? {}
+    );
+
+    this.updateChildren();
+  }
+
+  updateChildren(startIndex = 0): void {
+    updateDisplacedChildren<RNGridColumn, RNGridRow>(
+      startIndex,
+      this.childColumns,
+      this,
+      "width",
+      "setParentRowAndUpdateProps"
+    );
+  }
+
+  remove(): void {
+    this.childColumns.forEach(({ data }) => data.remove());
+  }
+
+  /* RNComponent */
+
+  setProps(newProps: GridRowProps, oldProps: GridRowProps): void {
+    if (this.parentGrid) {
+      setGridRowProps(this, this.parentGrid, newProps, oldProps);
+    }
+
+    this.latestProps = newProps;
+    this.prevProps = oldProps;
+  }
+  appendInitialChild(child: RNGridColumn): void {
+    this.appendChild(child);
+  }
+  appendChild(child: RNGridColumn): void {
+    if (!(child instanceof RNGridColumn)) {
+      throw new Error("GridColumn is the only supported child of GridRow");
+    }
+
+    const offset = offsetForIndex<RNGridColumn>(
+      this.childColumns.length,
+      this.childColumns,
+      "width"
+    );
+
+    child.setParentRowAndUpdateProps(this, offset);
+
+    this.childColumns.push({
+      offset,
+      data: child,
+    });
+  }
+  insertBefore(child: RNGridColumn, beforeChild: RNGridColumn): void {
+    const prevIndex = this.childColumns.findIndex(
+      ({ data }) => data === beforeChild
+    );
+
+    if (prevIndex === -1) {
+      throw new Error(
+        "Attempted to insert child GridColumn before nonexistent column"
+      );
+    }
+
+    const offset = offsetForIndex<RNGridColumn>(
+      prevIndex,
+      this.childColumns,
+      "width"
+    );
+
+    this.childColumns.splice(prevIndex, 0, {
+      offset,
+      data: child,
+    });
+    // Update displaced children
+    this.updateChildren(prevIndex);
+  }
+  removeChild(child: RNGridColumn): void {
+    const prevIndex = this.childColumns.findIndex(({ data }) => data === child);
+
+    if (prevIndex !== -1) {
+      this.childColumns.splice(prevIndex, 1);
+      this.updateChildren(prevIndex);
+    }
+
+    // Actually remove child from layout
+    child.remove();
+    child.parentRow = undefined;
+  }
+  static tagName: string = "gridrow";
+}

src/components/GridView/GridRow/RNGridRow.ts

@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../../reconciler";
+import { registerComponent, ComponentConfig } from "../../config";
+import { RNGridRow, GridRowProps } from "./RNGridRow";
+
+class GridRowConfig extends ComponentConfig {
+  tagName = RNGridRow.tagName;
+  shouldSetTextContent(nextProps: GridRowProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: GridRowProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNGridRow {
+    const widget = new RNGridRow();
+    widget.setProps(newProps, newProps);
+    return widget;
+  }
+  finalizeInitialChildren(
+    instance: RNGridRow,
+    newProps: GridRowProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  commitMount(
+    instance: RNGridRow,
+    newProps: GridRowProps,
+    internalInstanceHandle: any
+  ): void {
+    return;
+  }
+  commitUpdate(
+    instance: RNGridRow,
+    updatePayload: any,
+    oldProps: GridRowProps,
+    newProps: GridRowProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const GridRow = registerComponent<GridRowProps>(new GridRowConfig());