git0 0.2.10 → 0.2.11

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/GridColumn/RNGridColumn.ts

@@ -0,0 +1,95 @@
+import type { FunctionComponentElement } from "../../../utils/decoupleFromReact";
+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";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/GridColumn/index.ts

@@ -0,0 +1,49 @@
+import type { Fiber } from "../../../utils/decoupleFromReact";
+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()
+);

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/GridRow/RNGridRow.ts

@@ -0,0 +1,141 @@
+import type { FunctionComponentElement } from "../../../utils/decoupleFromReact";
+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";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/GridRow/index.ts

@@ -0,0 +1,47 @@
+import type { Fiber } from "../../../utils/decoupleFromReact";
+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());

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/RNGridView.ts

@@ -0,0 +1,185 @@
+import type { FunctionComponentElement } from "../../utils/decoupleFromReact";
+import { QGridLayoutSignals, QGridLayout, QWidget } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNComponent } from "../config";
+import { RNGridRow, GridRowProps } from "./GridRow/RNGridRow";
+import {
+  DataWithOffset,
+  offsetForIndex,
+  updateDisplacedChildren,
+} from "./utils";
+
+export type GridViewColumnProps = {
+  [ColumnIndex: number]: {
+    stretch?: number;
+    minWidth?: number;
+  };
+};
+
+export type GridViewRowProps = {
+  [RowIndex: number]: {
+    stretch?: number;
+    minHeight?: number;
+  };
+};
+
+export interface GridViewProps extends ViewProps<QGridLayoutSignals> {
+  children:
+    | Array<FunctionComponentElement<GridRowProps>>
+    | FunctionComponentElement<GridRowProps>;
+
+  columnProps?: GridViewColumnProps;
+  rowProps?: GridViewRowProps;
+
+  horizontalSpacing?: number;
+  verticalSpacing?: number;
+}
+
+const setGridViewProps = (
+  widget: RNGridView,
+  newProps: Omit<GridViewProps, "children">,
+  oldProps: Omit<GridViewProps, "children">
+) => {
+  const setter: Omit<GridViewProps, "children"> = {
+    set horizontalSpacing(spacing: number) {
+      widget.layout?.setHorizontalSpacing(spacing);
+    },
+    set verticalSpacing(spacing: number) {
+      widget.layout?.setVerticalSpacing(spacing);
+    },
+    set columnProps(props: GridViewColumnProps) {
+      for (const indexString of Object.keys(props)) {
+        const index = parseInt(indexString, 10);
+        const { stretch, minWidth } = props[index];
+
+        widget.layout?.setColumnStretch(index, stretch ?? 0);
+        widget.layout?.setColumnMinimumWidth(index, minWidth ?? 0);
+      }
+    },
+    set rowProps(props: GridViewRowProps) {
+      for (const indexString of Object.keys(props)) {
+        const index = parseInt(indexString, 10);
+        const { stretch, minHeight } = props[index];
+
+        widget.layout?.setRowStretch(index, stretch ?? 0);
+        widget.layout?.setRowMinimumHeight(index, minHeight ?? 0);
+      }
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNGridView extends QWidget implements RNComponent {
+  native: any;
+  _layout?: QGridLayout;
+  initialProps?: GridViewProps;
+  childRows: Array<DataWithOffset<RNGridRow>> = [];
+
+  get layout() {
+    return this.layout;
+  }
+
+  set layout(l: QGridLayout) {
+    this._layout = l;
+  }
+
+  updateChildren(startIndex = 0): void {
+    updateDisplacedChildren<RNGridRow, RNGridView>(
+      startIndex,
+      this.childRows,
+      this,
+      "height",
+      "setParentGridAndUpdateProps"
+    );
+  }
+
+  /* RNComponent */
+
+  setProps(newProps: GridViewProps, oldProps: GridViewProps): void {
+    if (this.layout) {
+      setGridViewProps(this, newProps, oldProps);
+    } else {
+      this.initialProps = newProps;
+    }
+  }
+  appendInitialChild(child: RNGridRow): void {
+    this.appendChild(child);
+  }
+  appendChild(child: RNGridRow): void {
+    if (!(child instanceof RNGridRow)) {
+      throw new Error("GridRow is the only supported child of GridView");
+    }
+
+    const updateChild = () => {
+      const offset = offsetForIndex<RNGridRow>(
+        this.childRows.length,
+        this.childRows,
+        "height"
+      );
+
+      child.setParentGridAndUpdateProps(this, offset);
+
+      this.childRows.push({
+        offset,
+        data: child,
+      });
+    };
+
+    if (this.layout) {
+      updateChild();
+
+      return;
+    }
+
+    const layout = new QGridLayout();
+    this.setLayout(layout);
+    this.layout = layout;
+
+    // Newly created layout, so set initial props
+    if (this.initialProps) {
+      setGridViewProps(this, this.initialProps, {});
+    }
+
+    updateChild();
+  }
+  insertBefore(child: RNGridRow, beforeChild: RNGridRow): void {
+    const prevIndex = this.childRows.findIndex(
+      ({ data }) => data === beforeChild
+    );
+
+    if (prevIndex === -1) {
+      throw new Error(
+        "Attempted to insert child GridRow before nonexistent row"
+      );
+    }
+
+    const offset = offsetForIndex<RNGridRow>(
+      prevIndex,
+      this.childRows,
+      "height"
+    );
+
+    this.childRows.splice(prevIndex, 0, {
+      offset,
+      data: child,
+    });
+    // Update displaced children
+    this.updateChildren(prevIndex);
+  }
+  removeChild(child: RNGridRow): void {
+    const prevIndex = this.childRows.findIndex(({ data }) => data === child);
+
+    if (prevIndex !== -1) {
+      this.childRows.splice(prevIndex, 1);
+      this.updateChildren(prevIndex);
+    }
+
+    child.remove();
+    child.parentGrid = undefined;
+  }
+  static tagName: string = "gridview";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/index.ts

@@ -0,0 +1,51 @@
+import { registerComponent, ComponentConfig } from "../config";
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { AppContainer } from "../../reconciler";
+import { RNGridView, GridViewProps } from "./RNGridView";
+
+class GridViewConfig extends ComponentConfig {
+  tagName = RNGridView.tagName;
+  shouldSetTextContent(nextProps: GridViewProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: GridViewProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNGridView {
+    const widget = new RNGridView();
+    widget.setProps(newProps, {
+      children: [],
+    });
+    return widget;
+  }
+  finalizeInitialChildren(
+    instance: RNGridView,
+    newProps: GridViewProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  commitMount(
+    instance: RNGridView,
+    newProps: GridViewProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+  }
+  commitUpdate(
+    instance: RNGridView,
+    updatePayload: any,
+    oldProps: GridViewProps,
+    newProps: GridViewProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const GridView = registerComponent<GridViewProps>(new GridViewConfig());

package/svelte-nodegui/src/dom/react-nodegui/src/components/GridView/utils.ts

@@ -0,0 +1,59 @@
+export interface DataWithOffset<T> {
+  offset: number;
+  data: T;
+}
+
+type SetParentFunc<T> = (parent: T, index: number) => void;
+
+/**
+ * Extract the keys of type `T` matching type `TType`
+ */
+type KeysOfType<T, TType> = {
+  [Key in keyof T]-?: T[Key] extends TType | undefined ? Key : never;
+}[keyof T];
+
+/**
+ * Show TypeScript that the fields we're interested in are of type `TType`
+ */
+type OnlyType<T, TType> = {
+  [Key in KeysOfType<T, TType>]?: TType;
+};
+
+export const offsetForIndex = <T>(
+  index: number,
+  items: Array<DataWithOffset<OnlyType<T, number>>>,
+  sizeKey: keyof OnlyType<T, number>
+) => {
+  let offset = 0;
+
+  if (index > 0) {
+    const previousChild = items[index - 1];
+    offset = previousChild.offset + (previousChild.data[sizeKey] ?? 1);
+  }
+
+  return offset;
+};
+
+type Allowed<TItem, TParent> = OnlyType<TItem, SetParentFunc<TParent>>;
+export function updateDisplacedChildren<TItem, TParent>(
+  startIndex: number,
+  items: Array<
+    DataWithOffset<
+      OnlyType<TItem, number> & Allowed<TItem, TParent>
+    >
+  >,
+  parent: TParent,
+  sizeKey: keyof OnlyType<TItem, number>,
+  setParentFuncKey: keyof Allowed<TItem, TParent>
+) {
+  let offset = offsetForIndex(startIndex, items, sizeKey);
+
+  for (let i = startIndex; i < items.length; i++) {
+    const displacedChild = items[i];
+
+    displacedChild.offset = offset;
+    displacedChild.data[setParentFuncKey]?.(parent, offset);
+
+    offset += displacedChild.data[sizeKey] ?? 1;
+  }
+};