javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(overlays): expose mode, id, keyboardClose

Browse Source 
fixes #15366
This commit is contained in:
Manu Mtz.-Almeida
2018-08-29 16:19:51 +02:00
parent 16452b2455
commit cc960c3d48
37 changed files with 244 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
angular/src/util/overlay.ts
View File

@ -7,7 +7,7 @@ export class OverlayBaseController<Opts, Overlay> {
return proxyMethod(this.ctrl, 'create', opts);
}
dismiss(data?: any, role?: string, id?: number): Promise<void> {
dismiss(data?: any, role?: string, id?: string): Promise<void> {
return proxyMethod(this.ctrl, 'dismiss', data, role, id);
}

133
core/src/components.d.ts vendored
View File

@ -75,7 +75,7 @@ export namespace Components {
/**
* Dismiss the open action sheet overlay.
*/
'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
@ -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<OverlayEventDetail<any>>;
/**
* 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<OverlayEventDetail>) => void;
@ -202,10 +207,7 @@ export namespace Components {
* Emitted before the alert has presented.
*/
'onIonActionSheetWillPresent'?: (event: CustomEvent<void>) => 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<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
'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>) => 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<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
@ -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<OverlayEventDetail<any>>;
'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<OverlayEventDetail>) => void;
@ -2343,7 +2359,7 @@ export namespace Components {
* Emitted before the loading has presented.
*/
'onIonLoadingWillPresent'?: (event: CustomEvent<void>) => 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<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
@ -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<OverlayEventDetail<any>>;
'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<OverlayEventDetail>) => void;
@ -2673,7 +2703,7 @@ export namespace Components {
* Emitted before the modal has presented.
*/
'onIonModalWillPresent'?: (event: CustomEvent<void>) => 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<HTMLIonPickerElement>;
'dismiss': (data?: any, role?: string | undefined, pickerId?: number | undefined) => Promise<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
'getTop': () => Promise<HTMLIonPickerElement | undefined>;
}
interface IonPickerControllerAttributes extends StencilHTMLAttributes {}
@ -2903,7 +2933,7 @@ export namespace Components {
*/
'getColumn': (name: string) => Promise<PickerColumn | undefined>;
/**
* 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<OverlayEventDetail<any>>;
@ -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<OverlayEventDetail<any>>;
'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<OverlayEventDetail>) => void;
@ -2989,7 +3027,7 @@ export namespace Components {
* Emitted before the picker has presented.
*/
'onIonPickerWillPresent'?: (event: CustomEvent<void>) => 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<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
'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>) => 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<void>;
'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<void>;
/**
* 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<OverlayEventDetail<any>>;
@ -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<OverlayEventDetail<any>>;
'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<OverlayEventDetail>) => void;
@ -4946,7 +4997,7 @@ export namespace Components {
* Emitted before the toast has presented.
*/
'onIonToastWillPresent'?: (event: CustomEvent<void>) => void;
'overlayId'?: number;
'overlayIndex'?: number;
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/

4
core/src/components/action-sheet-controller/action-sheet-controller.tsx
View File

@ -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);
}
/**

3
core/src/components/action-sheet/action-sheet-interface.ts
View File

@ -7,6 +7,9 @@ export interface ActionSheetOptions {
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}
export interface ActionSheetButton {

12
core/src/components/action-sheet/action-sheet.tsx
View File

@ -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),

5
core/src/components/action-sheet/readme.md
View File

@ -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` |

4
core/src/components/alert-controller/alert-controller.tsx
View File

@ -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);
}
/**

5
core/src/components/alert/alert-interface.ts
View File

@ -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 {

18
core/src/components/alert/alert.tsx
View File

@ -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) {

4
core/src/components/alert/readme.md
View File

@ -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` |

1
core/src/components/app/test/cordova/index.html
View File

@ -61,7 +61,6 @@
</ion-menu>
<ion-nav main></ion-nav>
<ion-menu-controller></ion-menu-controller>
<ion-modal-controller></ion-modal-controller>
</ion-app>

4
core/src/components/loading-controller/loading-controller.tsx
View File

@ -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);
}
/**

4
core/src/components/loading/loading-interface.ts
View File

@ -8,4 +8,8 @@ export interface LoadingOptions {
duration?: number;
translucent?: boolean;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}

18
core/src/components/loading/loading.tsx
View File

@ -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'),

5
core/src/components/loading/readme.md
View File

@ -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` |

4
core/src/components/modal-controller/modal-controller.tsx
View File

@ -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);
}
/**

4
core/src/components/modal/modal-interface.ts
View File

@ -10,4 +10,8 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
cssClass?: string | string[];
delegate?: FrameworkDelegate;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}

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

@ -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,
}
};
}

5
core/src/components/modal/readme.md
View File

@ -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` |

2
core/src/components/modal/test/basic/index.html
View File

@ -19,11 +19,11 @@
</ion-header>
<ion-content padding>
<ion-modal-controller></ion-modal-controller>
<p>
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p>
</ion-content>
<ion-modal-controller></ion-modal-controller>
</ion-app>

3
core/src/components/modal/test/host-elements/index.html
View File

@ -19,12 +19,11 @@
</ion-header>
<ion-content padding>
<ion-modal-controller></ion-modal-controller>
<p>
<ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p>
</ion-content>
<ion-modal-controller></ion-modal-controller>
</ion-app>
<script>

2
core/src/components/modal/test/preview/index.html
View File

@ -19,11 +19,11 @@
</ion-header>
<ion-content padding fullscreen>
<ion-modal-controller></ion-modal-controller>
<p>
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p>
</ion-content>
<ion-modal-controller></ion-modal-controller>
<style>
ion-toolbar {

4
core/src/components/picker-controller/picker-controller.tsx
View File

@ -23,8 +23,8 @@ export class PickerController implements OverlayController {
* Dismiss the open picker overlay.
*/
@Method()
dismiss(data?: any, role?: string, pickerId?: number) {
return dismissOverlay(this.doc, data, role, 'ion-picker', pickerId);
dismiss(data?: any, role?: string, id?: string) {
return dismissOverlay(this.doc, data, role, 'ion-picker', id);
}
/*

4
core/src/components/picker/picker-interface.ts
View File

@ -5,6 +5,10 @@ export interface PickerOptions {
cssClass?: string | string[];
backdropDismiss?: boolean;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}
export interface PickerButton {

13
core/src/components/picker/picker.tsx
View File

@ -17,7 +17,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
export class Picker implements OverlayInterface {
private durationTimeout: any;
mode!: Mode;
presented = false;
animation?: Animation;
@ -27,10 +26,16 @@ export class Picker implements OverlayInterface {
@Prop({ context: 'config' }) config!: Config;
/** @hidden */
@Prop() overlayId!: number;
@Prop() overlayIndex!: number;
/**
* If the keyboard should be able to close the picker. Defaults to true.
* 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;
@ -236,7 +241,7 @@ export class Picker implements OverlayInterface {
...getClassMap(this.cssClass)
},
style: {
zIndex: 20000 + this.overlayId
zIndex: 20000 + this.overlayIndex
}
};
}

5
core/src/components/picker/readme.md
View File

@ -18,9 +18,10 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
| `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 picker. | `number` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If the keyboard should be able to close the picker. Defaults to true. | `boolean` |
| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the picker 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 picker. Defaults to `true`. | `boolean` |

4
core/src/components/popover-controller/popover-controller.tsx
View File

@ -22,8 +22,8 @@ export class PopoverController implements OverlayController {
* Dismiss the open popover overlay.
*/
@Method()
dismiss(data?: any, role?: string, popoverId?: number) {
return dismissOverlay(this.doc, data, role, 'ion-popover', popoverId);
dismiss(data?: any, role?: string, id?: string) {
return dismissOverlay(this.doc, data, role, 'ion-popover', id);
}
/**

4
core/src/components/popover/popover-interface.ts
View File

@ -12,4 +12,8 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
event?: Event;
delegate?: FrameworkDelegate;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}

19
core/src/components/popover/popover.tsx
View File

@ -1,6 +1,6 @@
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
@ -30,15 +30,7 @@ export class Popover implements OverlayInterface {
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config!: Config;
@Prop() delegate?: FrameworkDelegate;
@Prop() overlayId!: number;
@Prop() keyboardClose = true;
/**
* 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).
*/
@Prop() color?: Color;
@Prop() overlayIndex!: number;
/**
* The mode determines which platform styles to use.
@ -66,6 +58,11 @@ export class Popover implements OverlayInterface {
*/
@Prop() componentProps?: ComponentProps;
/**
* If true, the keyboard will be automatically dismissed when the overlay is presented.
*/
@Prop() keyboardClose = true;
/**
* Additional classes to apply for custom CSS. If multiple classes are
* provided they should be separated by spaces.
@ -220,7 +217,7 @@ export class Popover implements OverlayInterface {
return {
style: {
zIndex: 20000 + this.overlayId,
zIndex: 20000 + this.overlayIndex,
},
'no-router': true,
class: {

4
core/src/components/popover/readme.md
View File

@ -27,10 +27,10 @@ To present a popover, call the `present` method on a popover instance. In order
| `delegate` | -- | | `FrameworkDelegate` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` |
| `event` | -- | The event to pass to the popover animation. | `any` |
| `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 popover is dismissed. | `AnimationBuilder` |
| `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` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` |
| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` |

7
core/src/components/reorder-group/readme.md
View File

@ -12,6 +12,13 @@ The reorder group is a wrapper component for items with the `ion-reorder` compon
| `disabled` | `disabled` | If true, the reorder will be hidden. Defaults to `true`. | `boolean` |
## Events
| Event | Description |
| ---------------- | ----------- |
| `ionItemReorder` | |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

4
core/src/components/toast-controller/toast-controller.tsx
View File

@ -22,8 +22,8 @@ export class ToastController implements OverlayController {
* Dismiss the open toast overlay.
*/
@Method()
dismiss(data?: any, role?: string, toastId?: number) {
return dismissOverlay(this.doc, data, role, 'ion-toast', toastId);
dismiss(data?: any, role?: string, id?: string) {
return dismissOverlay(this.doc, data, role, 'ion-toast', id);
}
/**

5
core/src/components/toast/readme.md
View File

@ -27,10 +27,11 @@ The toast can be dismissed automatically after a specific amount of time by pass
| `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` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
| `enterAnimation` | -- | Animation to use when the toast 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 toast is dismissed. | `AnimationBuilder` |
| `message` | `message` | Message to be shown in the toast. | `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` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"top"`, `"bottom"`, `"middle"` |
| `showCloseButton` | `show-close-button` | If true, the close button will be displayed. Defaults to `false`. | `boolean` |
| `translucent` | `translucent` | If true, the toast will be translucent. Defaults to `false`. | `boolean` |

4
core/src/components/toast/toast-interface.ts
View File

@ -11,4 +11,8 @@ export interface ToastOptions {
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
animated?: boolean;
mode?: string;
keyboardClose?: boolean;
id?: string;
}

17
core/src/components/toast/toast.tsx
View File

@ -24,17 +24,17 @@ export class Toast implements OverlayInterface {
@Element() el!: HTMLElement;
mode!: Mode;
animation: Animation | undefined;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@Prop({ context: 'config' }) config!: Config;
@Prop() overlayIndex!: number;
/** @hidden */
@Prop() overlayId!: number;
/** @hidden */
@Prop() keyboardClose = false;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* Animation to use when the toast is presented.
@ -68,6 +68,11 @@ export class Toast implements OverlayInterface {
*/
@Prop() message?: string;
/**
* If true, the keyboard will be automatically dismissed when the overlay is presented.
*/
@Prop() keyboardClose = false;
/**
* The position of the toast on the screen. Possible values: "top", "middle", "bottom".
*/

6
core/src/utils/overlays-interface.ts
View File

@ -13,7 +13,7 @@ export interface OverlayInterface {
animated: boolean;
keyboardClose: boolean;
config: Config;
overlayId: number;
overlayIndex: number;
presented: boolean;
animation?: Animation;
animationCtrl: HTMLIonAnimationControllerElement;
@ -32,12 +32,12 @@ export interface OverlayInterface {
export interface OverlayController {
create(opts?: any): Promise<HTMLElement>;
dismiss(data?: any, role?: string, alertId?: number): Promise<void>;
dismiss(data?: any, role?: string, id?: string): Promise<void>;
getTop(): Promise<HTMLIonOverlayElement | undefined>;
}
export interface HTMLIonOverlayElement extends HTMLStencilElement {
overlayId: number;
overlayIndex: number;
backdropDismiss?: boolean;
dismiss(data?: any, role?: string): Promise<void>;

14
core/src/utils/overlays.ts
View File

@ -10,7 +10,11 @@ export function createOverlay<T extends HTMLIonOverlayElement>(element: T, opts:
// that get passed down into the new overlay
Object.assign(element, opts);
element.classList.add('ion-page-hidden');
element.overlayId = lastId++;
const overlayIndex = lastId++;
element.overlayIndex = overlayIndex;
if (!element.hasAttribute('id')) {
element.id = `ion-overlay-${overlayIndex}`;
}
// append the overlay element to the document body
getAppRoot(doc).appendChild(element);
@ -41,7 +45,7 @@ export function connectListeners(doc: Document) {
}
}
export function dismissOverlay(doc: Document, data: any, role: string | undefined, overlayTag: string, id?: number): Promise<void> {
export function dismissOverlay(doc: Document, data: any, role: string | undefined, overlayTag: string, id?: string): Promise<void> {
const overlay = getOverlay(doc, overlayTag, id);
if (!overlay) {
return Promise.reject('overlay does not exist');
@ -58,14 +62,14 @@ export function getOverlays(doc: Document, overlayTag?: string): HTMLIonOverlayE
return overlays.filter(c => c.tagName === overlayTag);
}
export function getOverlay(doc: Document, overlayTag?: string, id?: number): HTMLIonOverlayElement | undefined {
export function getOverlay(doc: Document, overlayTag?: string, id?: string): HTMLIonOverlayElement | undefined {
const overlays = getOverlays(doc, overlayTag);
if (id != null) {
return overlays.find(o => o.overlayId === id);
return overlays.find(o => o.id === id);
}
return (id == null)
? overlays[overlays.length - 1]
: overlays.find(o => o.overlayId === id);
: overlays.find(o => o.overlayIndex === id);
}
export async function present(