@furystack/shades-common-components
Version:
79 lines • 3.72 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Injectable } from '@furystack/inject';
import { debounce, EventHub, ObservableValue } from '@furystack/utils';
let SuggestManager = class SuggestManager extends EventHub {
getEntries;
getSuggestionEntry;
isOpened = new ObservableValue(false);
isLoading = new ObservableValue(false);
term = new ObservableValue('');
selectedIndex = new ObservableValue(0);
currentSuggestions = new ObservableValue([]);
keyPressListener = ((ev) => {
if (ev.key === 'Escape') {
this.isOpened.setValue(false);
}
}).bind(this);
element;
clickOutsideListener = ((ev) => {
if (this.element &&
this.isOpened.getValue() &&
ev.target.closest(this.element.tagName) !== this.element) {
this.isOpened.setValue(false);
}
}).bind(this);
[Symbol.dispose]() {
window.removeEventListener('keyup', this.keyPressListener, true);
window.removeEventListener('click', this.clickOutsideListener, true);
this.isOpened[Symbol.dispose]();
this.isLoading[Symbol.dispose]();
this.term[Symbol.dispose]();
this.selectedIndex[Symbol.dispose]();
this.currentSuggestions[Symbol.dispose]();
super[Symbol.dispose]();
}
selectSuggestion(index = this.selectedIndex.getValue()) {
const selectedSuggestion = this.currentSuggestions.getValue()[index];
this.isOpened.setValue(false);
this.emit('onSelectSuggestion', selectedSuggestion.entry);
}
lastGetSuggestionOptions;
getSuggestion = debounce(async (options) => {
try {
if (this.lastGetSuggestionOptions?.term === options.term) {
return;
}
const lastSelectedSuggestion = JSON.stringify(this.currentSuggestions.getValue()[this.selectedIndex.getValue()]);
this.isLoading.setValue(true);
this.lastGetSuggestionOptions = options;
const newEntries = await this.getEntries(options.term);
this.isOpened.setValue(true);
this.currentSuggestions.setValue(newEntries.map((e) => ({ entry: e, suggestion: this.getSuggestionEntry(e) })));
this.selectedIndex.setValue(Math.max(0, this.currentSuggestions.getValue().findIndex((e) => JSON.stringify(e) === lastSelectedSuggestion)));
}
finally {
this.isLoading.setValue(false);
}
}, 250);
constructor(getEntries, getSuggestionEntry) {
super();
this.getEntries = getEntries;
this.getSuggestionEntry = getSuggestionEntry;
window.addEventListener('keyup', this.keyPressListener, true);
window.addEventListener('click', this.clickOutsideListener, true);
}
};
SuggestManager = __decorate([
Injectable({ lifetime: 'singleton' }),
__metadata("design:paramtypes", [Function, Function])
], SuggestManager);
export { SuggestManager };
//# sourceMappingURL=suggest-manager.js.map