mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-26 03:01:51 +08:00
feat(modals): Enable modal dialog chaining in IOS (#6637)
* feat(modals): fire close callback after close in IOS * chore(tests): Fix some test depending on the order of events
This commit is contained in:

committed by
Dimitar Topuzov

parent
bc68773bd2
commit
64bccb9bbc
@ -1,32 +1,29 @@
|
||||
import * as pages from "tns-core-modules/ui/page";
|
||||
import * as textField from "tns-core-modules/ui/text-field";
|
||||
import * as observable from "tns-core-modules/data/observable";
|
||||
import { Page, ShownModallyData } from "tns-core-modules/ui/page";
|
||||
import { EventData, fromObject } from "tns-core-modules/data/observable";
|
||||
|
||||
var context: any;
|
||||
var closeCallback: Function;
|
||||
export function onShowingModally(args: ShownModallyData) {
|
||||
console.log("login-page.onShowingModally, context: " + args.context);
|
||||
const page = <Page>args.object;
|
||||
|
||||
var page: pages.Page;
|
||||
var usernameTextField: textField.TextField;
|
||||
var passwordTextField: textField.TextField;
|
||||
|
||||
export function onShownModally(args: pages.ShownModallyData) {
|
||||
console.log("login-page.onShownModally, context: " + args.context);
|
||||
context = args.context;
|
||||
closeCallback = args.closeCallback;
|
||||
page.bindingContext = fromObject({
|
||||
username: "username",
|
||||
password: "password",
|
||||
context: args.context,
|
||||
onLoginButtonTap: function() {
|
||||
console.log("login-page.onLoginButtonTap");
|
||||
args.closeCallback(this.username, this.password);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function onLoaded(args: observable.EventData) {
|
||||
export function onShownModally(args: ShownModallyData) {
|
||||
console.log("login-page.onShownModally, context: " + args.context);
|
||||
}
|
||||
|
||||
export function onLoaded(args: EventData) {
|
||||
console.log("login-page.onLoaded");
|
||||
page = <pages.Page>args.object;
|
||||
usernameTextField = page.getViewById<textField.TextField>("username");
|
||||
passwordTextField = page.getViewById<textField.TextField>("password");
|
||||
}
|
||||
|
||||
export function onUnloaded() {
|
||||
console.log("login-page.onUnloaded");
|
||||
}
|
||||
|
||||
export function onLoginButtonTap() {
|
||||
console.log("login-page.onLoginButtonTap");
|
||||
closeCallback(usernameTextField.text, passwordTextField.text);
|
||||
}
|
||||
|
@ -1,8 +1,11 @@
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally"
|
||||
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
|
||||
showingModally="onShowingModally"
|
||||
shownModally="onShownModally"
|
||||
loaded="onLoaded" unloaded="onUnloaded" backgroundColor="Red">
|
||||
<StackLayout backgroundColor="PaleGreen" margin="10">
|
||||
<TextField hint="username" id="username" text="username"/>
|
||||
<TextField hint="password" id="password" text="password" secure="true"/>
|
||||
<Button text="Login" tap="onLoginButtonTap"/>
|
||||
<Label text="{{ context }}"/>
|
||||
<TextField hint="username" text="{{ username }}"/>
|
||||
<TextField hint="password" text="{{ password }}" secure="true"/>
|
||||
<Button text="Login" tap="{{ onLoginButtonTap }}"/>
|
||||
</StackLayout>
|
||||
</Page>
|
@ -16,9 +16,39 @@ export function onTapStretched(args) {
|
||||
const label = page.getViewById<Label>("label");
|
||||
var fullscreen = false;
|
||||
var stretched = true;
|
||||
|
||||
|
||||
page.showModal("ui-tests-app/modal-view/login-page", "context", function (username: string, password: string) {
|
||||
console.log(username + "/" + password);
|
||||
label.text = username + "/" + password;
|
||||
}, fullscreen, false, stretched);
|
||||
}
|
||||
|
||||
function openModal(page: Page, label: Label, context: string) {
|
||||
page.showModal("ui-tests-app/modal-view/login-page", context, function (username: string, password: string) {
|
||||
const result = context + "/" + username + "/" + password;
|
||||
console.log(result);
|
||||
label.text = result;
|
||||
}, false);
|
||||
}
|
||||
|
||||
export function onTapSecondModalInCB(args) {
|
||||
const page = <Page>args.object.page;
|
||||
const label = page.getViewById<Label>("label");
|
||||
page.showModal("ui-tests-app/modal-view/login-page", "First", function (username: string, password: string) {
|
||||
const result = "First/" + username + "/" + password;
|
||||
console.log(result);
|
||||
label.text = result;
|
||||
|
||||
// Open second modal in the close callback of the first one.
|
||||
openModal(page, label, "Second");
|
||||
});
|
||||
}
|
||||
|
||||
export function onTapSecondModalInTimer(args) {
|
||||
const page = <Page>args.object.page;
|
||||
const label = page.getViewById<Label>("label");
|
||||
openModal(page, label, "First");
|
||||
|
||||
// Open second modal 1s after the first one.
|
||||
setTimeout(() => openModal(page, label, "Second"), 1000);
|
||||
}
|
||||
|
@ -3,6 +3,10 @@
|
||||
<Button text="Login (pop-up)" tap="onTap" />
|
||||
<Button text="Login (full-screen)" tap="onTap" />
|
||||
<Button text="Login (pop-up-stretched)" tap="onTapStretched" />
|
||||
|
||||
<Button text="Login (second modal in cb)" tap="onTapSecondModalInCB" />
|
||||
<Button text="Login (second modal in timer)" tap="onTapSecondModalInTimer" />
|
||||
|
||||
<Label id="label" text="Anonymous"/>
|
||||
</StackLayout>
|
||||
</Page>
|
Reference in New Issue
Block a user