feat(TabStrip): add itemTap event (#7711)

tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.d.ts

@@ -3,8 +3,8 @@
  * @module "ui/tab-navigation/tab-strip"
  */ /** */
 
-import { View, Property } from "../../core/view";
 import { Color } from "../../../color";
+import { EventData, Property, View } from "../../core/view";
 import { TabStripItem } from "../tab-strip-item";
 
 /**
@@ -36,6 +36,34 @@ export class TabStrip extends View {
      * @private
      */
     _hasTitle: boolean;
+
+    /**
+     * String value used when hooking to itemTap event.
+     */
+    public static itemTapEvent: string;
+
+    /**
+     * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
+     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
+     * @param callback - Callback function which will be executed when event is raised.
+     * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
+     */
+    on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
+
+    /**
+     * Raised when an TabStripItem is tapped.
+     */
+    on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
+}
+
+/**
+ * Event data containing information for the TabStripItem's index.
+ */
+export interface TabStripItemEventData extends EventData {
+    /**
+     * The index of the TabStripItem.
+     */
+    index: number;
 }
 
 export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;

tns-core-modules/ui/tab-navigation-base/tab-strip/tab-strip.ts

@@ -1,14 +1,14 @@
-// Types
-import { TabStrip as TabStripDefinition } from ".";
-import { TabStripItem } from "../tab-strip-item";
-import { TabNavigationBase } from "../tab-navigation-base";
+// Types
 import { Color } from "../../../color";
-import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder } from "../../core/view";
+import { AddArrayFromBuilder, AddChildFromBuilder, EventData, ViewBase } from "../../core/view";
+import { TabNavigationBase } from "../tab-navigation-base";
+import { TabStripItem } from "../tab-strip-item";
+import { TabStripItemEventData, TabStrip as TabStripDefinition } from "./";
 
 // Requires
-import { 
-    View, Property, CSSType, backgroundColorProperty, backgroundInternalProperty, 
-    colorProperty, fontInternalProperty, booleanConverter
+import {
+    backgroundColorProperty, backgroundInternalProperty, booleanConverter,
+    colorProperty, CSSType, fontInternalProperty, Property, View
 } from "../../core/view";
 import { textTransformProperty } from "../../text-base";
 
@@ -20,6 +20,7 @@ export const highlightColorProperty = new Property<TabStrip, Color>({ name: "hig
 
 @CSSType("TabStrip")
 export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
+    public static itemTapEvent = "itemTap";
     public items: TabStripItem[];
     public isIconSizeFixed: boolean;
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
@@ -89,7 +90,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [colorProperty.setNative](value: Color) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarColor(value);
     }
 
@@ -100,7 +101,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [fontInternalProperty.setNative](value: any) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarFontInternal(value);
     }
 
@@ -111,7 +112,7 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [textTransformProperty.setNative](value: any) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarTextTransform(value);
     }
 
@@ -122,11 +123,16 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     }
     [highlightColorProperty.setNative](value: number | Color) {
         const parent = <TabNavigationBase>this.parent;
-        
+
         return parent && parent.setTabBarHighlightColor(value);
     }
 }
 
+export interface TabStrip {
+    on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
+    on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
+}
+
 export const itemsProperty = new Property<TabStrip, TabStripItem[]>({
     name: "items", valueChanged: (target, oldValue, newValue) => {
         target.onItemsChanged(oldValue, newValue);