chore: working on activity indicators

Author: farfromrefug

demo-vue/app/examples/ActivityIndicators.vue

@@ -11,7 +11,7 @@
       <MDActivityIndicator color="green" busy class="loading" />
       <MDActivityIndicator color="orange" busy class="loading" width="100" height="100"/>
       <MDActivityIndicator class="loading" backgroundColor="yellow" busy/>
-      <MDActivityIndicator color="brown" indeterminate="false" progress="0.5" maxValue="1" class="loading" horizontalAlignment="center"/>
+      <MDActivityIndicator color="brown" :indeterminate="false" value="50" maxValue="100" class="loading"  busy horizontalAlignment="center"/>
     </StackLayout>
   </Page>
 </template>
@@ -46,7 +46,4 @@ export default Vue.extend({
 });
 </script>
 <style lang="css">
-.loading {
-    color:white;
-}
 </style>

src/activityindicator/index-common.ts

@@ -1,9 +1,11 @@
-import { CSSType, ActivityIndicator as NSActivityIndicator, Progress as NSProgress, Property, Utils, booleanConverter } from '@nativescript/core';
+import { CSSType, CoercibleProperty, ActivityIndicator as NSActivityIndicator, Progress as NSProgress, Property, Utils, booleanConverter } from '@nativescript/core';
 import { applyMixins } from '@nativescript-community/ui-material-core';
 
 @CSSType('MDActivityIndicator')
 export class ActivityIndicatorBase extends NSActivityIndicator {
     public indeterminate: boolean;
+    public maxValue: number;
+    public value: number;
     public startAnimating() {
         this.busy = true;
     }
@@ -37,3 +39,26 @@ export const indeterminateProperty = new Property<ActivityIndicatorBase, boolean
     valueConverter: booleanConverter
 });
 indeterminateProperty.register(ActivityIndicatorBase);
+/**
+ * Represents the observable property backing the value property of each Progress instance.
+ */
+export const valueProperty = new CoercibleProperty<ActivityIndicatorBase, number>({
+    name: 'value',
+    defaultValue: 0,
+    coerceValue: (t, v) => (v < 0 ? 0 : Math.min(v, t.maxValue)),
+    valueConverter: (v) => parseInt(v, 10)
+});
+valueProperty.register(ActivityIndicatorBase);
+
+/**
+ * Represents the observable property backing the maxValue property of each Progress instance.
+ */
+export const maxValueProperty = new Property<ActivityIndicatorBase, number>({
+    name: 'maxValue',
+    defaultValue: 100,
+    valueChanged: (target, oldValue, newValue) => {
+        valueProperty.coerce(target);
+    },
+    valueConverter: (v) => parseInt(v, 10)
+});
+maxValueProperty.register(ActivityIndicatorBase);

src/activityindicator/index.android.ts

@@ -1,11 +1,30 @@
-import { ActivityIndicatorBase, indeterminateProperty } from './index-common';
+import { ActivityIndicatorBase, indeterminateProperty, maxValueProperty, valueProperty } from './index-common';
 
 export class ActivityIndicator extends ActivityIndicatorBase {
-    nativeViewProtected: android.widget.ProgressBar;
+    // nativeViewProtected: com.google.android.material.progressindicator.CircularProgressIndicator;
+
+    // createNativeView() {
+    //     const progressBar = new com.google.android.material.progressindicator.CircularProgressIndicator(this._context);
+    //     progressBar.setVisibility(android.view.View.INVISIBLE);
+    //     progressBar.setIndeterminate(true);
+    //     return progressBar;
+    // }
+
+    [valueProperty.getDefault](): number {
+        return 0;
+    }
+    [valueProperty.setNative](value: number) {
+        this.nativeViewProtected.setProgress(value);
+    }
+
+    [maxValueProperty.getDefault](): number {
+        return 100;
+    }
+    [maxValueProperty.setNative](value: number) {
+        this.nativeViewProtected.setMax(value);
+    }
 
     [indeterminateProperty.setNative](value: boolean) {
-        this.busy = true;
-        // not supported for now with circular progress
         this.nativeViewProtected.setIndeterminate(value);
     }
 }

src/activityindicator/index.ios.ts

@@ -1,6 +1,6 @@
 import { themer } from '@nativescript-community/ui-material-core';
 import { Color, Screen, Utils, View, colorProperty } from '@nativescript/core';
-import { ActivityIndicatorBase, indeterminateProperty } from './index-common';
+import { ActivityIndicatorBase, indeterminateProperty, maxValueProperty, valueProperty } from './index-common';
 
 export class ActivityIndicator extends ActivityIndicatorBase {
     nativeViewProtected: MDCActivityIndicator;
@@ -9,7 +9,7 @@ export class ActivityIndicator extends ActivityIndicatorBase {
     public createNativeView() {
         const view = MDCActivityIndicator.new();
         const color = (themer.getAppColorScheme() as MDCSemanticColorScheme).primaryColor;
-        view.cycleColors  = color ? NSArray.arrayWithObject(color) : null;
+        view.cycleColors = color ? NSArray.arrayWithObject(color) : null;
         // const colorScheme = this.colorThemer || themer.getAppColorScheme();
         // if (colorScheme) {
         //     MDCActivityIndicatorColorThemer.applySemanticColorSchemeToActivityIndicator(colorScheme, view);
@@ -77,11 +77,25 @@ export class ActivityIndicator extends ActivityIndicatorBase {
 
     [colorProperty.setNative](value: UIColor | Color) {
         const color = value instanceof Color ? value.ios : value;
-        this.nativeViewProtected.cycleColors  = color ? NSArray.arrayWithObject(color) : null;
+        this.nativeViewProtected.cycleColors = color ? NSArray.arrayWithObject(color) : null;
         // this.getColorThemer().primaryColor = value instanceof Color ? value.ios : value;
         // MDCActivityIndicatorColorThemer.applySemanticColorSchemeToActivityIndicator(this.getColorThemer(), this.nativeViewProtected);
     }
     [indeterminateProperty.setNative](value: boolean) {
         this.nativeViewProtected.indicatorMode = value ? MDCActivityIndicatorMode.Indeterminate : MDCActivityIndicatorMode.Determinate;
     }
+
+    [valueProperty.getDefault](): number {
+        return 0;
+    }
+    [valueProperty.setNative](value: number) {
+        this.nativeViewProtected.progress = value / this.maxValue;
+    }
+
+    [maxValueProperty.getDefault](): number {
+        return 100;
+    }
+    [maxValueProperty.setNative](value: number) {
+        this.nativeViewProtected.progress = this.value / value;
+    }
 }