From 612afcbb86caccf64d17bdcfd0d9b47a27c65617 Mon Sep 17 00:00:00 2001 From: KRTirtho Date: Wed, 24 Mar 2021 23:10:52 +0600 Subject: [PATCH 1/5] Dialog component created & RNView, RNBoxView was tweaked for Dialog --- src/components/BoxView/RNBoxView.ts | 7 +++ src/components/Dialog/RNDialog.ts | 69 +++++++++++++++++++++++++++++ src/components/Dialog/index.ts | 53 ++++++++++++++++++++++ src/components/View/RNView.ts | 45 +++++-------------- src/demo.tsx | 13 ++++-- src/index.ts | 1 + 6 files changed, 151 insertions(+), 37 deletions(-) create mode 100644 src/components/Dialog/RNDialog.ts create mode 100644 src/components/Dialog/index.ts diff --git a/src/components/BoxView/RNBoxView.ts b/src/components/BoxView/RNBoxView.ts index d748faed..9cc7e455 100644 --- a/src/components/BoxView/RNBoxView.ts +++ b/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 { direction?: Direction; @@ -50,6 +51,9 @@ export class RNBoxView extends QWidget implements RNComponent { this.appendChild(child); } appendChild(child: NodeWidget): 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, beforeChild: NodeWidget): void { + if (child instanceof NodeDialog) { + return; + } const prevIndex = this.children.indexOf(beforeChild); if (prevIndex === -1) { diff --git a/src/components/Dialog/RNDialog.ts b/src/components/Dialog/RNDialog.ts new file mode 100644 index 00000000..c68e39c4 --- /dev/null +++ b/src/components/Dialog/RNDialog.ts @@ -0,0 +1,69 @@ +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 extends ViewProps { + open?: boolean; + font?: QFont; + focus?: FocusReason; + modal?: boolean; + enableSizeGrip?: boolean; +} + +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 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): void { + this.appendChild(child); + } + appendChild(child: NodeWidget): 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, beforeChild: NodeWidget): void { + if (child! instanceof NodeDialog) { + this.appendChild(child); + } + } + removeChild(child: NodeWidget): void { + if (!this.layout) { + console.warn("parent has no layout to remove child from"); + return; + } + this.layout.removeWidget(child); + child.close(); + } + static tagName = "dialog"; +} diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts new file mode 100644 index 00000000..365febaf --- /dev/null +++ b/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 ( + * + * + * {....other components} + * + * + diff --git a/src/index.ts b/src/index.ts index 4f002c62..78c3d63a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,6 +24,7 @@ export { ComboBox } from "./components/ComboBox"; export { SystemTrayIcon } from "./components/SystemTrayIcon"; export { Tabs } from "./components/Tab"; export { TabItem } from "./components/TabItem"; +export { Dialog } from "./components/Dialog"; export { useEventHandler } from "./hooks"; export { Renderer } from "./renderer"; export { hot, appProxy } from "./development/hot-reload"; From cb06a56bf16f8661663609599f44294ef2b129cb Mon Sep 17 00:00:00 2001 From: KRTirtho Date: Fri, 26 Mar 2021 11:05:13 +0600 Subject: [PATCH 2/5] Added Components: - FileDialog - InputDialog - ProgressDialog Edited: - demo file for testing the dialogs --- src/components/Dialog/RNDialog.ts | 4 +- src/components/FileDialog/RNFileDialog.ts | 63 +++++++++++ src/components/FileDialog/index.ts | 47 ++++++++ src/components/InputDialog/RNInputDialog.ts | 101 ++++++++++++++++++ src/components/InputDialog/index.ts | 47 ++++++++ .../ProgressDialog/RNProgressDialog.ts | 88 +++++++++++++++ src/components/ProgressDialog/index.ts | 47 ++++++++ 7 files changed, 395 insertions(+), 2 deletions(-) create mode 100644 src/components/FileDialog/RNFileDialog.ts create mode 100644 src/components/FileDialog/index.ts create mode 100644 src/components/InputDialog/RNInputDialog.ts create mode 100644 src/components/InputDialog/index.ts create mode 100644 src/components/ProgressDialog/RNProgressDialog.ts create mode 100644 src/components/ProgressDialog/index.ts diff --git a/src/components/Dialog/RNDialog.ts b/src/components/Dialog/RNDialog.ts index c68e39c4..15f21994 100644 --- a/src/components/Dialog/RNDialog.ts +++ b/src/components/Dialog/RNDialog.ts @@ -3,7 +3,7 @@ import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog"; import { RNWidget } from "../config"; import { setViewProps, ViewProps } from "../View/RNView"; -export interface DialogProps extends ViewProps { +export interface DialogProps extends ViewProps { open?: boolean; font?: QFont; focus?: FocusReason; @@ -11,7 +11,7 @@ export interface DialogProps extends ViewProps { enableSizeGrip?: boolean; } -function setDialogProps(widget: RNDialog, newProps: DialogProps, oldProps: DialogProps) { +export function setDialogProps(widget: RNDialog, newProps: DialogProps, oldProps: DialogProps) { const setter: DialogProps = { set open(open: boolean) { open ? widget.open() : widget.close(); diff --git a/src/components/FileDialog/RNFileDialog.ts b/src/components/FileDialog/RNFileDialog.ts new file mode 100644 index 00000000..ed9d35d2 --- /dev/null +++ b/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 { + option: Option; + on: boolean; +} + +export interface FileDialogProps extends DialogProps{ + 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): void { + throwUnsupported(this); + } + appendChild(child: NodeWidget): void { + throwUnsupported(this); + } + insertBefore(child: NodeWidget, beforeChild: NodeWidget): void { + throwUnsupported(this); + } + removeChild(child: NodeWidget): void { + throwUnsupported(this); + } + static tagName = "file-dialog"; +} diff --git a/src/components/FileDialog/index.ts b/src/components/FileDialog/index.ts new file mode 100644 index 00000000..146c4f4e --- /dev/null +++ b/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({ + * fileSelected(file){ + * //....do whatever + * } + * }, [....deps]) + * return ( + * + * + * + From d1f9823153e04e40bafc576456dc586d8039bc42 Mon Sep 17 00:00:00 2001 From: KRTirtho Date: Fri, 26 Mar 2021 12:13:24 +0600 Subject: [PATCH 4/5] updated ProgressBar Example --- src/components/ProgressDialog/index.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/ProgressDialog/index.ts b/src/components/ProgressDialog/index.ts index 7864bd94..a9da8b2f 100644 --- a/src/components/ProgressDialog/index.ts +++ b/src/components/ProgressDialog/index.ts @@ -31,13 +31,25 @@ class ProgressDialogConfig extends ComponentConfig { * const [open, setOpen] = useState(false); * const events = useEventHandler({ * canceled(){ + * setOpen(false); * //....do whatever * } * }, [....deps]) + * const [value, setValue] = useState(0); * return ( * - * + * *