Skip to content

Commit b3a6bc3

Browse files
bradmartinbradmartin
authored
Merge pull request #18 from bradmartin/master
feat(animated-circle): add properties for UX functionality
2 parents cc507cc + a187b00 commit b3a6bc3

File tree

4 files changed

+170
-13
lines changed

4 files changed

+170
-13
lines changed

‎packages/animated-circle/common.ts

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,47 @@
1-
import { ContentView } from '@nativescript/core';
1+
import { Color, ContentView, InheritedCssProperty, Style } from '@nativescript/core';
22

3-
export class AnimatedCircleCommon extends ContentView {}
3+
export const spinBarColorProperty = new InheritedCssProperty<Style, Color>({
4+
name: 'spinBarColor',
5+
cssName: 'spin-bar-color',
6+
equalityComparer: Color.equals,
7+
valueConverter: (value) => new Color(value),
8+
});
9+
10+
export const rimColorProperty = new InheritedCssProperty<Style, Color>({
11+
name: 'rimColor',
12+
cssName: 'rim-color',
13+
equalityComparer: Color.equals,
14+
valueConverter: (value) => new Color(value),
15+
});
16+
17+
export const barColorProperty = new InheritedCssProperty<Style, Color>({
18+
name: 'barColor',
19+
cssName: 'bar-color',
20+
equalityComparer: Color.equals,
21+
valueConverter: (value) => new Color(value),
22+
});
23+
24+
export class AnimatedCircleCommon extends ContentView {
25+
constructor() {
26+
super();
27+
}
28+
}
29+
30+
// register after class definition or we'll get an exception according to
31+
// https://docs.nativescript.org/core-concepts/properties#registering-the-property
32+
33+
// augmenting style definition so it includes rimColor and barColor
34+
declare module '@nativescript/core/ui/styling/style' {
35+
interface Style {
36+
spinBarColor: Color | string;
37+
rimColor: Color | string;
38+
barColor: Color | string;
39+
}
40+
}
41+
42+
// defines 'spinBarColor' property on Style class
43+
spinBarColorProperty.register(Style);
44+
// defines 'rimColor' property on Style class
45+
rimColorProperty.register(Style);
46+
// defines 'barColor' property on Style class
47+
barColorProperty.register(Style);

‎packages/animated-circle/index.android.ts

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Color } from '@nativescript/core';
2-
import { AnimatedCircleCommon } from './common';
2+
import { AnimatedCircleCommon, barColorProperty, rimColorProperty, spinBarColorProperty } from './common';
33

44
declare const at;
55

@@ -10,16 +10,16 @@ export class AnimatedCircle extends AnimatedCircleCommon {
1010
private _animationDuration = 1000;
1111
private _animated: boolean;
1212
private _maxValue = 100;
13-
private _rimColor = '#FF5722';
14-
private _rimWidth = 5;
15-
private _spinBarColor: any;
13+
private _barColor = new Color('#3D8FF4');
1614
private _barWidth: number;
15+
private _rimColor = new Color('#FF5722');
16+
private _rimWidth = 5;
17+
private _spinBarColor = new Color('green');
1718
private _startAngle: number;
1819
private _text = '';
1920
private _textColor = new Color('orange');
2021
private _textSize = 8;
2122
clockwise = true;
22-
barColor = '#3D8FF4';
2323
fillColor: any;
2424

2525
constructor() {
@@ -32,13 +32,34 @@ export class AnimatedCircle extends AnimatedCircleCommon {
3232

3333
initNativeView() {
3434
this.android.setAutoTextSize(false);
35+
this.android.setBarStrokeCap(android.graphics.Paint.Cap.ROUND);
3536
this.android.setTextMode(at.grabner.circleprogress.TextMode.TEXT);
36-
this.android.setTextScale(1);
37-
this.android.setTextSize(60);
37+
this.android.setShowTextWhileSpinning(true);
38+
this.android.setTextScale(1.1);
39+
this.android.setTextSize(300);
3840
this.android.setUnitVisible(false);
41+
this.android.setOuterContourSize(0);
42+
this.android.setInnerContourSize(0);
3943
this.updateAnimatedCircle();
4044
}
4145

46+
// @ts-ignore
47+
get android() {
48+
return this.nativeView;
49+
}
50+
51+
spin() {
52+
this.android.spin();
53+
}
54+
55+
stopSpinning() {
56+
this.android.stopSpinning();
57+
}
58+
59+
disposeNativeView() {
60+
super.disposeNativeView();
61+
}
62+
4263
set progress(value: number) {
4364
this._progress = Number(value);
4465
this.updateAnimatedCircle();
@@ -93,6 +114,14 @@ export class AnimatedCircle extends AnimatedCircleCommon {
93114
return this._rimColor;
94115
}
95116

117+
get barColor(): Color {
118+
return this._barColor;
119+
}
120+
set barColor(value: Color) {
121+
this._barColor = value;
122+
this.updateAnimatedCircle();
123+
}
124+
96125
set rimWidth(value: number) {
97126
this._rimWidth = Number(value);
98127
this.updateAnimatedCircle();
@@ -111,6 +140,33 @@ export class AnimatedCircle extends AnimatedCircleCommon {
111140
return this._spinBarColor;
112141
}
113142

143+
[rimColorProperty.setNative](value: any) {
144+
this._rimColor = value;
145+
this.updateAnimatedCircle();
146+
}
147+
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;
168+
}
169+
114170
set startAngle(value: number) {
115171
this._startAngle = Number(value);
116172
this.updateAnimatedCircle();
@@ -192,13 +248,13 @@ export class AnimatedCircle extends AnimatedCircleCommon {
192248
this.android.setRimWidth(this.rimWidth);
193249
}
194250
if (this.barColor) {
195-
this.android.setBarColor([new Color(this.barColor).argb]);
251+
this.android.setBarColor([this.barColor.argb]);
196252
}
197253
if (this.fillColor) {
198254
this.android.setFillCircleColor(new Color(this.fillColor).argb);
199255
}
200256

201-
this.android.setDirection(at.grabner.circleprogress.Direction.CW);
257+
this.android.setDirection(this.clockwise ? at.grabner.circleprogress.Direction.CW : at.grabner.circleprogress.Direction.CCW);
202258
}
203259
}
204260
}

‎packages/animated-circle/index.ios.ts

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Color, Utils } from '@nativescript/core';
2-
import { AnimatedCircleCommon } from './common';
2+
import { AnimatedCircleCommon, barColorProperty, rimColorProperty, spinBarColorProperty } from './common';
33

44
export class AnimatedCircle extends AnimatedCircleCommon {
55
private _ios: DRCircularProgressView;
66
private _label: UILabel;
7+
private _text: string;
78

89
constructor() {
910
super();
@@ -33,6 +34,26 @@ export class AnimatedCircle extends AnimatedCircleCommon {
3334
this._ios.bringSubviewToFront(this._label);
3435
}
3536

37+
// @ts-ignore
38+
get ios() {
39+
return this._ios;
40+
}
41+
42+
public spin() {}
43+
44+
public stopSpinning() {}
45+
46+
get spinBarColor(): string | UIColor {
47+
return this._ios.alternativeColor;
48+
}
49+
set spinBarColor(value: string | UIColor) {
50+
if (value instanceof UIColor) {
51+
this._ios.alternativeColor = value;
52+
} else if (typeof value === 'string') {
53+
this._ios.alternativeColor = new Color(value).ios;
54+
}
55+
}
56+
3657
/**
3758
* The percentage value completed (whole number)
3859
*/
@@ -51,6 +72,10 @@ export class AnimatedCircle extends AnimatedCircleCommon {
5172
}
5273
}
5374

75+
get barColor(): string | UIColor {
76+
return this._ios.progressColor;
77+
}
78+
5479
/**
5580
* The "remaining" circle color
5681
*/
@@ -62,6 +87,38 @@ export class AnimatedCircle extends AnimatedCircleCommon {
6287
}
6388
}
6489

90+
get rimColor(): string | UIColor {
91+
return this._ios.alternativeColor;
92+
}
93+
94+
/**
95+
* The "remaining" circle color
96+
*/
97+
[rimColorProperty.setNative](value: any) {
98+
this._ios.alternativeColor = value.ios;
99+
}
100+
101+
/**
102+
* The fill color of the percentage completed
103+
*/
104+
[barColorProperty.setNative](value: any) {
105+
this._ios.progressColor = value.ios;
106+
}
107+
108+
/**
109+
* The fill color of the percentage completed
110+
*/
111+
[spinBarColorProperty.setNative](value: any) {
112+
this._ios.alternativeColor = value.ios;
113+
}
114+
115+
/**
116+
* The draw direction for the filled circle
117+
*/
118+
set clockwise(value: boolean) {
119+
this._ios.clockwise = value;
120+
}
121+
65122
/**
66123
* The thickness of the circle
67124
*/

‎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.0.1",
3+
"version": "1.1.0",
44
"description": "Animated circle progress in your NativeScript applications.",
55
"main": "index",
66
"typings": "index.d.ts",

0 commit comments

Comments
 (0)