Merge branch 'master' of github.com:nativescript-community/nativescript-collectionview

Author: farfromrefug

.gitignore

@@ -24,6 +24,7 @@ yarn-error.log*
 .gradle
 .project
 .yarn
+.cxx
 tmp/
 
 !.eslintrc.js
@@ -34,6 +35,7 @@ tmp/
 devices.js
 
 *.framework
+*.xcframework
 **/*.js.map
 src/**/*.js
 packages/**/*.js

.yarnrc.yml

@@ -2,4 +2,4 @@ nmHoistingLimits: workspaces
 
 nodeLinker: node-modules
 
-yarnPath: tools/.yarn/releases/yarn-3.3.1.cjs
+yarnPath: tools/.yarn/releases/yarn-3.6.4.cjs

CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.2](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.1...v5.3.2) (2023-10-20)
+
+### Bug Fixes
+
+* **android:** disable update animation ([ed97594](https://github.com/@nativescript-community/ui-collectionview/commit/ed97594ed6238bcb0da26a9102b024780d454cde))
+* **android:** ignore recycled holders in `eachChild` calls ([996bee4](https://github.com/@nativescript-community/ui-collectionview/commit/996bee4fd73510ad17db239aeb6cd02b8725f34d))
+
+## [5.3.1](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.0...v5.3.1) (2023-10-18)
+
+**Note:** Version bump only for package ui-collectionview
+
+# [5.3.0](https://github.com/@nativescript-community/ui-collectionview/compare/v5.2.0...v5.3.0) (2023-10-18)
+
+### Bug Fixes
+
+* a bunch of fixes to make collectionview faster ([cc550d7](https://github.com/@nativescript-community/ui-collectionview/commit/cc550d74626dfe58ff6c593cfc89b3c189771ded))
+* **android:** regression fixes ([fda4f74](https://github.com/@nativescript-community/ui-collectionview/commit/fda4f74b47ac7a0e21d351f3c600828c1c69a2dd))
+* **android:** removed animation lib for now ([b0343f8](https://github.com/@nativescript-community/ui-collectionview/commit/b0343f85fdd2ca5d415bdc7fffd3467ecff0f12c))
+* vue3 component improvement. Should be much faster ([7bc0498](https://github.com/@nativescript-community/ui-collectionview/commit/7bc0498586db2e931635b62706b26d8eca608284))
+
+### Features
+
+* **android:** layoutCompleted event ([3a239a3](https://github.com/@nativescript-community/ui-collectionview/commit/3a239a3473de25f8d287ea9e7f71d3a2a7449dac))
+
 # [5.2.0](https://github.com/@nativescript-community/ui-collectionview/compare/v5.1.9...v5.2.0) (2023-09-12)
 
 ### Bug Fixes

demo-ng

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { ObservableArray, View } from '@nativescript/core';
+    import { Template } from 'svelte-native/components';
+    import ResizeView from './ResizeView.svelte';
+
+    let items = new ObservableArray([
+        { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
+        { index: 1, name: 'EMERALD', color: '#2ecc71' },
+        { index: 2, name: 'PETER RIVER', color: '#3498db' },
+        { index: 3, name: 'AMETHYST', color: '#9b59b6' },
+        { index: 4, name: 'WET ASPHALT', color: '#34495e' },
+        { index: 5, name: 'GREEN SEA', color: '#16a085' },
+        { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
+        { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
+        { index: 8, name: 'WISTERIA', color: '#8e44ad' },
+        { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
+        { index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
+        { index: 11, name: 'CARROT', color: '#e67e22' },
+        { index: 12, name: 'ALIZARIN', color: '#e74c3c' },
+        { index: 13, name: 'CLOUDS', color: '#ecf0f1' },
+        { index: 14, name: 'CONCRETE', color: '#95a5a6' },
+        { index: 15, name: 'ORANGE', color: '#f39c12' },
+        { index: 16, name: 'PUMPKIN', color: '#d35400' },
+        { index: 17, name: 'POMEGRANATE', color: '#c0392b' },
+        { index: 18, name: 'SILVER', color: '#bdc3c7' },
+        { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
+    ]);
+</script>
+
+<page>
+    <actionBar title="Resize Cell" />
+    <gridLayout rows="auto,*">
+        <collectionView {items} row="1" autoReloadItemOnLayout={true}>
+            <Template let:item>
+                <!-- it is important to use a custom component
+                the reason is that for this to work in collectionview
+                upon resize animation the Svelte component needs to update its "height" property
+                otherwise Collectionview bind will report wrong height on cell reuse -->
+                <ResizeView {item}/>
+            </Template>
+        </collectionView>
+    </gridLayout>
+</page>
+
+<style>
+    ActionBar {
+        background-color: #ed3e04;
+        color: white;
+    }
+    .item {
+        padding: 10;
+        color: white;
+    }
+    .title {
+        font-size: 17;
+        font-weight: bold;
+    }
+    .subtitle {
+        font-size: 14;
+    }
+</style>

demo-snippets/svelte/ResizeCell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { View } from '@nativescript/core';
+    export let item;
+
+    $: height = item.showMenu === true ? 200 : 100;
+
+    async function resizeCell(event) {
+        try {
+            async function animate(options = {}) {
+                const newHeight = !item.showMenu ? 200 : 100;
+                return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
+            }
+            await animate();
+            // we update it after so that the svelte component also updates its value
+            item.showMenu = !item.showMenu;
+        } catch (error) {
+            console.error(error);
+        }
+    }
+</script>
+
+<gridlayout rows="101,100" on:tap={resizeCell} height={height}>
+    <stacklayout row="0" class="item" backgroundColor={item.color}>
+        <label row="1" text={item.name} class="title" />
+        <label row="1" text={item.color} class="subtitle" />
+    </stacklayout>
+    <stacklayout row="1" orientation="horizontal" height="100">
+        <label text="a" width="100" height="100%" backgroundColor="red" textAlignment="center" />
+        <label text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center" />
+    </stacklayout>
+</gridlayout>

demo-snippets/svelte/ResizeView.svelte

@@ -1,12 +1,15 @@
 import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
+import {CollectionViewTraceCategory} from '@nativescript-community/ui-collectionview';
 import install from '@nativescript-community/ui-collectionview-waterfall';
 import SwipeMenuElement from '@nativescript-community/ui-collectionview-swipemenu/svelte';
+import {Trace} from '@nativescript/core';
 
 import SimpleGrid from './SimpleGrid.svelte';
 import HorizontalGrid from './HorizontalGrid.svelte';
 import SimpleWaterfall from './SimpleWaterfall.svelte';
 import SimpleTemplates from './SimpleTemplates.svelte';
 import SwipeMenu from './SwipeMenu.svelte';
+import ResizeCell from './ResizeCell.svelte';
 
 export function installPlugin() {
     CollectionViewElement.register();
@@ -19,5 +22,9 @@ export const demos = [
     { name: 'Horizontal Grid', path: 'horizontal-grid', component: HorizontalGrid },
     { name: 'Simple Waterfall', path: 'simple-waterfall', component: SimpleWaterfall },
     { name: 'Simple Templates', path: 'simple-templates', component: SimpleTemplates },
-    { name: 'SwipeMenu', path: 'swipe-menu', component: SwipeMenu }
+    { name: 'SwipeMenu', path: 'swipe-menu', component: SwipeMenu },
+    { name: 'ResizeCell', path: 'resize-cell', component: ResizeCell }
 ];
+
+// Trace.addCategories(CollectionViewTraceCategory)
+// Trace.enable()

demo-snippets/svelte/install.ts

@@ -18,6 +18,8 @@
             </GridLayout> -->
             <CollectionView :items="items" ref="collectionView" row="1" :autoReloadItemOnLayout="true">
                 <v-template>
+
+                    <!-- TODO: it needs to be a custom Vue component for the component height to update it s value for height upon finished animation -->
                     <GridLayout class="item" rows="101,100" @tap="resizeCell(item, $event)" :height="getItemHeight(item)" :backgroundColor="item.color">
                         <Stacklayout row="0">
                             <Label row="1" :text="item.name" class="title" />