Merge remote-tracking branch 'origin/master'

Author: farfromrefug

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.24](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.23...v5.3.24) (2024-03-01)
+
+### Bug Fixes
+
+* **ios:** `autoReloadItemOnLayout` handle more cases ([630f022](https://github.com/@nativescript-community/ui-collectionview/commit/630f022a779b459f9ca04239efdfc925ab6a13d0))
+
+## [5.3.23](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.22...v5.3.23) (2024-03-01)
+
+### Bug Fixes
+
+* **collectionview,ios:** fix `autoReloadItemOnLayout` which could trigger a lot of unneeded layouts ([a393173](https://github.com/@nativescript-community/ui-collectionview/commit/a393173825c59455ae149c886092d92673f2ee10))
+
 ## [5.3.22](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.21...v5.3.22) (2024-02-21)
 
 ### Bug Fixes

demo-snippets/svelte/ResizeCell.svelte

@@ -25,6 +25,29 @@
         { index: 18, name: 'SILVER', color: '#bdc3c7' },
         { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
     ]);
+
+    async function resizeCell(item, event) {
+        try {
+            const actualItem = item;
+                actualItem.showMenu = !actualItem.showMenu;
+                console.log('resizeCell', actualItem.showMenu)
+                async function animate(options = {}) {
+                    const newHeight = actualItem.showMenu ? 200 : 100;
+                    return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
+                }
+
+                const updateItem = () => {
+                    if (item) {
+                        const index = this.items.findIndex((i) => i === item);
+                        // console.log('updateItem', index, item);
+                        this.items.setItem(index, item);
+                    }
+                };
+                await animate();
+        } catch (error) {
+            console.error(error);
+        }
+    }
 </script>
 
 <page>
@@ -36,7 +59,16 @@
                 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}/>
+                <gridlayout id="resizeHolder" rows="101,100" on:tap={e=>resizeCell(item,e)} height={item.showMenu === true ? 200 : 100} verticalAlignment="top">
+                    <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>
             </Template>
         </collectionView>
     </gridLayout>

demo-snippets/svelte/ResizeView.svelte

@@ -1,25 +1,41 @@
-<script lang="ts">
+<script context="module" lang="ts">
     import { View } from '@nativescript/core';
+    let ID = 0;
+</script>
+<script lang="ts">
     export let item;
+    export let height;
+    const myId = ID++;
 
-    $: height = item.showMenu === true ? 200 : 100;
+    function updateheight(item) {
+        height = item.showMenu === true ? 200 : 100;
+        console.log('height', myId, height)
+    }
 
     async function resizeCell(event) {
         try {
+            const newValue = item.showMenu === true ? false : true;
+            console.log('resizeCell', myId, item.showMenu, newValue)
             async function animate(options = {}) {
-                const newHeight = !item.showMenu ? 200 : 100;
+                const newHeight = newValue ? 200 : 100;
                 return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
             }
+            if (__ANDROID__) {
             await animate();
+            item.showMenu = newValue;
+
+            } else {
+            item.showMenu = newValue;
+
+            }
             // 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}>
+<gridlayout id="resizeHolder" rows="101,100" on:tap={resizeCell} {height} verticalAlignment="top">
     <stacklayout row="0" class="item" backgroundColor={item.color}>
         <label row="1" text={item.name} class="title" />
         <label row="1" text={item.color} class="subtitle" />

demo-snippets/svelte/SwipeMenu.svelte

@@ -73,7 +73,7 @@
         <actionItem on:tap={refresh} ios.systemIcon="16" ios.position="right" text="refresh" android.position="popup" />
     </actionBar>
     <gridLayout rows="auto,*">
-        <collectionView {items} row="1" rowHeight="100" automationText="collectionView">
+        <collectionView {items} row="1" rowHeight="100" automationText="collectionView" autoReloadItemOnLayout={true}>
             <Template let:item>
                 <swipemenu id={item.name} leftSwipeDistance="300" translationFunction={drawerTranslationFunction} startingSide={item.startingSide}>
                     <gridlayout rows="*, auto" backgroundColor={item.color} class="item" prop:mainContent width="100%">