Skip to content

Commit

Permalink
feat(module:cascader): reposition cascader when column opens (NG-ZORR…
Browse files Browse the repository at this point in the history
…O#2836)

* feat(module:cascader): reposition cascader when column opens

close NG-ZORRO#2181, close NG-ZORRO#2809

* fix: typo
  • Loading branch information
Wendell authored and vthinkxie committed Feb 13, 2019
1 parent 8d200be commit c0f9b72
Showing 1 changed file with 42 additions and 7 deletions.
49 changes: 42 additions & 7 deletions components/cascader/nz-cascader.component.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
import {
forwardRef,
ChangeDetectionStrategy,
Expand All @@ -23,7 +23,14 @@ import { EXPANDED_DROPDOWN_POSITIONS } from '../core/overlay/overlay-position-ma
import { arrayEquals, toArray } from '../core/util/array';
import { InputBoolean } from '../core/util/convert';

import { CascaderOption, CascaderSearchOption, NzCascaderExpandTrigger, NzCascaderSize, NzCascaderTriggerType, NzShowSearchOptions } from './types';
import {
CascaderOption,
CascaderSearchOption,
NzCascaderExpandTrigger,
NzCascaderSize,
NzCascaderTriggerType,
NzShowSearchOptions
} from './types';

const defaultDisplayRender = label => label.join(' / ');

Expand Down Expand Up @@ -66,6 +73,7 @@ const defaultDisplayRender = label => label.join(' / ');
export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
@ViewChild('input') input: ElementRef;
@ViewChild('menu') menu: ElementRef;
@ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay;

@Input() @InputBoolean() nzShowInput = true;
@Input() @InputBoolean() nzShowArrow = true;
Expand Down Expand Up @@ -93,7 +101,10 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
@Input() nzLoadData: (node: CascaderOption, index?: number) => PromiseLike<any>;

@Input()
get nzOptions(): CascaderOption[] { return this.columns[ 0 ]; }
get nzOptions(): CascaderOption[] {
return this.columns[ 0 ];
}

set nzOptions(options: CascaderOption[] | null) {
this.columnsSnapshot = this.columns = options && options.length ? [ options ] : [];
if (!this.isSearching) {
Expand Down Expand Up @@ -139,7 +150,11 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
this._inputValue = inputValue;
this.toggleSearchMode();
}
get inputValue(): string { return this._inputValue; }

get inputValue(): string {
return this._inputValue;
}

private _inputValue = '';

get menuCls(): ClassMap {
Expand Down Expand Up @@ -293,6 +308,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
}

this.cdr.detectChanges();
this.reposition();
}

private loadChildrenAsync(option: CascaderOption, columnIndex: number, success?: () => void, failure?: () => void): void {
Expand All @@ -305,6 +321,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
option.children.forEach(child => child.parent = columnIndex < 0 ? undefined : option);
this.setColumnData(option.children, columnIndex + 1);
this.cdr.detectChanges();
this.reposition();
}
if (success) {
success();
Expand Down Expand Up @@ -667,9 +684,15 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
const disabled = forceDisabled || node.disabled;
path.push(node);
node.children.forEach((sNode) => {
if (!sNode.parent) { sNode.parent = node; } // Build parent reference when doing searching
if (!sNode.isLeaf) { loopParent(sNode, disabled); }
if (sNode.isLeaf || !sNode.children || !sNode.children.length) { loopChild(sNode, disabled); }
if (!sNode.parent) {
sNode.parent = node;
} // Build parent reference when doing searching
if (!sNode.isLeaf) {
loopParent(sNode, disabled);
}
if (sNode.isLeaf || !sNode.children || !sNode.children.length) {
loopChild(sNode, disabled);
}
});
path.pop();
};
Expand Down Expand Up @@ -819,4 +842,16 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
this.cdr.detectChanges();
}
}

/**
* Reposition the cascader panel. When a menu opens, the cascader expands
* and may exceed the browser boundary.
*/
private reposition(): void {
if (this.overlay && this.overlay.overlayRef && this.menuVisible) {
Promise.resolve().then(() => {
this.overlay.overlayRef.updatePosition();
});
}
}
}

0 comments on commit c0f9b72

Please sign in to comment.