javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): status bar color now correct with sheet modal (#25424)

Browse Source 
resolves #20501
This commit is contained in:
Liam DeBeasi
2022-06-13 14:08:57 -04:00
committed by GitHub
parent c10df52f39
commit 377c4f597b
5 changed files with 152 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
core/src/components/modal/modal.tsx
View File

@ -31,6 +31,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
import type { MoveSheetToBreakpointOptions } from './gestures/sheet';
import { createSheetGesture } from './gestures/sheet';
import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -466,21 +467,31 @@ export class Modal implements ComponentInterface, OverlayInterface {
backdropBreakpoint: this.backdropBreakpoint,
});
/**
* TODO (FW-937) - In the next major release of Ionic, all card modals
* will be swipeable by default. canDismiss will be used to determine if the
* modal can be dismissed. This check should change to check the presence of
* presentingElement instead.
*
* If we did not do this check, then not using swipeToClose would mean you could
* not run canDismiss on swipe as there would be no swipe gesture created.
*/
const hasCardModal = this.swipeToClose || (this.canDismiss !== undefined && this.presentingElement !== undefined);
/**
* We need to change the status bar at the
* start of the animation so that it completes
* by the time the card animation is done.
*/
if (hasCardModal && getIonMode(this) === 'ios') {
setCardStatusBarDark();
}
await this.currentTransition;
if (this.isSheetModal) {
this.initSheetGesture();
/**
* TODO (FW-937) - In the next major release of Ionic, all card modals
* will be swipeable by default. canDismiss will be used to determine if the
* modal can be dismissed. This check should change to check the presence of
* presentingElement instead.
*
* If we did not do this check, then not using swipeToClose would mean you could
* not run canDismiss on swipe as there would be no swipe gesture created.
*/
} else if (this.swipeToClose || (this.canDismiss !== undefined && this.presentingElement !== undefined)) {
} else if (hasCardModal) {
await this.initSwipeToClose();
}
@ -631,6 +642,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
return false;
}
/**
* We need to start the status bar change
* before the animation so that the change
* finishes when the dismiss animation does.
* TODO (FW-937)
*/
const hasCardModal = this.swipeToClose || (this.canDismiss !== undefined && this.presentingElement !== undefined);
if (hasCardModal && getIonMode(this) === 'ios') {
setCardStatusBarDefault();
}
/* tslint:disable-next-line */
if (typeof window !== 'undefined' && this.keyboardOpenCallback) {
window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);