@nstudio/ui-collectionview 5.1.8 → 5.1.9-alpha.1

package/index.ios.js

@@ -1,6 +1,5 @@
 import { ChangeType, ContentView, Observable, Property, ProxyViewContainer, Trace, Utils, View, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
-import { reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from '.';
-import { CLog, CLogTypes, CollectionViewBase, ListViewViewTypes, isBounceEnabledProperty, isScrollEnabledProperty, itemTemplatesProperty, orientationProperty } from './common';
+import { CLog, CLogTypes, CollectionViewBase, ViewTemplateType, isBounceEnabledProperty, isScrollEnabledProperty, itemTemplatesProperty, orientationProperty, reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty, getUUID } from './common';
 export * from './common';
 const infinity = Utils.layout.makeMeasureSpec(0, Utils.layout.UNSPECIFIED);
 export var ContentInsetAdjustmentBehavior;
@@ -41,10 +40,10 @@ export class CollectionView extends CollectionViewBase {
         this.reorderEndingRow = -1;
         this.manualDragging = false;
         this.scrollEnabledBeforeDragging = true;
+        this.cellRegistrations = {};
         this.needsScrollStartEvent = false;
         this.isScrolling = false;
         this._map = new Map();
-        // this._sizes = new Array<number[]>();
     }
     createNativeView() {
         let layout;
@@ -60,25 +59,20 @@ export class CollectionView extends CollectionViewBase {
         }
         const view = UICollectionView.alloc().initWithFrameCollectionViewLayout(CGRectMake(0, 0, 0, 0), layout);
         view.backgroundColor = UIColor.clearColor;
-        this._itemTemplatesInternal.forEach((t) => {
-            view.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
-        });
         view.autoresizesSubviews = false;
         view.autoresizingMask = 0 /* UIViewAutoresizing.None */;
         this.lastContentOffset = view.contentOffset;
         return view;
     }
-    onTemplateAdded(t) {
-        super.onTemplateAdded(t);
-        if (this.nativeViewProtected) {
-            this.nativeViewProtected.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
-        }
-    }
+    // onTemplateAdded(t) {
+    //     super.onTemplateAdded(t);
+    //     if (this.nativeViewProtected) {
+    //         // this.nativeViewProtected.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
+    //     }
+    // }
     initNativeView() {
         super.initNativeView();
-        const nativeView = this.nativeView;
-        this._dataSource = CollectionViewDataSource.initWithOwner(this);
-        nativeView.dataSource = this._dataSource;
+        this.setupDataSource();
         // delegate will be set in first onLayout because we need computed _effectiveColWidth and _effectiveRowHeight
         this._measureCellMap = new Map();
         // waterfall requires the delegate to be set as soon as possible
@@ -91,6 +85,126 @@ export class CollectionView extends CollectionViewBase {
         }
         this._setNativeClipToBounds();
     }
+    setupDataSource() {
+        // Important: cell's must be registered before creating the datasource
+        // eg: they can *not* be created within the initWithCollectionViewCellProvider
+        const templateKeys = this._itemTemplatesInternal.keys();
+        for (const key of templateKeys) {
+            // register cell for each template type
+            this.cellRegistrations[key] = UICollectionViewCellRegistration.registrationWithCellClassConfigurationHandler(CollectionViewCell.class(), (view, indexPath, identifier) => {
+                const templateType = this._getItemTemplateType(indexPath);
+                // console.log('registrationWithCellClassConfigurationHandler templateType:', templateType)
+                const cell = view;
+                const firstRender = !cell.view;
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.log, 'cellProvider for row:', indexPath.row, ' templateType:', templateType);
+                }
+                this._prepareCell(cell, indexPath, templateType);
+                // the cell layout will be called from NSCellView layoutSubviews
+                const cellView = cell.view;
+                if (!firstRender && cellView['isLayoutRequired']) {
+                    this.layoutCell(indexPath.row, cell, cellView);
+                }
+                return cell;
+            });
+        }
+        this._dataSource = UICollectionViewDiffableDataSource.alloc().initWithCollectionViewCellProvider(this.nativeView, (view, indexPath, identifier) => {
+            return this.nativeViewProtected.dequeueConfiguredReusableCellWithRegistrationForIndexPathItem(this.cellRegistrations[this._getItemTemplateType(indexPath)], indexPath, identifier);
+        });
+        this.setupHeaderFooter();
+        if (!this.sections) {
+            // every collectionview must have at least 1 section
+            this.sections = [{
+                    identifier: getUUID(),
+                    key: 'default'
+                }];
+        }
+        if (this.items?.length) {
+            this.refreshDataSourceSnapshot(this.getDefaultSectionIdentifier());
+        }
+        this.nativeView.dataSource = this._dataSource;
+    }
+    refreshDataSourceSnapshot(sectionIdentifier) {
+        if (this.items) {
+            this.modifyDataSourceSnapshot(ChangeType.Add, [], sectionIdentifier, false, true);
+        }
+    }
+    modifyDataSourceSnapshot(type, identifiers, sectionIdentifier, animate = true, reload = false) {
+        if (this.items) {
+            if (!this._dataSourceSnapshot || reload) {
+                this._dataSourceSnapshot = NSDiffableDataSourceSnapshot.alloc().init();
+                this._dataSourceSnapshot.appendSectionsWithIdentifiers(this.sections.map(s => s.identifier));
+            }
+            else {
+                this._dataSourceSnapshot = this._dataSource.snapshot();
+            }
+            if (Trace.isEnabled()) {
+                CLog(CLogTypes.info, 'modifyDataSourceSnapshot identifiers: ', type, identifiers);
+            }
+            // console.log('modifyDataSourceSnapshot identifiers: ', type, identifiers);
+            switch (type) {
+                case ChangeType.Add:
+                    const itemIdentifiers = [];
+                    if (reload) {
+                        this.items.forEach(() => {
+                            // forEach works well with ObservableArray and Array
+                            itemIdentifiers.push(getUUID());
+                        });
+                    }
+                    if (identifiers.length) {
+                        itemIdentifiers.push(...identifiers);
+                    }
+                    if (sectionIdentifier) {
+                        this._dataSourceSnapshot.appendItemsWithIdentifiersIntoSectionWithIdentifier(itemIdentifiers, sectionIdentifier);
+                    }
+                    else {
+                        this._dataSourceSnapshot.appendItemsWithIdentifiers(itemIdentifiers);
+                    }
+                    break;
+                case ChangeType.Update:
+                    this._dataSourceSnapshot.reloadItemsWithIdentifiers(identifiers);
+                    break;
+                case ChangeType.Delete:
+                    this._dataSourceSnapshot.deleteItemsWithIdentifiers(identifiers);
+                    break;
+            }
+            this._dataSource.applySnapshotAnimatingDifferences(this._dataSourceSnapshot, animate);
+        }
+    }
+    getDefaultSectionIdentifier() {
+        // each collectionview must have at least 1 section
+        return this.sections[0].identifier;
+    }
+    setupHeaderFooter() {
+        if (!this.headerKey) {
+            // TODO: work on keyed header for multiple sections
+            this.headerKey = ViewTemplateType.Header;
+        }
+        if (this.headerItemTemplate) {
+            this.headerRegistration = UICollectionViewSupplementaryRegistration.registrationWithSupplementaryClassElementKindConfigurationHandler(CollectionViewCell.class(), this.headerKey, (cell, elementKind, indexPath) => {
+                this._prepareHeaderFooter(cell, indexPath, this.headerKey, ViewTemplateType.Header);
+            });
+        }
+        if (!this.footerKey) {
+            // TODO: work on keyed footer for multiple sections
+            this.footerKey = ViewTemplateType.Footer;
+        }
+        if (this.footerItemTemplate) {
+            this.footerRegistration = UICollectionViewSupplementaryRegistration.registrationWithSupplementaryClassElementKindConfigurationHandler(CollectionViewCell.class(), this.footerKey, (cell, elementKind, indexPath) => {
+                this._prepareHeaderFooter(cell, indexPath, this.footerKey, ViewTemplateType.Footer);
+            });
+        }
+        if (this.headerItemTemplate || this.footerItemTemplate) {
+            this._dataSource.supplementaryViewProvider = (view, elementKind, indexPath) => {
+                if (this.headerRegistration && elementKind == this.headerKey) {
+                    return this.nativeViewProtected.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(this.headerRegistration, indexPath);
+                }
+                else if (this.footerRegistration) {
+                    return this.nativeViewProtected.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(this.footerRegistration, indexPath);
+                }
+            };
+        }
+    }
     disposeNativeView() {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.log, 'disposeNativeView');
@@ -365,122 +479,94 @@ export class CollectionView extends CollectionViewBase {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.log, 'onItemsChanged', ChangeType.Update, event.action, event.index, event.addedCount, event.removed && event.removed.length);
         }
-        // we need to clear stored cell sizes and it wont be correct anymore
-        // this.clearCellSize();
-        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
+        // console.log('----')
+        // console.log('event.action:', event.action)
+        // console.log('event.addedCount:', event.addedCount);
+        // console.log('event.removed:', event.removed);
+        // console.log('event.index:', event.index)
+        // console.log(' >')
+        const sectionIdentifier = this._dataSource.sectionIdentifierForIndex(0);
+        // console.log(' sectionIdentifier:', sectionIdentifier)
         switch (event.action) {
             case ChangeType.Delete: {
-                const indexes = NSMutableArray.new();
+                const identifiers = [];
                 for (let index = 0; index < event.addedCount; index++) {
-                    indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
-                    if (sizes) {
-                        sizes.removeObjectAtIndex(event.index);
-                    }
+                    const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
+                    const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
+                    // console.log(' delete identifier:', identifier)
+                    identifiers.push(identifier);
                 }
-                // this._sizes.splice(event.index, event.addedCount);
                 this.unbindUnusedCells(event.removed);
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.info, 'deleteItemsAtIndexPaths', indexes.count);
-                }
-                view.performBatchUpdatesCompletion(() => {
-                    view.deleteItemsAtIndexPaths(indexes);
-                }, null);
+                this.modifyDataSourceSnapshot(ChangeType.Delete, identifiers, sectionIdentifier);
                 return;
             }
             case ChangeType.Update: {
-                const indexes = NSMutableArray.new();
-                indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index, 0));
-                if (sizes) {
-                    sizes.replaceObjectAtIndexWithObject(event.index, NSValue.valueWithCGSize(CGSizeZero));
-                }
-                // this._sizes[event.index] = null;
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.info, 'reloadItemsAtIndexPaths', event.index, indexes.count);
-                }
-                view.performBatchUpdatesCompletion(() => {
-                    view.reloadItemsAtIndexPaths(indexes);
-                }, null);
+                const identifiers = [];
+                const indexPath = NSIndexPath.indexPathForRowInSection(event.index, sectionIdentifier);
+                const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
+                // console.log(' update identifier:', identifier)
+                identifiers.push(identifier);
+                this.modifyDataSourceSnapshot(ChangeType.Update, identifiers, sectionIdentifier);
                 return;
             }
             case ChangeType.Add: {
-                const indexes = NSMutableArray.new();
+                const identifiers = [];
                 for (let index = 0; index < event.addedCount; index++) {
-                    indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
-                    if (sizes) {
-                        sizes.insertObjectAtIndex(NSValue.valueWithCGSize(CGSizeZero), event.index);
-                    }
-                    // this._sizes.splice(index, 0, null);
+                    const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
+                    const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
+                    // console.log(' add identifier:', identifier)
+                    identifiers.push(identifier);
                 }
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.info, 'insertItemsAtIndexPaths', indexes.count);
-                }
-                view.performBatchUpdatesCompletion(() => {
-                    view.insertItemsAtIndexPaths(indexes);
-                }, null);
+                this.modifyDataSourceSnapshot(ChangeType.Add, identifiers, sectionIdentifier);
                 return;
             }
             case ChangeType.Splice: {
-                view.performBatchUpdatesCompletion(() => {
-                    const added = event.addedCount;
-                    const removed = (event.removed && event.removed.length) || 0;
-                    if (added > 0 && added === removed) {
-                        const indexes = NSMutableArray.new();
-                        for (let index = 0; index < added; index++) {
-                            indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
-                            if (sizes) {
-                                sizes.replaceObjectAtIndexWithObject(event.index + index, NSValue.valueWithCGSize(CGSizeZero));
-                            }
-                            // this._sizes[event.index + index] = null;
-                        }
-                        view.reloadItemsAtIndexPaths(indexes);
+                const added = event.addedCount;
+                const removed = (event.removed && event.removed.length) || 0;
+                if (added > 0 && added === removed) {
+                    const identifiers = [];
+                    for (let index = 0; index < added; index++) {
+                        const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
+                        const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
+                        // console.log(' splice, update identifier:', identifier)
+                        identifiers.push(identifier);
                     }
-                    else {
-                        if (event.removed && event.removed.length > 0) {
-                            const indexes = NSMutableArray.new();
-                            for (let index = 0; index < event.removed.length; index++) {
-                                indexes.addObject(NSIndexPath.indexPathForItemInSection(event.index + index, 0));
-                                if (sizes) {
-                                    sizes.removeObjectAtIndex(event.index);
-                                }
-                            }
-                            // this._sizes.splice(event.index, event.removed.length);
-                            this.unbindUnusedCells(event.removed);
-                            if (Trace.isEnabled()) {
-                                CLog(CLogTypes.info, 'deleteItemsAtIndexPaths', indexes.count);
-                            }
-                            view.deleteItemsAtIndexPaths(indexes);
+                    this.modifyDataSourceSnapshot(ChangeType.Update, identifiers, sectionIdentifier);
+                }
+                else {
+                    if (event.removed && event.removed.length > 0) {
+                        const identifiers = [];
+                        for (let index = 0; index < event.removed.length; index++) {
+                            const indexPath = NSIndexPath.indexPathForItemInSection(event.index + index, sectionIdentifier);
+                            const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
+                            // console.log(' splice, remove identifier:', identifier)
+                            identifiers.push(identifier);
                         }
-                        if (event.addedCount > 0) {
-                            const indexes = NSMutableArray.alloc().init();
-                            for (let index = 0; index < event.addedCount; index++) {
-                                indexes.addObject(NSIndexPath.indexPathForItemInSection(event.index + index, 0));
-                                if (sizes) {
-                                    sizes.insertObjectAtIndex(NSValue.valueWithCGSize(CGSizeZero), event.index);
-                                }
-                                // this._sizes.splice(event.index, 0, null);
-                            }
-                            if (Trace.isEnabled()) {
-                                CLog(CLogTypes.info, 'insertItemsAtIndexPaths', indexes.count);
-                            }
-                            view.insertItemsAtIndexPaths(indexes);
+                        this.unbindUnusedCells(event.removed);
+                        this.modifyDataSourceSnapshot(ChangeType.Delete, identifiers, sectionIdentifier);
+                    }
+                    if (event.addedCount > 0) {
+                        const identifiers = [];
+                        for (let index = 0; index < event.addedCount; index++) {
+                            const indexPath = NSIndexPath.indexPathForItemInSection(event.index + index, sectionIdentifier);
+                            const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
+                            // console.log(' splice, add identifier:', identifier)
+                            identifiers.push(identifier);
                         }
+                        this.modifyDataSourceSnapshot(ChangeType.Add, identifiers, sectionIdentifier);
                     }
-                    // view.collectionViewLayout.invalidateLayout();
-                }, null);
+                }
+                // view.collectionViewLayout.invalidateLayout();
                 return;
             }
         }
         this.refresh();
     }
-    onItemTemplatesChanged(oldValue, newValue) {
-        super.onItemTemplatesChanged(oldValue, newValue);
-        if (!this.nativeViewProtected) {
-            return;
-        }
-        const view = this.nativeViewProtected;
-        this._itemTemplatesInternal.forEach((t) => {
-            view.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
-        });
+    clearEmbeddedViews() {
+        this.clearRealizedCells();
+        // if (this.itemViewDisposer !== undefined) {
+        //     this.itemViewDisposer();
+        // }
     }
     unbindUnusedCells(removedDataItems) {
         this._map.forEach((view, nativeView, map) => {
@@ -497,14 +583,7 @@ export class CollectionView extends CollectionViewBase {
         if (!view) {
             return;
         }
-        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
         const visibles = view.indexPathsForVisibleItems;
-        if (sizes?.count) {
-            const indexes = Array.from(visibles);
-            indexes.forEach((value) => {
-                sizes.replaceObjectAtIndexWithObject(value.row, NSValue.valueWithCGSize(CGSizeZero));
-            });
-        }
         UIView.performWithoutAnimation(() => {
             view.performBatchUpdatesCompletion(() => {
                 view.reloadItemsAtIndexPaths(visibles);
@@ -529,18 +608,13 @@ export class CollectionView extends CollectionViewBase {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'refresh');
         }
-        // we need to clear stored cell sizes and it wont be correct anymore
-        // this.clearCellSize();
-        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
-        if (sizes) {
-            sizes.removeAllObjects();
-        }
         // clear bindingContext when it is not observable because otherwise bindings to items won't reevaluate
         this._map.forEach((view, nativeView, map) => {
             if (!(view.bindingContext instanceof Observable)) {
                 view.bindingContext = null;
             }
         });
+        this.refreshDataSourceSnapshot(this.getDefaultSectionIdentifier());
         // TODO: this is ugly look here: https://github.com/nativescript-vue/nativescript-vue/issues/525
         // this.clearRealizedCells();
         // dispatch_async(main_queue, () => {
@@ -577,17 +651,64 @@ export class CollectionView extends CollectionViewBase {
         return args;
     }
     _getItemTemplateType(indexPath) {
-        const selector = this._itemTemplateSelector;
-        let type = this._defaultTemplate.key;
-        if (selector) {
-            type = selector.call(this, this.getItemAtIndex(indexPath.item), indexPath.item, this.items);
+        return (this._itemTemplateSelector ? this._itemTemplateSelector.call(this, this.getItemAtIndex(indexPath.row), indexPath.row, this.items) : this._defaultTemplate.key).toLowerCase();
+    }
+    disableIosOverflowSafeArea(parentView) {
+        if (parentView) {
+            parentView.iosOverflowSafeAreaEnabled = false;
         }
-        return type.toLowerCase();
     }
-    getItemTemplateContent(index, templateType) {
-        return this.getViewForViewType(ListViewViewTypes.ItemView, templateType);
+    _prepareHeaderFooter(cell, indexPath, templateKey, templateType, notForCellSizeComp = true) {
+        let cellSize;
+        try {
+            this._preparingCell = true;
+            const firstRender = !cell.view;
+            let view = cell.view;
+            const index = indexPath.row;
+            if (!view) {
+                view = this.getViewForTemplateType(templateKey, templateType);
+            }
+            if (Trace.isEnabled()) {
+                CLog(CLogTypes.log, '_prepareHeaderFooter', index, templateType, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
+            }
+            if (view) {
+                if (firstRender) {
+                    view['iosIgnoreSafeArea'] = true;
+                }
+                view.bindingContext = this.bindingContext;
+                if (view instanceof ProxyViewContainer) {
+                    const sp = new ContentView();
+                    sp.content = view;
+                    view = sp;
+                }
+                if (!cell.view) {
+                    cell.owner = new WeakRef(view);
+                }
+                else if (cell.view !== view) {
+                    this._removeContainer(cell);
+                    if (cell.view?.nativeViewProtected) {
+                        cell.view.nativeViewProtected.removeFromSuperview();
+                    }
+                    cell.owner = new WeakRef(view);
+                }
+                cell.currentIndex = indexPath.row;
+                if (view && !view.parent) {
+                    this._addView(view);
+                    const innerView = NSCellView.new();
+                    innerView.autoresizingMask = 2 /* UIViewAutoresizing.FlexibleWidth */ | 16 /* UIViewAutoresizing.FlexibleHeight */;
+                    innerView.view = new WeakRef(view);
+                    innerView.addSubview(view.nativeViewProtected);
+                    cell.addSubview(innerView);
+                }
+                cellSize = this.measureCell(cell, view, indexPath.row);
+            }
+        }
+        finally {
+            this._preparingCell = false;
+        }
+        return cellSize;
     }
-    _prepareCell(cell, indexPath, templateType, notForCellSizeComp = true) {
+    _prepareCell(cell, indexPath, templateKey, notForCellSizeComp = true) {
         let cellSize;
         try {
             this._preparingCell = true;
@@ -595,11 +716,11 @@ export class CollectionView extends CollectionViewBase {
             let view = cell.view;
             const index = indexPath.row;
             if (!view) {
-                view = this.getItemTemplateContent(index, templateType);
+                view = this.getViewForTemplateType(templateKey);
             }
             const bindingContext = this._prepareItem(view, index);
             if (Trace.isEnabled()) {
-                CLog(CLogTypes.log, '_prepareCell', index, templateType, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
+                CLog(CLogTypes.log, '_prepareCell', index, templateKey, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
             }
             const args = this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, bindingContext, cell);
             view = args.view;
@@ -631,25 +752,21 @@ export class CollectionView extends CollectionViewBase {
                 const innerView = NSCellView.new();
                 innerView.autoresizingMask = 2 /* UIViewAutoresizing.FlexibleWidth */ | 16 /* UIViewAutoresizing.FlexibleHeight */;
                 innerView.view = new WeakRef(view);
-                if (notForCellSizeComp && this.autoReloadItemOnLayout) {
-                    // for a cell to update correctly on cell layout change we need
-                    // to do it ourself instead of "propagating it"
-                    view['performLayout'] = () => {
-                        if (!this._preparingCell) {
-                            const index = cell.currentIndex;
-                            const nativeView = this.nativeViewProtected;
-                            const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
-                            if (sizes) {
-                                sizes.replaceObjectAtIndexWithObject(index, NSValue.valueWithCGSize(CGSizeZero));
-                            }
-                            nativeView.performBatchUpdatesCompletion(() => {
-                                this.measureCell(cell, view, index);
-                                this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, view.bindingContext, cell);
-                            }, null);
-                            nativeView.collectionViewLayout.invalidateLayout();
-                        }
-                    };
-                }
+                // if (notForCellSizeComp && this.autoReloadItemOnLayout) {
+                //     // for a cell to update correctly on cell layout change we need
+                //     // to do it ourself instead of "propagating it"
+                //     view['performLayout'] = () => {
+                //         if (!this._preparingCell) {
+                //             const index = cell.currentIndex;
+                //             const nativeView = this.nativeViewProtected;
+                //             nativeView.performBatchUpdatesCompletion(() => {
+                //                 this.measureCell(cell, view, index);
+                //                 this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, view.bindingContext, cell);
+                //             }, null);
+                //             nativeView.collectionViewLayout.invalidateLayout();
+                //         }
+                //     };
+                // }
                 innerView.addSubview(view.nativeViewProtected);
                 cell.contentView.addSubview(innerView);
             }
@@ -667,7 +784,6 @@ export class CollectionView extends CollectionViewBase {
         return cellSize;
     }
     getCellSize(index) {
-        // let result = this._sizes[index];
         let result;
         // CLog(CLogTypes.log, 'getCellSize', index, result, this._effectiveColWidth, this._effectiveRowHeight, this.getMeasuredWidth(), this.getMeasuredHeight());
         if (!result) {
@@ -697,12 +813,6 @@ export class CollectionView extends CollectionViewBase {
         // return undefined;
         return result;
     }
-    // public storeCellSize(index: number, value) {
-    //     this._sizes[index] = value;
-    // }
-    // public clearCellSize() {
-    //     this._sizes = new Array<number[]>();
-    // }
     measureCell(cell, cellView, position) {
         if (cellView) {
             let width = this._effectiveColWidth;
@@ -813,6 +923,28 @@ export class CollectionView extends CollectionViewBase {
         }
         return cell;
     }
+    // collectionViewViewForSupplementaryElementOfKindAtIndexPath(view: UICollectionView, kind: string, indexPath: NSIndexPath): UICollectionReusableView {
+    //     // const templateType = kind === UICollectionElementKindSectionHeader ? this._headerTemplate.key : this._footerTemplate.key;
+    //     const templateType = kind;
+    //     console.log('templateType:', templateType)
+    //     // let cell = collectionView.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(kind, templateType, indexPath) as CollectionViewReusableView;
+    //     let cell = this._dataSource.supplementaryViewProvider(view, kind, indexPath);
+    //     console.log('cell:', cell)
+    //     // if (!cell) {
+    //     //     cell = CollectionViewReusableView.new() as CollectionViewReusableView;
+    //     // }
+    //     // const firstRender = !cell.view;
+    //     // if (Trace.isEnabled()) {
+    //     //     CLog(CLogTypes.log, 'collectionViewViewForSupplementaryElementOfKindAtIndexPath', indexPath.row, templateType, !!cell.view, cell);
+    //     // }
+    //     // this._prepareHeaderFooter(cell, indexPath, templateType);
+    //     // the cell layout will be called from NSCellView layoutSubviews
+    //     // const cellView: View = cell.view;
+    //     // if (!firstRender && cellView['isLayoutRequired']) {
+    //     //     this.layoutCell(indexPath.row, cell, cellView);
+    //     // }
+    //     return cell;
+    // }
     collectionViewWillDisplayCellForItemAtIndexPath(collectionView, cell, indexPath) {
         if (this.reverseLayout) {
             cell.transform = CGAffineTransformMakeRotation(-Math.PI);
@@ -1007,66 +1139,20 @@ var CollectionViewCell = /** @class */ (function (_super) {
     };
     return CollectionViewCell;
 }(UICollectionViewCell));
-var CollectionViewDataSource = /** @class */ (function (_super) {
-    __extends(CollectionViewDataSource, _super);
-    function CollectionViewDataSource() {
+var CollectionViewReusableView = /** @class */ (function (_super) {
+    __extends(CollectionViewReusableView, _super);
+    function CollectionViewReusableView() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    CollectionViewDataSource.initWithOwner = function (owner) {
-        var delegate = CollectionViewDataSource.new();
-        delegate._owner = new WeakRef(owner);
-        return delegate;
-    };
-    CollectionViewDataSource.prototype.numberOfSectionsInCollectionView = function (collectionView) {
-        var owner = this._owner.deref();
-        if (owner) {
-            return owner.numberOfSectionsInCollectionView(collectionView);
-        }
-        return 0;
-    };
-    CollectionViewDataSource.prototype.collectionViewNumberOfItemsInSection = function (collectionView, section) {
-        var owner = this._owner.deref();
-        if (owner) {
-            return owner.collectionViewNumberOfItemsInSection(collectionView, section);
-        }
-        return 0;
-    };
-    CollectionViewDataSource.prototype.collectionViewCellForItemAtIndexPath = function (collectionView, indexPath) {
-        var owner = this._owner.deref();
-        if (owner) {
-            return owner.collectionViewCellForItemAtIndexPath(collectionView, indexPath);
-        }
-        return null;
-    };
-    CollectionViewDataSource.prototype.collectionViewMoveItemAtIndexPathToIndexPath = function (collectionView, sourceIndexPath, destinationIndexPath) {
-        var owner = this._owner.deref();
-        if (owner) {
-            owner.reorderStartingRow = sourceIndexPath.row;
-            owner.reorderEndingRow = destinationIndexPath.row;
-            owner._reorderItemInSource(sourceIndexPath.row, destinationIndexPath.row, false);
-        }
-    };
-    CollectionViewDataSource.prototype.collectionViewTargetIndexPathForMoveFromItemAtIndexPathToProposedIndexPath = function (collectionView, originalIndexPath, proposedIndexPath) {
-        var owner = this._owner.deref();
-        if (owner) {
-            owner.reorderEndingRow = proposedIndexPath.row;
-        }
-        return proposedIndexPath;
-    };
-    CollectionViewDataSource.prototype.collectionViewCanMoveItemAtIndexPath = function (collectionView, indexPath) {
-        var owner = this._owner.deref();
-        if (owner) {
-            var result = owner.shouldMoveItemAtIndex(indexPath.row);
-            if (result) {
-                owner.reorderStartingRow = indexPath.row;
-            }
-            return result;
-        }
-        return false;
-    };
-    CollectionViewDataSource.ObjCProtocols = [UICollectionViewDataSource];
-    return CollectionViewDataSource;
-}(NSObject));
+    Object.defineProperty(CollectionViewReusableView.prototype, "view", {
+        get: function () {
+            return this.owner ? this.owner.deref() : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return CollectionViewReusableView;
+}(UICollectionReusableView));
 var UICollectionViewDelegateImpl = /** @class */ (function (_super) {
     __extends(UICollectionViewDelegateImpl, _super);
     function UICollectionViewDelegateImpl() {