diff --git a/packages/core/ui/activity-indicator/activity-indicator-common.ts b/packages/core/ui/activity-indicator/activity-indicator-common.ts index dc34640f6b..bc6f1c7f19 100644 --- a/packages/core/ui/activity-indicator/activity-indicator-common.ts +++ b/packages/core/ui/activity-indicator/activity-indicator-common.ts @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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({ valueConverter: booleanConverter, }); busyProperty.register(ActivityIndicatorBase); + +export const iosIndicatorViewStyleProperty = new Property({ + name: 'iosIndicatorViewStyle', + defaultValue: 'medium', +}); +iosIndicatorViewStyleProperty.register(ActivityIndicatorBase); diff --git a/packages/core/ui/activity-indicator/index.d.ts b/packages/core/ui/activity-indicator/index.d.ts index a882e18d7e..c9799fb53f 100644 --- a/packages/core/ui/activity-indicator/index.d.ts +++ b/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; } diff --git a/packages/core/ui/activity-indicator/index.ios.ts b/packages/core/ui/activity-indicator/index.ios.ts index bf40f9a915..a8847e4d28 100644 --- a/packages/core/ui/activity-indicator/index.ios.ts +++ b/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 ((this.nativeViewProtected).isAnimating) { - return (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); + } }