Add List and ListItem using QListWidget and QListWidgetItem

src/components/List/RNList.ts

@@ -0,0 +1,58 @@
+import { FlexLayout, QListWidget, QListWidgetSignals } from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNComponent } from "../config";
+import { RNListItem } from "../ListItem/RNListItem";
+
+
+export interface ListProps extends ViewProps<QListWidgetSignals> {
+}
+
+type CustomListProps = ListProps;
+
+
+/**
+ * @ignore
+  */
+export const setListProps = (widget: RNList, newProps: CustomListProps, oldProps: CustomListProps) => {
+
+  const setter: CustomListProps = {
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+  */
+export class RNList extends QListWidget implements RNComponent {
+  setProps(newProps: CustomListProps, oldProps: CustomListProps): void {
+    setListProps(this, newProps, oldProps);
+  }
+  removeChild(child: RNListItem): void {
+    const row = this.row(child);
+    this.takeItem(row);
+  }
+  appendInitialChild(child: RNListItem): void {
+    this.appendChild(child);
+  }
+  appendChild(child: RNListItem): void {
+    if (!this.layout) {
+      this.setLayout(new FlexLayout());
+    }
+
+    if (!(child instanceof RNListItem)) {
+      throw new Error("Children of list should be of type ListItem");
+    }
+
+    this.addItem(child);
+    if (child.actualListItemWidget) {
+      child.setSizeHint(child.actualListItemWidget.size());
+      this.setItemWidget(child, child.actualListItemWidget);
+    }
+  }
+  insertBefore(child: RNListItem, beforeChild: RNListItem): void {
+    const row = this.row(beforeChild);
+    this.insertItem(row, child);
+  }
+  static tagName = "list";
+}

src/components/List/index.ts

@@ -0,0 +1,43 @@
+import { registerComponent, ComponentConfig } from "../config";
+import { Fiber } from "react-reconciler";
+import { RNList, ListProps } from "./RNList";
+import { AppContainer } from "../../reconciler";
+
+class ListConfig extends ComponentConfig {
+  tagName = RNList.tagName;
+  shouldSetTextContent(nextProps: ListProps): boolean {
+    return false;
+  }
+  createInstance(newProps: ListProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNList {
+    const widget = new RNList();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNList, newProps: ListProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNList, updatePayload: any, oldProps: ListProps, newProps: ListProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * React implementation of nodegui's [QListWidget](https://docs.nodegui.org/docs/api/generated/classes/qlistwidget/)
+ * @example
+ * ```javascriptreact
+ * return (
+ *    <List>
+        <ListItem text="NodeGui is great" />
+        <ListItem text="This item has a child">
+          <View>
+            <Text>Hello World</Text>
+          </View>
+        </ListItem>
+      </List>
+ * )
+ * ```
+ */
+
+export const List = registerComponent<ListProps>(new ListConfig());

src/components/ListItem/RNListItem.ts

@@ -0,0 +1,59 @@
+import { NodeWidget, QListWidgetItem, QIcon } from "@nodegui/nodegui";
+import { RNComponent } from "../config";
+
+export interface ListItemProps {
+  title?: string;
+  icon?: QIcon;
+}
+
+/**
+ * @ignore
+  */
+export const setListItemProps = (
+  widget: RNListItem,
+  newProps: ListItemProps,
+  oldProps: ListItemProps
+) => {
+  const setter: ListItemProps = {
+    set title(text: string) {
+      widget.setText(text);
+    },
+    set icon(qicon: QIcon) {
+      widget.setIcon(qicon);
+    }
+  };
+  Object.assign(setter, newProps);
+};
+
+/**
+ * @ignore
+  */
+export class RNListItem extends QListWidgetItem implements RNComponent {
+  native: any;
+  actualListItemWidget?: NodeWidget<any>;
+
+  setProps(newProps: ListItemProps, oldProps: ListItemProps): void {
+    setListItemProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    if (this.actualListItemWidget) {
+      throw new Error("ListItem can have only one child");
+    }
+    this.actualListItemWidget = 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 {
+    if (child) {
+      child.close();
+    }
+    if (this.actualListItemWidget) {
+      delete this.actualListItemWidget;
+    }
+  }
+  static tagName: string = "listitem";
+}

src/components/ListItem/index.ts

@@ -0,0 +1,40 @@
+import { Fiber } from "react-reconciler";
+import { registerComponent, ComponentConfig } from "../config";
+import { RNListItem, ListItemProps } from "./RNListItem";
+import { AppContainer } from "../../reconciler";
+
+class ListItemConfig extends ComponentConfig {
+  tagName = RNListItem.tagName;
+  shouldSetTextContent(nextProps: ListItemProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: ListItemProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNListItem {
+    const item = new RNListItem();
+    item.setProps(newProps, {});
+    return item;
+  }
+  finalizeInitialChildren(
+    instance: RNListItem,
+    newProps: ListItemProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return false;
+  }
+  commitUpdate(
+    instance: RNListItem,
+    updatePayload: any,
+    oldProps: ListItemProps,
+    newProps: ListItemProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const ListItem = registerComponent<ListItemProps>(new ListItemConfig());

src/index.ts

@@ -32,6 +32,8 @@ export { InputDialog } from "./components/InputDialog";
 export { ProgressDialog } from "./components/ProgressDialog";
 export { Table } from "./components/Table";
 export { TableItem } from "./components/TableItem";
+export { List } from "./components/List";
+export { ListItem } from "./components/ListItem";
 export { ErrorPrompt } from "./components/ErrorPrompt"
 export { useEventHandler } from "./hooks";
 export { Renderer } from "./renderer";