Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Oct 18, 2022
1 parent 37f9629 commit c990b87
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 161 deletions.
135 changes: 65 additions & 70 deletions src/app/components/dropdown/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,83 +87,79 @@ export class DropdownItem {
<div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
<span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
</div>
<p-overlay #overlay *ngIf="overlayVisible" [autoZIndex]="autoZIndex" [container]="container" @overlayAnimation (@overlayAnimation.start)="onOverlayAnimationStart($event)" [showTransitionOptions]="showTransitionOptions" [hideTransitionOptions]="hideTransitionOptions" [panelStyle]="panelStyle" [panelStyleClass]="panelStyleClass" [panelClass]="'p-dropdown-panel p-component'" [appendTo]="appendTo" [overlayDirection]="overlayDirection" [baseZIndex]="baseZIndex">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
<ng-container *ngIf="filterTemplate; else builtInFilterElement">
<ng-container *ngTemplateOutlet="filterTemplate; context: {options: filterOptions}"></ng-container>
</ng-container>
<ng-template #builtInFilterElement>
<div class="p-dropdown-filter-container">
<input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
(keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
<span class="p-dropdown-filter-icon pi pi-search"></span>
</div>
</ng-template>
</div>
<div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
<p-scroller *ngIf="virtualScroll" #scroller [items]="optionsToDisplay" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_itemSize" [autoSize]="true"
[lazy]="lazy" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
<ng-template pTemplate="content" let-items let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
<p-overlay #overlay *ngIf="overlayVisible" [(visible)]="overlayVisible" [autoZIndex]="autoZIndex" [baseZIndex]="baseZIndex" [container]="container" (onOverlayHide)="hide()" (onAnimationStart)="onOverlayAnimationStart($event)" [overlayDirection]="overlayDirection">
<div [ngClass]="'p-dropdown-panel p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
<ng-container *ngIf="filterTemplate; else builtInFilterElement">
<ng-container *ngTemplateOutlet="filterTemplate; context: {options: filterOptions}"></ng-container>
</ng-container>
<ng-template #builtInFilterElement>
<div class="p-dropdown-filter-container">
<input #filter type="text" autocomplete="off" [value]="filterValue||''" class="p-dropdown-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder"
(keydown.enter)="$event.preventDefault()" (keydown)="onKeydown($event, false)" (input)="onFilterInputChange($event)" [attr.aria-label]="ariaFilterLabel" [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId">
<span class="p-dropdown-filter-icon pi pi-search"></span>
</div>
</ng-template>
<ng-container *ngIf="loaderTemplate">
<ng-template pTemplate="loader" let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
</div>
<div class="p-dropdown-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
<p-scroller *ngIf="virtualScroll" #scroller [items]="optionsToDisplay" [style]="{'height': scrollHeight}" [itemSize]="virtualScrollItemSize||_itemSize" [autoSize]="true"
[lazy]="lazy" (onLazyLoad)="onLazyLoad.emit($event)" [options]="virtualScrollOptions">
<ng-template pTemplate="content" let-items let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: items, options: scrollerOptions}"></ng-container>
</ng-template>
</ng-container>
</p-scroller>
<ng-container *ngIf="!virtualScroll">
<ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: optionsToDisplay, options: {}}"></ng-container>
</ng-container>
<ng-template #buildInItems let-items let-scrollerOptions="options">
<ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
<ng-container *ngIf="group">
<ng-template ngFor let-optgroup [ngForOf]="items">
<li class="p-dropdown-item-group" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
<ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
</li>
<ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}"></ng-container>
<ng-container *ngIf="loaderTemplate">
<ng-template pTemplate="loader" let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="loaderTemplate; context: {options: scrollerOptions}"></ng-container>
</ng-template>
</ng-container>
<ng-container *ngIf="!group">
<ng-container *ngTemplateOutlet="itemslist; context: {$implicit: items, selectedOption: selectedOption}"></ng-container>
</ng-container>
<ng-template #itemslist let-options let-selectedOption="selectedOption">
<ng-template ngFor let-option let-i="index" [ngForOf]="options">
<p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
(onClick)="onItemClick($event)"
[template]="itemTemplate"></p-dropdownItem>
</ng-template>
</ng-template>
<li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
{{emptyFilterMessageLabel}}
</p-scroller>
<ng-container *ngIf="!virtualScroll">
<ng-container *ngTemplateOutlet="buildInItems; context: {$implicit: optionsToDisplay, options: {}}"></ng-container>
</ng-container>
<ng-template #buildInItems let-items let-scrollerOptions="options">
<ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
<ng-container *ngIf="group">
<ng-template ngFor let-optgroup [ngForOf]="items">
<li class="p-dropdown-item-group" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
<ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
</li>
<ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption}"></ng-container>
</ng-template>
</ng-container>
<ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
</li>
<li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<ng-container *ngIf="!emptyTemplate; else empty">
{{emptyMessageLabel}}
<ng-container *ngIf="!group">
<ng-container *ngTemplateOutlet="itemslist; context: {$implicit: items, selectedOption: selectedOption}"></ng-container>
</ng-container>
<ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
</li>
</ul>
</ng-template>
<ng-template #itemslist let-options let-selectedOption="selectedOption">
<ng-template ngFor let-option let-i="index" [ngForOf]="options">
<p-dropdownItem [option]="option" [selected]="selectedOption == option" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)"
(onClick)="onItemClick($event)"
[template]="itemTemplate"></p-dropdownItem>
</ng-template>
</ng-template>
<li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
{{emptyFilterMessageLabel}}
</ng-container>
<ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
</li>
<li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{'height': scrollerOptions.itemSize + 'px'}">
<ng-container *ngIf="!emptyTemplate; else empty">
{{emptyMessageLabel}}
</ng-container>
<ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
</li>
</ul>
</ng-template>
</div>
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</div>
<ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
</p-overlay>
</div>
`,
animations: [
trigger('overlayAnimation', [
transition(':enter, :leave', [
query('@*', animateChild(), {optional: true})
])
])
],

host: {
'class': 'p-element p-inputwrapper',
'[class.p-inputwrapper-filled]': 'filled',
Expand Down Expand Up @@ -722,13 +718,12 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
}

onOverlayAnimationStart(event: AnimationEvent) {
if (event.toState === null && event.fromState === 'void') {
if (event.toState === 'visible') {
this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.el.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-dropdown-items-wrapper');
this.virtualScroll && this.scroller.setContentEl(this.itemsViewChild.nativeElement);
this.overlayViewChild.appendOverlay();
this.overlayViewChild.alignOverlay();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();

if (this.options && this.options.length) {
Expand Down Expand Up @@ -757,7 +752,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView

this.onShow.emit(event);
}
if (event.toState === 'void' && event.fromState === null) {
if (event.toState === 'void') {
this.onOverlayHide();
this.onHide.emit(event);
}
Expand Down
19 changes: 14 additions & 5 deletions src/app/components/overlay/overlay.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
.p-overlay-mask {
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.p-overlay-responsive {
Expand All @@ -16,13 +17,21 @@
}

.p-overlay-panel-start {
align-self: flex-start;
align-items: flex-start;
}

.p-overlay-panel-center {
align-self: center;
align-items: center;
}

.p-overlay-panel-end {
align-self: flex-end;
align-items: flex-end;
}

.p-overlay {
position: absolute;
}

.p-overlay-panel-static {
position: static;
}
Loading

0 comments on commit c990b87

Please sign in to comment.