Skip to content

Commit fbd6a53

Browse files
KRTirthoKRTirtho
authored
Dialog & all its inherited widget added (#344)
* Dialog component created & RNView, RNBoxView was tweaked for Dialog * Added Components: - FileDialog - InputDialog - ProgressDialog Edited: - demo file for testing the dialogs * Added Compoents: - ColorDialog - FontDialog Edited: - Dialog (for adding some props) * updated ProgressBar Example * newly created components were exported
1 parent 61e5720 commit fbd6a53

File tree

15 files changed

+746
-34
lines changed

15 files changed

+746
-34
lines changed

‎src/components/BoxView/RNBoxView.ts

+7
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from "@nodegui/nodegui";
88
import { ViewProps, setViewProps } from "../View/RNView";
99
import { RNComponent } from "../config";
10+
import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
1011

1112
export interface BoxViewProps extends ViewProps<QBoxLayoutSignals> {
1213
direction?: Direction;
@@ -50,6 +51,9 @@ export class RNBoxView extends QWidget implements RNComponent {
5051
this.appendChild(child);
5152
}
5253
appendChild(child: NodeWidget<any>): void {
54+
if (child instanceof NodeDialog) {
55+
return;
56+
}
5357
const updateChild = () => {
5458
this.layout?.addWidget(child);
5559
this.children.push(child);
@@ -73,6 +77,9 @@ export class RNBoxView extends QWidget implements RNComponent {
7377
updateChild();
7478
}
7579
insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
80+
if (child instanceof NodeDialog) {
81+
return;
82+
}
7683
const prevIndex = this.children.indexOf(beforeChild);
7784

7885
if (prevIndex === -1) {

‎src/components/ColorDialog/RNColorDialog.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { NodeWidget, QColor, QColorDialog, QColorDialogSignals } from "@nodegui/nodegui";
2+
import { ColorDialogOption } from "@nodegui/nodegui/dist/lib/QtWidgets/QColorDialog";
3+
import { throwUnsupported } from "../../utils/helpers";
4+
import { RNWidget } from "../config";
5+
import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
6+
import { DialogOption } from "../FileDialog/RNFileDialog";
7+
8+
export interface ColorDialogProps extends DialogProps<QColorDialogSignals> {
9+
currentColor?: QColor;
10+
option?: DialogOption<ColorDialogOption>;
11+
options?: ColorDialogOption;
12+
}
13+
14+
function setColorDialogProps(widget: RNColorDialog, newProps: ColorDialogProps, oldProps: ColorDialogProps) {
15+
const setter: ColorDialogProps = {
16+
set currentColor(currentColor: QColor) {
17+
widget.setCurrentColor(currentColor);
18+
},
19+
set option({ option, on }: DialogOption<ColorDialogOption>) {
20+
widget.setOption(option, on);
21+
},
22+
set options(options: ColorDialogOption) {
23+
widget.setOptions(options);
24+
},
25+
};
26+
Object.assign(setter, newProps);
27+
setDialogProps(widget, newProps, oldProps);
28+
}
29+
30+
export class RNColorDialog extends QColorDialog implements RNWidget {
31+
setProps(newProps: ColorDialogProps, oldProps: ColorDialogProps): void {
32+
setColorDialogProps(this, newProps, oldProps);
33+
}
34+
appendInitialChild(child: NodeWidget<any>): void {
35+
throwUnsupported(this);
36+
}
37+
appendChild(child: NodeWidget<any>): void {
38+
throwUnsupported(this);
39+
}
40+
insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
41+
throwUnsupported(this);
42+
}
43+
removeChild(child: NodeWidget<any>): void {
44+
throwUnsupported(this);
45+
}
46+
static tagName = "color-dialog";
47+
}

‎src/components/ColorDialog/index.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Fiber } from "react-reconciler";
2+
import { AppContainer } from "../../reconciler";
3+
import { ComponentConfig, registerComponent } from "../config";
4+
import { RNColorDialog, ColorDialogProps } from "./RNColorDialog";
5+
6+
class ColorDialogConfig extends ComponentConfig {
7+
tagName: string = RNColorDialog.tagName;
8+
shouldSetTextContent(nextProps: ColorDialogProps): boolean {
9+
return false;
10+
}
11+
createInstance(newProps: ColorDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNColorDialog {
12+
const widget = new RNColorDialog();
13+
widget.setProps(newProps, {});
14+
return widget;
15+
}
16+
commitMount(instance: RNColorDialog, newProps: ColorDialogProps, internalInstanceHandle: any): void {
17+
if (newProps.visible !== false && newProps.open !== false) {
18+
instance.show();
19+
}
20+
return;
21+
}
22+
commitUpdate(instance: RNColorDialog, updatePayload: any, oldProps: ColorDialogProps, newProps: ColorDialogProps, finishedWork: Fiber): void {
23+
instance.setProps(newProps, oldProps);
24+
}
25+
}
26+
/**
27+
* Pop up ColorDialog inheriting the functionality of nodegui's `QColorDialog`
28+
* @example
29+
* ```javascript
30+
* function ColorDialogExample(props){
31+
* const [open, setOpen] = useState(false);
32+
* const events = useEventHandler<QColorDialogSignals>({
33+
* colorSelected(color){
34+
* //....do whatever
35+
* }
36+
* }, [....deps])
37+
* return (
38+
* <View>
39+
* <ColorDialog open={open} on={events}/>
40+
* <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
41+
* </View>
42+
* )
43+
* }
44+
* ```
45+
*/
46+
47+
export const ColorDialog = registerComponent<ColorDialogProps>(new ColorDialogConfig());

‎src/components/Dialog/RNDialog.ts

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { FlexLayout, FocusReason, NodeWidget, QDialog, QDialogSignals, QFont } from "@nodegui/nodegui";
2+
import { NodeDialog } from "@nodegui/nodegui/dist/lib/QtWidgets/QDialog";
3+
import { RNWidget } from "../config";
4+
import { setViewProps, ViewProps } from "../View/RNView";
5+
6+
export interface DialogProps<T = QDialogSignals> extends ViewProps<T> {
7+
open?: boolean;
8+
font?: QFont;
9+
focus?: FocusReason;
10+
modal?: boolean;
11+
result?: number;
12+
reject?: boolean;
13+
enableSizeGrip?: boolean;
14+
}
15+
16+
export function setDialogProps(widget: RNDialog, newProps: DialogProps, oldProps: DialogProps) {
17+
const setter: DialogProps = {
18+
set open(open: boolean) {
19+
open ? widget.open() : widget.close();
20+
},
21+
set font(font: QFont) {
22+
widget.setFont(font);
23+
},
24+
set focus(focus: FocusReason) {
25+
widget.setFocus(focus);
26+
},
27+
set modal(modal: boolean) {
28+
widget.setModal(modal);
29+
},
30+
set reject(reject: boolean) {
31+
reject && widget.reject();
32+
},
33+
set result(result: number) {
34+
widget.setResult(result);
35+
},
36+
set enableSizeGrip(sizeGrip: boolean) {
37+
widget.setSizeGripEnabled(sizeGrip);
38+
},
39+
};
40+
Object.assign(setter, newProps);
41+
setViewProps(widget, newProps, oldProps);
42+
}
43+
44+
export class RNDialog extends QDialog implements RNWidget {
45+
setProps(newProps: DialogProps, oldProps: DialogProps): void {
46+
setDialogProps(this, newProps, oldProps);
47+
}
48+
appendInitialChild(child: NodeWidget<any>): void {
49+
this.appendChild(child);
50+
}
51+
appendChild(child: NodeWidget<any>): void {
52+
if (!child || child instanceof NodeDialog) {
53+
return;
54+
}
55+
if (!this.layout) {
56+
const flexLayout = new FlexLayout();
57+
flexLayout.setFlexNode(this.getFlexNode());
58+
this.setLayout(flexLayout);
59+
this.layout = flexLayout;
60+
}
61+
this.layout.addWidget(child);
62+
}
63+
insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
64+
if (child! instanceof NodeDialog) {
65+
this.appendChild(child);
66+
}
67+
}
68+
removeChild(child: NodeWidget<any>): void {
69+
if (!this.layout) {
70+
console.warn("parent has no layout to remove child from");
71+
return;
72+
}
73+
this.layout.removeWidget(child);
74+
child.close();
75+
}
76+
static tagName = "dialog";
77+
}

‎src/components/Dialog/index.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Fiber } from "react-reconciler";
2+
import { AppContainer } from "../../reconciler";
3+
import { ComponentConfig, registerComponent } from "../config";
4+
import { DialogProps, RNDialog } from "./RNDialog";
5+
6+
class DialogConfig extends ComponentConfig {
7+
tagName: string=RNDialog.tagName;
8+
shouldSetTextContent(nextProps: DialogProps): boolean {
9+
return false;
10+
}
11+
finalizeInitialChildren(
12+
instance: RNDialog,
13+
newProps: DialogProps,
14+
rootContainerInstance: AppContainer,
15+
context: any
16+
): boolean {
17+
return true;
18+
}
19+
createInstance(newProps: DialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNDialog {
20+
const widget = new RNDialog();
21+
widget.setProps(newProps, {});
22+
return widget;
23+
}
24+
commitMount(instance: RNDialog, newProps: DialogProps, internalInstanceHandle: any): void {
25+
if (newProps.visible !== false && newProps.open !== false) {
26+
instance.show();
27+
}
28+
return;
29+
}
30+
commitUpdate(instance: RNDialog, updatePayload: any, oldProps: DialogProps, newProps: DialogProps, finishedWork: Fiber): void {
31+
instance.setProps(newProps, oldProps);
32+
}
33+
}
34+
/**
35+
* Pop up Dialog inheriting the functionality of nodegui's `QDialog`
36+
* @param minSize set minimum height, width to prevent errors
37+
* @example
38+
* ```javascript
39+
* function DialogExample(props){
40+
* const [open, setOpen] = useState(false);
41+
* return (
42+
* <View>
43+
* <Dialog open={open}>
44+
* <View>{....other components}</View>
45+
* </Dialog>
46+
* <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
47+
* </View>
48+
* )
49+
* }
50+
* ```
51+
*/
52+
53+
export const Dialog = registerComponent<DialogProps>(new DialogConfig());

‎src/components/FileDialog/RNFileDialog.ts

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { NodeWidget, QFileDialog, DialogLabel, QFileDialogSignals, Option } from "@nodegui/nodegui";
2+
import { throwUnsupported } from "../../utils/helpers";
3+
import { RNWidget } from "../config";
4+
import { DialogProps, setDialogProps } from "../Dialog/RNDialog";
5+
6+
export interface FileDialogLabelText{
7+
label: DialogLabel,
8+
text: string
9+
}
10+
11+
export interface DialogOption<T=Option> {
12+
option: T;
13+
on: boolean;
14+
}
15+
16+
export interface FileDialogProps extends DialogProps<QFileDialogSignals>{
17+
defaultSuffix?: string;
18+
supportedSchemes?: string[];
19+
labelText?: FileDialogLabelText;
20+
option?: DialogOption,
21+
options?: Option
22+
}
23+
24+
function setFileDialogProps(widget: RNFileDialog, newProps: FileDialogProps, oldProps: FileDialogProps) {
25+
const setter: FileDialogProps = {
26+
set defaultSuffix(defaultSuffix: string) {
27+
widget.setDefaultSuffix(defaultSuffix);
28+
},
29+
set supportedSchemes(supportedSchemes: string[]) {
30+
widget.setSupportedSchemes(supportedSchemes);
31+
},
32+
set labelText(labelText: FileDialogLabelText) {
33+
widget.setLabelText(labelText.label, labelText.text);
34+
},
35+
set option({option, on}: DialogOption) {
36+
widget.setOption(option, on)
37+
},
38+
set options(options: Option) {
39+
widget.setOptions(options);
40+
}
41+
};
42+
Object.assign(setter, newProps);
43+
setDialogProps(widget, newProps, oldProps);
44+
}
45+
46+
export class RNFileDialog extends QFileDialog implements RNWidget {
47+
setProps(newProps: FileDialogProps, oldProps: FileDialogProps): void {
48+
setFileDialogProps(this, newProps, oldProps);
49+
}
50+
appendInitialChild(child: NodeWidget<any>): void {
51+
throwUnsupported(this);
52+
}
53+
appendChild(child: NodeWidget<any>): void {
54+
throwUnsupported(this);
55+
}
56+
insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
57+
throwUnsupported(this);
58+
}
59+
removeChild(child: NodeWidget<any>): void {
60+
throwUnsupported(this);
61+
}
62+
static tagName = "file-dialog";
63+
}

‎src/components/FileDialog/index.ts

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Fiber } from "react-reconciler";
2+
import { AppContainer } from "../../reconciler";
3+
import { ComponentConfig, registerComponent } from "../config";
4+
import { RNFileDialog, FileDialogProps } from "./RNFileDialog";
5+
6+
class FileDialogConfig extends ComponentConfig {
7+
tagName: string=RNFileDialog.tagName;
8+
shouldSetTextContent(nextProps: FileDialogProps): boolean {
9+
return false;
10+
}
11+
createInstance(newProps: FileDialogProps, rootInstance: AppContainer, context: any, workInProgress: Fiber): RNFileDialog {
12+
const widget = new RNFileDialog();
13+
widget.setProps(newProps, {});
14+
return widget;
15+
}
16+
commitMount(instance: RNFileDialog, newProps: FileDialogProps, internalInstanceHandle: any): void {
17+
if (newProps.visible !== false && newProps.open !== false) {
18+
instance.show();
19+
}
20+
return;
21+
}
22+
commitUpdate(instance: RNFileDialog, updatePayload: any, oldProps: FileDialogProps, newProps: FileDialogProps, finishedWork: Fiber): void {
23+
instance.setProps(newProps, oldProps);
24+
}
25+
}
26+
/**
27+
* Pop up FileDialog inheriting the functionality of nodegui's `QFileDialog`
28+
* @example
29+
* ```javascript
30+
* function DialogExample(props){
31+
* const [open, setOpen] = useState(false);
32+
* const events = useEventHandler<QFileDialogSignals>({
33+
* fileSelected(file){
34+
* //....do whatever
35+
* }
36+
* }, [....deps])
37+
* return (
38+
* <View>
39+
* <FileDialog open={open} on={events}/>
40+
* <Button text="open dialog" on={{clicked:()=>setOpen(true)}}/>
41+
* </View>
42+
* )
43+
* }
44+
* ```
45+
*/
46+
47+
export const FileDialog = registerComponent<FileDialogProps>(new FileDialogConfig());

0 commit comments

Comments
 (0)