Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fbd6a53

Browse files
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

Lines changed: 7 additions & 0 deletions
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) {
Lines changed: 47 additions & 0 deletions
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

Lines changed: 47 additions & 0 deletions
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

Lines changed: 77 additions & 0 deletions
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

Lines changed: 53 additions & 0 deletions
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());
Lines changed: 63 additions & 0 deletions
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

Lines changed: 47 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /