chore: demo for resize

Author: farfromrefug

demo-snippets/svelte/ResizeCell.svelte

@@ -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/ResizeView.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/install.ts

@@ -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/vue/ResizeCell.vue

@@ -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" />