Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module:date-picker): overlay panel flicker when position changes #4315

Merged
merged 1 commit into from
Nov 8, 2019
Merged

fix(module:date-picker): overlay panel flicker when position changes #4315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/date-picker/lib/calendar/calendar-input.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class CalendarInputComponent implements OnInit {

ngOnInit(): void {
if (this.autoFocus) {
this.inputRef.nativeElement.focus();
setTimeout(() => this.inputRef.nativeElement.focus());
}
}

Expand Down
1 change: 0 additions & 1 deletion components/date-picker/picker.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
<div
[nzNoAnimation]="noAnimation"
[@slideMotion]="dropdownAnimation"
(@slideMotion.start)="animationStart()"
(@slideMotion.done)="animationDone()"
style="position: relative;"
[style.left]="currentPositionX === 'start' ? '-2px' : '2px'"
Expand Down
15 changes: 13 additions & 2 deletions components/date-picker/picker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ import {
ElementRef,
EventEmitter,
Input,
OnChanges,
Output,
SimpleChanges,
ViewChild,
ViewEncapsulation
} from '@angular/core';
Expand All @@ -36,7 +38,7 @@ import { DateHelperService } from 'ng-zorro-antd/i18n';
animations: [slideMotion],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NzPickerComponent implements AfterViewInit {
export class NzPickerComponent implements AfterViewInit, OnChanges {
@Input() noAnimation: boolean = false;
@Input() isRange: boolean = false;
@Input() open: boolean | undefined = undefined;
Expand Down Expand Up @@ -106,6 +108,12 @@ export class NzPickerComponent implements AfterViewInit {
}
}

ngOnChanges(changes: SimpleChanges): void {
if (changes.open) {
this.animationStart();
}
}

focus(): void {
if (this.isRange) {
const firstInput = (this.pickerInput.nativeElement as HTMLElement).querySelector(
Expand All @@ -121,6 +129,7 @@ export class NzPickerComponent implements AfterViewInit {
showOverlay(): void {
if (!this.realOpenState) {
this.overlayOpen = true;
this.animationStart();
this.openChange.emit(this.overlayOpen);
setTimeout(() => {
if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
Expand Down Expand Up @@ -211,7 +220,9 @@ export class NzPickerComponent implements AfterViewInit {
}

animationDone(): void {
this.animationOpenState = this.realOpenState;
if (!this.realOpenState) {
this.animationOpenState = false;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/i18n.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: 国际化

## 全局配置

`ng-zorro-antd` 提供了几个配置型 token 用于全局配置国际化文案和日期，`NZ_I18N`用于国际化文案，`NZ_DATE_CONFIG`用于修改日期相关特性，。除此之外，我们默认使用Angular的语言包来进行日期格式化（需要引入相应的Angular语言包）。
`ng-zorro-antd` 提供了几个配置型 token 用于全局配置国际化文案和日期，`NZ_I18N`用于国际化文案，`NZ_DATE_CONFIG`用于修改日期相关特性，除此之外，我们默认使用Angular的语言包来进行日期格式化（需要引入相应的Angular语言包）。

另外，我们还提供了可选的`NZ_DATE_LOCALE`用于date-fns方式来格式化本地日期（依赖 [`date-fns`](https://date-fns.org/docs/I18n) 库，详见下方的`如何使用 date-fns 进行日期格式化`）。

Expand Down