NativeScript · bradmartin · Oct 5, 2020 · Oct 2, 2020 · Oct 2, 2020 · Oct 2, 2020
diff --git a/packages/animated-circle/common.ts b/packages/animated-circle/common.ts
@@ -1,3 +1,47 @@
-import { ContentView } from '@nativescript/core';
+import { Color, ContentView, InheritedCssProperty, Style } from '@nativescript/core';
 
-export class AnimatedCircleCommon extends ContentView {}
+export const spinBarColorProperty = new InheritedCssProperty<Style, Color>({
+	name: 'spinBarColor',
+	cssName: 'spin-bar-color',
+	equalityComparer: Color.equals,
+	valueConverter: (value) => new Color(value),
+});
+
+export const rimColorProperty = new InheritedCssProperty<Style, Color>({
+	name: 'rimColor',
+	cssName: 'rim-color',
+	equalityComparer: Color.equals,
+	valueConverter: (value) => new Color(value),
+});
+
+export const barColorProperty = new InheritedCssProperty<Style, Color>({
+	name: 'barColor',
+	cssName: 'bar-color',
+	equalityComparer: Color.equals,
+	valueConverter: (value) => new Color(value),
+});
+
+export class AnimatedCircleCommon extends ContentView {
+	constructor() {
+		super();
+	}
+}
+
+// register after class definition or we'll get an exception according to
+// https://docs.nativescript.org/core-concepts/properties#registering-the-property
+
+// augmenting style definition so it includes rimColor and barColor
+declare module '@nativescript/core/ui/styling/style' {
+	interface Style {
+		spinBarColor: Color | string;
+		rimColor: Color | string;
+		barColor: Color | string;
+	}
+}
+
+// defines 'spinBarColor' property on Style class
+spinBarColorProperty.register(Style);
+// defines 'rimColor' property on Style class
+rimColorProperty.register(Style);
+// defines 'barColor' property on Style class
+barColorProperty.register(Style);
diff --git a/packages/animated-circle/index.android.ts b/packages/animated-circle/index.android.ts
@@ -1,5 +1,5 @@
 import { Color } from '@nativescript/core';
-import { AnimatedCircleCommon } from './common';
+import { AnimatedCircleCommon, barColorProperty, rimColorProperty, spinBarColorProperty } from './common';
 
 declare const at;
 
@@ -10,16 +10,16 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 	private _animationDuration = 1000;
 	private _animated: boolean;
 	private _maxValue = 100;
-	private _rimColor = '#FF5722';
-	private _rimWidth = 5;
-	private _spinBarColor: any;
+	private _barColor = new Color('#3D8FF4');
 	private _barWidth: number;
+	private _rimColor = new Color('#FF5722');
+	private _rimWidth = 5;
+	private _spinBarColor = new Color('green');
 	private _startAngle: number;
 	private _text = '';
 	private _textColor = new Color('orange');
 	private _textSize = 8;
 	clockwise = true;
-	barColor = '#3D8FF4';
 	fillColor: any;
 
 	constructor() {
@@ -32,13 +32,34 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 
 	initNativeView() {
 		this.android.setAutoTextSize(false);
+		this.android.setBarStrokeCap(android.graphics.Paint.Cap.ROUND);
 		this.android.setTextMode(at.grabner.circleprogress.TextMode.TEXT);
-		this.android.setTextScale(1);
-		this.android.setTextSize(60);
+		this.android.setShowTextWhileSpinning(true);
+		this.android.setTextScale(1.1);
+		this.android.setTextSize(300);
 		this.android.setUnitVisible(false);
+		this.android.setOuterContourSize(0);
+		this.android.setInnerContourSize(0);
 		this.updateAnimatedCircle();
 	}
 
+	// @ts-ignore
+	get android() {
+		return this.nativeView;
+	}
+
+	spin() {
+		this.android.spin();
+	}
+
+	stopSpinning() {
+		this.android.stopSpinning();
+	}
+
+	disposeNativeView() {
+		super.disposeNativeView();
+	}
+
 	set progress(value: number) {
 		this._progress = Number(value);
 		this.updateAnimatedCircle();
@@ -93,6 +114,14 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 		return this._rimColor;
 	}
 
+	get barColor(): Color {
+		return this._barColor;
+	}
+	set barColor(value: Color) {
+		this._barColor = value;
+		this.updateAnimatedCircle();
+	}
+
 	set rimWidth(value: number) {
 		this._rimWidth = Number(value);
 		this.updateAnimatedCircle();
@@ -111,6 +140,33 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 		return this._spinBarColor;
 	}
 
+	[rimColorProperty.setNative](value: any) {
+		this._rimColor = value;
+		this.updateAnimatedCircle();
+	}
+
+	[rimColorProperty.getDefault]() {
+		return this._rimColor;
+	}
+
+	[barColorProperty.setNative](value: any) {
+		this._barColor = value;
+		this.updateAnimatedCircle();
+	}
+
+	[barColorProperty.getDefault]() {
+		return this._barColor;
+	}
+
+	[spinBarColorProperty.setNative](value: any) {
+		this._spinBarColor = value;
+		this.updateAnimatedCircle();
+	}
+
+	[spinBarColorProperty.getDefault]() {
+		return this._spinBarColor;
+	}
+
 	set startAngle(value: number) {
 		this._startAngle = Number(value);
 		this.updateAnimatedCircle();
@@ -192,13 +248,13 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 				this.android.setRimWidth(this.rimWidth);
 			}
 			if (this.barColor) {
-				this.android.setBarColor([new Color(this.barColor).argb]);
+				this.android.setBarColor([this.barColor.argb]);
 			}
 			if (this.fillColor) {
 				this.android.setFillCircleColor(new Color(this.fillColor).argb);
 			}
 
-			this.android.setDirection(at.grabner.circleprogress.Direction.CW);
+			this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
 		}
 	}
 }
diff --git a/packages/animated-circle/index.ios.ts b/packages/animated-circle/index.ios.ts
@@ -1,9 +1,10 @@
 import { Color, Utils } from '@nativescript/core';
-import { AnimatedCircleCommon } from './common';
+import { AnimatedCircleCommon, barColorProperty, rimColorProperty, spinBarColorProperty } from './common';
 
 export class AnimatedCircle extends AnimatedCircleCommon {
 	private _ios: DRCircularProgressView;
 	private _label: UILabel;
+	private _text: string;
 
 	constructor() {
 		super();
@@ -33,6 +34,26 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 		this._ios.bringSubviewToFront(this._label);
 	}
 
+	// @ts-ignore
+	get ios() {
+		return this._ios;
+	}
+
+	public spin() {}
+
+	public stopSpinning() {}
+
+	get spinBarColor(): string | UIColor {
+		return this._ios.alternativeColor;
+	}
+	set spinBarColor(value: string | UIColor) {
+		if (value instanceof UIColor) {
+			this._ios.alternativeColor = value;
+		} else if (typeof value === 'string') {
+			this._ios.alternativeColor = new Color(value).ios;
+		}
+	}
+
 	/**
 	 * The percentage value completed (whole number)
 	 */
@@ -51,6 +72,10 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 		}
 	}
 
+	get barColor(): string | UIColor {
+		return this._ios.progressColor;
+	}
+
 	/**
 	 * The "remaining" circle color
 	 */
@@ -62,6 +87,38 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 		}
 	}
 
+	get rimColor(): string | UIColor {
+		return this._ios.alternativeColor;
+	}
+
+	/**
+	 * The "remaining" circle color
+	 */
+	[rimColorProperty.setNative](value: any) {
+		this._ios.alternativeColor = value.ios;
+	}
+
+	/**
+	 * The fill color of the percentage completed
+	 */
+	[barColorProperty.setNative](value: any) {
+		this._ios.progressColor = value.ios;
+	}
+
+	/**
+	 * The fill color of the percentage completed
+	 */
+	[spinBarColorProperty.setNative](value: any) {
+		this._ios.alternativeColor = value.ios;
+	}
+
+	/**
+	 * The draw direction for the filled circle
+	 */
+	set clockwise(value: boolean) {
+		this._ios.clockwise = value;
+	}
+
 	/**
 	 * The thickness of the circle
 	 */

diff --git a/packages/animated-circle/package.json b/packages/animated-circle/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/animated-circle",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Animated circle progress in your NativeScript applications.",
 	"main": "index",
 	"typings": "index.d.ts",