Merge pull request #37 from jcassidyav/indicator-circular

fix:  indicator, circular mode, binding updates

Author: farfromrefug

demo-snippets/ng/indicator/indicator.component.html

@@ -4,21 +4,13 @@
 </ActionBar>
 
 <StackLayout>
-    <Pager
-        [items]="items"
-        height="300"
-        [selectedIndex]="selectedIndex"
-        (selectedIndexChange)="onIndexChanged($event)"
-        indicator="fill"
-        showIndicator="true"
-    >
+    <Pager [items]="items" height="300" [selectedIndex]="selectedIndex" (selectedIndexChange)="onIndexChanged($event)"
+        indicator="fill" showIndicator="true">
         <ng-template let-i="index" let-item="item">
-            <GridLayout
-                [backgroundColor]="item.color"
-            >
+            <GridLayout [backgroundColor]="item.color">
                 <Label class="label" [text]="item.title"></Label>
             </GridLayout>
         </ng-template>
     </Pager>
     <Button text="Reset" (tap)="resetPager()"></Button>
-</StackLayout>
+</StackLayout>

packages/ui-pager-indicator/platforms/ios/src/ProgressHelper.swift

@@ -0,0 +1,13 @@
+import Foundation
+import CHIPageControl
+
+@objcMembers
+@objc(NSCProgressHelper)
+public class NSCProgressHelper: NSObject {
+
+    public static func setProgress( pageControl: CHIBasePageControl,progress: Int, animated: Bool) {
+
+        pageControl.set(progress: progress, animated: animated);
+        
+  }
+}

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

@@ -48,7 +48,7 @@ export class PagerIndicator extends PagerIndicatorBase {
     }
 
     setProgress(position: number, progress: number) {
-        this.nativeViewProtected.setWithProgressAnimated(progress, true);
+        NSCProgressHelper.setProgressWithPageControlProgressAnimated(this.nativeViewProtected, progress, true);
     }
     getCount(): number {
         return this.nativeViewProtected.numberOfPages;
@@ -58,7 +58,7 @@ export class PagerIndicator extends PagerIndicatorBase {
     }
     setInteractiveAnimation(animated?: boolean) {}
     setSelection(progress: number, animated: boolean = true) {
-        this.nativeViewProtected.setWithProgressAnimated(progress, animated);
+        NSCProgressHelper.setProgressWithPageControlProgressAnimated(this.nativeViewProtected, progress, animated);
     }
     setCount(count: number) {
         this.nativeViewProtected.numberOfPages = count;

src/ui-pager-indicator/references.d.ts

@@ -1 +1,2 @@
 /// <reference path="./typings/objc!CHIPageControl.d.ts" />
+/// <reference path="./typings/objc!nsswiftsupport.d.ts" />

src/ui-pager-indicator/typings/objc!nsswiftsupport.d.ts

@@ -0,0 +1,9 @@
+
+declare class NSCProgressHelper extends NSObject {
+
+	static alloc(): NSCProgressHelper; // inherited from NSObject
+
+	static new(): NSCProgressHelper; // inherited from NSObject
+
+	static setProgressWithPageControlProgressAnimated(pageControl: CHIBasePageControl, progress: number, animated: boolean): void;
+}

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);
+                }
             }
         }
     }
@@ -526,7 +534,6 @@ export class Pager extends PagerBase {
 
         if (isRightOverScrolled || isLeftOverScrolled) {
             selectedPosition = position;
-            indicator.setSelection(selectedPosition);
         }
 
         const slideToRightSide = selectedPosition === position && positionOffset !== 0;
@@ -581,6 +588,14 @@ function initPagerChangeCallback() {
         onPageSelected(position: number) {
             const owner = this.owner && this.owner.get();
             if (owner) {
+                if (owner.lastEvent === 0 && !owner.circularMode) {
+                    // page changing without scroll so do the indicator etc.
+                    selectedIndexProperty.nativeValueChange(owner, position);
+                    if (owner.indicator) {
+                        owner.indicator.setSelection(position, true);
+                    }
+                }
+
                 owner.notify({
                     eventName: Pager.swipeEvent,
                     object: owner
@@ -619,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);
+                    }
                 }
             }
         }
@@ -702,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;
@@ -767,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) {