Skip to content

Commit

Permalink
feat(module:select): support nzScrollToBottom event (#678)
Browse files Browse the repository at this point in the history
close #676
  • Loading branch information
vthinkxie authored Dec 6, 2017
1 parent 05c1f87 commit b7cc148
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
20 changes: 19 additions & 1 deletion src/components/select/nz-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ import { NzLocaleService } from '../locale/index';
<div
[ngClass]="_dropDownClassMap" [@dropDownAnimation]="_dropDownPosition">
<div style="overflow: auto;">
<ul class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root" #dropdownUl>
<ul class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root" #dropdownUl (scroll)="dropDownScroll(dropdownUl)">
<li
*ngFor="let option of _filterOptions"
[class.ant-select-dropdown-menu-item-disabled]="option.nzDisabled"
Expand Down Expand Up @@ -190,6 +190,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
@ViewChild('dropdownUl') dropdownUl: ElementRef;
@Output() nzSearchChange: EventEmitter<any> = new EventEmitter();
@Output() nzOpenChange: EventEmitter<any> = new EventEmitter();
@Output() nzScrollToBottom: EventEmitter<any> = new EventEmitter();
@Input() nzFilter = true;
@Input() nzMaxMultiple = Infinity;

Expand Down Expand Up @@ -309,6 +310,11 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
this._isOpen = isOpen;
this.nzOpenChange.emit(this._isOpen);
this.setClassMap();
if (this._isOpen) {
setTimeout(() => {
this.checkDropDownScroll();
});
}
}

get nzOpen(): boolean {
Expand Down Expand Up @@ -716,6 +722,18 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
this.nzDisabled = isDisabled;
}

dropDownScroll(ul) {
if (ul && (ul.scrollHeight - ul.scrollTop === ul.clientHeight)) {
this.nzScrollToBottom.emit(true);
}
}

checkDropDownScroll() {
if (this.dropdownUl && (this.dropdownUl.nativeElement.scrollHeight === this.dropdownUl.nativeElement.clientHeight)) {
this.nzScrollToBottom.emit(true);
}
}

constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private _locale: NzLocaleService) {
this._el = this._elementRef.nativeElement;
}
Expand Down
6 changes: 6 additions & 0 deletions src/showcase/nz-demo-select/nz-demo-select.html
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,12 @@ <h3 id="Select props"><span>nz-select</span>
<td>attribute</td>
<td>-</td>
</tr>
<tr>
<td>nzScrollToBottom</td>
<td>下拉菜单滚动到底部回调,可用于作为动态加载的触发条件</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>nzPlaceHolder</td>
<td>选择框默认文字</td>
Expand Down

0 comments on commit b7cc148

Please sign in to comment.