Dialog & all its inherited widget added

src/components/BoxView/RNBoxView.ts

@@ -7,6 +7,7 @@ import {
 } from "@nodegui/nodegui";
 import { ViewProps, setViewProps } from "../View/RNView";
 import { RNComponent } from "../config";
+import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
 
 export interface BoxViewProps extends ViewProps<QBoxLayoutSignals> {
   direction?: Direction;
@@ -50,6 +51,9 @@ export class RNBoxView extends QWidget implements RNComponent {
     this.appendChild(child);
   }
   appendChild(child: NodeWidget<any>): void {
+    if (child instanceof NodeDialog) {
+      return;
+    }
     const updateChild = () => {
       this.layout?.addWidget(child);
       this.children.push(child);
@@ -73,6 +77,9 @@ export class RNBoxView extends QWidget implements RNComponent {
     updateChild();
   }
   insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    if (child instanceof NodeDialog) {
+      return;
+    }
     const prevIndex = this.children.indexOf(beforeChild);
 
     if (prevIndex === -1) {

src/components/ColorDialog/RNColorDialog.ts

@@ -0,0 +1,47 @@
+import { NodeWidget, QColor, QColorDialog, QColorDialogSignals } from "@nodegui/nodegui";
+import { ColorDialogOption } from "@nodegui/nodegui/dist/lib/QtWidgets/QColorDialog";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+import { DialogOption } from "../FileDialog/RNFileDialog";
+
+export interface ColorDialogProps extends DialogProps<QColorDialogSignals> {
+  currentColor?: QColor;
+  option?: DialogOption<ColorDialogOption>;
+  options?: ColorDialogOption;
+}
+
+function setColorDialogProps(widget: RNColorDialog, newProps: ColorDialogProps, oldProps: ColorDialogProps) {
+  const setter: ColorDialogProps = {
+    set currentColor(currentColor: QColor) {
+      widget.setCurrentColor(currentColor);
+    },
+    set option({ option, on }: DialogOption<ColorDialogOption>) {
+      widget.setOption(option, on);
+    },
+    set options(options: ColorDialogOption) {
+      widget.setOptions(options);
+    },
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNColorDialog extends QColorDialog implements RNWidget {
+  setProps(newProps: ColorDialogProps, oldProps: ColorDialogProps): void {
+    setColorDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "color-dialog";
+}

src/components/ColorDialog/index.ts

@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { RNColorDialog, ColorDialogProps } from "./RNColorDialog";
+
+class ColorDialogConfig extends ComponentConfig {
+  tagName: string = RNColorDialog.tagName;
+  shouldSetTextContent(nextProps: ColorDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: ColorDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNColorDialog {
+    const widget = new RNColorDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNColorDialog, newProps: ColorDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNColorDialog, updatePayload: any, oldProps: ColorDialogProps, newProps: ColorDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up ColorDialog inheriting the functionality of nodegui's `QColorDialog`
+ * @example
+ * ```javascript
+ * function ColorDialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QColorDialogSignals>({
+ *    colorSelected(color){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <ColorDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const ColorDialog = registerComponent<ColorDialogProps>(new ColorDialogConfig());

src/components/Dialog/RNDialog.ts

@@ -0,0 +1,77 @@
+import { FlexLayout, FocusReason, NodeWidget, QDialog, QDialogSignals, QFont } from "@nodegui/nodegui";
+import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
+import { RNWidget } from "../config";
+import { setViewProps, ViewProps } from "../View/RNView";
+
+export interface DialogProps<T = QDialogSignals> extends ViewProps<T> {
+  open?: boolean;
+  font?: QFont;
+  focus?: FocusReason;
+  modal?: boolean;
+  result?: number;
+  reject?: boolean;
+  enableSizeGrip?: boolean;
+}
+
+export function setDialogProps(widget: RNDialog, newProps: DialogProps, oldProps: DialogProps) {
+  const setter: DialogProps = {
+    set open(open: boolean) {
+      open ? widget.open() : widget.close();
+    },
+    set font(font: QFont) {
+      widget.setFont(font);
+    },
+    set focus(focus: FocusReason) {
+      widget.setFocus(focus);
+    },
+    set modal(modal: boolean) {
+      widget.setModal(modal);
+    },
+    set reject(reject: boolean) {
+      reject && widget.reject();
+    },
+    set result(result: number) {
+      widget.setResult(result);
+    },
+    set enableSizeGrip(sizeGrip: boolean) {
+      widget.setSizeGripEnabled(sizeGrip);
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(widget, newProps, oldProps);
+}
+
+export class RNDialog extends QDialog implements RNWidget {
+  setProps(newProps: DialogProps, oldProps: DialogProps): void {
+    setDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    this.appendChild(child);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    if (!child || child instanceof NodeDialog) {
+      return;
+    }
+    if (!this.layout) {
+      const flexLayout = new FlexLayout();
+      flexLayout.setFlexNode(this.getFlexNode());
+      this.setLayout(flexLayout);
+      this.layout = flexLayout;
+    }
+    this.layout.addWidget(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    if (child! instanceof NodeDialog) {
+      this.appendChild(child);
+    }
+  }
+  removeChild(child: NodeWidget<any>): void {
+    if (!this.layout) {
+      console.warn("parent has no layout to remove child from");
+      return;
+    }
+    this.layout.removeWidget(child);
+    child.close();
+  }
+  static tagName = "dialog";
+}

src/components/Dialog/index.ts

@@ -0,0 +1,53 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import { DialogProps, RNDialog } from "./RNDialog";
+
+class DialogConfig extends ComponentConfig {
+  tagName: string=RNDialog.tagName;
+  shouldSetTextContent(nextProps: DialogProps): boolean {
+    return false;
+  }
+  finalizeInitialChildren(
+    instance: RNDialog,
+    newProps: DialogProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  createInstance(newProps: DialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNDialog {
+    const widget = new RNDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNDialog, newProps: DialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNDialog, updatePayload: any, oldProps: DialogProps, newProps: DialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up Dialog inheriting the functionality of nodegui's `QDialog`
+ * @param minSize set minimum height, width to prevent errors
+ * @example 
+ * ```javascript
+ * function DialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  return (
+ *    <View>
+ *      <Dialog open={open}>
+ *        <View>{....other components}</View>
+ *      </Dialog>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const Dialog = registerComponent<DialogProps>(new DialogConfig());

src/components/FileDialog/RNFileDialog.ts

@@ -0,0 +1,63 @@
+import { NodeWidget, QFileDialog, DialogLabel, QFileDialogSignals, Option } from "@nodegui/nodegui";
+import { throwUnsupported } from "../../utils/helpers";
+import { RNWidget } from "../config";
+import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
+
+export interface FileDialogLabelText{
+  label: DialogLabel,
+  text: string
+}
+
+export interface DialogOption<T=Option> {
+  option: T;
+  on: boolean;
+}
+
+export interface FileDialogProps extends DialogProps<QFileDialogSignals>{
+  defaultSuffix?: string;
+  supportedSchemes?: string[];
+  labelText?: FileDialogLabelText;
+  option?: DialogOption,
+  options?: Option
+}
+
+function setFileDialogProps(widget: RNFileDialog, newProps: FileDialogProps, oldProps: FileDialogProps) {
+  const setter: FileDialogProps = {
+    set defaultSuffix(defaultSuffix: string) {
+      widget.setDefaultSuffix(defaultSuffix);
+    },
+    set supportedSchemes(supportedSchemes: string[]) {
+      widget.setSupportedSchemes(supportedSchemes);
+    },
+    set labelText(labelText: FileDialogLabelText) {
+      widget.setLabelText(labelText.label, labelText.text);
+    },
+    set option({option, on}: DialogOption) {
+      widget.setOption(option, on)
+    },
+    set options(options: Option) {
+      widget.setOptions(options);
+    }
+  };
+  Object.assign(setter, newProps);
+  setDialogProps(widget, newProps, oldProps);
+}
+
+export class RNFileDialog extends QFileDialog implements RNWidget {
+  setProps(newProps: FileDialogProps, oldProps: FileDialogProps): void {
+    setFileDialogProps(this, newProps, oldProps);
+  }
+  appendInitialChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  removeChild(child: NodeWidget<any>): void {
+    throwUnsupported(this);
+  }
+  static tagName = "file-dialog";
+}

src/components/FileDialog/index.ts

@@ -0,0 +1,47 @@
+import { Fiber } from "react-reconciler";
+import { AppContainer } from "../../reconciler";
+import { ComponentConfig, registerComponent } from "../config";
+import {  RNFileDialog, FileDialogProps } from "./RNFileDialog";
+
+class FileDialogConfig extends ComponentConfig {
+  tagName: string=RNFileDialog.tagName;
+  shouldSetTextContent(nextProps: FileDialogProps): boolean {
+    return false;
+  }
+  createInstance(newProps: FileDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNFileDialog {
+    const widget = new RNFileDialog();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(instance: RNFileDialog, newProps: FileDialogProps, internalInstanceHandle: any): void {
+    if (newProps.visible !== false && newProps.open !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(instance: RNFileDialog, updatePayload: any, oldProps: FileDialogProps, newProps: FileDialogProps, finishedWork: Fiber): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+/**
+ * Pop up FileDialog inheriting the functionality of nodegui's `QFileDialog`
+ * @example 
+ * ```javascript
+ * function DialogExample(props){
+ *  const [open, setOpen] = useState(false);
+ *  const events = useEventHandler<QFileDialogSignals>({
+ *    fileSelected(file){
+ *        //....do whatever
+ *    }
+ *  }, [....deps])
+ *  return (
+ *    <View>
+ *      <FileDialog open={open} on={events}/>
+ *      <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
+ *    </View>
+ *  )
+ * }
+ * ```
+ */
+
+export const FileDialog = registerComponent<FileDialogProps>(new FileDialogConfig());