Merge pull request #190 from NativeScript/time-picker

Fixed all time-picker issues and covered it with tests.

CrossPlatformModules.csproj

@@ -120,6 +120,14 @@
     <TypeScriptCompile Include="apps\tests\platform-tests.ts" />
     <TypeScriptCompile Include="apps\tests\fps-meter-tests.ts" />
     <TypeScriptCompile Include="apps\tests\trace-tests.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\time-picker\time-picker-tests-native.android.ts">
+      <DependentUpon>time-picker-tests-native.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\ui\time-picker\time-picker-tests-native.d.ts" />
+    <TypeScriptCompile Include="apps\tests\ui\time-picker\time-picker-tests-native.ios.ts">
+      <DependentUpon>time-picker-tests-native.d.ts</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\tests\ui\time-picker\time-picker-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\dialogs\dialog-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\image-cache\image-cache-tests.ts" />
     <TypeScriptCompile Include="apps\tests\ui\border\border-tests.ts" />
@@ -1491,7 +1499,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/pickers-demo/main-page.ts

@@ -26,9 +26,12 @@ export function onPageLoaded(args: observableModule.EventData) {
     viewModel.items = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
     viewModel.selectedIndex = 5;
 
-    //viewModel.day = 9;
-    //viewModel.month = 2;
-    //viewModel.year = 1980;
+    viewModel.day = 9;
+    viewModel.month = 2;
+    viewModel.year = 1980;
+
+    viewModel.hour = 17;
+    viewModel.minute = 50;
 }
 
 export function onTap(args: observableModule.EventData) {
@@ -40,4 +43,7 @@ export function onTap(args: observableModule.EventData) {
     viewModel.day = viewModel.day + 1;
     viewModel.month = viewModel.month + 1;
     viewModel.year = viewModel.year + 1;
+
+    viewModel.hour = viewModel.hour + 1;
+    viewModel.minute = viewModel.minute + 1;
 }

apps/pickers-demo/main-page.xml

@@ -4,6 +4,6 @@
     <Label id="label" text="{{ selectedIndex }}" height="50" width="100" />
     <ListPicker id="listPicker" selectedIndex="{{ selectedIndex }}" items="{{ items }}"/>
     <DatePicker id="datePicker" day="{{ day }}" month="{{ month }}" year="{{ year }}"/>
-    <TimePicker id="timePicker"/>
+    <TimePicker id="timePicker" hour="{{ hour }}" minute="{{ minute }}"/>
   </StackLayout>
 </Page>

apps/pickers-demo/model.ts

@@ -54,4 +54,24 @@ export class WebViewModel extends observable.Observable {
         this._year = value;
         this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "year", value: value });
     }
+
+    private _hour: number;
+    get hour(): number {
+        return this._hour;
+    }
+    set hour(value: number) {
+        console.log("hour:" + value);
+        this._hour = value;
+        this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "hour", value: value });
+    }
+
+    private _minute: number;
+    get minute(): number {
+        return this._minute;
+    }
+    set minute(value: number) {
+        console.log("minute:" + value);
+        this._minute = value;
+        this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "minute", value: value });
+    }
 }

apps/tests/testRunner.ts

@@ -49,6 +49,7 @@ allTests["FILE-SYSTEM-ACCESS"] = require("./file-system-access-tests/file-system
 allTests["XML-DECLARATION"] = require("./xml-declaration/xml-declaration-tests");
 allTests["LIST-PICKER"] = require("./ui/list-picker/list-picker-tests");
 allTests["DATE-PICKER"] = require("./ui/date-picker/date-picker-tests");
+allTests["TIME-PICKER"] = require("./ui/time-picker/time-picker-tests");
 
 var testsWithLongDelay = {
     testLocation: 10000,

apps/tests/ui/time-picker/time-picker-tests-native.android.ts

@@ -0,0 +1,17 @@
+import timePickerModule = require("ui/time-picker");
+
+export function getNativeHour(timePicker: timePickerModule.TimePicker): number {
+    return timePicker.android.getCurrentHour().intValue();
+}
+
+export function getNativeMinute(timePicker: timePickerModule.TimePicker): number {
+    return timePicker.android.getCurrentMinute().intValue();
+}
+
+export function setNativeHour(timePicker: timePickerModule.TimePicker, value: number): void {
+    timePicker.android.setCurrentHour(new java.lang.Integer(value));
+}
+
+export function setNativeMinute(timePicker: timePickerModule.TimePicker, value: number): void {
+    timePicker.android.setCurrentMinute(new java.lang.Integer(value));
+}

apps/tests/ui/time-picker/time-picker-tests-native.d.ts

@@ -0,0 +1,8 @@
+//@private
+import timePickerModule = require("ui/time-picker");
+
+export declare function getNativeHour(timePicker: timePickerModule.TimePicker): number;
+export declare function getNativeMinute(timePicker: timePickerModule.TimePicker): number;
+
+export declare function setNativeHour(timePicker: timePickerModule.TimePicker, value: number): void;
+export declare function setNativeMinute(timePicker: timePickerModule.TimePicker, value: number): void;

apps/tests/ui/time-picker/time-picker-tests-native.ios.ts

@@ -0,0 +1,24 @@
+import timePickerModule = require("ui/time-picker");
+
+export function getNativeHour(timePicker: timePickerModule.TimePicker): number {
+    return NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, timePicker.ios.date).hour;
+}
+
+export function getNativeMinute(timePicker: timePickerModule.TimePicker): number {
+    return NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, timePicker.ios.date).minute;
+}
+
+export function setNativeHour(timePicker: timePickerModule.TimePicker, value: number): void {
+    var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, timePicker.ios.date);
+    comps.hour = value;
+    timePicker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+    (<any>timePicker)._changeHandler.valueChanged(timePicker.ios);
+}
+
+export function setNativeMinute(timePicker: timePickerModule.TimePicker, value: number): void {
+    var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, timePicker.ios.date);
+    comps.minute = value;
+    timePicker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
+    (<any>timePicker)._changeHandler.valueChanged(timePicker.ios);
+}
+    

apps/tests/ui/time-picker/time-picker-tests.ts

@@ -0,0 +1,80 @@
+import TKUnit = require("../../TKUnit");
+import helper = require("../helper");
+import viewModule = require("ui/core/view");
+import timePickerTestsNative = require("./time-picker-tests-native");
+
+// <snippet module="ui/time-picker" title="timePicker">
+// # timePicker
+
+// Using a timePicker requires the "ui/time-picker" module.
+// ``` JavaScript
+import timePickerModule = require("ui/time-picker");
+
+function _createtimePicker(): timePickerModule.TimePicker {
+    // <snippet module="ui/time-picker" title="timePicker">
+    // ## Creating a timePicker
+    // ``` JavaScript
+    var timePicker = new timePickerModule.TimePicker();
+    // ```
+    // </snippet>
+    timePicker.id = "timePicker";
+    return timePicker;
+}
+
+export var test_WhenCreated_HourIsUndefined = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var actualValue = timePicker.hour;
+        var expectedValue = undefined;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var test_WhenCreated_MinuteIsUndefined = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var actualValue = timePicker.minute;
+        var expectedValue = undefined;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testHourFromLocalToNative = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var expectedValue = 13;
+        timePicker.hour = expectedValue;
+        var actualValue = timePickerTestsNative.getNativeHour(timePicker);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testMinuteFromLocalToNative = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var expectedValue = 59;
+        timePicker.minute = expectedValue;
+        var actualValue = timePickerTestsNative.getNativeMinute(timePicker);
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testHourFromNativeToLocal = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var expectedValue = 14;
+        timePickerTestsNative.setNativeHour(timePicker, expectedValue);
+        var actualValue = timePicker.hour;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}
+
+export var testMinuteFromNativeToLocal = function () {
+    helper.buildUIAndRunTest(_createtimePicker(), function (views: Array<viewModule.View>) {
+        var timePicker = <timePickerModule.TimePicker>views[0];
+        var expectedValue = 33;
+        timePickerTestsNative.setNativeMinute(timePicker, expectedValue);
+        var actualValue = timePicker.minute;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+}

ui/time-picker/time-picker-common.ts

@@ -4,8 +4,8 @@ import proxy = require("ui/core/proxy");
 import view = require("ui/core/view");
 
 export class TimePicker extends view.View implements definition.TimePicker {
-    public static hourProperty = new dependencyObservable.Property("hour", "TimePicker", new proxy.PropertyMetadata(0));
-    public static minuteProperty = new dependencyObservable.Property("minute", "TimePicker", new proxy.PropertyMetadata(0));
+    public static hourProperty = new dependencyObservable.Property("hour", "TimePicker", new proxy.PropertyMetadata(undefined));
+    public static minuteProperty = new dependencyObservable.Property("minute", "TimePicker", new proxy.PropertyMetadata(undefined));
 
     constructor() {
         super();

ui/time-picker/time-picker.android.ts

@@ -28,6 +28,7 @@ require("utils/module-merge").merge(common, exports);
 
 export class TimePicker extends common.TimePicker {
     private _android: android.widget.TimePicker;
+    private _listener: android.widget.TimePicker.OnTimeChangedListener;
 
     get android(): android.widget.TimePicker {
         return this._android;
@@ -38,17 +39,24 @@ export class TimePicker extends common.TimePicker {
 
         var that = new WeakRef(this);
 
-        this._android.setOnTimeChangedListener(new android.widget.TimePicker.OnTimeChangedListener({
+        this._listener = new android.widget.TimePicker.OnTimeChangedListener({
             get owner() {
                 return that.get();
             },
 
-            onTimeChanged: function (picker: android.widget.TimePicker, hourOfDay: number, minute: number) {
+            onTimeChanged: function (picker: android.widget.TimePicker, hour: number, minute: number) {
                 if (this.owner) {
-                    this.owner._onPropertyChangedFromNative(common.TimePicker.hourProperty, hourOfDay);
-                    this.owner._onPropertyChangedFromNative(common.TimePicker.minuteProperty, minute);
+                    
+                    if (hour !== this.owner.hour) {
+                        this.owner._onPropertyChangedFromNative(common.TimePicker.hourProperty, hour);
+                    }
+                    
+                    if (minute !== this.owner.minute) {
+                        this.owner._onPropertyChangedFromNative(common.TimePicker.minuteProperty, minute);
+                    }
                 }
             }
-        }));
+        });
+        this._android.setOnTimeChangedListener(this._listener);
     }
 } 

ui/time-picker/time-picker.ios.ts

@@ -6,7 +6,9 @@ function onHourPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var picker = <TimePicker>data.object;
 
     if (picker.ios) {
-        setHourAndMinute(picker.ios, data.newValue, picker.minute);
+        var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, picker.ios.date);
+        comps.hour = data.newValue;
+        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
     }
 }
 
@@ -16,7 +18,9 @@ function onMinutePropertyChanged(data: dependencyObservable.PropertyChangeData)
     var picker = <TimePicker>data.object;
 
     if (picker.ios) {
-        setHourAndMinute(picker.ios, picker.hour, data.newValue);
+        var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, picker.ios.date);
+        comps.minute = data.newValue;
+        picker.ios.setDateAnimated(NSCalendar.currentCalendar().dateFromComponents(comps), false);
     }
 }
 
@@ -58,24 +62,18 @@ class UITimePickerChangeHandlerImpl extends NSObject {
     }
 
     public valueChanged(sender: UIDatePicker) {
-        var calendar = NSCalendar.currentCalendar();
-        var comp = calendar.componentsFromDate(NSCalendarUnit.NSHourCalendarUnit | NSCalendarUnit.NSMinuteCalendarUnit, sender.date);
+        var comps = NSCalendar.currentCalendar().componentsFromDate(NSCalendarUnit.NSCalendarUnitHour | NSCalendarUnit.NSCalendarUnitMinute, sender.date);
 
-        this._owner._onPropertyChangedFromNative(common.TimePicker.hourProperty, comp.hour);
-        this._owner._onPropertyChangedFromNative(common.TimePicker.minuteProperty, comp.minute);
+        if (comps.hour !== this._owner.hour) {
+            this._owner._onPropertyChangedFromNative(common.TimePicker.hourProperty, comps.hour);
+        }
+
+        if (comps.minute !== this._owner.minute) {
+            this._owner._onPropertyChangedFromNative(common.TimePicker.minuteProperty, comps.minute);
+        }
     }
 
     public static ObjCExposedMethods = {
         'valueChanged': { returns: interop.types.void, params: [UIDatePicker] }
     };
-}
-
-function setHourAndMinute(picker: UIDatePicker, hour: number, minute: number) {
-    var calendar = NSCalendar.currentCalendar();
-    var comps = new NSDateComponents();
-
-    comps.hour = hour;
-    comps.minute = minute;
-
-    picker.setDateAnimated(calendar.dateFromComponents(comps), false);
 }