@nativescript-community/ui-pager 13.0.44 → 14.0.1

package/index.android.js

@@ -1,7 +1,6 @@
-import { ChangeType, Color, Device, ObservableArray, Property, Screen, StackLayout, View, ViewBase, profile } from '@nativescript/core';
+import { ChangeType, Color, Device, ObservableArray, Property, Screen, StackLayout, Utils, View, ViewBase, profile } from '@nativescript/core';
 import { isString } from '@nativescript/core/utils/types';
-import { layout } from '@nativescript/core/utils/layout-helper';
-import { Indicator, PagerBase, Transformer, autoPlayProperty, autoplayDelayProperty, disableSwipeProperty, indicatorColorProperty, indicatorProperty, indicatorSelectedColorProperty, itemTemplatesProperty, itemsProperty, orientationProperty, peakingProperty, selectedIndexProperty, showIndicatorProperty, spacingProperty } from './index.common';
+import { PagerBase, Transformer, autoPlayProperty, autoplayDelayProperty, disableSwipeProperty, itemTemplatesProperty, itemsProperty, orientationProperty, peakingProperty, selectedIndexProperty, spacingProperty } from './index.common';
 export * from './index.common';
 export { Transformer } from './index.common';
 function notifyForItemAtIndex(owner, nativeView, view, eventName, index) {
@@ -18,9 +17,12 @@ function notifyForItemAtIndex(owner, nativeView, view, eventName, index) {
 }
 const PLACEHOLDER = 'PLACEHOLDER';
 export class Pager extends PagerBase {
+    // private _pager: androidx.viewpager2.widget.ViewPager2;
     constructor() {
         super();
         this._oldDisableAnimation = false;
+        // used to store viewHolder and thus their corresponding Views
+        // used to "destroy" cells when possible
         this._viewHolders = new Set();
         this._childrenViewsType = new Map();
         this._realizedTemplates = new Map();
@@ -29,10 +31,6 @@ export class Pager extends PagerBase {
         this._lastPeaking = 0;
         this._selectedIndexBeforeLoad = 0;
         this._observableArrayHandler = (args) => {
-            if (this.indicatorView && this.showIndicator) {
-                this.indicatorView.setCount(this._childrenCount);
-                this.indicatorView.setSelected(args.index);
-            }
             if (this.pagerAdapter) {
                 switch (args.action) {
                     case ChangeType.Add:
@@ -69,69 +67,54 @@ export class Pager extends PagerBase {
     set views(value) {
         this._views = value;
     }
-    get pager() {
-        return this._pager;
-    }
-    get indicatorView() {
-        return this._indicatorView;
-    }
     createNativeView() {
-        const nativeView = new android.widget.RelativeLayout(this._context);
-        this._pager = new androidx.viewpager2.widget.ViewPager2(this._context);
+        const nativeView = new androidx.viewpager2.widget.ViewPager2(this._context);
         const sdkVersion = parseInt(Device.sdkVersion, 10);
         if (sdkVersion >= 21) {
-            this._pager.setNestedScrollingEnabled(true);
+            nativeView.setNestedScrollingEnabled(true);
         }
         if (this.orientation === 'vertical') {
-            this._pager.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_VERTICAL);
+            nativeView.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_VERTICAL);
         }
         else {
-            this._pager.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL);
+            nativeView.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL);
         }
         initPagerRecyclerAdapter();
         this._pagerAdapter = new PagerRecyclerAdapter(new WeakRef(this));
         this.compositeTransformer = new androidx.viewpager2.widget.CompositePageTransformer();
-        this.pager.setUserInputEnabled(!this.disableSwipe);
+        nativeView.setUserInputEnabled(!this.disableSwipe);
         this.on(View.layoutChangedEvent, this.onLayoutChange, this);
-        const LayoutParams = android.widget.RelativeLayout.LayoutParams;
-        nativeView.addView(this.pager, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
-        this._indicatorView = new com.rd.PageIndicatorView2(this._context);
-        const params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
-        params.addRule(android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM);
-        params.addRule(android.widget.RelativeLayout.CENTER_HORIZONTAL);
-        params.setMargins(0, 0, 0, 10 * Screen.mainScreen.scale);
-        this._indicatorView.setLayoutParams(params);
-        this._indicatorView.setDynamicCount(true);
-        this._indicatorView.setInteractiveAnimation(true);
-        nativeView.addView(this._indicatorView);
         return nativeView;
     }
     initNativeView() {
         super.initNativeView();
+        // Store disable animation value
         this._oldDisableAnimation = this.disableAnimation;
+        // Disable animation to set currentItem w/o animation
         this.disableAnimation = true;
         initPagerChangeCallback();
         this._pageListener = new PageChangeCallback(new WeakRef(this));
-        this.pager.registerOnPageChangeCallback(this._pageListener);
-        this.pager.setAdapter(this._pagerAdapter);
+        const nativeView = this.nativeViewProtected;
+        nativeView.registerOnPageChangeCallback(this._pageListener);
+        nativeView.setAdapter(this._pagerAdapter);
         if (this._androidViewId < 0) {
             this._androidViewId = android.view.View.generateViewId();
         }
         if (this.pagesCount > 0) {
-            this.pager.setOffscreenPageLimit(this.pagesCount);
+            nativeView.setOffscreenPageLimit(this.pagesCount);
         }
         else {
-            this.pager.setOffscreenPageLimit(3);
+            nativeView.setOffscreenPageLimit(3);
         }
-        this._setIndicator(this.indicator);
         this._setPeaking(this.peaking);
         this._setSpacing(this.spacing);
         this._setTransformers(this.transformers ? this.transformers : '');
-        if (this.showIndicator) {
-            this._indicatorView.setCount(this.items ? this.items.length : 0);
-        }
-        else {
-            this._indicatorView.setCount(0);
+    }
+    setIndicator(indicator) {
+        super.setIndicator(indicator);
+        if (indicator) {
+            this.indicator.setCount(this.items ? this.items.length : 0);
+            this.indicator.setSelection(this.selectedIndex, false);
         }
     }
     enumerateViewHolders(cb) {
@@ -167,6 +150,7 @@ export class Pager extends PagerBase {
         this._setPeaking(args.object.peaking);
         this._setTransformers(this.transformers ? this.transformers : '');
         this._updateScrollPosition();
+        // Set disableAnimation to original value
         this.disableAnimation = this._oldDisableAnimation;
     }
     _setSpacing(value) {
@@ -185,11 +169,12 @@ export class Pager extends PagerBase {
         const size = this.convertToSize(value);
         const newPeaking = size !== this._lastPeaking;
         if (newPeaking) {
-            this.pager.setClipToPadding(false);
+            const nativeView = this.nativeViewProtected;
+            nativeView.setClipToPadding(false);
             const left = this.orientation === 'horizontal' ? size : 0;
             const top = this.orientation === 'horizontal' ? 0 : size;
-            this.pager.setPadding(left, top, left, top);
-            this.pager.setClipChildren(false);
+            nativeView.setPadding(left, top, left, top);
+            nativeView.setClipChildren(false);
             this._lastPeaking = size;
         }
     }
@@ -199,31 +184,6 @@ export class Pager extends PagerBase {
     [peakingProperty.setNative](value) {
         this._setPeaking(value);
     }
-    [indicatorProperty.setNative](value) {
-        this._setIndicator(value);
-    }
-    _setIndicator(value) {
-        const AnimationType = com.rd.animation.type.AnimationType;
-        switch (value) {
-            case Indicator.None:
-                this.indicatorView.setAnimationType(AnimationType.NONE);
-                break;
-            case Indicator.Worm:
-                this.indicatorView.setAnimationType(AnimationType.WORM);
-                break;
-            case Indicator.Fill:
-                this.indicatorView.setAnimationType(AnimationType.FILL);
-                break;
-            case Indicator.Swap:
-                this.indicatorView.setAnimationType(AnimationType.SWAP);
-                break;
-            case Indicator.THIN_WORM:
-                this.indicatorView.setAnimationType(AnimationType.THIN_WORM);
-                break;
-            default:
-                break;
-        }
-    }
     _setTransformers(transformers) {
         if (!isString(transformers)) {
             return;
@@ -246,12 +206,19 @@ export class Pager extends PagerBase {
                 this.compositeTransformer.removeTransformer(transformer);
             });
         }
-        this.pager.setPageTransformer(this.compositeTransformer);
+        this.nativeViewProtected.setPageTransformer(this.compositeTransformer);
     }
     disposeViewHolderViews() {
         this.enumerateViewHolders((v) => {
             const view = v.view;
+            // if (view && view.isLoaded) {
+            //     view.callUnloaded();
+            // }
             this._removeViewCore(view);
+            // view._isAddedToNativeVisualTree = false;
+            // //@ts-ignore
+            // view.parent = null;
+            // view._tearDownUI();
         });
         this._viewHolders = new Set();
     }
@@ -261,13 +228,10 @@ export class Pager extends PagerBase {
         this.disposeViewHolderViews();
         this._realizedTemplates.clear();
         this._pageListener = null;
-        this.pager.setAdapter(null);
+        // setAdapter(null) will destroy views
+        this.nativeViewProtected.setAdapter(null);
         this._pagerAdapter = null;
         this._transformers = [];
-        if (this._observableArrayInstance) {
-            this._observableArrayInstance.off(ObservableArray.changeEvent, this._observableArrayHandler);
-            this._observableArrayInstance = null;
-        }
         super.disposeNativeView();
     }
     get disableAnimation() {
@@ -282,55 +246,30 @@ export class Pager extends PagerBase {
     get _childrenCount() {
         return (this.items && this.items.length) || (this._childrenViews && this._childrenViews.length) || 0;
     }
-    [indicatorColorProperty.setNative](value) {
-        if (this.indicatorView) {
-            const color = !value || value instanceof Color ? value : new Color(value);
-            this.indicatorView.setUnselectedColor(color ? color.android : null);
-        }
-    }
-    [indicatorSelectedColorProperty.setNative](value) {
-        if (this.indicatorView) {
-            const color = !value || value instanceof Color ? value : new Color(value);
-            this.indicatorView.setSelectedColor(color ? color.android : null);
-        }
-    }
     [disableSwipeProperty.setNative](value) {
-        if (this.pager) {
-            this.pager.setUserInputEnabled(!value);
-        }
+        this.nativeViewProtected.setUserInputEnabled(!value);
     }
     [itemsProperty.getDefault]() {
         return null;
     }
     [itemsProperty.setNative](value) {
-        if (value && value.length && this.showIndicator) {
-            this.indicatorView.setCount(this._childrenCount);
-        }
-        if (this._observableArrayInstance) {
-            this._observableArrayInstance.off(ObservableArray.changeEvent, this._observableArrayHandler);
-            this._observableArrayInstance = null;
-        }
-        if (value) {
-            if (value instanceof ObservableArray) {
-                const adapter = this.pagerAdapter;
-                if (!adapter)
-                    return;
-                selectedIndexProperty.coerce(this);
-                this._observableArrayInstance = value;
-                this._observableArrayInstance.on(ObservableArray.changeEvent, this._observableArrayHandler);
-            }
-            else {
-                this.refresh();
-                selectedIndexProperty.coerce(this);
-            }
-        }
+        this.setObservableArrayInstance(value);
     }
     _updateScrollPosition() {
         const index = this.circularMode ? this.selectedIndex + 1 : this.selectedIndex;
-        if (this.pager.getCurrentItem() !== index) {
-            this.indicatorView.setInteractiveAnimation(false);
-            this.pager.setCurrentItem(index, false);
-            this._indicatorView.setSelected(this.selectedIndex);
+        const nativeView = this.nativeViewProtected;
+        if (nativeView.getCurrentItem() !== index) {
+            const indicator = this.indicator;
+            const toDo = () => {
+                nativeView.setCurrentItem(index, false);
+                indicator.setSelection(this.selectedIndex, false);
+            };
+            if (indicator) {
+                indicator.withoutAnimation(toDo);
+            }
+            else {
+                toDo();
+            }
         }
         setTimeout(() => {
             this._initAutoPlay(this.autoPlay);
@@ -339,14 +278,15 @@ export class Pager extends PagerBase {
     initStaticPagerAdapter() {
         if (!this.items && this._childrenCount > 0) {
             initStaticPagerStateAdapter();
-            if (this.pager && !(this._pagerAdapter instanceof StaticPagerStateAdapter)) {
+            const nativeView = this.nativeViewProtected;
+            if (nativeView && !(this._pagerAdapter instanceof StaticPagerStateAdapter)) {
                 this._pagerAdapter = new StaticPagerStateAdapter(new WeakRef(this));
-                this.pager.setAdapter(this._pagerAdapter);
+                nativeView.setAdapter(this._pagerAdapter);
                 selectedIndexProperty.coerce(this);
                 setTimeout(() => {
-                    this.pager.setCurrentItem(this.selectedIndex, false);
-                    if (this.indicatorView) {
-                        this.indicatorView.setSelection(this.selectedIndex);
+                    nativeView.setCurrentItem(this.selectedIndex, false);
+                    if (this.indicator) {
+                        this.indicator.setSelection(this.selectedIndex);
                     }
                 }, 0);
             }
@@ -357,41 +297,44 @@ export class Pager extends PagerBase {
         this.initStaticPagerAdapter();
     }
     [selectedIndexProperty.setNative](value) {
-        if (this.isLoaded && this.pager) {
+        const nativeView = this.nativeViewProtected;
+        if (this.isLoaded && nativeView) {
             const index = this.circularMode ? value + 1 : value;
-            if (this.pager.getCurrentItem() !== index) {
-                this.pager.setCurrentItem(index, !this.disableAnimation);
-                if (this.indicatorView) {
-                }
-            }
+            nativeView.setCurrentItem(index, !this.disableAnimation);
         }
     }
     scrollToIndexAnimated(index, animate) {
-        if (this.pager) {
-            this.pager.setCurrentItem(index, animate);
+        const nativeView = this.nativeViewProtected;
+        if (nativeView) {
+            nativeView.setCurrentItem(index, animate);
             if (!animate) {
+                // without animate we wont go through the delegate
                 selectedIndexProperty.nativeValueChange(this, index);
             }
         }
     }
     _onItemsChanged(oldValue, newValue) { }
     refresh() {
-        if (this.pager && this._pagerAdapter) {
-            this.pager.requestLayout();
-            this.pager.getAdapter().notifyDataSetChanged();
+        const nativeView = this.nativeViewProtected;
+        if (nativeView && this._pagerAdapter) {
+            nativeView.requestLayout();
+            nativeView.getAdapter().notifyDataSetChanged();
         }
     }
     updatePagesCount(value) {
-        if (this.pager) {
+        const nativeView = this.nativeViewProtected;
+        if (nativeView) {
             this._pagerAdapter.notifyDataSetChanged();
-            this.pager.setOffscreenPageLimit(value);
+            nativeView.setOffscreenPageLimit(value);
         }
     }
     onUnloaded() {
+        // this._android.setAdapter(null);
         super.onUnloaded();
     }
     eachChild(callback) {
         super.eachChild(callback);
+        // used for css updates (like theme change)
         this.enumerateViewHolders((v) => {
             const view = v.view;
             if (view) {
@@ -399,6 +342,7 @@ export class Pager extends PagerBase {
                     callback(view);
                 }
                 else {
+                    // in some cases (like item is unloaded from another place (like angular) view.parent becomes undefined)
                     if (view.parent) {
                         callback(view.parent);
                     }
@@ -419,77 +363,22 @@ export class Pager extends PagerBase {
             this._itemTemplatesInternal = this._itemTemplatesInternal.concat(value);
         }
         this._pagerAdapter = new PagerRecyclerAdapter(new WeakRef(this));
-        this.pager.setAdapter(this._pagerAdapter);
+        this.nativeViewProtected.setAdapter(this._pagerAdapter);
         this.refresh();
     }
-    [showIndicatorProperty.setNative](value) {
-        if (!this.indicatorView) {
-            return;
-        }
-        if (value) {
-            this.indicatorView.setCount(this.items ? this.items.length : 0);
-            this.indicatorView.setSelected(this.selectedIndex);
-        }
-        else {
-            this.indicatorView.setCount(0);
-        }
-    }
     [orientationProperty.setNative](value) {
         if (value === 'vertical') {
-            this._pager.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_VERTICAL);
+            this.nativeViewProtected.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_VERTICAL);
         }
         else {
-            this._pager.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL);
+            this.nativeViewProtected.setOrientation(androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL);
         }
     }
     get horizontalOffset() {
-        return this._horizontalOffset / layout.getDisplayDensity();
+        return this._horizontalOffset / Utils.layout.getDisplayDensity();
     }
     get verticalOffset() {
-        return this._verticalOffset / layout.getDisplayDensity();
-    }
-    static getProgress(indicator, position, positionOffset, isRtl) {
-        const count = indicator.getCount();
-        let selectedPosition = indicator.getSelection();
-        if (isRtl) {
-            position = count - 1 - position;
-        }
-        if (position < 0) {
-            position = 0;
-        }
-        else if (position > count - 1) {
-            position = count - 1;
-        }
-        const isRightOverScrolled = position > selectedPosition;
-        let isLeftOverScrolled;
-        if (isRtl) {
-            isLeftOverScrolled = position - 1 < selectedPosition;
-        }
-        else {
-            isLeftOverScrolled = position + 1 < selectedPosition;
-        }
-        if (isRightOverScrolled || isLeftOverScrolled) {
-            selectedPosition = position;
-            indicator.setSelection(selectedPosition);
-        }
-        const slideToRightSide = selectedPosition === position && positionOffset !== 0;
-        let selectingPosition;
-        let selectingProgress;
-        if (slideToRightSide) {
-            selectingPosition = isRtl ? position - 1 : position + 1;
-            selectingProgress = positionOffset;
-        }
-        else {
-            selectingPosition = position;
-            selectingProgress = 1 - positionOffset;
-        }
-        if (selectingProgress > 1) {
-            selectingProgress = 1;
-        }
-        else if (selectingProgress < 0) {
-            selectingProgress = 0;
-        }
-        return [selectingPosition, selectingProgress];
+        return this._verticalOffset / Utils.layout.getDisplayDensity();
     }
     [autoPlayProperty.setNative](value) {
         this._initAutoPlay(value);
@@ -535,6 +424,49 @@ export class Pager extends PagerBase {
         }
         return this.circularMode ? this.itemCount - 3 : this.itemCount - 1;
     }
+    static getProgress(indicator, position, positionOffset, isRtl) {
+        const count = indicator.getCount();
+        let selectedPosition = indicator.getSelection();
+        if (isRtl) {
+            position = count - 1 - position;
+        }
+        if (position < 0) {
+            position = 0;
+        }
+        else if (position > count - 1) {
+            position = count - 1;
+        }
+        const isRightOverScrolled = position > selectedPosition;
+        let isLeftOverScrolled;
+        if (isRtl) {
+            isLeftOverScrolled = position - 1 < selectedPosition;
+        }
+        else {
+            isLeftOverScrolled = position + 1 < selectedPosition;
+        }
+        if (isRightOverScrolled || isLeftOverScrolled) {
+            selectedPosition = position;
+            indicator.setSelection(selectedPosition);
+        }
+        const slideToRightSide = selectedPosition === position && positionOffset !== 0;
+        let selectingPosition;
+        let selectingProgress;
+        if (slideToRightSide) {
+            selectingPosition = isRtl ? position - 1 : position + 1;
+            selectingProgress = positionOffset;
+        }
+        else {
+            selectingPosition = position;
+            selectingProgress = 1 - positionOffset;
+        }
+        if (selectingProgress > 1) {
+            selectingProgress = 1;
+        }
+        else if (selectingProgress < 0) {
+            selectingProgress = 0;
+        }
+        return [selectingPosition, selectingProgress];
+    }
 }
 __decorate([
     profile()
@@ -595,12 +527,13 @@ function initPagerChangeCallback() {
             if (owner.items && position === owner.pagerAdapter.lastIndex() - owner.loadMoreCount) {
                 owner.notify({ eventName: Pager.loadMoreItemsEvent, object: owner });
             }
-            if (owner.showIndicator && owner.indicatorView) {
-                var progress = Pager.getProgress(owner.indicatorView, position, positionOffset, false);
+            var indicator = owner.indicator;
+            if (indicator) {
+                var progress = Pager.getProgress(indicator, position, positionOffset, false);
                 var selectingPosition = progress[0];
                 var selectingProgress = progress[1];
-                owner.indicatorView.setInteractiveAnimation(true);
-                owner.indicatorView.setProgress(selectingPosition, selectingProgress);
+                indicator.setInteractiveAnimation(true);
+                indicator.setProgress(selectingPosition, selectingProgress);
             }
         }
     };
@@ -633,24 +566,40 @@ function initPagerChangeCallback() {
             }
             if (owner.isLayoutValid && state === androidx.viewpager2.widget.ViewPager2.SCROLL_STATE_IDLE) {
                 // ts-ignore
-                var count = owner.pagerAdapter.getItemCount();
-                var index = owner.pager.getCurrentItem();
+                var count_1 = owner.pagerAdapter.getItemCount();
+                var index = owner.nativeViewProtected.getCurrentItem();
+                var indicator_1 = owner.indicator;
                 if (owner.circularMode) {
                     if (index === 0) {
-                        // last item
-                        owner.indicatorView.setInteractiveAnimation(false);
-                        owner.pager.setCurrentItem(count - 2, false);
-                        selectedIndexProperty.nativeValueChange(owner, count - 3);
-                        owner.indicatorView.setSelected(count - 3);
-                        owner.indicatorView.setInteractiveAnimation(true);
+                        var toDo = function () {
+                            owner.nativeViewProtected.setCurrentItem(count_1 - 2, false);
+                            selectedIndexProperty.nativeValueChange(owner, count_1 - 3);
+                            if (indicator_1) {
+                                indicator_1.setSelection(count_1 - 3, false);
+                            }
+                        };
+                        if (indicator_1) {
+                            indicator_1.withoutAnimation(toDo);
+                        }
+                        else {
+                            toDo();
+                        }
                     }
-                    else if (index === count - 1) {
+                    else if (index === count_1 - 1) {
                         // first item
-                        owner.indicatorView.setInteractiveAnimation(false);
-                        owner.indicatorView.setSelected(0);
-                        owner.pager.setCurrentItem(1, false);
-                        selectedIndexProperty.nativeValueChange(owner, 0);
-                        owner.indicatorView.setInteractiveAnimation(true);
+                        var toDo = function () {
+                            owner.nativeViewProtected.setCurrentItem(1, false);
+                            selectedIndexProperty.nativeValueChange(owner, 0);
+                            if (indicator_1) {
+                                indicator_1.setSelection(0, false);
+                            }
+                        };
+                        if (indicator_1) {
+                            indicator_1.withoutAnimation(toDo);
+                        }
+                        else {
+                            toDo();
+                        }
                     }
                     else {
                         selectedIndexProperty.nativeValueChange(owner, index - 1);
@@ -658,7 +607,9 @@ function initPagerChangeCallback() {
                 }
                 else {
                     selectedIndexProperty.nativeValueChange(owner, index);
-                    owner.indicatorView.setSelected(index);
+                    if (indicator_1) {
+                        indicator_1.setSelection(index, false);
+                    }
                 }
             }
         }
@@ -667,6 +618,7 @@ function initPagerChangeCallback() {
 }(androidx.viewpager2.widget.ViewPager2.OnPageChangeCallback));
     PageChangeCallback = PageChangeCallbackImpl;
 }
+// eslint-disable-next-line no-redeclare
 let PagerRecyclerAdapter;
 function initPagerRecyclerAdapter() {
     if (PagerRecyclerAdapter) {
@@ -908,6 +860,7 @@ function initStaticPagerStateAdapter() {
 }(androidx.recyclerview.widget.RecyclerView.Adapter));
     StaticPagerStateAdapter = StaticPagerStateAdapterImpl;
 }
+// eslint-disable-next-line no-redeclare
 let PagerViewHolder;
 function initPagerViewHolder() {
     if (PagerViewHolder) {