From 7f20747580bafdeae85f7a839a4fa587dd858575 Mon Sep 17 00:00:00 2001 From: Brad Martin Date: Fri, 2 Oct 2020 12:22:45 -0500 Subject: [PATCH 1/3] closes #17 --- packages/animated-circle/common.ts | 46 +++++++++++++- packages/animated-circle/index.android.ts | 74 ++++++++++++++++++++--- packages/animated-circle/index.ios.ts | 59 +++++++++++++++++- 3 files changed, 167 insertions(+), 12 deletions(-) diff --git a/packages/animated-circle/common.ts b/packages/animated-circle/common.ts index 55aa19bf..a324bc90 100644 --- a/packages/animated-circle/common.ts +++ b/packages/animated-circle/common.ts @@ -1,3 +1,45 @@ -import { ContentView } from '@nativescript/core'; +import { Color, ContentView, InheritedCssProperty, Style } from '@nativescript/core'; -export class AnimatedCircleCommon extends ContentView {} +export const spinBarColorProperty = new InheritedCssProperty({ + name: 'spinBarColor', + cssName: 'spin-bar-color', + equalityComparer: Color.equals, + valueConverter: (value) => new Color(value), +}); +export const rimColorProperty = new InheritedCssProperty({ + name: 'rimColor', + cssName: 'rim-color', + equalityComparer: Color.equals, + valueConverter: (value) => new Color(value), +}); +export const barColorProperty = new InheritedCssProperty({ + 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 definitino so it includes rimColor and barColor +declare module '@nativescript/core/ui/styling/style' { + interface Style { + spinBarColor: Color; + rimColor: Color; + barColor: Color; + } +} +// 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 index c493e4e7..9ccef589 100644 --- 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 index b7612810..1f8bc104 100644 --- 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 */ From c46229ef6c5ab28ff83ed6c3ad44c791a3535cdc Mon Sep 17 00:00:00 2001 From: Brad Martin Date: Fri, 2 Oct 2020 12:22:50 -0500 Subject: [PATCH 2/3] bump --- packages/animated-circle/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/animated-circle/package.json b/packages/animated-circle/package.json index bfe3518f..a34201c1 100644 --- 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", From a187b00c0a5afe6b2a2d77b23fe8b6304e84b79d Mon Sep 17 00:00:00 2001 From: Brad Martin Date: Fri, 2 Oct 2020 13:02:15 -0500 Subject: [PATCH 3/3] adjust the types on the augmented declaration --- packages/animated-circle/common.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/animated-circle/common.ts b/packages/animated-circle/common.ts index a324bc90..83b8c5ba 100644 --- a/packages/animated-circle/common.ts +++ b/packages/animated-circle/common.ts @@ -6,12 +6,14 @@ export const spinBarColorProperty = new InheritedCssProperty({ equalityComparer: Color.equals, valueConverter: (value) => new Color(value), }); + export const rimColorProperty = new InheritedCssProperty({ name: 'rimColor', cssName: 'rim-color', equalityComparer: Color.equals, valueConverter: (value) => new Color(value), }); + export const barColorProperty = new InheritedCssProperty({ name: 'barColor', cssName: 'bar-color', @@ -25,18 +27,18 @@ export class AnimatedCircleCommon extends ContentView { } } -// register after class definition or we'll get an exception according -// to +// register after class definition or we'll get an exception according to // https://docs.nativescript.org/core-concepts/properties#registering-the-property -// augmenting style definitino so it includes rimColor and barColor +// augmenting style definition so it includes rimColor and barColor declare module '@nativescript/core/ui/styling/style' { interface Style { - spinBarColor: Color; - rimColor: Color; - barColor: Color; + spinBarColor: Color | string; + rimColor: Color | string; + barColor: Color | string; } } + // defines 'spinBarColor' property on Style class spinBarColorProperty.register(Style); // defines 'rimColor' property on Style class