@ionic/core
Version:
Base components for Ionic
227 lines (226 loc) • 8.92 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { Host, h, forceUpdate } from "@stencil/core";
import { safeCall } from "../../utils/overlays";
import { getClassMap } from "../../utils/theme";
import { getIonMode } from "../../global/ionic-global";
/**
* @internal
*/
export class SelectPopover {
constructor() {
/**
* An array of options for the popover
*/
this.options = [];
}
findOptionFromEvent(ev) {
const { options } = this;
return options.find((o) => o.value === ev.target.value);
}
/**
* When an option is selected we need to get the value(s)
* of the selected option(s) and return it in the option
* handler
*/
callOptionHandler(ev) {
const option = this.findOptionFromEvent(ev);
const values = this.getValues(ev);
if (option === null || option === void 0 ? void 0 : option.handler) {
safeCall(option.handler, values);
}
}
/**
* Dismisses the host popover that the `ion-select-popover`
* is rendered within.
*/
dismissParentPopover() {
const popover = this.el.closest('ion-popover');
if (popover) {
popover.dismiss();
}
}
setChecked(ev) {
const { multiple } = this;
const option = this.findOptionFromEvent(ev);
// this is a popover with checkboxes (multiple value select)
// we need to set the checked value for this option
if (multiple && option) {
option.checked = ev.detail.checked;
}
}
getValues(ev) {
const { multiple, options } = this;
if (multiple) {
// this is a popover with checkboxes (multiple value select)
// return an array of all the checked values
return options.filter((o) => o.checked).map((o) => o.value);
}
// this is a popover with radio buttons (single value select)
// return the value that was clicked, otherwise undefined
const option = this.findOptionFromEvent(ev);
return option ? option.value : undefined;
}
renderOptions(options) {
const { multiple } = this;
switch (multiple) {
case true:
return this.renderCheckboxOptions(options);
default:
return this.renderRadioOptions(options);
}
}
renderCheckboxOptions(options) {
return options.map((option) => (h("ion-item", { class: Object.assign({
// TODO FW-4784
'item-checkbox-checked': option.checked
}, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
this.setChecked(ev);
this.callOptionHandler(ev);
// TODO FW-4784
forceUpdate(this);
} }, option.text))));
}
renderRadioOptions(options) {
const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (h("ion-item", { class: Object.assign({
// TODO FW-4784
'item-radio-checked': option.value === checked
}, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyUp: (ev) => {
if (ev.key === ' ') {
/**
* Selecting a radio option with keyboard navigation,
* either through the Enter or Space keys, should
* dismiss the popover.
*/
this.dismissParentPopover();
}
} }, option.text))))));
}
render() {
const { header, message, options, subHeader } = this;
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
return (h(Host, { key: 'ab931b49b59283825bd2afa3f7f995b0e6e05bef', class: getIonMode(this) }, h("ion-list", { key: '3bd12b67832607596b912a73d5b3ae9b954b244d' }, header !== undefined && h("ion-list-header", { key: '97da930246edf7423a039c030d40e3ff7a5148a3' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c579df6ea8fac07bb0c59d34c69b149656863224' }, h("ion-label", { key: 'af699c5f465710ccb13b8cf8e7be66f0e8acfad1', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'df9a936d42064b134e843c7229f314a2a3ec7e80' }, subHeader), message !== undefined && h("p", { key: '9c3ddad378df00f106afa94e9928cf68c17124dd' }, message)))), this.renderOptions(options))));
}
static get is() { return "ion-select-popover"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"ios": ["select-popover.ios.scss"],
"md": ["select-popover.md.scss"]
};
}
static get styleUrls() {
return {
"ios": ["select-popover.ios.css"],
"md": ["select-popover.md.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"attribute": "header",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The header text of the popover"
},
"getter": false,
"setter": false,
"reflect": false
},
"subHeader": {
"type": "string",
"attribute": "sub-header",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The subheader text of the popover"
},
"getter": false,
"setter": false,
"reflect": false
},
"message": {
"type": "string",
"attribute": "message",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text content of the popover body"
},
"getter": false,
"setter": false,
"reflect": false
},
"multiple": {
"type": "boolean",
"attribute": "multiple",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If true, the select accepts multiple values"
},
"getter": false,
"setter": false,
"reflect": false
},
"options": {
"type": "unknown",
"attribute": "options",
"mutable": false,
"complexType": {
"original": "SelectPopoverOption[]",
"resolved": "SelectPopoverOption[]",
"references": {
"SelectPopoverOption": {
"location": "import",
"path": "./select-popover-interface",
"id": "src/components/select-popover/select-popover-interface.ts::SelectPopoverOption"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "An array of options for the popover"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
}
};
}
static get elementRef() { return "el"; }
}