feat: add waterfall demo

demo-snippets/ng/install.module.ts

@@ -1,19 +1,24 @@
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 
 import { CollectionViewModule } from "@nativescript-community/ui-collectionview/angular";
+import install from '@nativescript-community/ui-collectionview-waterfall';
 
 import { SimpleGridComponent } from './simple-grid/simple-grid.component';
+import { SimpleWaterfallComponent } from './simple-waterfall/simple-waterfall.component';
 
-export const COMPONENTS = [SimpleGridComponent];
+export const COMPONENTS = [SimpleGridComponent, SimpleWaterfallComponent];
 @NgModule({
     imports: [CollectionViewModule],
     exports: [CollectionViewModule],
     schemas: [NO_ERRORS_SCHEMA]
 })
 export class InstallModule {}
 
-export function installPlugin() {}
+export function installPlugin() {
+    install();
+}
 
 export const demos = [
     { name: 'Simple Grid', path: 'simple-grid', component: SimpleGridComponent },
+    { name: 'Simple Waterfall', path: 'simple-waterfall', component: SimpleWaterfallComponent },
 ];

demo-snippets/ng/simple-waterfall/simple-waterfall.component.html

@@ -0,0 +1,24 @@
+<ActionBar>
+    <NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
+    <Label text="Simple Grid"></Label>
+</ActionBar>
+
+<GridLayout>
+    <CollectionView 
+        iosOverflowSafeArea="true"
+        [items]="items"  
+        (itemTap)="onItemTap($event)" 
+        (loadMoreItems)="onLoadMoreItems()"
+        colWidth="50%" 
+        layoutStyle="waterfall"
+    >
+        <ng-template let-item="item">
+            <GridLayout rows="*, auto" [backgroundColor]="item.color" padding="10" [height]="randomHeight(item.color)">
+                <StackLayout row="1">
+                    <Label row="1" [text]="item.name" color="white" fontSize="17" fontWeight="bold"></Label>
+                    <Label row="1" [text]="item.color" color="white" fontSize="14"></Label>
+                </StackLayout>
+            </GridLayout>
+        </ng-template>
+    </CollectionView>
+</GridLayout>

demo-snippets/ng/simple-waterfall/simple-waterfall.component.ts

@@ -0,0 +1,56 @@
+import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
+import { RouterExtensions } from '@nativescript/angular';
+
+@Component({
+    selector: 'ns-collectionview-simple-waterfall',
+    templateUrl: './simple-waterfall.component.html'
+})
+export class SimpleWaterfallComponent implements OnInit {
+    constructor(private router: RouterExtensions) {}
+
+    items = [
+        { 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' }
+    ];
+
+    ngOnInit(): void {
+
+    }
+
+    goBack(): void {
+        this.router.back();
+    }
+
+    onItemTap({ index, item }) {
+        console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
+    }
+
+    onLoadMoreItems() {
+        console.log('EVENT TRIGGERED: onLoadMoreItems()');
+    }
+
+    randomHeight(color) {
+        if (parseInt(color.substr(1), 16) % 2 === 0) {
+            return 200;
+        }
+        return 150;
+    }
+}

demo-snippets/react/SimpleWaterfall.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { CollectionView } from '@nativescript-community/ui-collectionview/react';
+import { StyleSheet } from 'react-nativescript';
+import { FontWeight } from '@nativescript/core/ui/styling/font';
+
+const items = [
+    { 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' },
+];
+
+interface Item {
+    index: number;
+    name: string;
+    color: string;
+}
+
+const randomHeight = (color) => {
+    if (parseInt(color.substr(1), 16) % 2 === 0) {
+        return 200;
+    }
+    return 150;
+}
+
+const cellFactory = (item: Item) => (
+    <gridLayout rows="*, auto" backgroundColor={item.color} style={styles.item} height={randomHeight(item.color)}>
+        <stackLayout row={1}>
+            <label text={item.name} style={styles.title} />
+            <label text={item.color} style={styles.subtitle} />
+        </stackLayout>
+    </gridLayout>
+);
+
+export function SimpleWaterfall() {
+    return (
+        <CollectionView iosOverflowSafeArea={true} items={items} colWidth="50%" cellFactory={cellFactory} layoutStyle="waterfall" width="100%" height="100%" />
+    );
+}
+
+const styles = StyleSheet.create({
+    item: {
+        padding: 10,
+        color: 'white'
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: FontWeight.BOLD
+    },
+    subtitle: {
+        fontSize: 14
+    }
+});

demo-snippets/react/install.ts

@@ -1,10 +1,15 @@
-import { SimpleGrid } from './SimpleGrid';
 import { registerCollectionView } from '@nativescript-community/ui-collectionview/react';
+import install from '@nativescript-community/ui-collectionview-waterfall';
+
+import { SimpleGrid } from './SimpleGrid';
+import { SimpleWaterfall } from './SimpleWaterfall';
 
 export function installPlugin() {
     registerCollectionView();
+    install();
 }
 
 export const demos = [
     { name: 'Simple Grid', path: 'simple-grid', component: SimpleGrid },
+    { name: 'Simple Waterfall', path: 'simple-waterfall', component: SimpleWaterfall }
 ];

demo-snippets/svelte/SimpleWaterfall.svelte

@@ -0,0 +1,79 @@
+<script lang="typescript">
+    import { Template } from 'svelte-native/components';
+    const items = [
+            { 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' }
+        ];
+    
+    function onItemTap({ index, item }) {
+        console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
+    }
+    function onLoadMoreItems() {
+        console.log('EVENT TRIGGERED: onLoadMoreItems()');
+    }
+    function randomHeight(color) {
+        if (parseInt(color.substr(1), 16) % 2 === 0) {
+            return 200;
+        }
+        return 150;
+    }
+</script>
+
+<page>
+    <actionBar title="Simple Grid" />
+    <gridLayout>
+        <collectionView 
+            {items} 
+            iosOverflowSafeArea="true"
+            colWidth="50%"
+            on:itemTap="{onItemTap}"
+            on:loadMoreItems="{onLoadMoreItems}"
+            layoutStyle="waterfall"
+        >
+            <Template let:item>
+                <gridlayout height="{randomHeight(item.color)}" rows="*, auto" backgroundColor="{item.color}" class="item">
+                    <stacklayout row="1">
+                        <label row="1" text="{item.name}" class="title" />
+                        <label row="1" text="{item.color}" class="subtitle" />
+                    </stacklayout>
+                </gridlayout>
+            </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/install.ts

@@ -1,12 +1,15 @@
 import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
-CollectionViewElement.register();
+import install from '@nativescript-community/ui-collectionview-waterfall';
 
 import SimpleGrid from './SimpleGrid.svelte';
+import SimpleWaterfall from './SimpleWaterfall.svelte';
 
 export function installPlugin() {
     CollectionViewElement.register();
+    install();
 }
 
 export const demos = [
     { name: 'Simple Grid', path: 'simple-grid', component: SimpleGrid },
+    { name: 'Simple Waterfall', path: 'simple-waterfall', component: SimpleWaterfall }
 ];

demo-snippets/vue/SimpleWaterfall.vue

@@ -0,0 +1,96 @@
+<template>
+    <Page>
+        <ActionBar>
+            <Label text="Simple Waterfall" />
+        </ActionBar>
+
+        <GridLayout>
+            <CollectionView
+                iosOverflowSafeArea="true"
+                :items="itemList"
+                @itemTap="onItemTap"
+                @loadMoreItems="onLoadMoreItems"
+                @itemLoadingEvent="onItemLoadingEvent"
+                itemIdGenerator="index"
+                colWidth="50%"
+                layoutStyle="waterfall"
+            >
+                <v-template>
+                    <GridLayout :height="randomHeight(item.color)" id="test" rows="*, auto" :backgroundColor="item.color" class="item">
+                        <StackLayout row="1">
+                            <Label row="1" :text="item.name" class="title" />
+                            <Label row="1" :text="item.color" class="subtitle" />
+                        </StackLayout>
+                    </GridLayout>
+                </v-template>
+            </CollectionView>
+        </GridLayout>
+    </Page>
+</template>
+
+<script>
+import { ObservableArray } from '@nativescript/core';
+export default {
+    data() {
+        const 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' }
+        ]);
+        return {
+            itemList: items
+        };
+    },
+    methods: {
+        onItemTap({ index, item }) {
+            console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
+        },
+        onLoadMoreItems() {
+            console.log('EVENT TRIGGERED: onLoadMoreItems()');
+        },
+        logEvent(e) {
+            console.log('logEvent', e.eventName, e.extraData);
+        },
+        randomHeight(color) {
+            if (parseInt(color.substr(1), 16) % 2 === 0) {
+                return 200;
+            }
+            return 150;
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+ActionBar {
+    background-color: #42b883;
+}
+.item {
+    padding: 10;
+    color: white;
+    .title {
+        font-size: 17;
+        font-weight: bold;
+    }
+    .subtitle {
+        font-size: 14;
+    }
+}
+</style>