fix:(animated-circle) color properties (#36)

* fix color setters and improve the update method

Author: bradmartin

packages/animated-circle/index.android.ts

@@ -19,8 +19,8 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 	private _text = '';
 	private _textColor = new Color('orange');
 	private _textSize = 8;
+	private _fillColor: Color;
 	clockwise = true;
-	fillColor: any;
 
 	constructor() {
 		super();
@@ -107,7 +107,11 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 
 	set rimColor(value: any) {
 		this._rimColor = value;
-		this.updateAnimatedCircle();
+		if (value instanceof Color) {
+			this.android.setRimColor(value.argb);
+		} else {
+			this.android.setRimColor(new Color(value).argb);
+		}
 	}
 
 	get rimColor() {
@@ -119,7 +123,11 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 	}
 	set barColor(value: Color) {
 		this._barColor = value;
-		this.updateAnimatedCircle();
+		if (value instanceof Color) {
+			this.android.setBarColor([value.argb]);
+		} else {
+			this.android.setBarColor([new Color(value).argb]);
+		}
 	}
 
 	set rimWidth(value: number) {
@@ -133,38 +141,28 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 
 	set spinBarColor(value: any) {
 		this._spinBarColor = value;
-		this.updateAnimatedCircle();
+		if (value instanceof Color) {
+			this.android.setSpinBarColor(value.argb);
+		} else {
+			this.android.setSpinBarColor(new Color(this.spinBarColor).argb);
+		}
 	}
 
 	get spinBarColor() {
 		return this._spinBarColor;
 	}
 
-	[rimColorProperty.setNative](value: any) {
-		this._rimColor = value;
-		this.updateAnimatedCircle();
+	get fillColor() {
+		return this._fillColor;
 	}
 
-	[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 fillColor(value: any) {
+		this._fillColor = value;
+		if (value instanceof Color) {
+			this.android.setFillCircleColor(value.argb);
+		} else {
+			this.android.setFillCircleColor(new Color(value).argb);
+		}
 	}
 
 	set startAngle(value: number) {
@@ -196,23 +194,62 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 
 	set textColor(value: string) {
 		this._textColor = new Color(value);
-		this.updateAnimatedCircle();
+		this.android.setTextColor(this._textColor.argb);
 	}
 
 	set textSize(value: number) {
 		this._textSize = value;
-		this.updateAnimatedCircle();
+		this.android.setTextSize(value);
 	}
 
 	get textSize() {
 		return this.android.getTextSize();
 	}
 
+	// CSS Properties
+
+	[rimColorProperty.setNative](value: any) {
+		this._rimColor = value;
+		if (value instanceof Color) {
+			this.android?.setRimColor(value.argb);
+		} else {
+			this.android?.setRimColor(new Color(value).argb);
+		}
+	}
+
+	[rimColorProperty.getDefault]() {
+		return this._rimColor;
+	}
+
+	[barColorProperty.setNative](value: any) {
+		this._barColor = value;
+		if (value instanceof Color) {
+			this.android?.setBarColor([value.argb]);
+		} else {
+			this.android?.setBarColor([new Color(value).argb]);
+		}
+	}
+
+	[barColorProperty.getDefault]() {
+		return this._barColor;
+	}
+
+	[spinBarColorProperty.setNative](value: any) {
+		this._spinBarColor = value;
+		if (value instanceof Color) {
+			this.android?.setSpinBarColor(value.argb);
+		} else {
+			this.android?.setSpinBarColor(new Color(this.spinBarColor).argb);
+		}
+	}
+
+	[spinBarColorProperty.getDefault]() {
+		return this._spinBarColor;
+	}
+
 	private updateAnimatedCircle(): void {
 		if (this.android) {
 			this.android.setText(this._text);
-			this.android.setTextColor(this._textColor.argb);
-			this.android.setTextSize(this._textSize);
 			if (this.animated) {
 				if (this.animateFrom) {
 					this.android.setValueAnimated(this.animateFrom, this.progress, this.animationDuration);
@@ -227,12 +264,7 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 				this.android.setValue(this.progress);
 			}
 			this.android.setMaxValue(this.maxValue);
-			if (this.rimColor) {
-				this.android.setRimColor(new Color(this.rimColor).argb);
-			}
-			if (this.spinBarColor) {
-				this.android.setSpinBarColor(new Color(this.spinBarColor).argb);
-			}
+
 			if (this.startAngle) {
 				this.android.setStartAngle(this.startAngle);
 			}
@@ -247,12 +279,6 @@ export class AnimatedCircle extends AnimatedCircleCommon {
 			if (this.rimWidth) {
 				this.android.setRimWidth(this.rimWidth);
 			}
-			if (this.barColor) {
-				this.android.setBarColor([this.barColor.argb]);
-			}
-			if (this.fillColor) {
-				this.android.setFillCircleColor(new Color(this.fillColor).argb);
-			}
 
 			this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
 		}

packages/animated-circle/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativescript/animated-circle",
-	"version": "1.1.0",
+	"version": "1.1.3",
 	"description": "Animated circle progress in your NativeScript applications.",
 	"main": "index",
 	"typings": "index.d.ts",