feat(List-View) : Add the ability to check if an item is visible or not. (NativeScript#5557)

Brendan Ingham · Alexander Vakrilov · commit 4b244921d4c1 · 2018-03-21T07:18:01.000+01:00
* feat(list-view): Adds the ability to check whether or not an Item at index is Visible on screen within a listView

* feat(list-view): add the unit-test for checking if list-item is visible.

* clean(list-view): fix invalid reference in list-view-common

* chore(list-view): remove unused logic

* test(list-view) updates the tests for checking if item at index is visible

* chore(ListView Tests): update the test_check_if_item_at_index_is_visible unit test to include 40 children, and test if the last item is visible or not.

* Chore(ListView IOS): Apply requested changes to the for-loop, and replace with Array.some for readability.

* chore(ListView android): Fix TSLint issues.
diff --git a/tests/app/ui/list-view/list-view-tests.ts b/tests/app/ui/list-view/list-view-tests.ts
@@ -705,6 +705,26 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         TKUnit.assert(weakRef.get(), weakRef.get() + " died prematurely!");
     }
 
+    public test_check_if_item_at_index_is_visible() {
+        var listView = this.testView;
+
+        listView.itemTemplate = "<Label text='default' minHeight='100' maxHeight='100'/>";
+        listView.items = ListViewTest.generateItemsForMultipleTemplatesTests(40);
+        TKUnit.wait(0.1);
+        
+        var firstNativeElementVisible = this.checkItemVisibleAtIndex(listView, 0);
+        var secondNativeElementVisible = this.checkItemVisibleAtIndex(listView, 1);
+        var lastNativeElementVisible = this.checkItemVisibleAtIndex(listView, 39);
+
+        TKUnit.assertEqual(firstNativeElementVisible, true, "first element is visible");
+        TKUnit.assertEqual(secondNativeElementVisible, true, "second element is visible");
+        TKUnit.assertEqual(lastNativeElementVisible, false, "Last element is not visible");
+    }
+
+    private checkItemVisibleAtIndex(listView: listViewModule.ListView, index: number ): boolean {
+        return listView.isItemAtIndexVisible(index);
+    }
+
     private assertNoMemoryLeak(weakRef: WeakRef<listViewModule.ListView>) {
         this.tearDown();
         TKUnit.waitUntilReady(() => {
diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts
@@ -77,7 +77,6 @@ export abstract class ListViewBase extends View implements ListViewDefinition {
     get itemIdGenerator(): (item: any, index: number, items: any) => number {
         return this._itemIdGenerator;
     }
-
     set itemIdGenerator(generatorFn: (item: any, index: number, items: any) => number) {
         this._itemIdGenerator = generatorFn;
     }
@@ -135,6 +134,10 @@ export abstract class ListViewBase extends View implements ListViewDefinition {
         this.refresh();
     }
 
+    public isItemAtIndexVisible(index: number) {
+        return false;
+    }
+
     protected updateEffectiveRowHeight(): void {
         rowHeightProperty.coerce(this);
     }
diff --git a/tns-core-modules/ui/list-view/list-view.android.ts b/tns-core-modules/ui/list-view/list-view.android.ts
@@ -7,6 +7,7 @@ import { StackLayout } from "../layouts/stack-layout";
 import { ProxyViewContainer } from "../proxy-view-container";
 import { LayoutBase } from "../layouts/layout-base";
 import { profile } from "../../profiling";
+import { onScroll } from '../../../apps/app/ui-tests-app/list-view/list-view';
 
 export * from "./list-view-common";
 
@@ -44,7 +45,6 @@ function initializeItemClickListener(): void {
 
 export class ListView extends ListViewBase {
     nativeViewProtected: android.widget.ListView;
-
     private _androidViewId: number = -1;
 
     public _realizedItems = new Map<android.view.View, View>();
@@ -170,6 +170,13 @@ export class ListView extends ListViewBase {
         this._realizedTemplates.clear();
     }
 
+    public isItemAtIndexVisible(index: number): boolean {
+        let nativeView = this.nativeViewProtected;
+        const start = nativeView.getFirstVisiblePosition();
+        const end =  nativeView.getLastVisiblePosition();
+        return ( index >= start && index <= end );
+    }
+
     [separatorColorProperty.getDefault](): { dividerHeight: number, divider: android.graphics.drawable.Drawable } {
         let nativeView = this.nativeViewProtected;
         return {
diff --git a/tns-core-modules/ui/list-view/list-view.d.ts b/tns-core-modules/ui/list-view/list-view.d.ts
@@ -91,6 +91,12 @@ export class ListView extends View {
      */
     scrollToIndex(index: number);
 
+    /**
+     * Checks if Specified item with index is visible.
+     * @param index - Item index.
+     */
+    isItemAtIndexVisible(index: number): boolean;
+
     /**
      * 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"). 
diff --git a/tns-core-modules/ui/list-view/list-view.ios.ts b/tns-core-modules/ui/list-view/list-view.ios.ts
@@ -285,6 +285,11 @@ export class ListView extends ListViewBase {
         }
     }
 
+    public isItemAtIndexVisible( itemIndex: number ): boolean {
+        const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows); 
+        return indexes.some(visIndex => visIndex.row === itemIndex);
+    }
+
     public getHeight(index: number): number {
         return this._heights[index];
     }

Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,6 @@ export abstract class ListViewBase extends View implements ListViewDefinition {`
`77`	`77`	`get itemIdGenerator(): (item: any, index: number, items: any) => number {`
`78`	`78`	`return this._itemIdGenerator;`
`79`	`79`	`}`
`80`		`-`
`81`	`80`	`set itemIdGenerator(generatorFn: (item: any, index: number, items: any) => number) {`
`82`	`81`	`this._itemIdGenerator = generatorFn;`
`83`	`82`	`}`
`@@ -135,6 +134,10 @@ export abstract class ListViewBase extends View implements ListViewDefinition {`
`135`	`134`	`this.refresh();`
`136`	`135`	`}`
`137`	`136`
	`137`	`+ public isItemAtIndexVisible(index: number) {`
	`138`	`+ return false;`
	`139`	`+ }`
	`140`	`+`
`138`	`141`	`protected updateEffectiveRowHeight(): void {`
`139`	`142`	`rowHeightProperty.coerce(this);`
`140`	`143`	`}`
Original file line number	Diff line number	Diff line change
`@@ -285,6 +285,11 @@ export class ListView extends ListViewBase {`
`285`	`285`	`}`
`286`	`286`	`}`
`287`	`287`
	`288`	`+ public isItemAtIndexVisible( itemIndex: number ): boolean {`
	`289`	`+ const indexes: NSIndexPath[] = Array.from(this._ios.indexPathsForVisibleRows);`
	`290`	`+ return indexes.some(visIndex => visIndex.row === itemIndex);`
	`291`	`+ }`
	`292`	`+`
`288`	`293`	`public getHeight(index: number): number {`
`289`	`294`	`return this._heights[index];`
`290`	`295`	`}`