improv: add tabs support (#149)

* wip: implementing RNTab with position and tabs

* tabs: adding the config for tab element

* demo: using tab widget in demo

* Fixes basic tab rendering

* Adds tab item proxy

* packages: using the master release of nodegui

* components: adding mechanism to notify parent of prop update

* demo: changing the tab text on button click

* Simplified implementation of tabitem updates

* tabs: implementing removeTab and insertChild

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

Author: shubhamzanwar

src/components/Tab/RNTab.ts

@@ -0,0 +1,70 @@
+import {
+  QTabWidget,
+  QTabWidgetSignals,
+  TabPosition,
+  QIcon,
+  NodeWidget
+} from "@nodegui/nodegui";
+import { ViewProps, setViewProps } from "../View/RNView";
+import { RNComponent } from "../config";
+import { RNTabItem, setTabItemProps } from "../TabItem/RNTabItem";
+
+export interface TabProps extends ViewProps<QTabWidgetSignals> {
+  tabPosition?: TabPosition;
+}
+
+/**
+ * @ignore
+ */
+export const setTabProps = (
+  widget: RNTab,
+  newProps: TabProps,
+  oldProps: TabProps
+) => {
+  const setter: TabProps = {
+    set tabPosition(value: TabPosition) {
+      widget.setTabPosition(value);
+    }
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNTab extends QTabWidget implements RNComponent {
+  setProps(newProps: TabProps, oldProps: TabProps): void {
+    setTabProps(this, newProps, oldProps);
+  }
+
+  appendInitialChild(tabItem: RNTabItem): void {
+    if (!(tabItem instanceof RNTabItem)) {
+      throw new Error("Children of tab should be of type TabItem");
+    }
+
+    if (tabItem.actualTabWidget) {
+      this.addTab(tabItem.actualTabWidget, new QIcon(), "");
+      tabItem.parentTab = this;
+      setTabItemProps(tabItem, this, tabItem.initialProps, {});
+    }
+  }
+  appendChild(child: RNTabItem): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: RNTabItem, beforeChild: RNTabItem): void {
+    if (!(child instanceof RNTabItem)) {
+      throw new Error("Children of tab should be of type TabItem");
+    }
+    // uncomment below code after new release of nodegui containing insertTab
+    // const index = this.indexOf(beforeChild.actualTabWidget as NodeWidget<any>);
+    // this.insertTab(index, child.actualTabWidget, new QIcon(), "");
+    // child.parentTab = this;
+    // setTabItemProps(child, this, child.initialProps, {});
+  }
+  removeChild(child: RNTabItem): void {
+    const childIndex = this.indexOf(child.actualTabWidget as NodeWidget<any>);
+    this.removeTab(childIndex);
+  }
+  static tagName = "tabwidget";
+}

src/components/Tab/index.ts

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

src/components/TabItem/RNTabItem.ts

@@ -0,0 +1,72 @@
+import { NodeWidget, QIcon, Component } from "@nodegui/nodegui";
+import { RNComponent, RNProps } from "../config";
+import { RNTab } from "../Tab/RNTab";
+
+export interface TabItemProps {
+  title?: string;
+  icon?: QIcon;
+}
+
+/**
+ * @ignore
+ */
+export const setTabItemProps = (
+  tabItem: RNTabItem,
+  parentTab: RNTab,
+  newProps: TabItemProps,
+  oldProps: TabItemProps
+) => {
+  if (!tabItem.actualTabWidget) {
+    return;
+  }
+  const tabIndex = parentTab.indexOf(tabItem.actualTabWidget);
+  if (tabIndex < 0) {
+    console.error("TabItem is not part of the parent tab it references to");
+    return;
+  }
+
+  const setter: TabItemProps = {
+    set title(text: string) {
+      parentTab.setTabText(tabIndex, text);
+    },
+    set icon(qicon: QIcon) {
+      parentTab.setTabIcon(tabIndex, qicon);
+    }
+  };
+  Object.assign(setter, newProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNTabItem extends Component implements RNComponent {
+  native: any;
+  actualTabWidget?: NodeWidget<any>;
+  initialProps: TabItemProps = {};
+  parentTab?: RNTab;
+
+  setProps(newProps: TabItemProps, oldProps: TabItemProps): void {
+    if (this.parentTab) {
+      setTabItemProps(this, this.parentTab, newProps, oldProps);
+    } else {
+      this.initialProps = newProps;
+    }
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    if (this.actualTabWidget) {
+      throw new Error("Tab Item can have only one child");
+    }
+    this.actualTabWidget = 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 {
+    child.close();
+    delete this.actualTabWidget;
+  }
+  static tagName: string = "tabitem";
+}

src/components/TabItem/index.ts

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

src/components/config.ts

@@ -1,22 +1,20 @@
-import { NodeWidget } from "@nodegui/nodegui";
+import { NodeWidget, Component } from "@nodegui/nodegui";
 import { Fiber } from "react-reconciler";
 import { AppContainer } from "../reconciler";
 
 type UpdatePayload = any;
 
 export interface RNProps {}
-export abstract class RNWidget extends NodeWidget<any> implements RNComponent {
+
+export abstract class RNComponent {
   static tagName: string;
   abstract setProps(newProps: RNProps, oldProps: RNProps): void;
-  abstract appendInitialChild(child: NodeWidget<any>): void;
-  abstract appendChild(child: NodeWidget<any>): void;
-  abstract insertBefore(
-    child: NodeWidget<any>,
-    beforeChild: NodeWidget<any>
-  ): void;
-  abstract removeChild(child: NodeWidget<any>): void;
+  abstract appendInitialChild(child: Component): void;
+  abstract appendChild(child: Component): void;
+  abstract insertBefore(child: Component, beforeChild: Component): void;
+  abstract removeChild(child: Component): void;
 }
-export abstract class RNComponent {
+export abstract class RNWidget extends NodeWidget<any> implements RNComponent {
   static tagName: string;
   abstract setProps(newProps: RNProps, oldProps: RNProps): void;
   abstract appendInitialChild(child: NodeWidget<any>): void;
@@ -35,9 +33,9 @@ export abstract class ComponentConfig {
   abstract shouldSetTextContent(nextProps: RNProps): boolean;
   abstract createInstance(
     newProps: RNProps,
-    rootInstance: AppContainer,
-    context: any,
-    workInProgress: Fiber
+    rootInstance?: AppContainer,
+    context?: any,
+    workInProgress?: Fiber
   ): RNComponent;
   finalizeInitialChildren(
     instance: RNComponent,

src/demo.tsx

@@ -1,14 +1,16 @@
-import React from "react";
+import React, {useState} from "react";
 import {
   Renderer,
   Button,
   Window,
+  TabItem,
   View,
   AnimatedImage,
   ComboBox,
-  Text
+  Text,
+  Tabs
 } from "./index";
-import { QIcon, QVariant, QPushButtonSignals } from "@nodegui/nodegui";
+import { QIcon, QVariant, QPushButtonSignals, QSize } from "@nodegui/nodegui";
 import { useEventHandler } from "./hooks";
 
 const items = [
@@ -23,33 +25,33 @@ const items = [
 ];
 
 const App = () => {
+  const [titleCount, setTitleCount] = useState(0);
   const handler = useEventHandler<QPushButtonSignals>(
     {
-      clicked: clicked => { console.log("clicked"); }
+      clicked: () => {
+        console.log(titleCount);
+        setTitleCount(titleCount + 1);
+      }
     },
-    []
+    [titleCount]
   );
+  // TODO: need to figure out a way to add tab title and icon
   return (
     <Window>
-      <View style={containerStyle}>
-        <Text openExternalLinks={true}>
-          {`<a 
-              style="color: white" 
-              href="https://react.nodegui.org/docs/guides/getting-started/">
-            docs
-          </a>`}
-        </Text>
-        <View on={{}}>
-          <Button on={handler} style={buttonStyle} text={"Hello"} />
-          <Button style={buttonStyle} text={"World"} />
-        </View>
-        <ComboBox items={items} />
-        {/* commenting this out while I still figure out the error;
-        <AnimatedImage
-          style="border: 1px solid blue; flex:1;"
-          src="/Users/atulr/Project/nodegui/nodegui/src/lib/QtGui/__tests__/assets/fine.gif"
-        /> */}
-      </View>
+      <Tabs tabPosition={0}>
+        <TabItem
+          title={`title-${titleCount}`}
+          icon={
+            new QIcon(
+              "/Users/atulr/Project/nodegui/nodegui/src/lib/QtGui/__tests__/assets/nodegui.png"
+            )
+          }
+        >
+          <View>
+            <Button on={handler} style={buttonStyle} text={"change title"} />
+          </View>
+        </TabItem>
+      </Tabs>
     </Window>
   );
 };

src/index.ts

@@ -15,5 +15,7 @@ export { Dial } from "./components/Dial";
 export { SpinBox } from "./components/SpinBox";
 export { ScrollArea } from "./components/ScrollArea";
 export { ComboBox } from "./components/ComboBox";
+export { Tabs } from "./components/Tab";
+export { TabItem } from "./components/TabItem";
 export { useEventHandler } from "./hooks";
 export { hot, appProxy } from "./development/hot-reload";