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
NG-ZORRO · May 24, 2018 · 64f5ce5 · 64f5ce5
1 parent e9806c6
commit 64f5ce5
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -7,11 +7,11 @@ import * as getISOWeek from 'date-fns/get_iso_week';
   template: `
     <nz-date-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzShowTime></nz-date-picker>
     <br>
-    <nz-month-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceholder="Select month"></nz-month-picker>
+    <nz-month-picker [(ngModel)]="date" (ngModelChange)="onChange($event)" nzPlaceHolder="Select month"></nz-month-picker>
     <br>
     <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
     <br>
-    <nz-week-picker [(ngModel)]="date" (ngModelChange)="getWeek($event)" nzPlaceholder="Select week"></nz-week-picker>
+    <nz-week-picker [(ngModel)]="date" (ngModelChange)="getWeek($event)" nzPlaceHolder="Select week"></nz-week-picker>
   `,
   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
@@ -12,7 +12,7 @@ import * as setHours from 'date-fns/set_hours';
       [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }">
     </nz-date-picker>
     <br>
-    <nz-month-picker [nzDisabledDate]="disabledDate" nzPlaceholder="Select month"></nz-month-picker>
+    <nz-month-picker [nzDisabledDate]="disabledDate" nzPlaceHolder="Select month"></nz-month-picker>
     <br>
     <nz-range-picker
       [nzDisabledDate]="disabledDate"

diff --git a/components/date-picker/demo/extra-footer.ts b/components/date-picker/demo/extra-footer.ts
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
     <nz-date-picker [nzRenderExtraFooter]="plainFooter" nzShowTime></nz-date-picker>
     <nz-range-picker [nzRenderExtraFooter]="footerRender"></nz-range-picker>
     <nz-range-picker [nzRenderExtraFooter]="plainFooter" nzShowTime></nz-range-picker>
-    <nz-month-picker [nzRenderExtraFooter]="footerRender" nzPlaceholder="Select month"></nz-month-picker>
+    <nz-month-picker [nzRenderExtraFooter]="footerRender" nzPlaceHolder="Select month"></nz-month-picker>
   `,
   styles: [`
     :host ::ng-deep .ant-calendar-picker {

diff --git a/components/date-picker/demo/size.ts b/components/date-picker/demo/size.ts
@@ -11,11 +11,11 @@ import { Component } from '@angular/core';
     <br /><br />
     <nz-date-picker [nzSize]="size"></nz-date-picker>
     <br />
-    <nz-month-picker [nzSize]="size" nzPlaceholder="Select Month"></nz-month-picker>
+    <nz-month-picker [nzSize]="size" nzPlaceHolder="Select Month"></nz-month-picker>
     <br />
     <nz-range-picker [nzSize]="size"></nz-range-picker>
     <br />
-    <nz-week-picker [nzSize]="size" nzPlaceholder="Select Week"></nz-week-picker>
+    <nz-week-picker [nzSize]="size" nzPlaceHolder="Select Week"></nz-week-picker>
   `,
   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
@@ -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)"
     ></nz-date-picker>
@@ -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
@@ -6,15 +6,15 @@ import { Component } from '@angular/core';
     <nz-date-picker
       nzShowTime
       nzFormat="yyyy-MM-dd HH:mm:ss"
-      nzPlaceholder="Select Time"
+      nzPlaceHolder="Select Time"
       (ngModelChange)="onChange($event)"
       (nzOnOk)="onOk($event)"
     ></nz-date-picker>
     <br>
     <nz-range-picker
       [nzShowTime]="{ nzFormat: 'HH:mm' }"
       nzFormat="yyyy-MM-dd HH:mm"
-      [nzPlaceholder]="[ 'Start Time', 'End Time' ]"
+      [nzPlaceHolder]="[ 'Start Time', 'End Time' ]"
       (ngModelChange)="onChange($event)"
       (nzOnOk)="onOk($event)"
     ></nz-range-picker>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<TemplateRef<void> | string>;
   @Input() nzDefaultValue: CandyDate;

diff --git a/components/date-picker/picker.component.html b/components/date-picker/picker.component.html
@@ -67,11 +67,12 @@
   (backdropClick)="onClickBackdrop()"
 >
   <div
-    [@dropDownAnimation]="currentPosition"
+    [@dropDownAnimation]="dropdownAnimation"
     (@dropDownAnimation.start)="animationStart()"
     (@dropDownAnimation.done)="animationDone()"
-    style="position: relative; left: -2px;"
-    [style.top]="currentPosition === 'top' ? '2px' : '-2px'"
+    style="position: relative;"
+    [style.left]="currentPositionX === 'start' ? '-2px' : '2px'"
+    [style.top]="currentPositionY === 'top' ? '-2px' : '2px'"
   > <!-- Compatible for overlay that not support offset dynamically and immediately -->
     <ng-content></ng-content>
   </div>

diff --git 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
@@ -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;