From 64f5ce58bf57f4df8b15c6ec67d85af3f9737bc1 Mon Sep 17 00:00:00 2001 From: Wilson Zeng Date: Thu, 24 May 2018 14:32:23 +0800 Subject: [PATCH] fix(module:date-picker): improve the horizontal position adaptability (#1495) * fix(module:date-picker): improve the horizontal position adaptability close #1450 * rename nzPlaceholder to nzPlaceHolder --- .../core/overlay/overlay-position-map.ts | 28 +++++++++---------- .../date-picker/abstract-picker.component.ts | 6 ++-- .../date-picker/date-picker.component.spec.ts | 8 +++--- .../date-range-picker.component.html | 4 +-- components/date-picker/demo/basic.ts | 4 +-- components/date-picker/demo/disabled-date.ts | 2 +- components/date-picker/demo/extra-footer.ts | 2 +- components/date-picker/demo/size.ts | 4 +-- components/date-picker/demo/start-end.ts | 4 +-- components/date-picker/demo/time.ts | 4 +-- components/date-picker/doc/index.en-US.md | 2 +- components/date-picker/doc/index.zh-CN.md | 2 +- .../date-picker/month-picker.component.html | 2 +- .../month-picker.component.spec.ts | 8 +++--- .../date-picker/month-picker.component.ts | 2 +- components/date-picker/picker.component.html | 7 +++-- components/date-picker/picker.component.ts | 21 ++++++++++++-- .../range-picker.component.spec.ts | 8 +++--- 18 files changed, 67 insertions(+), 51 deletions(-) diff --git a/components/core/overlay/overlay-position-map.ts b/components/core/overlay/overlay-position-map.ts index 07bc1a02ce8..ac2797b8aa2 100644 --- a/components/core/overlay/overlay-position-map.ts +++ b/components/core/overlay/overlay-position-map.ts @@ -91,20 +91,20 @@ export const POSITION_MAP: { [key: string]: ConnectionPositionPair } = { export const DEFAULT_4_POSITIONS = _objectValues([ POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left]); export const DEFAULT_DROPDOWN_POSITIONS = _objectValues([ POSITION_MAP.bottomLeft, POSITION_MAP.topLeft ]); -export const DEFAULT_DATEPICKER_POSITIONS = [ - { - originX : 'start', - originY : 'top', - overlayX: 'start', - overlayY: 'top', - }, - { - originX : 'start', - originY : 'bottom', - overlayX: 'start', - overlayY: 'bottom', - } -] as ConnectionPositionPair[]; +// export const DEFAULT_DATEPICKER_POSITIONS = [ +// { +// originX : 'start', +// originY : 'top', +// overlayX: 'start', +// overlayY: 'top', +// }, +// { +// originX : 'start', +// originY : 'bottom', +// overlayX: 'start', +// overlayY: 'bottom', +// } +// ] as ConnectionPositionPair[]; export const DEFAULT_MENTION_POSITIONS = [ POSITION_MAP.bottomLeft, diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts index 9b5b789fa87..4181a15259b 100644 --- a/components/date-picker/abstract-picker.component.ts +++ b/components/date-picker/abstract-picker.component.ts @@ -35,7 +35,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, Cont @Input() nzClassName: string; @Input() nzDisabledDate: (d: Date) => boolean; @Input() nzLocale: NzDatePickerI18nInterface; - @Input() nzPlaceholder: string | string[]; + @Input() nzPlaceHolder: string | string[]; @Input() nzPopupStyle: object = POPUP_STYLE_PATCH; @Input() nzDropdownClassName: string; @Input() nzSize: 'large' | 'small'; @@ -71,8 +71,8 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, Cont this.initValue(); // Default placeholder - if (!this.nzPlaceholder) { - this.nzPlaceholder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder; + if (!this.nzPlaceHolder) { + this.nzPlaceHolder = this.isRange ? this.nzLocale.lang.rangePlaceholder : this.nzLocale.lang.placeholder; } } diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index 77920505be5..f0705edbc55 100644 --- a/components/date-picker/date-picker.component.spec.ts +++ b/components/date-picker/date-picker.component.spec.ts @@ -163,8 +163,8 @@ describe('NzDatePickerComponent', () => { expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey); }); - it('should support nzPlaceholder', () => { - const featureKey = fixtureInstance.nzPlaceholder = 'TEST_PLACEHOLDER'; + it('should support nzPlaceHolder', () => { + const featureKey = fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER'; fixture.detectChanges(); expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey); }); @@ -687,7 +687,7 @@ describe('NzDatePickerComponent', () => { [nzClassName]="nzClassName" [nzDisabledDate]="nzDisabledDate" [nzLocale]="nzLocale" - [nzPlaceholder]="nzPlaceholder" + [nzPlaceHolder]="nzPlaceHolder" [nzPopupStyle]="nzPopupStyle" [nzDropdownClassName]="nzDropdownClassName" [nzSize]="nzSize" @@ -734,7 +734,7 @@ class NzTestDatePickerComponent { nzClassName; nzDisabledDate; nzLocale; - nzPlaceholder; + nzPlaceHolder; nzPopupStyle; nzDropdownClassName; nzSize; diff --git a/components/date-picker/date-range-picker.component.html b/components/date-picker/date-range-picker.component.html index 650c9a5f819..21eda07a6e7 100644 --- a/components/date-picker/date-range-picker.component.html +++ b/components/date-picker/date-range-picker.component.html @@ -8,7 +8,7 @@ [allowClear]="nzAllowClear" [autoFocus]="nzAutoFocus" [className]="nzClassName" - [placeholder]="nzPlaceholder" + [placeholder]="nzPlaceHolder" [size]="nzSize" [style]="nzStyle" (openChange)="onOpenChange($event)" @@ -27,7 +27,7 @@ [dateRender]="nzDateRender" [disabledDate]="nzDisabledDate" [disabledTime]="nzDisabledTime" - [placeholder]="nzPlaceholder" + [placeholder]="nzPlaceHolder" [dropdownClassName]="nzDropdownClassName" [popupStyle]="nzPopupStyle" [extraFooter]="extraFooter" diff --git a/components/date-picker/demo/basic.ts b/components/date-picker/demo/basic.ts index 032bcaf6288..6b98d20107d 100644 --- a/components/date-picker/demo/basic.ts +++ b/components/date-picker/demo/basic.ts @@ -7,11 +7,11 @@ import * as getISOWeek from 'date-fns/get_iso_week'; template: `
- +

- + `, styles : [ ` :host ::ng-deep .ant-calendar-picker { diff --git a/components/date-picker/demo/disabled-date.ts b/components/date-picker/demo/disabled-date.ts index 65f927d1735..445a1006c8e 100644 --- a/components/date-picker/demo/disabled-date.ts +++ b/components/date-picker/demo/disabled-date.ts @@ -12,7 +12,7 @@ import * as setHours from 'date-fns/set_hours'; [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }">
- +
- + `, styles: [` :host ::ng-deep .ant-calendar-picker { diff --git a/components/date-picker/demo/size.ts b/components/date-picker/demo/size.ts index 2c5199dc348..5bbb6a8ffe3 100644 --- a/components/date-picker/demo/size.ts +++ b/components/date-picker/demo/size.ts @@ -11,11 +11,11 @@ import { Component } from '@angular/core';


- +

- + `, styles: [` :host ::ng-deep .ant-calendar-picker { diff --git a/components/date-picker/demo/start-end.ts b/components/date-picker/demo/start-end.ts index 8e550d188cd..ad67bc46bd7 100644 --- a/components/date-picker/demo/start-end.ts +++ b/components/date-picker/demo/start-end.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="startValue" - nzPlaceholder="Start" + nzPlaceHolder="Start" (ngModelChange)="onStartChange($event)" (nzOnOpenChange)="handleStartOpenChange($event)" > @@ -17,7 +17,7 @@ import { Component } from '@angular/core'; nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" [(ngModel)]="endValue" - nzPlaceholder="End" + nzPlaceHolder="End" [nzOpen]="endOpen" (ngModelChange)="onEndChange($event)" (nzOnOpenChange)="handleEndOpenChange($event)" diff --git a/components/date-picker/demo/time.ts b/components/date-picker/demo/time.ts index 79b28a141a0..0ad1c789385 100644 --- a/components/date-picker/demo/time.ts +++ b/components/date-picker/demo/time.ts @@ -6,7 +6,7 @@ import { Component } from '@angular/core'; @@ -14,7 +14,7 @@ import { Component } from '@angular/core'; diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md index b9a36f8dc84..18a66a90a7c 100644 --- a/components/date-picker/doc/index.en-US.md +++ b/components/date-picker/doc/index.en-US.md @@ -44,7 +44,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke | nzDisabledDate | specify the date that cannot be selected | (current: Date) => boolean | - | | nzLocale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | nzOpen | open state of picker | boolean | - | -| nzPlaceholder | placeholder of date input | string / string[] | - | +| nzPlaceHolder | placeholder of date input | string / string[] | - | | nzPopupStyle | to customize the style of the popup calendar | object | {} | | nzDropdownClassName | to customize the className of the popup calendar | string | - | | nzSize | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - | diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md index 9d4e235e300..aa1e0249f72 100644 --- a/components/date-picker/doc/index.zh-CN.md +++ b/components/date-picker/doc/index.zh-CN.md @@ -45,7 +45,7 @@ registerLocaleData(zh); | nzDisabledDate | 不可选择的日期 | (current: Date) => boolean | 无 | | nzLocale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | nzOpen | 控制弹层是否展开 | boolean | - | -| nzPlaceholder | 输入框提示文字 | string / string[] | - | +| nzPlaceHolder | 输入框提示文字 | string / string[] | - | | nzPopupStyle | 额外的弹出日历样式 | object | {} | | nzDropdownClassName | 额外的弹出日历 className | string | - | | nzSize | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 | diff --git a/components/date-picker/month-picker.component.html b/components/date-picker/month-picker.component.html index eb0af731f15..e23c8bbff4b 100644 --- a/components/date-picker/month-picker.component.html +++ b/components/date-picker/month-picker.component.html @@ -8,7 +8,7 @@ [allowClear]="nzAllowClear" [autoFocus]="nzAutoFocus" [className]="nzClassName" - [placeholder]="nzPlaceholder" + [placeholder]="nzPlaceHolder" [size]="nzSize" [style]="nzStyle" (openChange)="onOpenChange($event)" diff --git a/components/date-picker/month-picker.component.spec.ts b/components/date-picker/month-picker.component.spec.ts index 7cb5d0db330..19391e8e5de 100644 --- a/components/date-picker/month-picker.component.spec.ts +++ b/components/date-picker/month-picker.component.spec.ts @@ -175,8 +175,8 @@ describe('NzMonthPickerComponent', () => { expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey); }); - it('should support nzPlaceholder', () => { - const featureKey = fixtureInstance.nzPlaceholder = 'TEST_PLACEHOLDER'; + it('should support nzPlaceHolder', () => { + const featureKey = fixtureInstance.nzPlaceHolder = 'TEST_PLACEHOLDER'; fixture.detectChanges(); expect(getPickerTrigger().getAttribute('placeholder')).toBe(featureKey); }); @@ -418,7 +418,7 @@ describe('NzMonthPickerComponent', () => { [nzClassName]="nzClassName" [nzDisabledDate]="nzDisabledDate" [nzLocale]="nzLocale" - [nzPlaceholder]="nzPlaceholder" + [nzPlaceHolder]="nzPlaceHolder" [nzPopupStyle]="nzPopupStyle" [nzDropdownClassName]="nzDropdownClassName" [nzSize]="nzSize" @@ -455,7 +455,7 @@ class NzTestMonthPickerComponent { nzClassName; nzDisabledDate; nzLocale; - nzPlaceholder; + nzPlaceHolder; nzPopupStyle; nzDropdownClassName; nzSize; diff --git a/components/date-picker/month-picker.component.ts b/components/date-picker/month-picker.component.ts index 05072b03a6b..320f0d61cfb 100644 --- a/components/date-picker/month-picker.component.ts +++ b/components/date-picker/month-picker.component.ts @@ -21,7 +21,7 @@ import { PanelMode, PickerResult } from './standard-types'; }) export class NzMonthPickerComponent extends AbstractPickerComponent implements OnChanges { - @Input() nzPlaceholder: string; + @Input() nzPlaceHolder: string; @Input() nzRenderExtraFooter: FunctionProp | string>; @Input() nzDefaultValue: CandyDate; diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html index 200ddb8f459..ea21016c664 100644 --- a/components/date-picker/picker.component.html +++ b/components/date-picker/picker.component.html @@ -67,11 +67,12 @@ (backdropClick)="onClickBackdrop()" >
diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts index 185c5660179..0e6afa46a70 100644 --- a/components/date-picker/picker.component.ts +++ b/components/date-picker/picker.component.ts @@ -18,7 +18,6 @@ import { } from '@angular/core'; import { dropDownAnimation } from '../core/animation/dropdown-animations'; -import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map'; import { NzI18nService } from '../i18n/nz-i18n.service'; import { CandyDate } from './lib/candy-date'; @@ -71,9 +70,23 @@ export class NzPickerComponent implements OnInit, AfterViewInit { originY : 'bottom', overlayX: 'start', overlayY: 'bottom' + }, + { + originX : 'end', + originY : 'top', + overlayX: 'end', + overlayY: 'top' + }, + { + originX : 'end', + originY : 'bottom', + overlayX: 'end', + overlayY: 'bottom' } ] as ConnectionPositionPair[]; - currentPosition: 'top' | 'bottom' = 'bottom'; + dropdownAnimation: 'top' | 'bottom' = 'bottom'; + currentPositionX: 'start' | 'end' = 'start'; + currentPositionY: 'top' | 'bottom' = 'top'; // get valueReadable(): string { // return this.value && this.i18n.formatDateCompatible(this.value.nativeDate, this.format); // } @@ -124,7 +137,9 @@ export class NzPickerComponent implements OnInit, AfterViewInit { // All other components like "nz-dropdown" which depends on overlay also has the same issue. // See: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1429 onPositionChange(position: ConnectedOverlayPositionChange): void { - this.currentPosition = position.connectionPair.originY === 'top' ? 'bottom' : 'top'; + this.dropdownAnimation = position.connectionPair.originY === 'top' ? 'bottom' : 'top'; + this.currentPositionX = position.connectionPair.originX as 'start' | 'end'; + this.currentPositionY = position.connectionPair.originY as 'top' | 'bottom'; this.changeDetector.detectChanges(); // Take side-effects to position styles } diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts index 440e104952b..7456b9adf95 100644 --- a/components/date-picker/range-picker.component.spec.ts +++ b/components/date-picker/range-picker.component.spec.ts @@ -162,9 +162,9 @@ describe('NzRangePickerComponent', () => { expect(getPickerTrigger().querySelector('input:nth-of-type(1)').getAttribute('placeholder')).toBe(featureKey); }); - it('should support nzPlaceholder', () => { + it('should support nzPlaceHolder', () => { const featureKey = 'RIGHT_PLACEHOLDER'; - fixtureInstance.nzPlaceholder = [ 'Start', featureKey ]; + fixtureInstance.nzPlaceHolder = [ 'Start', featureKey ]; fixture.detectChanges(); expect(getPickerTrigger().querySelector('input:nth-of-type(2)').getAttribute('placeholder')).toBe(featureKey); }); @@ -588,7 +588,7 @@ describe('NzRangePickerComponent', () => { [nzClassName]="nzClassName" [nzDisabledDate]="nzDisabledDate" [nzLocale]="nzLocale" - [nzPlaceholder]="nzPlaceholder" + [nzPlaceHolder]="nzPlaceHolder" [nzPopupStyle]="nzPopupStyle" [nzDropdownClassName]="nzDropdownClassName" [nzSize]="nzSize" @@ -635,7 +635,7 @@ class NzTestRangePickerComponent { nzClassName; nzDisabledDate; nzLocale; - nzPlaceholder; + nzPlaceHolder; nzPopupStyle; nzDropdownClassName; nzSize;