UNPKG

@ionic/core

Version:
227 lines (226 loc) • 8.92 kB
/*! * (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"; } }