fix: indicator in circular mode

Author: jcassidyav

src/ui-pager-indicator/index.common.ts

@@ -1,29 +1,4 @@
-import {
-    AddChildFromBuilder,
-    Builder,
-    CSSType,
-    CoercibleProperty,
-    Color,
-    ContainerView,
-    CoreTypes,
-    GridLayout,
-    ItemsSource,
-    KeyedTemplate,
-    Label,
-    Length,
-    Observable,
-    ObservableArray,
-    PercentLength,
-    Property,
-    Template,
-    Trace,
-    View,
-    ViewBase,
-    addWeakEventListener,
-    makeParser,
-    makeValidator,
-    removeWeakEventListener
-} from '@nativescript/core';
+import { CSSType, Color, ItemsSource, Property, View, ViewBase } from '@nativescript/core';
 import { IndicatorHolder } from '.';
 export enum Indicator {
     Disabled = 'disable',
@@ -62,6 +37,21 @@ export abstract class PagerIndicatorBase extends View {
     pagerView: View & IndicatorHolder;
     pagerViewId: string;
 
+    getPage() {
+        if (this.page) {
+            return this.page;
+        } else {
+            return this.getTopmost(this);
+        }
+    }
+    getTopmost<View>(arg: ViewBase) {
+        if (arg.parent) {
+            return this.getTopmost(arg.parent);
+        } else {
+            return arg;
+        }
+    }
+
     disposeNativeView() {
         this.pagerView = null;
         super.disposeNativeView();
@@ -70,12 +60,11 @@ export abstract class PagerIndicatorBase extends View {
     onLoaded() {
         super.onLoaded();
         if (this.pagerViewId) {
-            this.setPagerView(this.page.getViewById(this.pagerViewId));
+            this.setPagerView(this.getPage().getViewById(this.pagerViewId));
         }
     }
 
     setPagerView(view: View) {
-        console.log('setPagerView', view);
         if (this.pagerView !== view) {
             if (this.pagerView) {
                 this.pagerView.setIndicator(null);
@@ -89,7 +78,9 @@ export abstract class PagerIndicatorBase extends View {
     }
 
     [pagerViewIdProperty.setNative](value) {
-        this.setPagerView(this.page.getViewById(value));
+        if (this.page) {
+            this.setPagerView(this.page?.getViewById(value));
+        }
     }
 
     abstract setSelection(index: number, animated?: boolean);

src/ui-pager-indicator/index.ios.ts

@@ -58,7 +58,6 @@ export class PagerIndicator extends PagerIndicatorBase {
     }
     setInteractiveAnimation(animated?: boolean) {}
     setSelection(progress: number, animated: boolean = true) {
-        console.log("Setting selection", progress, animated);
         NSCProgressHelper.setProgressWithPageControlProgressAnimated(this.nativeViewProtected, progress, animated);
     }
     setCount(count: number) {

src/ui-pager/index.android.ts

@@ -255,6 +255,11 @@ export class Pager extends PagerBase {
             }
             this._initAutoPlay(this.autoPlay);
         }
+        if (this.indicator && this.mObservableArrayInstance && this.mObservableArrayInstance.length) {
+            this.indicator.setCount(this.mObservableArrayInstance.length);
+            this.pagerAdapter.notifyDataSetChanged();
+            this.scrollToIndexAnimated(0, false);
+        }
     };
     disposeViewHolderViews() {
         this.enumerateViewHolders((v) => {
@@ -318,7 +323,7 @@ export class Pager extends PagerBase {
             const indicator = this.indicator;
             const toDo = () => {
                 nativeView.setCurrentItem(index, false);
-                indicator.setSelection(this.selectedIndex, false);
+                if (indicator) indicator.setSelection(this.selectedIndex, false);
             };
             if (indicator) {
                 indicator.withoutAnimation(toDo);
@@ -363,10 +368,13 @@ export class Pager extends PagerBase {
     public scrollToIndexAnimated(index: number, animate: boolean) {
         const nativeView = this.nativeViewProtected;
         if (nativeView) {
-            nativeView.setCurrentItem(index, animate);
+            nativeView.setCurrentItem(this.pagerAdapter.getIndex(index), animate);
             if (!animate) {
                 // without animate we wont go through the delegate
                 selectedIndexProperty.nativeValueChange(this, index);
+                if (this.indicator) {
+                    this.indicator.setSelection(index, false);
+                }
             }
         }
     }
@@ -527,9 +535,6 @@ export class Pager extends PagerBase {
         if (isRightOverScrolled || isLeftOverScrolled) {
             selectedPosition = position;
         }
-        if (isRightOverScrolled) {
-            indicator.setSelection(selectedPosition);
-        }
 
         const slideToRightSide = selectedPosition === position && positionOffset !== 0;
         let selectingPosition;
@@ -586,7 +591,9 @@ function initPagerChangeCallback() {
                 if (owner.lastEvent === 0 && !owner.circularMode) {
                     // page changing without scroll so do the indicator etc.
                     selectedIndexProperty.nativeValueChange(owner, position);
-                    owner.indicator?.setSelection(position, true);
+                    if (owner.indicator) {
+                        owner.indicator.setSelection(position, true);
+                    }
                 }
 
                 owner.notify({
@@ -627,7 +634,10 @@ function initPagerChangeCallback() {
                     const selectingPosition = progress[0];
                     const selectingProgress = progress[1];
                     indicator.setInteractiveAnimation(true);
-                    indicator.setProgress(selectingPosition, selectingProgress);
+                    if (position < owner.lastIndex) {
+                        indicator.setSelection(position, false);
+                        indicator.setProgress(selectingPosition, selectingProgress);
+                    }
                 }
             }
         }
@@ -710,6 +720,7 @@ interface PagerRecyclerAdapter extends androidx.recyclerview.widget.RecyclerView
     new (owner: WeakRef<Pager>): PagerRecyclerAdapter;
     getPosition(index: number): number;
     lastIndex(): number;
+    getIndex(index: number): number;
 }
 // eslint-disable-next-line no-redeclare
 let PagerRecyclerAdapter: PagerRecyclerAdapter;
@@ -775,7 +786,27 @@ function initPagerRecyclerAdapter() {
             }
             return position;
         }
-
+        /**
+         *
+         * Get  the position in the CollectionView from the selected index
+         *
+         * @param index The position in the collectionView
+         * @returns The selected Index ( i.e. the number in the slides as the user would view it).
+         */
+        getIndex(index: number): number {
+            let position = index;
+            const owner = this.owner && this.owner.get();
+            if (owner && owner.circularMode) {
+                if (position === 0) {
+                    position = 1;
+                } else if (position === this.firstDummy()) {
+                    position = 0;
+                } else {
+                    position = position + 1;
+                }
+            }
+            return position;
+        }
         onBindViewHolder(holder: any, index: number): void {
             const owner = this.owner ? this.owner.get() : null;
             if (owner) {