Allow toggling of visible scrollbar indicators (#4523)

* Allow toggling of visible scrollbar indicators

* Add unit test

* Make what the prop does more clear

* Fix tslint

* Rename property per @vakrilov

* Missed string property rename

* Move property from method

* Update orientationChanged to use new property name

tests/app/ui/scroll-view/scroll-view-tests.ts

@@ -254,6 +254,48 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
         TKUnit.assertEqual(scrollX, this.testView.horizontalOffset);
         TKUnit.assertEqual(scrollX, layoutHelper.dp(100));
     }
+
+    public test_scrollView_horizontal_can_set_indicator_state() {
+        this.testView.orientation = "horizontal";
+        this.testView.scrollBarIndicatorVisible = true;
+        this.waitUntilTestElementLayoutIsValid();
+
+        if (app.ios) {
+            TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, true);
+        } else {
+            TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), true);
+        }
+
+        this.testView.scrollBarIndicatorVisible = false;
+        this.waitUntilTestElementLayoutIsValid();
+
+        if (app.ios) {
+            TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, false);
+        } else {
+            TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), false);
+        }
+    }
+
+    public test_scrollView_vertical_can_set_indicator_state() {
+        this.testView.orientation = "vertical";
+        this.testView.scrollBarIndicatorVisible = true;
+        this.waitUntilTestElementLayoutIsValid();
+
+        if (app.ios) {
+            TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, true);
+        } else {
+            TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), true);
+        }
+
+        this.testView.scrollBarIndicatorVisible = false;
+        this.waitUntilTestElementLayoutIsValid();
+
+        if (app.ios) {
+            TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, false);
+        } else {
+            TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), false);
+        }
+    }
 }
 
 export function createTestCase(): ScrollLayoutTest {

tns-core-modules/ui/scroll-view/scroll-view-common.ts

@@ -1,5 +1,5 @@
 import { ScrollView as ScrollViewDefinition, Orientation, ScrollEventData } from ".";
-import { ContentView, Property, makeParser, makeValidator, EventData } from "../content-view";
+import { ContentView, Property, makeParser, makeValidator, EventData, booleanConverter } from "../content-view";
 import { profile } from "../../profiling";
 
 export * from "../content-view";
@@ -9,6 +9,7 @@ export abstract class ScrollViewBase extends ContentView implements ScrollViewDe
     public static scrollEvent = "scroll";
 
     public orientation: Orientation;
+    public scrollBarIndicatorVisible: boolean;
 
     public addEventListener(arg: string, callback: any, thisArg?: any) {
         super.addEventListener(arg, callback, thisArg);
@@ -94,4 +95,10 @@ export const orientationProperty = new Property<ScrollViewBase, Orientation>({
     },
     valueConverter: converter
 });
-orientationProperty.register(ScrollViewBase);
+orientationProperty.register(ScrollViewBase);
+
+export const scrollBarIndicatorVisibleProperty = new Property<ScrollViewBase, boolean>({
+    name: "scrollBarIndicatorVisible", defaultValue: true,
+    valueConverter: booleanConverter
+});
+scrollBarIndicatorVisibleProperty.register(ScrollViewBase);

tns-core-modules/ui/scroll-view/scroll-view.android.ts

@@ -1,5 +1,5 @@
 import { ScrollEventData } from ".";
-import { ScrollViewBase, layout } from "./scroll-view-common";
+import { ScrollViewBase, layout, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
 
 export * from "./scroll-view-common";
 
@@ -44,6 +44,17 @@ export class ScrollView extends ScrollViewBase {
         return nativeView.getScrollableLength() / layout.getDisplayDensity();
     }
 
+    [scrollBarIndicatorVisibleProperty.getDefault](): boolean {
+        return true;
+    }
+    [scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
+        if (this.orientation === "horizontal") {
+            this.nativeView.setHorizontalScrollBarEnabled(value);
+        } else {
+            this.nativeView.setVerticalScrollBarEnabled(value);
+        }   
+    }
+
     public scrollToVerticalOffset(value: number, animated: boolean) {
         const nativeView = this.nativeView;
         if (nativeView && this.orientation === "vertical") {

tns-core-modules/ui/scroll-view/scroll-view.d.ts

@@ -34,6 +34,11 @@ export class ScrollView extends ContentView {
      */
     scrollableWidth: number;
 
+    /**
+     * Toggles scrollbar indicator visibility
+     */
+    scrollBarIndicatorVisible: boolean;
+
     /**
      * Scrolls the content the specified vertical offset position.
      * @param value The offset value

tns-core-modules/ui/scroll-view/scroll-view.ios.ts

@@ -1,5 +1,5 @@
 import { ScrollEventData } from ".";
-import { View, layout, ScrollViewBase } from "./scroll-view-common";
+import { View, layout, ScrollViewBase, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
 
 export * from "./scroll-view-common";
 
@@ -53,6 +53,14 @@ export class ScrollView extends ScrollViewBase {
         this.nativeView.delegate = null;
     }
 
+    protected updateScrollBarVisibility(value) {
+        if (this.orientation === "horizontal") {
+            this.nativeView.showsHorizontalScrollIndicator = value;
+        } else {
+            this.nativeView.showsVerticalScrollIndicator = value;
+        } 
+    }
+
     get horizontalOffset(): number {
         return this.nativeView.contentOffset.x;
     }
@@ -77,6 +85,13 @@ export class ScrollView extends ScrollViewBase {
         return Math.max(0, this.nativeView.contentSize.height - this.nativeView.bounds.size.height);
     }
 
+    [scrollBarIndicatorVisibleProperty.getDefault](): boolean {
+        return true;
+    }
+    [scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
+        this.updateScrollBarVisibility(value);   
+    }
+
     get ios(): UIView {
         return this.nativeView;
     }
@@ -146,7 +161,7 @@ export class ScrollView extends ScrollViewBase {
     }
 
     public _onOrientationChanged() {
-        // NOOP
+        this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);   
     }
 }