fix(datetime): fixes date time in 3.0 + perf improvements

Author: manucorporat

src/components/datetime/datetime.ts

@@ -8,7 +8,7 @@ import { PickerColumn } from '../picker/picker-options';
 import { Form } from '../../util/form';
 import { Ion } from '../ion';
 import { Item } from '../item/item';
-import { deepCopy, isBlank, isPresent, isTrueProperty, isArray, isString, assert } from '../../util/util';
+import { deepCopy, isBlank, isPresent, isTrueProperty, isArray, isString, assert, clamp } from '../../util/util';
 import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
 
 export const DATETIME_VALUE_ACCESSOR: any = {
@@ -514,14 +514,12 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
       picker.refresh();
     });
 
-    picker.present(pickerOptions);
-
     this._isOpen = true;
     picker.onDidDismiss(() => {
       this._isOpen = false;
     });
 
-    picker.refresh();
+    picker.present(pickerOptions);
   }
 
   /**
@@ -565,7 +563,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
           values = dateValueRange(format, this._min, this._max);
         }
 
-        let column: PickerColumn = {
+        const column: PickerColumn = {
           name: key,
           selectedIndex: 0,
           options: values.map(val => {
@@ -578,8 +576,8 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
 
         // cool, we've loaded up the columns with options
         // preselect the option for this column
-        var optValue = getValueFromFormat(this._value, format);
-        var selectedIndex = column.options.findIndex(opt => opt.value === optValue);
+        const optValue = getValueFromFormat(this._value, format);
+        const selectedIndex = column.options.findIndex(opt => opt.value === optValue);
         if (selectedIndex >= 0) {
           // set the select index for this column's options
           column.selectedIndex = selectedIndex;
@@ -589,10 +587,10 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
         picker.addColumn(column);
       });
 
-      const min = <any>this._min;
-      const max = <any>this._max;
 
       // Normalize min/max
+      const min = <any>this._min;
+      const max = <any>this._max;
       const columns = this._picker.getColumns();
       ['month', 'day', 'hour', 'minute']
         .filter(name => !columns.find(column => column.name === name))
@@ -620,22 +618,28 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     const lb = lowerBounds.slice();
     const ub = upperBounds.slice();
     const options = column.options;
+    let indexMin = options.length - 1;
+    let indexMax = 0;
 
     for (var i = 0; i < options.length; i++) {
       var opt = options[i];
       var value = opt.value;
       lb[index] = opt.value;
       ub[index] = opt.value;
 
-      opt.disabled = (
+      var disabled = opt.disabled = (
         value < lowerBounds[index] ||
         value > upperBounds[index] ||
         dateSortValue(ub[0], ub[1], ub[2], ub[3], ub[4]) < min ||
         dateSortValue(lb[0], lb[1], lb[2], lb[3], lb[4]) > max
       );
+      if (!disabled) {
+        indexMin = Math.min(indexMin, i);
+        indexMax = Math.max(indexMax, i);
+      }
     }
-
-    opt = column.options[column.selectedIndex];
+    let selectedIndex = column.selectedIndex = clamp(indexMin, column.selectedIndex, indexMax);
+    opt = column.options[selectedIndex];
     if (opt) {
       return opt.value;
     }

src/components/datetime/test/issues/pages/root-page/root-page.html

@@ -104,5 +104,15 @@
       ></ion-datetime>
   </ion-item>
 
+  <ion-item>
+    <ion-label>Current year Date</ion-label>
+    <ion-datetime min="2017-03-20"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Last year Date</ion-label>
+    <ion-datetime min="2016-03-20"></ion-datetime>
+  </ion-item>
+
 
 </ion-content>

src/components/picker/picker-column.ts

@@ -78,9 +78,6 @@ export class PickerColumnCmp {
     // get the height of one option
     this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0);
 
-    // set the scroll position for the selected option
-    this.setSelected(this.col.selectedIndex, 0);
-
     // Listening for pointer events
     this.events.pointerEvents({
       element: this.elementRef.nativeElement,
@@ -384,6 +381,7 @@ export class PickerColumnCmp {
         }
       }
     }
+    this.col.prevSelected = selectedIndex;
 
     if (saveY) {
       this.y = y;
@@ -409,19 +407,20 @@ export class PickerColumnCmp {
   refresh() {
     let min = this.col.options.length - 1;
     let max = 0;
-
-    for (var i = 0; i < this.col.options.length; i++) {
-      if (!this.col.options[i].disabled) {
+    const options = this.col.options;
+    for (var i = 0; i < options.length; i++) {
+      if (!options[i].disabled) {
         min = Math.min(min, i);
         max = Math.max(max, i);
       }
     }
 
-    var selectedIndex = clamp(min, this.col.selectedIndex, max);
-
-    if (selectedIndex !== this.col.selectedIndex) {
+    const selectedIndex = clamp(min, this.col.selectedIndex, max);
+    if (this.col.prevSelected !== selectedIndex) {
       var y = (selectedIndex * this.optHeight) * -1;
-      this.update(y, 150, true, true);
+      this._plt.cancelRaf(this.rafId);
+      this.velocity = 0;
+      this.update(y, 150, true, false);
     }
   }
 

src/components/picker/picker-component.ts

@@ -40,6 +40,7 @@ import { PickerColumnCmp } from './picker-column';
   encapsulation: ViewEncapsulation.None,
 })
 export class PickerCmp {
+
   @ViewChildren(PickerColumnCmp) _cols: QueryList<PickerColumnCmp>;
   d: PickerOptions;
   enabled: boolean;
@@ -116,6 +117,10 @@ export class PickerCmp {
     });
   }
 
+  ionViewDidLoad() {
+    this.refresh();
+  }
+
   ionViewWillEnter() {
     this._gestureBlocker.block();
   }
@@ -125,9 +130,7 @@ export class PickerCmp {
   }
 
   refresh() {
-    this._cols.forEach(column => {
-      column.refresh();
-    });
+    this._cols.forEach(column => column.refresh());
   }
 
   _colChange(selectedOption: PickerColumnOption) {

src/components/picker/picker-options.ts

@@ -10,6 +10,7 @@ export interface PickerColumn {
   name?: string;
   align?: string;
   selectedIndex?: number;
+  prevSelected?: number;
   prefix?: string;
   suffix?: string;
   options?: PickerColumnOption[];

src/components/picker/picker.ts

@@ -2,7 +2,7 @@ import { EventEmitter, Output } from '@angular/core';
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
-import { isPresent } from '../../util/util';
+import { isPresent, assert } from '../../util/util';
 import { NavOptions } from '../../navigation/nav-util';
 import { PickerCmp } from './picker-component';
 import { PickerOptions, PickerColumn } from './picker-options';
@@ -67,6 +67,9 @@ export class Picker extends ViewController {
   }
 
   refresh() {
+    assert(this._cmp, 'componentRef must be valid');
+    assert(this._cmp.instance.refresh, 'instance must implement refresh()');
+
     this._cmp && this._cmp.instance.refresh && this._cmp.instance.refresh();
   }
 

src/navigation/nav-controller-base.ts

@@ -517,6 +517,7 @@ export class NavControllerBase extends Ion implements NavController {
 
   _viewAttachToDOM(view: ViewController, componentRef: ComponentRef<any>, viewport: ViewContainerRef) {
     assert(view._state === STATE_INITIALIZED, 'view state must be INITIALIZED');
+    assert(componentRef, 'componentRef can not be null');
 
     // fire willLoad before change detection runs
     this._willLoad(view);

src/navigation/view-controller.ts

@@ -116,6 +116,8 @@ export class ViewController {
    * @hidden
    */
   init(componentRef: ComponentRef<any>) {
+    assert(componentRef, 'componentRef can not be null');
+
     this._cmp = componentRef;
     this.instance = this.instance || componentRef.instance;
     this._detached = false;