Skip to content

Commit 80e7cea

Browse files
authored
fix:(animated-circle) color properties (#36)
* fix color setters and improve the update method
1 parent c51f6f1 commit 80e7cea

File tree

2 files changed

+70
-44
lines changed

2 files changed

+70
-44
lines changed

packages/animated-circle/index.android.ts

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export class AnimatedCircle extends AnimatedCircleCommon {
1919
private _text = '';
2020
private _textColor = new Color('orange');
2121
private _textSize = 8;
22+
private _fillColor: Color;
2223
clockwise = true;
23-
fillColor: any;
2424

2525
constructor() {
2626
super();
@@ -107,7 +107,11 @@ export class AnimatedCircle extends AnimatedCircleCommon {
107107

108108
set rimColor(value: any) {
109109
this._rimColor = value;
110-
this.updateAnimatedCircle();
110+
if (value instanceof Color) {
111+
this.android.setRimColor(value.argb);
112+
} else {
113+
this.android.setRimColor(new Color(value).argb);
114+
}
111115
}
112116

113117
get rimColor() {
@@ -119,7 +123,11 @@ export class AnimatedCircle extends AnimatedCircleCommon {
119123
}
120124
set barColor(value: Color) {
121125
this._barColor = value;
122-
this.updateAnimatedCircle();
126+
if (value instanceof Color) {
127+
this.android.setBarColor([value.argb]);
128+
} else {
129+
this.android.setBarColor([new Color(value).argb]);
130+
}
123131
}
124132

125133
set rimWidth(value: number) {
@@ -133,38 +141,28 @@ export class AnimatedCircle extends AnimatedCircleCommon {
133141

134142
set spinBarColor(value: any) {
135143
this._spinBarColor = value;
136-
this.updateAnimatedCircle();
144+
if (value instanceof Color) {
145+
this.android.setSpinBarColor(value.argb);
146+
} else {
147+
this.android.setSpinBarColor(new Color(this.spinBarColor).argb);
148+
}
137149
}
138150

139151
get spinBarColor() {
140152
return this._spinBarColor;
141153
}
142154

143-
[rimColorProperty.setNative](value: any) {
144-
this._rimColor = value;
145-
this.updateAnimatedCircle();
155+
get fillColor() {
156+
return this._fillColor;
146157
}
147158

148-
[rimColorProperty.getDefault]() {
149-
return this._rimColor;
150-
}
151-
152-
[barColorProperty.setNative](value: any) {
153-
this._barColor = value;
154-
this.updateAnimatedCircle();
155-
}
156-
157-
[barColorProperty.getDefault]() {
158-
return this._barColor;
159-
}
160-
161-
[spinBarColorProperty.setNative](value: any) {
162-
this._spinBarColor = value;
163-
this.updateAnimatedCircle();
164-
}
165-
166-
[spinBarColorProperty.getDefault]() {
167-
return this._spinBarColor;
159+
set fillColor(value: any) {
160+
this._fillColor = value;
161+
if (value instanceof Color) {
162+
this.android.setFillCircleColor(value.argb);
163+
} else {
164+
this.android.setFillCircleColor(new Color(value).argb);
165+
}
168166
}
169167

170168
set startAngle(value: number) {
@@ -196,23 +194,62 @@ export class AnimatedCircle extends AnimatedCircleCommon {
196194

197195
set textColor(value: string) {
198196
this._textColor = new Color(value);
199-
this.updateAnimatedCircle();
197+
this.android.setTextColor(this._textColor.argb);
200198
}
201199

202200
set textSize(value: number) {
203201
this._textSize = value;
204-
this.updateAnimatedCircle();
202+
this.android.setTextSize(value);
205203
}
206204

207205
get textSize() {
208206
return this.android.getTextSize();
209207
}
210208

209+
// CSS Properties
210+
211+
[rimColorProperty.setNative](value: any) {
212+
this._rimColor = value;
213+
if (value instanceof Color) {
214+
this.android?.setRimColor(value.argb);
215+
} else {
216+
this.android?.setRimColor(new Color(value).argb);
217+
}
218+
}
219+
220+
[rimColorProperty.getDefault]() {
221+
return this._rimColor;
222+
}
223+
224+
[barColorProperty.setNative](value: any) {
225+
this._barColor = value;
226+
if (value instanceof Color) {
227+
this.android?.setBarColor([value.argb]);
228+
} else {
229+
this.android?.setBarColor([new Color(value).argb]);
230+
}
231+
}
232+
233+
[barColorProperty.getDefault]() {
234+
return this._barColor;
235+
}
236+
237+
[spinBarColorProperty.setNative](value: any) {
238+
this._spinBarColor = value;
239+
if (value instanceof Color) {
240+
this.android?.setSpinBarColor(value.argb);
241+
} else {
242+
this.android?.setSpinBarColor(new Color(this.spinBarColor).argb);
243+
}
244+
}
245+
246+
[spinBarColorProperty.getDefault]() {
247+
return this._spinBarColor;
248+
}
249+
211250
private updateAnimatedCircle(): void {
212251
if (this.android) {
213252
this.android.setText(this._text);
214-
this.android.setTextColor(this._textColor.argb);
215-
this.android.setTextSize(this._textSize);
216253
if (this.animated) {
217254
if (this.animateFrom) {
218255
this.android.setValueAnimated(this.animateFrom, this.progress, this.animationDuration);
@@ -227,12 +264,7 @@ export class AnimatedCircle extends AnimatedCircleCommon {
227264
this.android.setValue(this.progress);
228265
}
229266
this.android.setMaxValue(this.maxValue);
230-
if (this.rimColor) {
231-
this.android.setRimColor(new Color(this.rimColor).argb);
232-
}
233-
if (this.spinBarColor) {
234-
this.android.setSpinBarColor(new Color(this.spinBarColor).argb);
235-
}
267+
236268
if (this.startAngle) {
237269
this.android.setStartAngle(this.startAngle);
238270
}
@@ -247,12 +279,6 @@ export class AnimatedCircle extends AnimatedCircleCommon {
247279
if (this.rimWidth) {
248280
this.android.setRimWidth(this.rimWidth);
249281
}
250-
if (this.barColor) {
251-
this.android.setBarColor([this.barColor.argb]);
252-
}
253-
if (this.fillColor) {
254-
this.android.setFillCircleColor(new Color(this.fillColor).argb);
255-
}
256282

257283
this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
258284
}

packages/animated-circle/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/animated-circle",
3-
"version": "1.1.0",
3+
"version": "1.1.3",
44
"description": "Animated circle progress in your NativeScript applications.",
55
"main": "index",
66
"typings": "index.d.ts",

0 commit comments

Comments
 (0)