@alauda-fe/common
Version:
Alauda frontend team common codes.
122 lines • 13.4 kB
JavaScript
import { DropdownDirective, MenuItemComponent, SearchComponent, } from '@alauda/ui';
import { ChangeDetectorRef, Directive, ElementRef, QueryList, ViewChild, ViewChildren, } from '@angular/core';
import { Subject } from 'rxjs';
import { scrollIntoView, sleep } from '../../../../core/utils/public-api';
import * as i0 from "@angular/core";
const _c0 = ["menuItemsContainer"];
export class BaseSelection {
constructor(cdr) {
this.cdr = cdr;
this.focusedMenuItemIndex = -1;
this.keyword$$ = new Subject();
this.onKeyDown = (event) => {
switch (event.key) {
case 'ArrowDown': {
this.focusMenuItem('down');
event.stopPropagation();
event.preventDefault();
break;
}
case 'ArrowUp': {
this.focusMenuItem('up');
event.stopPropagation();
event.preventDefault();
break;
}
case 'Enter': {
if (this.focusedMenuItemIndex >= 0) {
this.selectByIndex(this.focusedMenuItemIndex);
this.closeDropdown();
}
event.stopPropagation();
event.preventDefault();
break;
}
case 'Escape': {
this.closeDropdown();
event.stopPropagation();
event.preventDefault();
break;
}
}
};
}
async handleMenuVisible(visible) {
if (visible) {
await sleep();
const input = this.getInputEl();
input.focus();
input.addEventListener('keydown', this.onKeyDown);
}
else {
this.keyword$$.next('');
this.getInputEl().removeEventListener('keydown', this.onKeyDown);
}
}
getInputEl() {
return this.inputContainer.nativeElement.querySelector('input');
}
closeDropdown() {
this.dropdown.hide();
}
focusMenuItem(dir) {
if (!this.menuItems.length) {
return;
}
const items = this.menuItems.toArray();
const step = dir === 'down' ? 1 : -1;
let i = this.focusedMenuItemIndex;
i = i + step;
if (i >= items.length) {
i = 0;
}
else if (i < 0) {
i = items.length - 1;
}
this.resetFocusedItem(i);
}
resetFocusedItem(index) {
if (this.focusedMenuItemIndex === index) {
return;
}
this.focusedMenuItemIndex = index;
this.cdr.markForCheck();
if (this.focusedMenuItemIndex >= 0) {
this.scrollToOption(this.menuItems.toArray()[this.focusedMenuItemIndex]);
}
}
scrollToOption(item) {
if (this.menuItemsContainer) {
scrollIntoView(this.menuItemsContainer.nativeElement, item.nativeElement);
}
}
static { this.ɵfac = function BaseSelection_Factory(t) { return new (t || BaseSelection)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseSelection, viewQuery: function BaseSelection_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(SearchComponent, 5, ElementRef);
i0.ɵɵviewQuery(_c0, 5);
i0.ɵɵviewQuery(DropdownDirective, 5);
i0.ɵɵviewQuery(MenuItemComponent, 5, ElementRef);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputContainer = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuItemsContainer = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdown = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuItems = _t);
} } }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseSelection, [{
type: Directive
}], () => [{ type: i0.ChangeDetectorRef }], { inputContainer: [{
type: ViewChild,
args: [SearchComponent, { read: ElementRef }]
}], menuItems: [{
type: ViewChildren,
args: [MenuItemComponent, { read: ElementRef }]
}], menuItemsContainer: [{
type: ViewChild,
args: ['menuItemsContainer']
}], dropdown: [{
type: ViewChild,
args: [DropdownDirective]
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1zZWxlY3Rpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbW1vbi9zcmMvcGFnZS1zY2FmZm9sZC9wYWdlLWhlYWRlci9jb21tb24tbGF5b3V0L3Byb2plY3Qtc2VsZWN0L2Jhc2Utc2VsZWN0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxpQkFBaUIsRUFDakIsaUJBQWlCLEVBQ2pCLGVBQWUsR0FDaEIsTUFBTSxZQUFZLENBQUM7QUFDcEIsT0FBTyxFQUNMLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLFNBQVMsRUFDVCxTQUFTLEVBQ1QsWUFBWSxHQUNiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFL0IsT0FBTyxFQUFFLGNBQWMsRUFBRSxLQUFLLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQzs7O0FBRzFFLE1BQU0sT0FBZ0IsYUFBYTtJQWlCakMsWUFBc0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFKNUMseUJBQW9CLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFFMUIsY0FBUyxHQUFHLElBQUksT0FBTyxFQUFVLENBQUM7UUFvQmpCLGNBQVMsR0FBRyxDQUFDLEtBQW9CLEVBQUUsRUFBRTtZQUNwRCxRQUFRLEtBQUssQ0FBQyxHQUFHLEVBQUUsQ0FBQztnQkFDbEIsS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDO29CQUNqQixJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO29CQUMzQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7b0JBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztvQkFDdkIsTUFBTTtnQkFDUixDQUFDO2dCQUNELEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQztvQkFDZixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FB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SUFBSSxJQUFJLENBQUMsb0JBQW9CLElBQUksQ0FBQyxFQUFFLENBQUM7WUFDbkMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUM7UUFDM0UsQ0FBQztJQUNILENBQUM7SUFFTyxjQUFjLENBQUMsSUFBZ0I7UUFDckMsSUFBSSxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztZQUM1QixjQUFjLENBQUMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDNUUsQ0FBQztJQUNILENBQUM7OEVBeEdtQixhQUFhO29FQUFiLGFBQWE7MkJBQ3RCLGVBQWUsS0FBVSxVQUFVOzsyQkFTbkMsaUJBQWlCOzJCQU5kLGlCQUFpQixLQUFVLFVBQVU7Ozs7Ozs7OztpRkFKL0IsYUFBYTtjQURsQyxTQUFTO2tEQUdFLGNBQWM7a0JBRHZCLFNBQVM7bUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtZQUl0QyxTQUFTO2tCQURsQixZQUFZO21CQUFDLGlCQUFpQixFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTtZQUkzQyxrQkFBa0I7a0JBRDNCLFNBQVM7bUJBQUMsb0JBQW9CO1lBSXJCLFFBQVE7a0JBRGpCLFNBQVM7bUJBQUMsaUJBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRHJvcGRvd25EaXJlY3RpdmUsXG4gIE1lbnVJdGVtQ29tcG9uZW50LFxuICBTZWFyY2hDb21wb25lbnQsXG59IGZyb20gJ0BhbGF1ZGEvdWknO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIERpcmVjdGl2ZSxcbiAgRWxlbWVudFJlZixcbiAgUXVlcnlMaXN0LFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDaGlsZHJlbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IHNjcm9sbEludG9WaWV3LCBzbGVlcCB9IGZyb20gJy4uLy4uLy4uLy4uL2NvcmUvdXRpbHMvcHVibGljLWFwaSc7XG5cbkBEaXJlY3RpdmUoKVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VTZWxlY3Rpb24ge1xuICBAVmlld0NoaWxkKFNlYXJjaENvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIHByb3RlY3RlZCBpbnB1dENvbnRhaW5lcjogRWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD47XG5cbiAgQFZpZXdDaGlsZHJlbihNZW51SXRlbUNvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIHByb3RlY3RlZCBtZW51SXRlbXM6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcblxuICBAVmlld0NoaWxkKCdtZW51SXRlbXNDb250YWluZXInKVxuICBwcm90ZWN0ZWQgbWVudUl0ZW1zQ29udGFpbmVyOiBFbGVtZW50UmVmO1xuXG4gIEBWaWV3Q2hpbGQoRHJvcGRvd25EaXJlY3RpdmUpXG4gIHByb3RlY3RlZCBkcm9wZG93bjogRHJvcGRvd25EaXJlY3RpdmU7XG5cbiAgZm9jdXNlZE1lbnVJdGVtSW5kZXggPSAtMTtcblxuICBrZXl3b3JkJCQgPSBuZXcgU3ViamVjdDxzdHJpbmc+KCk7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgYXN5bmMgaGFuZGxlTWVudVZpc2libGUodmlzaWJsZTogYm9vbGVhbikge1xuICAgIGlmICh2aXNpYmxlKSB7XG4gICAgICBhd2FpdCBzbGVlcCgpO1xuICAgICAgY29uc3QgaW5wdXQgPSB0aGlzLmdldElucHV0RWwoKTtcbiAgICAgIGlucHV0LmZvY3VzKCk7XG4gICAgICBpbnB1dC5hZGRFdmVudExpc3RlbmVyKCdrZXlkb3duJywgdGhpcy5vbktleURvd24pO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmtleXdvcmQkJC5uZXh0KCcnKTtcbiAgICAgIHRoaXMuZ2V0SW5wdXRFbCgpLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCB0aGlzLm9uS2V5RG93bik7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBnZXRJbnB1dEVsKCk6IEhUTUxJbnB1dEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLmlucHV0Q29udGFpbmVyLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignaW5wdXQnKTtcbiAgfVxuXG4gIHByaXZhdGUgcmVhZG9ubHkgb25LZXlEb3duID0gKGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiB7XG4gICAgc3dpdGNoIChldmVudC5rZXkpIHtcbiAgICAgIGNhc2UgJ0Fycm93RG93bic6IHtcbiAgICAgICAgdGhpcy5mb2N1c01lbnVJdGVtKCdkb3duJyk7XG4gICAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBicmVhaztcbiAgICAgIH1cbiAgICAgIGNhc2UgJ0Fycm93VXAnOiB7XG4gICAgICAgIHRoaXMuZm9jdXNNZW51SXRlbSgndXAnKTtcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgfVxuICAgICAgY2FzZSAnRW50ZXInOiB7XG4gICAgICAgIGlmICh0aGlzLmZvY3VzZWRNZW51SXRlbUluZGV4ID49IDApIHtcbiAgICAgICAgICB0aGlzLnNlbGVjdEJ5SW5kZXgodGhpcy5mb2N1c2VkTWVudUl0ZW1JbmRleCk7XG4gICAgICAgICAgdGhpcy5jbG9zZURyb3Bkb3duKCk7XG4gICAgICAgIH1cbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgfVxuICAgICAgY2FzZSAnRXNjYXBlJzoge1xuICAgICAgICB0aGlzLmNsb3NlRHJvcGRvd24oKTtcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIGJyZWFrO1xuICAgICAgfVxuICAgIH1cbiAgfTtcblxuICBwcml2YXRlIGNsb3NlRHJvcGRvd24oKSB7XG4gICAgdGhpcy5kcm9wZG93bi5oaWRlKCk7XG4gIH1cblxuICBwcml2YXRlIGZvY3VzTWVudUl0ZW0oZGlyOiAnZG93bicgfCAndXAnKSB7XG4gICAgaWYgKCF0aGlzLm1lbnVJdGVtcy5sZW5ndGgpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgaXRlbXMgPSB0aGlzLm1lbnVJdGVtcy50b0FycmF5KCk7XG4gICAgY29uc3Qgc3RlcCA9IGRpciA9PT0gJ2Rvd24nID8gMSA6IC0xO1xuICAgIGxldCBpID0gdGhpcy5mb2N1c2VkTWVudUl0ZW1JbmRleDtcbiAgICBpID0gaSArIHN0ZXA7XG4gICAgaWYgKGkgPj0gaXRlbXMubGVuZ3RoKSB7XG4gICAgICBpID0gMDtcbiAgICB9IGVsc2UgaWYgKGkgPCAwKSB7XG4gICAgICBpID0gaXRlbXMubGVuZ3RoIC0gMTtcbiAgICB9XG5cbiAgICB0aGlzLnJlc2V0Rm9jdXNlZEl0ZW0oaSk7XG4gIH1cblxuICBwcml2YXRlIHJlc2V0Rm9jdXNlZEl0ZW0oaW5kZXg6IG51bWJlcikge1xuICAgIGlmICh0aGlzLmZvY3VzZWRNZW51SXRlbUluZGV4ID09PSBpbmRleCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuZm9jdXNlZE1lbnVJdGVtSW5kZXggPSBpbmRleDtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICBpZiAodGhpcy5mb2N1c2VkTWVudUl0ZW1JbmRleCA+PSAwKSB7XG4gICAgICB0aGlzLnNjcm9sbFRvT3B0aW9uKHRoaXMubWVudUl0ZW1zLnRvQXJyYXkoKVt0aGlzLmZvY3VzZWRNZW51SXRlbUluZGV4XSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzY3JvbGxUb09wdGlvbihpdGVtOiBFbGVtZW50UmVmKSB7XG4gICAgaWYgKHRoaXMubWVudUl0ZW1zQ29udGFpbmVyKSB7XG4gICAgICBzY3JvbGxJbnRvVmlldyh0aGlzLm1lbnVJdGVtc0NvbnRhaW5lci5uYXRpdmVFbGVtZW50LCBpdGVtLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cbiAgfVxuXG4gIGFic3RyYWN0IHNlbGVjdEJ5SW5kZXgoaW5kZXg6IG51bWJlcik6IHZvaWQ7XG59XG4iXX0=