From cc960c3d483116ec774ba3fcf12b764d9f0f8cd5 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 29 Aug 2018 16:19:51 +0200 Subject: [PATCH] fix(overlays): expose mode, id, keyboardClose fixes #15366 --- angular/src/util/overlay.ts | 2 +- core/src/components.d.ts | 133 ++++++++++++------ .../action-sheet-controller.tsx | 4 +- .../action-sheet/action-sheet-interface.ts | 3 + .../components/action-sheet/action-sheet.tsx | 12 +- core/src/components/action-sheet/readme.md | 5 +- .../alert-controller/alert-controller.tsx | 4 +- core/src/components/alert/alert-interface.ts | 5 +- core/src/components/alert/alert.tsx | 18 ++- core/src/components/alert/readme.md | 4 +- .../components/app/test/cordova/index.html | 1 - .../loading-controller/loading-controller.tsx | 4 +- .../components/loading/loading-interface.ts | 4 + core/src/components/loading/loading.tsx | 18 ++- core/src/components/loading/readme.md | 5 +- .../modal-controller/modal-controller.tsx | 4 +- core/src/components/modal/modal-interface.ts | 4 + core/src/components/modal/modal.tsx | 16 ++- core/src/components/modal/readme.md | 5 +- .../components/modal/test/basic/index.html | 2 +- .../modal/test/host-elements/index.html | 3 +- .../components/modal/test/preview/index.html | 2 +- .../picker-controller/picker-controller.tsx | 4 +- .../src/components/picker/picker-interface.ts | 4 + core/src/components/picker/picker.tsx | 13 +- core/src/components/picker/readme.md | 5 +- .../popover-controller/popover-controller.tsx | 4 +- .../components/popover/popover-interface.ts | 4 + core/src/components/popover/popover.tsx | 19 ++- core/src/components/popover/readme.md | 4 +- core/src/components/reorder-group/readme.md | 7 + .../toast-controller/toast-controller.tsx | 4 +- core/src/components/toast/readme.md | 5 +- core/src/components/toast/toast-interface.ts | 4 + core/src/components/toast/toast.tsx | 17 ++- core/src/utils/overlays-interface.ts | 6 +- core/src/utils/overlays.ts | 14 +- 37 files changed, 244 insertions(+), 128 deletions(-) diff --git a/angular/src/util/overlay.ts b/angular/src/util/overlay.ts index 4ba45e61a93..59067d68d71 100644 --- a/angular/src/util/overlay.ts +++ b/angular/src/util/overlay.ts @@ -7,7 +7,7 @@ export class OverlayBaseController { return proxyMethod(this.ctrl, 'create', opts); } - dismiss(data?: any, role?: string, id?: number): Promise { + dismiss(data?: any, role?: string, id?: string): Promise { return proxyMethod(this.ctrl, 'dismiss', data, role, id); } diff --git a/core/src/components.d.ts b/core/src/components.d.ts index beb2818d4f6..2d3945e9596 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -75,7 +75,7 @@ export namespace Components { /** * Dismiss the open action sheet overlay. */ - 'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened action sheet overlay. */ @@ -113,7 +113,7 @@ export namespace Components { */ 'header': string; /** - * If the actionSheet should close the keyboard + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -121,6 +121,10 @@ export namespace Components { */ 'leaveAnimation': AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** * Returns a promise that resolves when the action-sheet did dismiss. It also accepts a callback that is called in the same circustances. */ 'onDidDismiss': () => Promise>; @@ -128,10 +132,7 @@ export namespace Components { * Returns a promise that resolves when the action-sheet will dismiss. It also accepts a callback that is called in the same circustances. */ 'onWillDismiss': () => Promise>; - /** - * Unique ID to be used with the overlay. Internal only - */ - 'overlayId': number; + 'overlayIndex': number; /** * Present the action sheet overlay after it has been created. */ @@ -171,7 +172,7 @@ export namespace Components { */ 'header'?: string; /** - * If the actionSheet should close the keyboard + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -179,6 +180,10 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** * Emitted after the alert has dismissed. */ 'onIonActionSheetDidDismiss'?: (event: CustomEvent) => void; @@ -202,10 +207,7 @@ export namespace Components { * Emitted before the alert has presented. */ 'onIonActionSheetWillPresent'?: (event: CustomEvent) => void; - /** - * Unique ID to be used with the overlay. Internal only - */ - 'overlayId'?: number; + 'overlayIndex'?: number; /** * Subtitle for the action sheet. */ @@ -224,7 +226,7 @@ export namespace Components { /** * Dismiss the open alert overlay. */ - 'dismiss': (data?: any, role?: string | undefined, alertId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened alert overlay. */ @@ -265,6 +267,9 @@ export namespace Components { * Array of input to show in the alert. */ 'inputs': AlertInput[]; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose': boolean; /** * Animation to use when the alert is dismissed. @@ -286,7 +291,7 @@ export namespace Components { * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * Present the alert overlay after it has been created. */ @@ -329,6 +334,9 @@ export namespace Components { * Array of input to show in the alert. */ 'inputs'?: AlertInput[]; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose'?: boolean; /** * Animation to use when the alert is dismissed. @@ -366,7 +374,7 @@ export namespace Components { * Emitted before the alert has presented. */ 'onIonAlertWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * The subtitle in the heading of the alert. Displayed under the title. */ @@ -2215,7 +2223,7 @@ export namespace Components { /** * Dismiss the open loading overlay. */ - 'dismiss': (data?: any, role?: string | undefined, loadingId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened loading overlay. */ @@ -2249,7 +2257,7 @@ export namespace Components { */ 'enterAnimation': AnimationBuilder; /** - * If true, the loading will blur any inputs and hide the keyboard + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -2261,6 +2269,10 @@ export namespace Components { */ 'message': string; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** * Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances. */ 'onDidDismiss': () => Promise>; @@ -2268,7 +2280,7 @@ export namespace Components { * Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * Present the loading overlay after it has been created. */ @@ -2308,7 +2320,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If true, the loading will blur any inputs and hide the keyboard + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -2320,6 +2332,10 @@ export namespace Components { */ 'message'?: string; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** * Emitted after the loading has dismissed. */ 'onIonLoadingDidDismiss'?: (event: CustomEvent) => void; @@ -2343,7 +2359,7 @@ export namespace Components { * Emitted before the loading has presented. */ 'onIonLoadingWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. */ @@ -2557,7 +2573,7 @@ export namespace Components { /** * Dismiss the open modal overlay. */ - 'dismiss': (data?: any, role?: string | undefined, modalId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened modal overlay. */ @@ -2595,12 +2611,19 @@ export namespace Components { * Animation to use when the modal is presented. */ 'enterAnimation': AnimationBuilder; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose': boolean; /** * Animation to use when the modal is dismissed. */ 'leaveAnimation': AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** * Returns a promise that resolves when the modal did dismiss. It also accepts a callback that is called in the same circustances. */ 'onDidDismiss': () => Promise>; @@ -2608,7 +2631,7 @@ export namespace Components { * Returns a promise that resolves when the modal will dismiss. It also accepts a callback that is called in the same circustances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * Present the modal overlay after it has been created. */ @@ -2644,12 +2667,19 @@ export namespace Components { * Animation to use when the modal is presented. */ 'enterAnimation'?: AnimationBuilder; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose'?: boolean; /** * Animation to use when the modal is dismissed. */ 'leaveAnimation'?: AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** * Emitted after the modal has dismissed. */ 'onIonModalDidDismiss'?: (event: CustomEvent) => void; @@ -2673,7 +2703,7 @@ export namespace Components { * Emitted before the modal has presented. */ 'onIonModalWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * If true, a backdrop will be displayed behind the modal. Defaults to `true`. */ @@ -2860,7 +2890,7 @@ export namespace Components { interface IonPickerController { 'create': (opts: PickerOptions) => Promise; - 'dismiss': (data?: any, role?: string | undefined, pickerId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; 'getTop': () => Promise; } interface IonPickerControllerAttributes extends StencilHTMLAttributes {} @@ -2903,7 +2933,7 @@ export namespace Components { */ 'getColumn': (name: string) => Promise; /** - * If the keyboard should be able to close the picker. Defaults to true. + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose': boolean; /** @@ -2911,6 +2941,10 @@ export namespace Components { */ 'leaveAnimation': AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** * Returns a promise that resolves when the picker did dismiss. It also accepts a callback that is called in the same circustances. */ 'onDidDismiss': () => Promise>; @@ -2918,7 +2952,7 @@ export namespace Components { * Returns a promise that resolves when the picker will dismiss. It also accepts a callback that is called in the same circustances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * Present the picker overlay after it has been created. */ @@ -2958,7 +2992,7 @@ export namespace Components { */ 'enterAnimation'?: AnimationBuilder; /** - * If the keyboard should be able to close the picker. Defaults to true. + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ 'keyboardClose'?: boolean; /** @@ -2966,6 +3000,10 @@ export namespace Components { */ 'leaveAnimation'?: AnimationBuilder; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** * Emitted after the picker has dismissed. */ 'onIonPickerDidDismiss'?: (event: CustomEvent) => void; @@ -2989,7 +3027,7 @@ export namespace Components { * Emitted before the picker has presented. */ 'onIonPickerWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * If true, a backdrop will be displayed behind the picker. Defaults to `true`. */ @@ -3004,7 +3042,7 @@ export namespace Components { /** * Dismiss the open popover overlay. */ - 'dismiss': (data?: any, role?: string | undefined, popoverId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened popover overlay. */ @@ -3022,10 +3060,6 @@ export namespace Components { */ 'backdropDismiss': boolean; /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color': Color; - /** * The component to display inside of the popover. */ 'component': ComponentRef; @@ -3050,6 +3084,9 @@ export namespace Components { * The event to pass to the popover animation. */ 'event': any; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose': boolean; /** * Animation to use when the popover is dismissed. @@ -3067,7 +3104,7 @@ export namespace Components { * Returns a promise that resolves when the popover will dismiss. It also accepts a callback that is called in the same circustances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * Present the popover overlay after it has been created. */ @@ -3091,10 +3128,6 @@ export namespace Components { */ 'backdropDismiss'?: boolean; /** - * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). - */ - 'color'?: Color; - /** * The component to display inside of the popover. */ 'component'?: ComponentRef; @@ -3115,6 +3148,9 @@ export namespace Components { * The event to pass to the popover animation. */ 'event'?: any; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose'?: boolean; /** * Animation to use when the popover is dismissed. @@ -3148,7 +3184,7 @@ export namespace Components { * Emitted before the popover has presented. */ 'onIonPopoverWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * If true, a backdrop will be displayed behind the popover. Defaults to `true`. */ @@ -3487,6 +3523,7 @@ export namespace Components { * If true, the reorder will be hidden. Defaults to `true`. */ 'disabled'?: boolean; + 'onIonItemReorder'?: (event: CustomEvent) => void; } interface IonReorder {} @@ -4824,7 +4861,7 @@ export namespace Components { /** * Dismiss the open toast overlay. */ - 'dismiss': (data?: any, role?: string | undefined, toastId?: number | undefined) => Promise; + 'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise; /** * Get the most recently opened toast overlay. */ @@ -4857,6 +4894,9 @@ export namespace Components { * Animation to use when the toast is presented. */ 'enterAnimation': AnimationBuilder; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose': boolean; /** * Animation to use when the toast is dismissed. @@ -4867,6 +4907,10 @@ export namespace Components { */ 'message': string; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode': Mode; + /** * Returns a promise that resolves when the toast did dismiss. It also accepts a callback that is called in the same circustances. */ 'onDidDismiss': () => Promise>; @@ -4874,7 +4918,7 @@ export namespace Components { * Returns a promise that resolves when the toast will dismiss. It also accepts a callback that is called in the same circustances. */ 'onWillDismiss': () => Promise>; - 'overlayId': number; + 'overlayIndex': number; /** * The position of the toast on the screen. Possible values: "top", "middle", "bottom". */ @@ -4913,6 +4957,9 @@ export namespace Components { * Animation to use when the toast is presented. */ 'enterAnimation'?: AnimationBuilder; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ 'keyboardClose'?: boolean; /** * Animation to use when the toast is dismissed. @@ -4923,6 +4970,10 @@ export namespace Components { */ 'message'?: string; /** + * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. + */ + 'mode'?: Mode; + /** * Emitted after the toast has dismissed. */ 'onIonToastDidDismiss'?: (event: CustomEvent) => void; @@ -4946,7 +4997,7 @@ export namespace Components { * Emitted before the toast has presented. */ 'onIonToastWillPresent'?: (event: CustomEvent) => void; - 'overlayId'?: number; + 'overlayIndex'?: number; /** * The position of the toast on the screen. Possible values: "top", "middle", "bottom". */ diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx index 70494fe6ad2..21bde3b36d3 100644 --- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx +++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx @@ -22,8 +22,8 @@ export class ActionSheetController implements OverlayController { * Dismiss the open action sheet overlay. */ @Method() - dismiss(data?: any, role?: string, actionSheetId?: number) { - return dismissOverlay(this.doc, data, role, 'ion-action-sheet', actionSheetId); + dismiss(data?: any, role?: string, id?: string) { + return dismissOverlay(this.doc, data, role, 'ion-action-sheet', id); } /** diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 5d90ca80fa2..78952093dd2 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -7,6 +7,9 @@ export interface ActionSheetOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; + mode?: string; + keyboardClose?: boolean; + id?: string; } export interface ActionSheetButton { diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index 26ead6b2216..1ec8b8b241a 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -19,8 +19,6 @@ import { mdLeaveAnimation } from './animations/md.leave'; }) export class ActionSheet implements OverlayInterface { - mode!: Mode; - presented = false; animation?: Animation; @@ -28,14 +26,16 @@ export class ActionSheet implements OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; + @Prop() overlayIndex!: number; /** - * Unique ID to be used with the overlay. Internal only + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. */ - @Prop() overlayId!: number; + @Prop() mode!: Mode; /** - * If the actionSheet should close the keyboard + * If true, the keyboard will be automatically dismissed when the overlay is presented. */ @Prop() keyboardClose = true; @@ -204,7 +204,7 @@ export class ActionSheet implements OverlayInterface { hostData() { return { style: { - zIndex: 20000 + this.overlayId, + zIndex: 20000 + this.overlayIndex, }, class: { ...getClassMap(this.cssClass), diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index af4c1a98a13..d06b8e83bf5 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -24,9 +24,10 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` | | `header` | `header` | Title for the action sheet. | `string` | -| `keyboardClose` | `keyboard-close` | If the actionSheet should close the keyboard | `boolean` | +| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | | `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder` | -| `overlayId` | `overlay-id` | Unique ID to be used with the overlay. Internal only | `number` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `overlayIndex` | `overlay-index` | | `number` | | `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` | | `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` | diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx index 95ab6be47b7..feb71589424 100644 --- a/core/src/components/alert-controller/alert-controller.tsx +++ b/core/src/components/alert-controller/alert-controller.tsx @@ -22,8 +22,8 @@ export class AlertController implements OverlayController { * Dismiss the open alert overlay. */ @Method() - dismiss(data?: any, role?: string, alertId?: number) { - return dismissOverlay(this.doc, data, role, 'ion-alert', alertId); + dismiss(data?: any, role?: string, id?: string) { + return dismissOverlay(this.doc, data, role, 'ion-alert', id); } /** diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index fc5ce875ac7..4a8c7b209cc 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -5,12 +5,15 @@ export interface AlertOptions { subHeader?: string; message?: string; cssClass?: string | string[]; - mode?: string; inputs?: AlertInput[]; buttons?: (AlertButton | string)[]; backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; + + mode?: string; + keyboardClose?: boolean; + id?: string; } export interface AlertInput { diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index e9dd9c79c65..650775b95d8 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -31,8 +31,7 @@ export class Alert implements OverlayInterface { @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; - @Prop() overlayId!: number; - @Prop() keyboardClose = true; + @Prop() overlayIndex!: number; /** * The mode determines which platform styles to use. @@ -40,6 +39,11 @@ export class Alert implements OverlayInterface { */ @Prop() mode!: Mode; + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ + @Prop() keyboardClose = true; + /** * Animation to use when the alert is presented. */ @@ -155,7 +159,7 @@ export class Alert implements OverlayInterface { label: i.label, checked: !!i.checked, disabled: !!i.disabled, - id: i.id ? i.id : `alert-input-${this.overlayId}-${index}`, + id: i.id ? i.id : `alert-input-${this.overlayIndex}-${index}`, handler: i.handler, min: i.min, max: i.max @@ -399,7 +403,7 @@ export class Alert implements OverlayInterface { return { role: 'alertdialog', style: { - zIndex: 20000 + this.overlayId, + zIndex: 20000 + this.overlayIndex, }, class: { ...getClassMap(this.cssClass), @@ -428,9 +432,9 @@ export class Alert implements OverlayInterface { } render() { - const hdrId = `alert-${this.overlayId}-hdr`; - const subHdrId = `alert-${this.overlayId}-sub-hdr`; - const msgId = `alert-${this.overlayId}-msg`; + const hdrId = `alert-${this.overlayIndex}-hdr`; + const subHdrId = `alert-${this.overlayIndex}-sub-hdr`; + const msgId = `alert-${this.overlayIndex}-msg`; let labelledById: string | undefined; if (this.header) { diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index f5bade11b32..8e3ef538b8f 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -34,11 +34,11 @@ Alerts can also include several different inputs whose data can be passed back t | `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` | | `header` | `header` | The main title in the heading of the alert. | `string` | | `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | -| `keyboardClose` | `keyboard-close` | | `boolean` | +| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | | `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder` | | `message` | `message` | The main message to be displayed in the alert. | `string` | | `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `overlayId` | `overlay-id` | | `number` | +| `overlayIndex` | `overlay-index` | | `number` | | `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` | | `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` | diff --git a/core/src/components/app/test/cordova/index.html b/core/src/components/app/test/cordova/index.html index ad19ad1e867..7ec6c00e341 100644 --- a/core/src/components/app/test/cordova/index.html +++ b/core/src/components/app/test/cordova/index.html @@ -61,7 +61,6 @@ - diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx index a3218b8a1d0..2b6cb4eb91f 100644 --- a/core/src/components/loading-controller/loading-controller.tsx +++ b/core/src/components/loading-controller/loading-controller.tsx @@ -22,8 +22,8 @@ export class LoadingController implements OverlayController { * Dismiss the open loading overlay. */ @Method() - dismiss(data?: any, role?: string, loadingId?: number) { - return dismissOverlay(this.doc, data, role, 'ion-loading', loadingId); + dismiss(data?: any, role?: string, id?: string) { + return dismissOverlay(this.doc, data, role, 'ion-loading', id); } /** diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index 3537c425dfc..011587b5321 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -8,4 +8,8 @@ export interface LoadingOptions { duration?: number; translucent?: boolean; animated?: boolean; + + mode?: string; + keyboardClose?: boolean; + id?: string; } diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index f03891560cc..a571d78070a 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays'; import { createThemedClasses, getClassMap } from '../../utils/theme'; @@ -21,16 +21,22 @@ export class Loading implements OverlayInterface { presented = false; animation?: Animation; - color?: Color; - mode!: Mode; @Element() el!: HTMLElement; @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; - @Prop() overlayId!: number; + @Prop() overlayIndex!: number; - /** If true, the loading will blur any inputs and hide the keyboard */ + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ @Prop() keyboardClose = true; /** @@ -185,7 +191,7 @@ export class Loading implements OverlayInterface { return { style: { - zIndex: 20000 + this.overlayId + zIndex: 20000 + this.overlayIndex }, class: { ...createThemedClasses(this.mode, 'loading'), diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 30f8454289a..ad03af2a50e 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -25,10 +25,11 @@ The loading indicator can be dismissed automatically after a specific amount of | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` | +| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | | `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` | | `message` | `message` | Optional text content to display in the loading indicator. | `string` | -| `overlayId` | `overlay-id` | | `number` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `overlayIndex` | `overlay-index` | | `number` | | `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` | | `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` | | `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` | diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx index ab349758d33..7b72e893c66 100644 --- a/core/src/components/modal-controller/modal-controller.tsx +++ b/core/src/components/modal-controller/modal-controller.tsx @@ -22,8 +22,8 @@ export class ModalController implements OverlayController { * Dismiss the open modal overlay. */ @Method() - dismiss(data?: any, role?: string, modalId?: number) { - return dismissOverlay(this.doc, data, role, 'ion-modal', modalId); + dismiss(data?: any, role?: string, id?: string) { + return dismissOverlay(this.doc, data, role, 'ion-modal', id); } /** diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts index b11b7b1e833..b6a3acc4980 100644 --- a/core/src/components/modal/modal-interface.ts +++ b/core/src/components/modal/modal-interface.ts @@ -10,4 +10,8 @@ export interface ModalOptions { cssClass?: string | string[]; delegate?: FrameworkDelegate; animated?: boolean; + + mode?: string; + keyboardClose?: boolean; + id?: string; } diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 1d1dec7b38d..544839c0ad4 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -24,15 +24,23 @@ export class Modal implements OverlayInterface { animation: Animation | undefined; presented = false; - mode!: Mode; @Element() el!: HTMLElement; @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement; @Prop({ context: 'config' }) config!: Config; - - @Prop() overlayId!: number; + @Prop() overlayIndex!: number; @Prop() delegate?: FrameworkDelegate; + + /** + * The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + */ + @Prop() mode!: Mode; + + /** + * If true, the keyboard will be automatically dismissed when the overlay is presented. + */ @Prop() keyboardClose = true; /** @@ -202,7 +210,7 @@ export class Modal implements OverlayInterface { ...getClassMap(this.cssClass) }, style: { - zIndex: 20000 + this.overlayId, + zIndex: 20000 + this.overlayIndex, } }; } diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 44acb52f8e6..d69181c9a2b 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -23,9 +23,10 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | | `delegate` | -- | | `FrameworkDelegate` | | `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` | -| `keyboardClose` | `keyboard-close` | | `boolean` | +| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | | `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder` | -| `overlayId` | `overlay-id` | | `number` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `overlayIndex` | `overlay-index` | | `number` | | `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` | diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html index 6beccc942af..c56207c4a0b 100644 --- a/core/src/components/modal/test/basic/index.html +++ b/core/src/components/modal/test/basic/index.html @@ -19,11 +19,11 @@ -

Present modal

+ diff --git a/core/src/components/modal/test/host-elements/index.html b/core/src/components/modal/test/host-elements/index.html index a476dd983b2..5f54a4f3cff 100644 --- a/core/src/components/modal/test/host-elements/index.html +++ b/core/src/components/modal/test/host-elements/index.html @@ -19,12 +19,11 @@ -

Present modal

- +