@paraboly/pwc-multi-filter
Version:
A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.
277 lines (276 loc) • 9.89 kB
JavaScript
import { h } from "@stencil/core";
import _ from "lodash";
export class PwcMultiFilter {
constructor() {
this.filterConfigs = [];
this.filterRefs = {};
this.filterChangedEventSubscribers = {};
}
async tabChangedEventHandler(e) {
this.setActiveState(e.detail.title);
}
async getActiveState() {
return {
filterRef: this.filterRefs[this.activeFilterName],
filterName: this.activeFilterName
};
}
async switchToFilter(name) {
if (!this.filterRefs.hasOwnProperty(name)) {
throw new Error(`Cannot find a filter with name '${name}'. Refusing to switch.`);
}
// we set the tab's state -> tab emits an event -> we set our inner state -> we emit an event
return this.tabViewRef.switchToTab(name);
}
async addFilter(config) {
if (!config || !config.name) {
throw new Error(`Config is invalid. Refusing to add.`);
}
this.filterConfigs = _.unionBy(this.filterConfigs, [config], f => f.name);
}
async removeFilter(name) {
if (_.findIndex(this.filterConfigs, { name }) === -1) {
throw new Error(`Cannot find a filter with name '${name}'. Refusing to delete.`);
}
const filtered = this.filterConfigs.filter(val => val.name !== name);
this.filterConfigs = [...filtered];
// delete this.filterRefs[name];
}
async getFilter(name) {
return this.filterRefs[name];
}
async subscribeToFilterChange(name, callback) {
if (_.findIndex(this.filterConfigs, { name }) === -1) {
throw new Error(`Cannot find a filter with name '${name}'. Refusing to process subscription request.`);
}
this.filterChangedEventSubscribers[name] =
this.filterChangedEventSubscribers[name] || [];
this.filterChangedEventSubscribers[name].push(callback);
}
async getFilterResult(name) {
if (!this.filterRefs.hasOwnProperty(name)) {
// tslint:disable-next-line: no-console
console.warn(`Cannot find a filter with name '${name}'. Returning empty array.`);
return [];
}
return this.filterRefs[name].filter();
}
setActiveState(activeFilterName) {
this.activeFilterName = activeFilterName;
this.activeFilterChanged.emit({
filterName: this.activeFilterName,
filterRef: this.filterRefs[this.activeFilterName]
});
}
handleChangeEvent(name, event) {
const subscribers = this.filterChangedEventSubscribers[name];
if (subscribers) {
subscribers.forEach(callback => callback(event));
}
}
registerFilterRef(name, filterRef) {
if (filterRef) {
const existingRef = this.filterRefs[name];
this.filterRefs[name] = filterRef;
if (existingRef !== filterRef) {
this.initialFilterSetup(name, filterRef);
}
}
}
initialFilterSetup(name, filterRef) {
filterRef.addEventListener("filterChanged", this.handleChangeEvent.bind(this, name));
}
switchToFirstFilter() {
const firstTabName = this.filterConfigs[0].name;
this.switchToFilter(firstTabName);
}
constructFilterTab(filter) {
return (h("pwc-tabview-tab", { title: filter.name },
h("pwc-filter", { data: filter.data, items: filter.items, ref: el => this.registerFilterRef(filter.name, el) })));
}
render() {
return (this.filterConfigs &&
this.filterConfigs.length > 0 && (h("pwc-tabview", { ref: el => (this.tabViewRef = el) }, this.filterConfigs.map(filter => this.constructFilterTab(filter)))));
}
static get is() { return "pwc-multi-filter"; }
static get states() { return {
"filterConfigs": {}
}; }
static get events() { return [{
"method": "activeFilterChanged",
"name": "activeFilterChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "PwcMultiFilterInterfaces.IActiveFilterChangedEventPayload",
"resolved": "IActiveFilterChangedEventPayload",
"references": {
"PwcMultiFilterInterfaces": {
"location": "import",
"path": "./PwcMultiFilterInterfaces"
}
}
}
}]; }
static get methods() { return {
"getActiveState": {
"complexType": {
"signature": "() => Promise<{ filterRef: HTMLPwcFilterElement; filterName: string; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
},
"HTMLPwcFilterElement": {
"location": "global"
}
},
"return": "Promise<{ filterRef: HTMLPwcFilterElement; filterName: string; }>"
},
"docs": {
"text": "",
"tags": []
}
},
"switchToFilter": {
"complexType": {
"signature": "(name: string) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"addFilter": {
"complexType": {
"signature": "(config: PwcMultiFilterInterfaces.IFilterTabConfig) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"PwcMultiFilterInterfaces": {
"location": "import",
"path": "./PwcMultiFilterInterfaces"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"removeFilter": {
"complexType": {
"signature": "(name: string) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"getFilter": {
"complexType": {
"signature": "(name: string) => Promise<HTMLPwcFilterElement>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"HTMLPwcFilterElement": {
"location": "global"
}
},
"return": "Promise<HTMLPwcFilterElement>"
},
"docs": {
"text": "",
"tags": []
}
},
"subscribeToFilterChange": {
"complexType": {
"signature": "(name: string, callback: (filterChangedEvent: _filterChangedEventType) => void) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}, {
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"_filterChangedEventType": {
"location": "local"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"getFilterResult": {
"complexType": {
"signature": "(name: string) => Promise<object[]>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<object[]>"
},
"docs": {
"text": "",
"tags": []
}
}
}; }
static get elementRef() { return "root"; }
static get listeners() { return [{
"name": "tabChanged",
"method": "tabChangedEventHandler",
"target": undefined,
"capture": false,
"passive": false
}]; }
}