Skip to content

Commit 3dbcf08

Browse files
sitefinitysteveAlexander Vakrilov
sitefinitysteve
authored and
Alexander Vakrilov
committed
Allow toggling of visible scrollbar indicators (NativeScript#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
1 parent 57cf231 commit 3dbcf08

File tree

5 files changed

+85
-5
lines changed

5 files changed

+85
-5
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,48 @@ class ScrollLayoutTest extends testModule.UITest<scrollViewModule.ScrollView> {
254254
TKUnit.assertEqual(scrollX, this.testView.horizontalOffset);
255255
TKUnit.assertEqual(scrollX, layoutHelper.dp(100));
256256
}
257+
258+
public test_scrollView_horizontal_can_set_indicator_state() {
259+
this.testView.orientation = "horizontal";
260+
this.testView.scrollBarIndicatorVisible = true;
261+
this.waitUntilTestElementLayoutIsValid();
262+
263+
if (app.ios) {
264+
TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, true);
265+
} else {
266+
TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), true);
267+
}
268+
269+
this.testView.scrollBarIndicatorVisible = false;
270+
this.waitUntilTestElementLayoutIsValid();
271+
272+
if (app.ios) {
273+
TKUnit.assertEqual(this.testView.ios.showsHorizontalScrollIndicator, false);
274+
} else {
275+
TKUnit.assertEqual(this.testView.android.isHorizontalScrollBarEnabled(), false);
276+
}
277+
}
278+
279+
public test_scrollView_vertical_can_set_indicator_state() {
280+
this.testView.orientation = "vertical";
281+
this.testView.scrollBarIndicatorVisible = true;
282+
this.waitUntilTestElementLayoutIsValid();
283+
284+
if (app.ios) {
285+
TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, true);
286+
} else {
287+
TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), true);
288+
}
289+
290+
this.testView.scrollBarIndicatorVisible = false;
291+
this.waitUntilTestElementLayoutIsValid();
292+
293+
if (app.ios) {
294+
TKUnit.assertEqual(this.testView.ios.showsVerticalScrollIndicator, false);
295+
} else {
296+
TKUnit.assertEqual(this.testView.android.isVerticalScrollBarEnabled(), false);
297+
}
298+
}
257299
}
258300

259301
export function createTestCase(): ScrollLayoutTest {

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ScrollView as ScrollViewDefinition, Orientation, ScrollEventData } from ".";
2-
import { ContentView, Property, makeParser, makeValidator, EventData } from "../content-view";
2+
import { ContentView, Property, makeParser, makeValidator, EventData, booleanConverter } from "../content-view";
33
import { profile } from "../../profiling";
44

55
export * from "../content-view";
@@ -9,6 +9,7 @@ export abstract class ScrollViewBase extends ContentView implements ScrollViewDe
99
public static scrollEvent = "scroll";
1010

1111
public orientation: Orientation;
12+
public scrollBarIndicatorVisible: boolean;
1213

1314
public addEventListener(arg: string, callback: any, thisArg?: any) {
1415
super.addEventListener(arg, callback, thisArg);
@@ -94,4 +95,10 @@ export const orientationProperty = new Property<ScrollViewBase, Orientation>({
9495
},
9596
valueConverter: converter
9697
});
97-
orientationProperty.register(ScrollViewBase);
98+
orientationProperty.register(ScrollViewBase);
99+
100+
export const scrollBarIndicatorVisibleProperty = new Property<ScrollViewBase, boolean>({
101+
name: "scrollBarIndicatorVisible", defaultValue: true,
102+
valueConverter: booleanConverter
103+
});
104+
scrollBarIndicatorVisibleProperty.register(ScrollViewBase);

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ScrollEventData } from ".";
2-
import { ScrollViewBase, layout } from "./scroll-view-common";
2+
import { ScrollViewBase, layout, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
33

44
export * from "./scroll-view-common";
55

@@ -44,6 +44,17 @@ export class ScrollView extends ScrollViewBase {
4444
return nativeView.getScrollableLength() / layout.getDisplayDensity();
4545
}
4646

47+
[scrollBarIndicatorVisibleProperty.getDefault](): boolean {
48+
return true;
49+
}
50+
[scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
51+
if (this.orientation === "horizontal") {
52+
this.nativeView.setHorizontalScrollBarEnabled(value);
53+
} else {
54+
this.nativeView.setVerticalScrollBarEnabled(value);
55+
}
56+
}
57+
4758
public scrollToVerticalOffset(value: number, animated: boolean) {
4859
const nativeView = this.nativeView;
4960
if (nativeView && this.orientation === "vertical") {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ export class ScrollView extends ContentView {
3434
*/
3535
scrollableWidth: number;
3636

37+
/**
38+
* Toggles scrollbar indicator visibility
39+
*/
40+
scrollBarIndicatorVisible: boolean;
41+
3742
/**
3843
* Scrolls the content the specified vertical offset position.
3944
* @param value The offset value

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ScrollEventData } from ".";
2-
import { View, layout, ScrollViewBase } from "./scroll-view-common";
2+
import { View, layout, ScrollViewBase, scrollBarIndicatorVisibleProperty } from "./scroll-view-common";
33

44
export * from "./scroll-view-common";
55

@@ -53,6 +53,14 @@ export class ScrollView extends ScrollViewBase {
5353
this.nativeView.delegate = null;
5454
}
5555

56+
protected updateScrollBarVisibility(value) {
57+
if (this.orientation === "horizontal") {
58+
this.nativeView.showsHorizontalScrollIndicator = value;
59+
} else {
60+
this.nativeView.showsVerticalScrollIndicator = value;
61+
}
62+
}
63+
5664
get horizontalOffset(): number {
5765
return this.nativeView.contentOffset.x;
5866
}
@@ -77,6 +85,13 @@ export class ScrollView extends ScrollViewBase {
7785
return Math.max(0, this.nativeView.contentSize.height - this.nativeView.bounds.size.height);
7886
}
7987

88+
[scrollBarIndicatorVisibleProperty.getDefault](): boolean {
89+
return true;
90+
}
91+
[scrollBarIndicatorVisibleProperty.setNative](value: boolean) {
92+
this.updateScrollBarVisibility(value);
93+
}
94+
8095
get ios(): UIView {
8196
return this.nativeView;
8297
}
@@ -146,7 +161,7 @@ export class ScrollView extends ScrollViewBase {
146161
}
147162

148163
public _onOrientationChanged() {
149-
// NOOP
164+
this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);
150165
}
151166
}
152167

0 commit comments

Comments
 (0)