feat(ios): added activity indicator iosIndicatorViewStyle property (NativeScript#10650)

Author: CatchABus

packages/core/ui/activity-indicator/activity-indicator-common.ts

@@ -1,11 +1,12 @@
-import { ActivityIndicator as ActivityIndicatorDefinition } from '.';
+import { ActivityIndicator as ActivityIndicatorDefinition, IOSIndicatorViewStyle } from '.';
 import { View, CSSType } from '../core/view';
 import { booleanConverter } from '../core/view-base';
 import { Property } from '../core/properties';
 
 @CSSType('ActivityIndicator')
 export class ActivityIndicatorBase extends View implements ActivityIndicatorDefinition {
 	public busy: boolean;
+	public iosIndicatorViewStyle: IOSIndicatorViewStyle;
 }
 
 ActivityIndicatorBase.prototype.recycleNativeView = 'auto';
@@ -16,3 +17,9 @@ export const busyProperty = new Property<ActivityIndicatorBase, boolean>({
 	valueConverter: booleanConverter,
 });
 busyProperty.register(ActivityIndicatorBase);
+
+export const iosIndicatorViewStyleProperty = new Property<ActivityIndicatorBase, IOSIndicatorViewStyle>({
+	name: 'iosIndicatorViewStyle',
+	defaultValue: 'medium',
+});
+iosIndicatorViewStyleProperty.register(ActivityIndicatorBase);

packages/core/ui/activity-indicator/index.d.ts

@@ -1,5 +1,7 @@
 import { View } from '../core/view';
 
+export type IOSIndicatorViewStyle = 'medium' | 'large';
+
 /**
  * Represents a UI widget which displays a progress indicator hinting the user for some background operation running.
  *
@@ -22,4 +24,9 @@ export class ActivityIndicator extends View {
 	 * @nsProperty
 	 */
 	busy: boolean;
+
+	/**
+	 * Gets or sets the iOS indicator view style (e.g. medium, large).
+	 */
+	iosIndicatorViewStyle: IOSIndicatorViewStyle;
 }

packages/core/ui/activity-indicator/index.ios.ts

@@ -1,7 +1,8 @@
-import { ActivityIndicatorBase, busyProperty } from './activity-indicator-common';
+import { ActivityIndicatorBase, busyProperty, iosIndicatorViewStyleProperty } from './activity-indicator-common';
 import { colorProperty } from '../styling/style-properties';
 import { Color } from '../../color';
 import { iOSNativeHelper } from '../../utils';
+import { IOSIndicatorViewStyle } from '.';
 
 export * from './activity-indicator-common';
 
@@ -10,10 +11,8 @@ const majorVersion = iOSNativeHelper.MajorVersion;
 export class ActivityIndicator extends ActivityIndicatorBase {
 	nativeViewProtected: UIActivityIndicatorView;
 
-	private _activityIndicatorViewStyle = majorVersion <= 12 || !UIActivityIndicatorViewStyle.Medium ? UIActivityIndicatorViewStyle.Gray : UIActivityIndicatorViewStyle.Medium;
-
 	createNativeView() {
-		const viewStyle = this._activityIndicatorViewStyle;
+		const viewStyle = this._getNativeIndicatorViewStyle(this.iosIndicatorViewStyle);
 		const view = UIActivityIndicatorView.alloc().initWithActivityIndicatorStyle(viewStyle);
 		view.hidesWhenStopped = true;
 
@@ -25,15 +24,27 @@ export class ActivityIndicator extends ActivityIndicatorBase {
 		return this.nativeViewProtected;
 	}
 
-	[busyProperty.getDefault](): boolean {
-		if ((<any>this.nativeViewProtected).isAnimating) {
-			return (<any>this.nativeViewProtected).isAnimating();
-		} else {
-			return this.nativeViewProtected.animating;
+	private _getNativeIndicatorViewStyle(value: IOSIndicatorViewStyle): UIActivityIndicatorViewStyle {
+		let viewStyle: UIActivityIndicatorViewStyle;
+
+		switch (value) {
+			case 'large':
+				viewStyle = majorVersion > 12 ? UIActivityIndicatorViewStyle.Large : UIActivityIndicatorViewStyle.WhiteLarge;
+				break;
+			default:
+				viewStyle = majorVersion > 12 ? UIActivityIndicatorViewStyle.Medium : UIActivityIndicatorViewStyle.Gray;
+				break;
 		}
+
+		return viewStyle;
+	}
+
+	[busyProperty.getDefault](): boolean {
+		return this.nativeViewProtected.animating;
 	}
 	[busyProperty.setNative](value: boolean) {
 		const nativeView = this.nativeViewProtected;
+
 		if (value) {
 			nativeView.startAnimating();
 		} else {
@@ -51,4 +62,8 @@ export class ActivityIndicator extends ActivityIndicatorBase {
 	[colorProperty.setNative](value: UIColor | Color) {
 		this.nativeViewProtected.color = value instanceof Color ? value.ios : value;
 	}
+
+	[iosIndicatorViewStyleProperty.setNative](value: IOSIndicatorViewStyle) {
+		this.nativeViewProtected.activityIndicatorViewStyle = this._getNativeIndicatorViewStyle(value);
+	}
 }