javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 11:17:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: tear down views after a modal is closed (#9801)

Browse Source
This commit is contained in:
Igor Randjelovic
2022-03-01 21:12:21 +01:00
committed by Nathan Walker
parent c876d16083
commit b38337e597
5 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/toolbox/src/pages/a11y.ts
View File

@ -35,6 +35,14 @@ export class AccessibilityModel extends Observable {
}
openModal() {
page.showModal('pages/sample-modal');
page.showModal('pages/sample-modal', {
closeCallback(args) {
console.log('close modal callback', args);
},
} as ShowModalOptions);
}
openNormal() {
page.frame.navigate('pages/sample-modal');
}
}

4
apps/toolbox/src/pages/a11y.xml
View File

@ -7,6 +7,9 @@
<GridLayout padding="20" class="a11y-demo-page">
<ScrollView>
<StackLayout>
<Button text="Open Modal Page" class="view-item" tap="{{openModal}}" />
<Button text="Open Normal Page" class="view-item" tap="{{openNormal}}" />
<Label text="Accessible Label" class="view-item a11y text-center" accessibilityLabel="Accessible Label" accessibilityHint="Just a label" accessibilityRole="{{accessibilityRole.StaticText}}" accessibilityValue="Accessible Label" />
<Button text="Accessible Button" class="view-item a11y" accessibilityLabel="Accessible Button" accessibilityHint="Tapping this really does nothing" />
@ -30,7 +33,6 @@
<Label row="1" text="With another item in a row" class="view-item text-center" />
<Label rowSpan="2" col="1" text="Hi" />
</GridLayout>
<Button text="Open Modal" class="view-item" tap="{{openModal}}" />
<Slider value="10" minValue="0" maxValue="100" class="view-item a11y" accessibilityLabel="Slider" accessibilityHint="A smooth slider" accessibilityValue="10" />
</StackLayout>
</ScrollView>

31
apps/toolbox/src/pages/sample-modal.ts
View File

@ -1,10 +1,10 @@
import { Page, ShownModallyData, Observable } from '@nativescript/core';
import { Page, ShownModallyData, Observable, LoadEventData } from '@nativescript/core';
let page: Page;
let closeCallback: Function;
export function onShownModally(args: ShownModallyData) {
page = <Page>args.object;
page.bindingContext = new SampleModal();
console.log('page shown modally');
closeCallback = args.closeCallback;
if (args.context) {
@ -12,12 +12,35 @@ export function onShownModally(args: ShownModallyData) {
}
}
export function onLoaded(args: LoadEventData) {
console.log('page loaded');
page = args.object as Page;
page.bindingContext = new SampleModal();
const disposePage = page.disposeNativeView.bind(page);
page.disposeNativeView = () => {
console.log('-'.repeat(100));
console.log(' [!!] Disposing modal page...');
console.log('-'.repeat(100));
disposePage();
};
}
export class SampleModal extends Observable {
close() {
// TODO: a11y
// if (global.isIOS) {
// (<UIViewController>page.ios).view.accessibilityPerformEscape();
// }
closeCallback();
if (typeof closeCallback === 'function') {
closeCallback('data from modal');
// reset callback...
closeCallback = undefined;
} else {
// fallback to regular nav back...
page.frame.goBack();
}
}
}

2
apps/toolbox/src/pages/sample-modal.xml
View File

@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="page">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" shownModally="onShownModally" class="page">
<GridLayout padding="20">
<ScrollView>

2
packages/core/ui/core/view/view-common.ts
View File

@ -407,6 +407,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
if (typeof options.closeCallback === 'function') {
options.closeCallback.apply(undefined, originalArgs);
}
that._tearDownUI(true);
};
that._hideNativeModalView(parent, whenClosedCallback);