@ionic/core
Version:
Base components for Ionic
331 lines (330 loc) • 12.5 kB
JavaScript
import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
export class Alert {
constructor() {
this.processedInputs = [];
this.processedButtons = [];
this.presented = false;
this.keyboardClose = true;
this.buttons = [];
this.inputs = [];
this.backdropDismiss = true;
this.translucent = false;
this.animated = true;
}
buttonsChanged() {
const buttons = this.buttons;
this.processedButtons = buttons.map(btn => {
return (typeof btn === 'string')
? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined }
: btn;
});
}
inputsChanged() {
const inputs = this.inputs;
const inputTypes = new Set(inputs.map(i => i.type));
if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
console.warn(`Alert cannot mix input types: ${(Array.from(inputTypes.values()).join('/'))}. Please see alert docs for more info.`);
}
this.inputType = inputTypes.values().next().value;
this.processedInputs = inputs.map((i, index) => ({
type: i.type || 'text',
name: i.name || `${index}`,
placeholder: i.placeholder || '',
value: i.value,
label: i.label,
checked: !!i.checked,
disabled: !!i.disabled,
id: i.id || `alert-input-${this.overlayIndex}-${index}`,
handler: i.handler,
min: i.min,
max: i.max
}));
}
componentWillLoad() {
this.inputsChanged();
this.buttonsChanged();
}
onBackdropTap() {
this.dismiss(undefined, BACKDROP);
}
dispatchCancelHandler(ev) {
const role = ev.detail.role;
if (isCancel(role)) {
const cancelButton = this.processedButtons.find(b => b.role === 'cancel');
this.callButtonHandler(cancelButton);
}
}
present() {
return present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
}
dismiss(data, role) {
return dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
}
onDidDismiss() {
return eventMethod(this.el, 'ionAlertDidDismiss');
}
onWillDismiss() {
return eventMethod(this.el, 'ionAlertWillDismiss');
}
rbClick(selectedInput) {
for (const input of this.processedInputs) {
input.checked = input === selectedInput;
}
this.activeId = selectedInput.id;
if (selectedInput.handler) {
selectedInput.handler(selectedInput);
}
this.el.forceUpdate();
}
cbClick(selectedInput) {
selectedInput.checked = !selectedInput.checked;
if (selectedInput.handler) {
selectedInput.handler(selectedInput);
}
this.el.forceUpdate();
}
buttonClick(button) {
const role = button.role;
const values = this.getValues();
if (isCancel(role)) {
return this.dismiss({ values }, role);
}
const returnData = this.callButtonHandler(button, values);
if (returnData !== false) {
return this.dismiss(Object.assign({ values }, returnData), button.role);
}
return Promise.resolve(false);
}
callButtonHandler(button, data) {
if (button && button.handler) {
const returnData = button.handler(data);
if (returnData === false) {
return false;
}
if (typeof returnData === 'object') {
return returnData;
}
}
return {};
}
getValues() {
if (this.processedInputs.length === 0) {
return undefined;
}
if (this.inputType === 'radio') {
const checkedInput = this.processedInputs.find(i => !!i.checked);
return checkedInput ? checkedInput.value : undefined;
}
if (this.inputType === 'checkbox') {
return this.processedInputs.filter(i => i.checked).map(i => i.value);
}
const values = {};
this.processedInputs.forEach(i => {
values[i.name] = i.value || '';
});
return values;
}
renderAlertInputs(labelledBy) {
switch (this.inputType) {
case 'checkbox': return this.renderCheckbox(labelledBy);
case 'radio': return this.renderRadio(labelledBy);
default: return this.renderInput(labelledBy);
}
}
renderCheckbox(labelledby) {
const inputs = this.processedInputs;
if (inputs.length === 0) {
return null;
}
return (h("div", { class: "alert-checkbox-group", "aria-labelledby": labelledby }, inputs.map(i => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: 0, role: "checkbox", class: "alert-tappable alert-checkbox alert-checkbox-button ion-focusable" },
h("div", { class: "alert-button-inner" },
h("div", { class: "alert-checkbox-icon" },
h("div", { class: "alert-checkbox-inner" })),
h("div", { class: "alert-checkbox-label" }, i.label)),
this.mode === 'md' && h("ion-ripple-effect", null))))));
}
renderRadio(labelledby) {
const inputs = this.processedInputs;
if (inputs.length === 0) {
return null;
}
return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-labelledby": labelledby, "aria-activedescendant": this.activeId }, inputs.map(i => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: 0, class: "alert-radio-button alert-tappable alert-radio ion-focusable", role: "radio" },
h("div", { class: "alert-button-inner" },
h("div", { class: "alert-radio-icon" },
h("div", { class: "alert-radio-inner" })),
h("div", { class: "alert-radio-label" }, i.label)))))));
}
renderInput(labelledby) {
const inputs = this.processedInputs;
if (inputs.length === 0) {
return null;
}
return (h("div", { class: "alert-input-group", "aria-labelledby": labelledby }, inputs.map(i => (h("div", { class: "alert-input-wrapper" },
h("input", { placeholder: i.placeholder, value: i.value, type: i.type, min: i.min, max: i.max, onInput: e => i.value = e.target.value, id: i.id, disabled: i.disabled, tabIndex: 0, class: "alert-input" }))))));
}
hostData() {
return {
'role': 'dialog',
'aria-modal': 'true',
style: {
zIndex: 20000 + this.overlayIndex,
},
class: Object.assign({}, getClassMap(this.cssClass), { 'alert-translucent': this.translucent })
};
}
renderAlertButtons() {
const buttons = this.processedButtons;
const alertButtonGroupClass = {
'alert-button-group': true,
'alert-button-group-vertical': buttons.length > 2
};
return (h("div", { class: alertButtonGroupClass }, buttons.map(button => h("button", { type: "button", class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) },
h("span", { class: "alert-button-inner" }, button.text),
this.mode === 'md' && h("ion-ripple-effect", null)))));
}
render() {
const hdrId = `alert-${this.overlayIndex}-hdr`;
const subHdrId = `alert-${this.overlayIndex}-sub-hdr`;
const msgId = `alert-${this.overlayIndex}-msg`;
let labelledById;
if (this.header !== undefined) {
labelledById = hdrId;
}
else if (this.subHeader !== undefined) {
labelledById = subHdrId;
}
return [
h("ion-backdrop", { tappable: this.backdropDismiss }),
h("div", { class: "alert-wrapper" },
h("div", { class: "alert-head" },
this.header && h("h2", { id: hdrId, class: "alert-title" }, this.header),
this.subHeader && h("h2", { id: subHdrId, class: "alert-sub-title" }, this.subHeader)),
h("div", { id: msgId, class: "alert-message", innerHTML: this.message }),
this.renderAlertInputs(labelledById),
this.renderAlertButtons())
];
}
static get is() { return "ion-alert"; }
static get encapsulation() { return "scoped"; }
static get properties() { return {
"animated": {
"type": Boolean,
"attr": "animated"
},
"backdropDismiss": {
"type": Boolean,
"attr": "backdrop-dismiss"
},
"buttons": {
"type": "Any",
"attr": "buttons",
"watchCallbacks": ["buttonsChanged"]
},
"config": {
"context": "config"
},
"cssClass": {
"type": String,
"attr": "css-class"
},
"dismiss": {
"method": true
},
"el": {
"elementRef": true
},
"enterAnimation": {
"type": "Any",
"attr": "enter-animation"
},
"header": {
"type": String,
"attr": "header"
},
"inputs": {
"type": "Any",
"attr": "inputs",
"mutable": true,
"watchCallbacks": ["inputsChanged"]
},
"keyboardClose": {
"type": Boolean,
"attr": "keyboard-close"
},
"leaveAnimation": {
"type": "Any",
"attr": "leave-animation"
},
"message": {
"type": String,
"attr": "message"
},
"mode": {
"type": String,
"attr": "mode"
},
"onDidDismiss": {
"method": true
},
"onWillDismiss": {
"method": true
},
"overlayIndex": {
"type": Number,
"attr": "overlay-index"
},
"present": {
"method": true
},
"subHeader": {
"type": String,
"attr": "sub-header"
},
"translucent": {
"type": Boolean,
"attr": "translucent"
}
}; }
static get events() { return [{
"name": "ionAlertDidPresent",
"method": "didPresent",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionAlertWillPresent",
"method": "willPresent",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionAlertWillDismiss",
"method": "willDismiss",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionAlertDidDismiss",
"method": "didDismiss",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get listeners() { return [{
"name": "ionBackdropTap",
"method": "onBackdropTap"
}, {
"name": "ionAlertWillDismiss",
"method": "dispatchCancelHandler"
}]; }
static get style() { return "/**style-placeholder:ion-alert:**/"; }
static get styleMode() { return "/**style-id-placeholder:ion-alert:**/"; }
}
function buttonClass(button) {
return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
}