test-isc
Version:
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.
186 lines (185 loc) • 12.8 kB
JavaScript
import { Component, h, Host, Method, State, Element } from '@stencil/core';
/**
* @internal
*/
export class IonicSelectableModalComponent {
constructor() {
this.toggleUpdate = false;
}
/**
* Rerender the component
*/
async update() {
this.toggleUpdate = !this.toggleUpdate;
}
connectedCallback() {
const modalElement = document.querySelector('ion-modal');
this.selectableComponent = modalElement.componentProps.selectableComponent;
this.selectableComponent.selectableModalComponent = this;
}
componentDidLoad() {
this.infiniteScrollElement = this.element.querySelector('ion-infinite-scroll');
this.virtualScrollElement = this.element.querySelector('ion-virtual-scroll');
this.contentElement = this.element.querySelector('ion-content');
this.headerElement = this.element.querySelector('ion-header');
if (this.selectableComponent.shouldFocusSearchbar) {
const searchBarElement = this.element.querySelector('ion-searchbar');
searchBarElement.setFocus();
// Focus after a delay because focus doesn't work without it.
setTimeout(() => {
searchBarElement.setFocus();
}, 1000);
}
}
renderItem(item) {
return (h("ion-item", { button: true, onClick: () => this.selectableComponent.selectItem(item), disabled: this.selectableComponent.isItemDisabled(item) },
this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('item') ? (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'item',
value: item,
isItemSelected: this.selectableComponent.isItemSelected(item),
isItemDisabled: this.selectableComponent.isItemDisabled(item),
});
} })) : (h("ion-label", null, this.selectableComponent.getItemText(item))),
this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('itemEnd') && (h("div", { slot: "end", ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'itemEnd',
value: item,
isItemSelected: this.selectableComponent.isItemSelected(item),
isItemDisabled: this.selectableComponent.isItemDisabled(item),
});
} })),
this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('itemIcon') ? (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'itemIcon',
value: item,
isItemSelected: this.selectableComponent.isItemSelected(item),
isItemDisabled: this.selectableComponent.isItemDisabled(item),
});
} })) : (h("ion-icon", { name: this.selectableComponent.isItemSelected(item) ? 'checkmark-circle' : 'radio-button-off', size: "small", slot: this.selectableComponent.itemIconSlot }))));
}
renderHeader(header) {
return (h("ion-item-divider", { color: this.selectableComponent.groupColor },
h("ion-label", null, header)));
}
render() {
return (h(Host, { class: {
'ionic-selectable-modal-is-add-item-template-visible ': this.selectableComponent.isAddItemTemplateVisible,
} },
h("ion-header", null,
this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('header') ? (h("div", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'header',
});
} })) : (h("ion-toolbar", { color: this.selectableComponent.headerColor },
h("ion-title", null, this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('title') ? (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'title',
});
} })) : (h("span", null, this.selectableComponent.titleText))),
h("ion-buttons", { slot: this.selectableComponent.closeButtonSlot },
h("ion-button", { onClick: () => this.selectableComponent.closeModal() }, this.selectableComponent.hasTemplateRender &&
this.selectableComponent.hasTemplateRender('closeButton') ? (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'closeButton',
});
} })) : (h("span", null, this.selectableComponent.closeButtonText)))))),
this.selectableComponent.canSearch ||
(this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('message') && (h("ion-toolbar", null,
h("ion-searchbar", { value: this.selectableComponent.searchText, placeholder: this.selectableComponent.searchPlaceholder, debounce: this.selectableComponent.searchDebounce, cancelButtonIcon: this.selectableComponent.searchCancelButtonIcon, cancelButtonText: this.selectableComponent.searchCancelButtonText, clearIcon: this.selectableComponent.searchClearIcon, inputmode: this.selectableComponent.searchInputmode, searchIcon: this.selectableComponent.searchIcon, showCancelButton: this.selectableComponent.searchShowCancelButton, onIonChange: (event) => this.selectableComponent.onSearchbarValueChanged(event) }),
this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('message') && (h("div", { class: "ionic-selectable-message", ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'message',
});
} })))))),
h("ion-content", null,
this.selectableComponent.isSearching && (h("div", { class: "ionic-selectable-spinner" },
h("div", { class: "ionic-selectable-spinner-background" }),
h("ion-spinner", null))),
!this.selectableComponent.hasFilteredItems &&
this.selectableComponent.hasTemplateRender &&
this.selectableComponent.hasTemplateRender('searchFail') && (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'searchFail',
});
} })),
!this.selectableComponent.hasFilteredItems &&
(!this.selectableComponent.hasTemplateRender ||
!this.selectableComponent.hasTemplateRender('searchFail')) && (h("div", { class: "ion-margin ion-text-center" }, this.selectableComponent.searchFailText)),
!this.selectableComponent.hasVirtualScroll && this.selectableComponent.hasFilteredItems && (h("ion-list", null, this.selectableComponent.filteredGroups.map((group) => {
return (h("ion-item-group", null,
this.selectableComponent.hasGroups && (h("ion-item-divider", { color: this.selectableComponent.groupColor },
this.selectableComponent.hasTemplateRender &&
this.selectableComponent.hasTemplateRender('group') ? (h("span", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'group',
});
} })) : (h("ion-label", null, group.text)),
this.selectableComponent.hasTemplateRender &&
this.selectableComponent.hasTemplateRender('groupEnd') && (h("div", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'groupEnd',
value: group,
});
}, slot: "end" })))),
group.items.map((item) => this.renderItem(item))));
}))),
this.selectableComponent.hasVirtualScroll && this.selectableComponent.hasFilteredItems && (h("ion-virtual-scroll", { items: this.selectableComponent.filteredGroups[0].items, approxHeaderHeight: this.selectableComponent.virtualScrollApproxHeaderHeight, approxItemHeight: this.selectableComponent.virtualScrollApproxItemHeight, renderItem: (item) => this.renderItem(item), renderHeader: (header) => this.renderHeader(header), headerFn: this.selectableComponent.virtualScrollHeaderFn })),
this.selectableComponent.hasInfiniteScroll && (h("ion-infinite-scroll", { threshold: this.selectableComponent.infiniteScrollThreshold, onIonInfinite: () => this.selectableComponent.getMoreItems() },
h("ion-infinite-scroll-content", null)))),
this.selectableComponent.isAddItemTemplateVisible && (h("div", { class: "ionic-selectable-add-item-template", style: { top: this.headerElement.offsetHeight + 'px' }, ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'addItem',
value: this.selectableComponent.itemToAdd,
isAdd: this.selectableComponent.itemToAdd == null,
});
} })),
(this.selectableComponent.footerButtonsCount > 0 ||
(this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('footer'))) && (h("ion-footer", { style: { visibility: this.selectableComponent.isFooterVisible ? 'initial' : 'hidden' } }, this.selectableComponent.hasTemplateRender && this.selectableComponent.hasTemplateRender('footer') ? (h("div", { ref: (element) => {
this.selectableComponent.templateRender(element, {
type: 'footer',
});
} })) : (h("ion-toolbar", null,
h("ion-row", null,
this.selectableComponent.canClear && (h("ion-col", null,
h("ion-button", { onClick: () => this.selectableComponent.clearItems(), disabled: !(this.selectableComponent.selectedItems.length > 0), expand: "full" }, this.selectableComponent.clearButtonText))),
this.selectableComponent.canAddItem && (h("ion-col", null,
h("ion-button", { onClick: () => this.selectableComponent.addItemClick(), expand: "full" }, this.selectableComponent.addButtonText))),
(this.selectableComponent.isMultiple ||
this.selectableComponent.hasConfirmButton ||
this.selectableComponent.canClear) && (h("ion-col", null,
h("ion-button", { onClick: () => this.selectableComponent.confirmSelection(), disabled: !this.selectableComponent.isConfirmButtonEnabled, expand: "full" }, this.selectableComponent.confirmButtonText))))))))));
}
static get is() { return "ionic-selectable-modal"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() { return {
"ios": ["ionic-selectable-modal.ios.component.scss"],
"md": ["ionic-selectable-modal.md.component.scss"]
}; }
static get styleUrls() { return {
"ios": ["ionic-selectable-modal.ios.component.css"],
"md": ["ionic-selectable-modal.md.component.css"]
}; }
static get states() { return {
"toggleUpdate": {}
}; }
static get methods() { return {
"update": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Rerender the component",
"tags": []
}
}
}; }
static get elementRef() { return "element"; }
}