feat: preserveIndexOnItemsChange property

Author: farfromrefuge

src/ui-pager/index.android.ts

@@ -307,10 +307,6 @@ export class Pager extends PagerBase {
         this.nativeViewProtected.setUserInputEnabled(!value);
     }
 
-    [itemsProperty.getDefault](): any {
-        return null;
-    }
-
     [itemsProperty.setNative](value: any) {
         this.setObservableArrayInstance(value);
     }
@@ -357,11 +353,16 @@ export class Pager extends PagerBase {
         this.initStaticPagerAdapter();
     }
 
-    [selectedIndexProperty.setNative](value: number) {
+    [selectedIndexProperty.setNative](value: number, animated = true, requestTransform = false) {
         const nativeView = this.nativeViewProtected;
         if (this.isLoaded && nativeView) {
             const index = this.circularMode ? value + 1 : value;
-            nativeView.setCurrentItem(index, !this.disableAnimation);
+            nativeView.setCurrentItem(index, animated && !this.disableAnimation);
+            if (requestTransform) {
+                setTimeout(() => {
+                    nativeView.requestTransform();
+                }, 0);
+            }
         }
     }
 
@@ -397,7 +398,7 @@ export class Pager extends PagerBase {
         const ids = Array.from(this.bindedViewHolders).sort((a, b) => a - b);
         this.pagerAdapter.notifyItemRangeChanged(ids[0], ids[ids.length - 1] - ids[0] + 1);
     }
-    
+
     getViewForItemAtIndex(index: number) {
         return this.getChildView(index);
     }

src/ui-pager/index.common.ts

@@ -82,6 +82,7 @@ export abstract class PagerBase extends ContainerView implements AddChildFromBui
     public circularMode: boolean;
     public autoPlayDelay: number;
     public autoPlay: boolean;
+    public preserveIndexOnItemsChange: boolean = false;
     // This one works along with existing NS property change event system
     public static selectedIndexChangeEvent = 'selectedIndexChange';
     public static scrollEvent = 'scroll';
@@ -143,10 +144,14 @@ export abstract class PagerBase extends ContainerView implements AddChildFromBui
         if (value instanceof ObservableArray) {
             this.mObservableArrayInstance = value as any;
             this.mObservableArrayInstance.on(ObservableArray.changeEvent, this._observableArrayHandler);
+            // } else {
+        }
+        this.refresh();
+        if (this.preserveIndexOnItemsChange) {
+            this[selectedIndexProperty.setNative](this.selectedIndex, false /* disableAnimation */, true /* requestTransform(Android) */);
         } else {
-            this.refresh();
+            selectedIndexProperty.coerce(this);
         }
-        selectedIndexProperty.coerce(this);
     }
 
     getChildView(index: number): View {
@@ -336,22 +341,22 @@ export abstract class PagerBase extends ContainerView implements AddChildFromBui
         return converted;
     }
 
-    abstract _onItemsChanged(oldValue: any, newValue: any): void;
+    // abstract _onItemsChanged(oldValue: any, newValue: any): void;
 }
 
 export class PagerItem extends GridLayout {}
 
-function onItemsChanged(pager: PagerBase, oldValue, newValue) {
-    if (oldValue instanceof Observable) {
-        removeWeakEventListener(oldValue, ObservableArray.changeEvent, pager.refresh, pager);
-    }
+// function onItemsChanged(pager: PagerBase, oldValue, newValue) {
+//     if (oldValue instanceof Observable) {
+//         removeWeakEventListener(oldValue, ObservableArray.changeEvent, pager.refresh, pager);
+//     }
 
-    if (newValue instanceof Observable && !(newValue instanceof ObservableArray)) {
-        addWeakEventListener(newValue, ObservableArray.changeEvent, pager.refresh, pager);
-    }
+//     if (newValue instanceof Observable && !(newValue instanceof ObservableArray)) {
+//         addWeakEventListener(newValue, ObservableArray.changeEvent, pager.refresh, pager);
+//     }
 
-    pager.refresh();
-}
+//     // pager.refresh();
+// }
 
 function onItemTemplateChanged(pager: PagerBase, oldValue, newValue) {
     pager.itemTemplateUpdated(oldValue, newValue);
@@ -407,8 +412,8 @@ peakingProperty.register(PagerBase);
 
 export const itemsProperty = new Property<PagerBase, any>({
     name: 'items',
-    affectsLayout: true,
-    valueChanged: onItemsChanged
+    affectsLayout: true
+    // valueChanged: onItemsChanged
 });
 itemsProperty.register(PagerBase);
 

src/ui-pager/index.ios.ts

@@ -290,9 +290,9 @@ export class Pager extends PagerBase {
         this.scrollToIndexAnimated(this.selectedIndex, false);
     }
 
-    [selectedIndexProperty.setNative](value: number) {
+    [selectedIndexProperty.setNative](value: number, animated = true) {
         if (this.isLoaded) {
-            this.scrollToIndexAnimated(value, !this.disableAnimation);
+            this.scrollToIndexAnimated(value, animated && !this.disableAnimation);
         }
     }