@nativescript-community/ui-collectionview 5.1.9 → 5.3.0

package/index.android.js

@@ -1,6 +1,7 @@
+var _a, _b;
 /* eslint-disable no-redeclare */
-import { ChangeType, ContentView, CoreTypes, Property, ProxyViewContainer, Trace, Utils, View, ViewBase, booleanConverter, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
-import { reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from '.';
+import { ChangeType, ContentView, CoreTypes, Length, Property, ProxyViewContainer, Trace, Utils, View, ViewBase, booleanConverter, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
+import { itemOverlapProperty, reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from '.';
 import { CLog, CLogTypes, CollectionViewBase, ListViewViewTypes, isScrollEnabledProperty, orientationProperty } from './index-common';
 export * from './index-common';
 var SimpleCallback = /** @class */ (function (_super) {
@@ -12,13 +13,14 @@ var SimpleCallback = /** @class */ (function (_super) {
         return global.__native(_this);
     }
     SimpleCallback.prototype.onMove = function (recyclerview, viewHolder, target) {
+        var _a;
         var startPosition = viewHolder.getAdapterPosition();
         var endPosition = target.getAdapterPosition();
         if (this.startPosition === -1) {
             this.startPosition = startPosition;
         }
         this.endPosition = endPosition;
-        var owner = this.owner && this.owner.get();
+        var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get();
         if (owner) {
             owner._reorderItemInSource(startPosition, endPosition);
             return true;
@@ -26,6 +28,7 @@ var SimpleCallback = /** @class */ (function (_super) {
         return false;
     };
     SimpleCallback.prototype.onSelectedChanged = function (viewHolder, state) {
+        var _a;
         if (viewHolder) {
             if (this.startPosition === -1) {
                 this.startPosition = viewHolder.getAdapterPosition();
@@ -33,7 +36,7 @@ var SimpleCallback = /** @class */ (function (_super) {
         }
         if (!viewHolder) {
             // this is where we identify the end of the drag and call the end event
-            var owner = this.owner && this.owner.get();
+            var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get();
             if (this.endPosition === -1) {
                 this.endPosition = this.startPosition;
             }
@@ -65,7 +68,8 @@ var LongPressGestureListenerImpl = /** @class */ (function (_super) {
         return global.__native(_this);
     }
     LongPressGestureListenerImpl.prototype.onLongPress = function (motionEvent) {
-        var owner = this._owner && this._owner.get();
+        var _a;
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.get();
         if (owner) {
             owner.onReorderLongPress(motionEvent);
         }
@@ -84,6 +88,11 @@ const nestedScrollingEnabledProperty = new Property({
     defaultValue: true,
     valueConverter: booleanConverter
 });
+export var SnapPosition;
+(function (SnapPosition) {
+    SnapPosition[SnapPosition["START"] = 0] = "START";
+    SnapPosition[SnapPosition["END"] = 1] = "END";
+})(SnapPosition || (SnapPosition = {}));
 export class CollectionView extends CollectionViewBase {
     constructor() {
         super(...arguments);
@@ -98,10 +107,30 @@ export class CollectionView extends CollectionViewBase {
         this.scrolling = false;
         this.needsScrollStartEvent = false;
         this.animateItemUpdate = false;
+        this.mInPropertiesSet = false;
+        this.mShouldUpdateInnerSize = false;
+        this.mShouldUpdateSpanCount = false;
+        this.mShouldRefresh = false;
         this.defaultPoolSize = 10;
         this.desiredPoolSize = new Map();
         this.isDragging = false;
         this._layedOut = false;
+        this.bindedViewHolders = new Set();
+    }
+    onResumeNativeUpdates() {
+        // {N} suspends properties update on `_suspendNativeUpdates`. So we only need to do this in onResumeNativeUpdates
+        this.mInPropertiesSet = true;
+        super.onResumeNativeUpdates();
+        this.mInPropertiesSet = false;
+        if (this.mShouldUpdateInnerSize) {
+            this.updateInnerSize();
+        }
+        if (this.mShouldUpdateSpanCount) {
+            this.updateSpanCount();
+        }
+        if (this.mShouldRefresh) {
+            this.refresh();
+        }
     }
     createNativeView() {
         // storing the class in a property for reuse in the future cause a materializing which is pretty slow!
@@ -121,55 +150,59 @@ export class CollectionView extends CollectionViewBase {
         return recyclerView;
     }
     initNativeView() {
-        this.setOnLayoutChangeListener();
         super.initNativeView();
         const nativeView = this.nativeViewProtected;
-        this.recycledViewPool = new com.nativescript.collectionview.RecycledViewPool();
-        this.recycledViewPoolDisposeListener = new com.nativescript.collectionview.RecycledViewPool.ViewPoolListener({
-            onViewHolderDisposed: (holder) => {
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.log, 'onViewHolderDisposed', holder);
-                }
-                if (this._viewHolders) {
-                    this._viewHolders.delete(holder);
-                }
-                const isNonSync = holder['defaultItemView'] === true;
-                const view = isNonSync ? holder.view.content : holder.view;
-                this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
-                if (view && view.isLoaded) {
-                    view.callUnloaded();
+        if (!this.recycledViewPool) {
+            this.recycledViewPool = new com.nativescript.collectionview.RecycledViewPool();
+            this.recycledViewPoolDisposeListener = new com.nativescript.collectionview.RecycledViewPool.ViewPoolListener({
+                onViewHolderDisposed: (holder) => {
+                    if (Trace.isEnabled()) {
+                        CLog(CLogTypes.log, 'onViewHolderDisposed', holder);
+                    }
+                    if (this._viewHolders) {
+                        this._viewHolders.delete(holder);
+                    }
+                    const isNonSync = holder['defaultItemView'] === true;
+                    const view = isNonSync ? holder.view.content : holder.view;
+                    this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
+                    if (view && view.isLoaded) {
+                        view.callUnloaded();
+                    }
+                    view._isAddedToNativeVisualTree = false;
+                    //@ts-ignore
+                    view.parent = null;
+                    view._tearDownUI();
                 }
-                view._isAddedToNativeVisualTree = false;
-                //@ts-ignore
-                view.parent = null;
-                view._tearDownUI();
-            }
-        });
-        this.recycledViewPool.mListener = this.recycledViewPoolDisposeListener;
-        const recyclerListener = (this.recyclerListener = new androidx.recyclerview.widget.RecyclerView.RecyclerListener({
-            onViewRecycled: (holder) => {
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.log, 'onViewRecycled', holder);
+            });
+            this.recycledViewPool.mListener = this.recycledViewPoolDisposeListener;
+        }
+        if (Trace.isEnabled() || this.hasListeners(CollectionViewBase.itemRecyclingEvent)) {
+            const recyclerListener = (this.recyclerListener = new androidx.recyclerview.widget.RecyclerView.RecyclerListener({
+                onViewRecycled: (holder) => {
+                    if (Trace.isEnabled()) {
+                        CLog(CLogTypes.log, 'onViewRecycled', this, nativeView, holder);
+                    }
+                    const isNonSync = holder['defaultItemView'] === true;
+                    const view = isNonSync ? holder.view.content : holder.view;
+                    this.notifyForItemAtIndex(CollectionViewBase.itemRecyclingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
                 }
-                const isNonSync = holder['defaultItemView'] === true;
-                const view = isNonSync ? holder.view.content : holder.view;
-                this.notifyForItemAtIndex(CollectionViewBase.itemRecyclingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
-            }
-        }));
-        nativeView.setRecyclerListener(recyclerListener);
+            }));
+            nativeView.setRecyclerListener(recyclerListener);
+        }
         nativeView.setRecycledViewPool(this.recycledViewPool);
-        // nativeView.owner = new WeakRef(this);
-        // nativeView.sizeChangedListener = new com.nativescript.collectionview.SizeChangedListener({
-        //     onSizeChanged: (w, h, oldW, oldH) => this.onSizeChanged(w, h),
-        // });
-        // const orientation = this._getLayoutManagarOrientation();
-        // initGridLayoutManager();
         let layoutManager;
         if (CollectionViewBase.layoutStyles[this.layoutStyle]) {
             layoutManager = CollectionViewBase.layoutStyles[this.layoutStyle].createLayout(this);
         }
         else {
             layoutManager = new com.nativescript.collectionview.PreCachingGridLayoutManager(this._context, 1);
+            if (this.hasListeners(CollectionView.layoutCompletedEvent)) {
+                layoutManager.layoutCompletedListener = new com.nativescript.collectionview.GridLayoutManager.LayoutCompletedListener({
+                    onLayoutCompleted: () => {
+                        this.notify({ eventName: CollectionView.layoutCompletedEvent });
+                    }
+                });
+            }
             // layoutManager = new PreCachingGridLayoutManager(this._context, 1);
             // (layoutManager as any).owner = new WeakRef(this);
         }
@@ -177,19 +210,13 @@ export class CollectionView extends CollectionViewBase {
         nativeView.setLayoutManager(layoutManager);
         nativeView.layoutManager = layoutManager;
         nativeView.sizeChangedListener = new com.nativescript.collectionview.SizeChangedListener({
-            onSizeChanged() { },
+            onLayout: (changed, left, top, right, bottom) => changed && this.onLayout(left, top, right, bottom),
             onMeasure: () => this.updateInnerSize()
         });
         this.spanSize = this._getSpanSize;
-        const animator = new com.h6ah4i.android.widget.advrecyclerview.animator.RefactoredDefaultItemAnimator();
-        // Change animations are enabled by default since support-v7-recyclerview v22.
-        // Need to disable them when using animation indicator.
-        animator.setSupportsChangeAnimations(false);
-        nativeView.setItemAnimator(animator);
         this.refresh();
     }
     disposeNativeView() {
-        // clear the cache
         // this.eachChildView((view) => {
         //     view.parent._removeView(view);
         //     return true;
@@ -211,15 +238,13 @@ export class CollectionView extends CollectionViewBase {
         this._itemTouchHelper = null;
         this._simpleItemTouchCallback = null;
         this.disposeViewHolderViews();
-        this._hlayoutParams = null;
-        this._vlayoutParams = null;
         this.clearTemplateTypes();
         super.disposeNativeView();
     }
     onLoaded() {
         super.onLoaded();
         this.attachScrollListener();
-        this.refresh();
+        // this.refresh();
     }
     getViewForItemAtIndex(index) {
         return this.enumerateViewHolders((v) => (v.getAdapterPosition() === index ? v.view : undefined));
@@ -423,6 +448,16 @@ export class CollectionView extends CollectionViewBase {
     [paddingLeftProperty.setNative](value) {
         this._setPadding({ left: this.effectivePaddingLeft });
     }
+    [itemOverlapProperty.setNative](value) {
+        if (!this.decorator) {
+            this.decorator = new com.nativescript.collectionview.OverlapDecoration();
+            this.nativeViewProtected.addItemDecoration(this.decorator);
+        }
+        this.decorator.top = Length.toDevicePixels(value[0], 0);
+        this.decorator.right = Length.toDevicePixels(value[1], 0);
+        this.decorator.bottom = Length.toDevicePixels(value[2], 0);
+        this.decorator.left = Length.toDevicePixels(value[3], 0);
+    }
     [orientationProperty.getDefault]() {
         return 'vertical';
     }
@@ -527,7 +562,7 @@ export class CollectionView extends CollectionViewBase {
         // we will call events only at then end
         super._reorderItemInSource(oldPosition, newPosition, false);
     }
-    [reorderLongPressEnabledProperty.setNative](value) {
+    [_a = reorderLongPressEnabledProperty.setNative](value) {
         if (value) {
             if (!this._longPressGesture) {
                 this._longPressGesture = new androidx.core.view.GestureDetectorCompat(this._context, new LongPressGestureListenerImpl(new WeakRef(this)));
@@ -550,7 +585,7 @@ export class CollectionView extends CollectionViewBase {
             }
         }
     }
-    [reorderingEnabledProperty.setNative](value) {
+    [_b = reorderingEnabledProperty.setNative](value) {
         if (value) {
             if (!this._simpleItemTouchCallback) {
                 const ItemTouchHelper = androidx.recyclerview.widget.ItemTouchHelper;
@@ -579,26 +614,12 @@ export class CollectionView extends CollectionViewBase {
         super.onItemTemplatesChanged(oldValue, newValue); // TODO: update current template with the new one
         this.refresh();
     }
-    setOnLayoutChangeListener() {
-        if (this.nativeViewProtected) {
-            const owner = this;
-            this.layoutChangeListenerIsSet = true;
-            this.layoutChangeListener =
-                this.layoutChangeListener ||
-                    new android.view.View.OnLayoutChangeListener({
-                        onLayoutChange(v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) {
-                            if (left !== oldLeft || top !== oldTop || right !== oldRight || bottom !== oldBottom) {
-                                owner.onLayout(left, top, right, bottom);
-                                if (owner.hasListeners(View.layoutChangedEvent)) {
-                                    owner._raiseLayoutChangedEvent();
-                                }
-                            }
-                        }
-                    });
-            this.nativeViewProtected.addOnLayoutChangeListener(this.layoutChangeListener);
+    updateSpanCount() {
+        if (this.mInPropertiesSet) {
+            this.mShouldUpdateSpanCount = true;
+            return;
         }
-    }
-    _updateSpanCount() {
+        this.mShouldUpdateSpanCount = false;
         const layoutManager = this.layoutManager;
         if (layoutManager && layoutManager['setSpanCount']) {
             const newValue = (this.currentSpanCount = this.computeSpanCount());
@@ -609,20 +630,28 @@ export class CollectionView extends CollectionViewBase {
         }
     }
     updateInnerSize() {
-        super.updateInnerSize();
-        this._updateSpanCount();
+        if (this.mInPropertiesSet) {
+            this.mShouldUpdateInnerSize = true;
+            return false;
+        }
+        this.mShouldUpdateInnerSize = false;
+        const result = super.updateInnerSize();
+        if (result) {
+            this.updateSpanCount();
+        }
+        return result;
     }
     _onColWidthPropertyChanged(oldValue, newValue) {
-        this._updateSpanCount();
+        this.updateSpanCount();
         super._onColWidthPropertyChanged(oldValue, newValue);
     }
     _onRowHeightPropertyChanged(oldValue, newValue) {
-        this._updateSpanCount();
+        this.updateSpanCount();
         super._onRowHeightPropertyChanged(oldValue, newValue);
     }
     onLayout(left, top, right, bottom) {
         this._layedOut = true;
-        super.onLayout(left, top, right, bottom);
+        // super.onLayout(left, top, right, bottom);
         const p = CollectionViewBase.plugins[this.layoutStyle];
         if (p && p.onLayout) {
             p.onLayout(this, left, top, right, bottom);
@@ -728,9 +757,7 @@ export class CollectionView extends CollectionViewBase {
         if (!view) {
             return;
         }
-        const ids = Array.from(this._viewHolders)
-            .map((s) => s['position'])
-            .filter((s) => s !== null)
+        const ids = Array.from(this.bindedViewHolders)
             .sort((a, b) => a - b);
         this._listViewAdapter.notifyItemRangeChanged(ids[0], ids[ids.length - 1] - ids[0] + 1);
     }
@@ -748,26 +775,33 @@ export class CollectionView extends CollectionViewBase {
         return false;
     }
     refresh() {
-        if (!this.nativeViewProtected) {
+        if (this.mInPropertiesSet) {
+            this.mShouldRefresh = true;
             return;
         }
+        this.mShouldRefresh = false;
         const view = this.nativeViewProtected;
-        if (!this.isLoaded) {
-            this._isDataDirty = true;
+        if (!view) {
             return;
         }
+        // seems like we refresh sooner
+        // not sure why it was needed before and not now.
+        // if (!this.isLoaded || this._innerWidth === 0 || this._innerHeight === 0) {
+        //     this._isDataDirty = true;
+        //     return;
+        // }
         this._isDataDirty = false;
         this._lastLayoutKey = this._innerWidth + '_' + this._innerHeight;
         let adapter = this._listViewAdapter;
         if (!adapter) {
-            adapter = this._listViewAdapter = this.createComposedAdapter(this.nativeViewProtected);
+            adapter = this._listViewAdapter = this.createComposedAdapter(view);
             adapter.setHasStableIds(!!this._itemIdGenerator);
             view.setAdapter(adapter);
         }
         else if (!view.getAdapter()) {
             view.setAdapter(adapter);
         }
-        this._updateSpanCount();
+        this.updateSpanCount();
         adapter.notifyDataSetChanged();
         this.notify({ eventName: CollectionViewBase.dataPopulatedEvent });
     }
@@ -793,13 +827,13 @@ export class CollectionView extends CollectionViewBase {
         }
         return view.computeVerticalScrollOffset() / Utils.layout.getDisplayDensity();
     }
-    scrollToIndex(index, animated = true) {
+    scrollToIndex(index, animated = true, snap = SnapPosition.START) {
         const view = this.nativeViewProtected;
         if (!view) {
             return;
         }
         if (animated) {
-            view.smoothScrollToPosition(index);
+            view.smoothScrollToPosition(index, snap);
         }
         else {
             view.scrollToPosition(index);
@@ -914,15 +948,15 @@ export class CollectionView extends CollectionViewBase {
         }
         return this.templateTypeNumberString.get(key);
     }
-    nativeItemToTemplateKey(item) {
-        let result;
-        this.templateTypeNumberString?.forEach((value, key, map) => {
-            if (value === item) {
-                result = key;
-            }
-        }, this);
-        return result;
-    }
+    // public nativeItemToTemplateKey(item: number): string {
+    //     let result: string;
+    //     this.templateTypeNumberString?.forEach((value, key, map) => {
+    //         if (value === item) {
+    //             result = key;
+    //         }
+    //     }, this);
+    //     return result;
+    // }
     disposeViewHolderViews() {
         this.enumerateViewHolders((v) => {
             const view = v.view;
@@ -942,6 +976,7 @@ export class CollectionView extends CollectionViewBase {
         return this.templateStringTypeNumber.get(viewType);
     }
     onCreateViewHolder(parent, viewType) {
+        const start = Date.now();
         let view = this.getViewForViewType(ListViewViewTypes.ItemView, this.getKeyByValue(viewType));
         const isNonSync = view === undefined;
         // dont create unecessary StackLayout if template.createView returns. Will happend when not using Vue or angular
@@ -982,7 +1017,7 @@ export class CollectionView extends CollectionViewBase {
         }
         this._viewHolders.add(holder);
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onCreateViewHolder', viewType, this.getKeyByValue(viewType));
+            CLog(CLogTypes.log, 'onCreateViewHolder', this, this.nativeView, viewType, this.getKeyByValue(viewType), holder, Date.now() - start, 'ms');
         }
         return holder;
     }
@@ -992,14 +1027,19 @@ export class CollectionView extends CollectionViewBase {
         return args;
     }
     onBindViewHolder(holder, position) {
+        const start = Date.now();
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onBindViewHolder', position);
+            CLog(CLogTypes.log, 'onBindViewHolder', this, this.nativeView, position, holder, holder.view);
         }
         let view = holder.view;
         const isNonSync = holder['defaultItemView'] === true;
         view = isNonSync ? view.content : view;
         const bindingContext = this._prepareItem(view, position);
+        if (holder['position'] !== undefined) {
+            this.bindedViewHolders.delete(holder['position']);
+        }
         holder['position'] = position;
+        this.bindedViewHolders.add(holder['position']);
         const args = this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, position, bindingContext, holder);
         if (isNonSync && args.view !== view) {
             view = args.view;
@@ -1034,13 +1074,14 @@ export class CollectionView extends CollectionViewBase {
         //     });
         // }
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onBindViewHolder done ', position);
+            CLog(CLogTypes.log, 'onBindViewHolder done ', position, Date.now() - start, 'ms');
         }
     }
     onViewRecycled(holder) {
         holder['position'] = null;
     }
 }
+CollectionView.layoutCompletedEvent = 'layoutCompleted';
 CollectionView.DEFAULT_TEMPLATE_VIEW_TYPE = 0;
 CollectionView.CUSTOM_TEMPLATE_ITEM_TYPE = 1;
 __decorate([
@@ -1049,12 +1090,81 @@ __decorate([
 __decorate([
     profile
 ], CollectionView.prototype, "initNativeView", null);
+__decorate([
+    profile
+], CollectionView.prototype, "disposeNativeView", null);
+__decorate([
+    profile
+], CollectionView.prototype, "onLoaded", null);
+__decorate([
+    profile
+], CollectionView.prototype, "attachScrollListener", null);
+__decorate([
+    profile
+], CollectionView.prototype, "setNativePoolSize", null);
+__decorate([
+    profile
+], CollectionView.prototype, "setPoolSizes", null);
+__decorate([
+    profile
+], CollectionView.prototype, _a, null);
+__decorate([
+    profile
+], CollectionView.prototype, _b, null);
+__decorate([
+    profile
+], CollectionView.prototype, "onItemViewLoaderChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "onItemTemplateSelectorChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "onItemTemplateChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "onItemTemplatesChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "updateSpanCount", null);
+__decorate([
+    profile
+], CollectionView.prototype, "updateInnerSize", null);
+__decorate([
+    profile
+], CollectionView.prototype, "_onColWidthPropertyChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "_onRowHeightPropertyChanged", null);
+__decorate([
+    profile
+], CollectionView.prototype, "onLayout", null);
 __decorate([
     profile
 ], CollectionView.prototype, "refresh", null);
+__decorate([
+    profile
+], CollectionView.prototype, "_setPadding", null);
+__decorate([
+    profile
+], CollectionView.prototype, "createComposedAdapter", null);
+__decorate([
+    profile
+], CollectionView.prototype, "clearTemplateTypes", null);
+__decorate([
+    profile
+], CollectionView.prototype, "getItemViewType", null);
+__decorate([
+    profile
+], CollectionView.prototype, "templateKeyToNativeItem", null);
+__decorate([
+    profile
+], CollectionView.prototype, "disposeViewHolderViews", null);
 __decorate([
     profile
 ], CollectionView.prototype, "onCreateViewHolder", null);
+__decorate([
+    profile
+], CollectionView.prototype, "notifyForItemAtIndex", null);
 __decorate([
     profile
 ], CollectionView.prototype, "onBindViewHolder", null);