Skip to content

Commit a4b2457

Browse files
hamorphishamorphis
committed
Resolved NativeScript#199: TabView.selectedIndexChanged event.
1 parent 26864dd commit a4b2457

File tree

5 files changed

+122
-4
lines changed

5 files changed

+122
-4
lines changed

‎apps/tests/ui/tab-view/tab-view-tests.ts

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,83 @@ export var testWhenSelectingATabNativelySelectedIndexIsUpdatedProperly = functio
308308
}
309309
}
310310

311+
export var testWhenSelectingATabNativelySelectedIndexChangedEventIsRaised = function () {
312+
var tabView: tabViewModule.TabView;
313+
var mainPage: pageModule.Page;
314+
var pageFactory = function (): pageModule.Page {
315+
tabView = _createTabView();
316+
tabView.items = _createItems(10);
317+
mainPage = new pageModule.Page();
318+
mainPage.content = tabView;
319+
return mainPage;
320+
};
321+
322+
helper.navigate(pageFactory);
323+
324+
var expectedOldIndex = 3;
325+
var expectedNewIndex = 5;
326+
var actualOldIndex;
327+
var actualNewIndex;
328+
329+
tabViewTestsNative.selectNativeTab(tabView, expectedOldIndex);
330+
TKUnit.wait(helper.ASYNC);
331+
332+
tabView.on(tabViewModule.TabView.selectedIndexChangedEvent,(args: tabViewModule.SelectedIndexChangedEventData) => {
333+
actualOldIndex = args.oldIndex;
334+
actualNewIndex = args.newIndex;
335+
});
336+
337+
tabViewTestsNative.selectNativeTab(tabView, expectedNewIndex);
338+
TKUnit.wait(helper.ASYNC);
339+
340+
try {
341+
TKUnit.assert(actualOldIndex === expectedOldIndex, "Actual: " + actualOldIndex + "; Expected: " + expectedOldIndex);
342+
TKUnit.assert(actualNewIndex === expectedNewIndex, "Actual: " + actualNewIndex + "; Expected: " + expectedNewIndex);
343+
}
344+
finally {
345+
helper.goBack();
346+
}
347+
}
348+
349+
export var testWhenSettingSelectedIndexProgramaticallySelectedIndexChangedEventIsRaised = function () {
350+
var tabView: tabViewModule.TabView;
351+
var mainPage: pageModule.Page;
352+
var pageFactory = function (): pageModule.Page {
353+
tabView = _createTabView();
354+
tabView.items = _createItems(10);
355+
mainPage = new pageModule.Page();
356+
mainPage.content = tabView;
357+
return mainPage;
358+
};
359+
360+
helper.navigate(pageFactory);
361+
362+
var expectedOldIndex = 2;
363+
var expectedNewIndex = 6;
364+
var actualOldIndex;
365+
var actualNewIndex;
366+
367+
tabView.selectedIndex = expectedOldIndex;
368+
TKUnit.wait(helper.ASYNC);
369+
370+
tabView.on(tabViewModule.TabView.selectedIndexChangedEvent,(args: tabViewModule.SelectedIndexChangedEventData) => {
371+
actualOldIndex = args.oldIndex;
372+
actualNewIndex = args.newIndex;
373+
});
374+
375+
tabView.selectedIndex = expectedNewIndex;
376+
TKUnit.wait(helper.ASYNC);
377+
378+
try {
379+
TKUnit.assert(actualOldIndex === expectedOldIndex, "Actual: " + actualOldIndex + "; Expected: " + expectedOldIndex);
380+
TKUnit.assert(actualNewIndex === expectedNewIndex, "Actual: " + actualNewIndex + "; Expected: " + expectedNewIndex);
381+
}
382+
finally {
383+
helper.goBack();
384+
}
385+
}
386+
387+
311388
export var testWhenNavigatingBackToANonCachedPageContainingATabViewWithAListViewTheListViewIsThere = function () {
312389
return;
313390

@@ -409,13 +486,13 @@ export function testBindingIsRefreshedWhenTabViewItemIsUnselectedAndThenSelected
409486
}
410487

411488
export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack_NoPageCaching() {
412-
testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBackg(false);
489+
testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack(false);
413490
}
414491
export function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack_WithPageCaching() {
415-
testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBackg(true);
492+
testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack(true);
416493
}
417494

418-
function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBackg(enablePageCache: boolean) {
495+
function testLoadedAndUnloadedAreFired_WhenNavigatingAwayAndBack(enablePageCache: boolean) {
419496
var i: number;
420497
var itemCount = 3;
421498
var loadedItems = [0, 0, 0];

‎ui/tab-view/tab-view-common.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ var selectedIndexProperty = new dependencyObservable.Property(
3939
}
4040

4141
export class TabView extends view.View implements definition.TabView, view.AddArrayFromBuilder {
42-
4342
public static itemsProperty = itemsProperty;
4443
public static selectedIndexProperty = selectedIndexProperty;
44+
public static selectedIndexChangedEvent = "selectedIndexChanged";
4545

4646
public _addArrayFromBuilder(name: string, value: Array<any>) {
4747
if (name === ITEMS) {

‎ui/tab-view/tab-view.android.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,9 @@ export class TabView extends common.TabView {
451451
super._onSelectedIndexPropertyChangedSetNativeValue(data);
452452

453453
this._setNativeSelectedIndex(data.newValue);
454+
455+
var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
456+
this.notify(args);
454457
}
455458

456459
private _setNativeSelectedIndex(index: number) {

‎ui/tab-view/tab-view.d.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
declare module "ui/tab-view" {
55
import view = require("ui/core/view");
66
import dependencyObservable = require("ui/core/dependency-observable");
7+
import observable = require("data/observable");
78

89
/**
910
* Represents a tab view entry.
@@ -25,6 +26,21 @@ declare module "ui/tab-view" {
2526
iconSource?: string;
2627
}
2728

29+
/**
30+
* Defines the data for the TabView.selectedIndexChanged event.
31+
*/
32+
export interface SelectedIndexChangedEventData extends observable.EventData {
33+
/**
34+
* The old selected index.
35+
*/
36+
oldIndex: number;
37+
38+
/**
39+
* The new selected index.
40+
*/
41+
newIndex: number;
42+
}
43+
2844
/**
2945
* Represents a tab view.
3046
*/
@@ -51,5 +67,23 @@ declare module "ui/tab-view" {
5167
* Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS.
5268
*/
5369
ios: UITabBarController;
70+
71+
/**
72+
* String value used when hooking to the selectedIndexChanged event.
73+
*/
74+
public static selectedIndexChangedEvent: string;
75+
76+
/**
77+
* A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
78+
* @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
79+
* @param callback - Callback function which will be executed when event is raised.
80+
* @param thisArg - An optional parameter which will be used as `this` context for callback execution.
81+
*/
82+
on(eventNames: string, callback: (data: observable.EventData) => void, thisArg?: any);
83+
84+
/**
85+
* Raised when the selected index changes.
86+
*/
87+
on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
5488
}
5589
}

‎ui/tab-view/tab-view.ios.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,12 @@ export class TabView extends common.TabView {
206206
}
207207

208208
this._ios.selectedIndex = data.newValue;
209+
209210
// We will need to measure and arrange what became this._selectedView
210211
this.requestLayout();
212+
213+
var args = { eventName: TabView.selectedIndexChangedEvent, object: this, oldIndex: data.oldValue, newIndex: data.newValue };
214+
this.notify(args);
211215
}
212216

213217
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {

0 commit comments

Comments
 (0)