Skip to content

Commit f8cd1cd

Browse files
NickIlievNickIliev
committed
grouped list-views written with new Multiple Item Template Selectors
1 parent 940c0b7 commit f8cd1cd

File tree

10 files changed

+222
-158
lines changed

10 files changed

+222
-158
lines changed

‎app/common-screens-category/lists-category/mock-dataItems.ts‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
11
/* tslint:disable:max-line-length */
2+
export class Header {
3+
constructor(public name: string, public type: string, public imageSrc?: string, public desc?: string) { }
4+
}
5+
6+
export class Footer {
7+
constructor(public name: string, public type: string, public imageSrc?: string, public desc?: string) { }
8+
}
9+
10+
export class Country {
11+
constructor(public name: string, public imageSrc: string, public continent: string, public desc: string) { }
12+
}
13+
14+
// revise all ListViews with structural deirectives and then delete this data
215
export class GroupTitle {
316
constructor(public title: string) { }
417
}
@@ -8,14 +21,12 @@ let mockedDescriptionType2 = "Nunc vel augue quam. Phasellus pharetra lobortis n
821
let mockedDescriptionType3 = "Nulla convallis urna eu est tristique, in ullamcorper sapien rutrum. Donec dictum tortor leo, ac pharetra leo fringilla vitae. Cras pellentesque ac arcu sed auctor. Aenean vitae nisl ut diam imperdiet sagittis. Maecenas eget scelerisque orci, vitae maximus ante.";
922
let mockedDescriptionType4 = "Donec dictum tortor leo, ac pharetra leo fringilla vitae. Cras pellentesque ac arcu sed auctor.";
1023

11-
export class Country {
12-
constructor(public name: string, public imageSrc: string, public continent: string, public desc: string) { }
13-
}
14-
24+
// revise all ListViews with structural deirectives and then delete this data
1525
export class GroupFooter {
1626
constructor(public description: string) { }
1727
}
1828

29+
// Dont delete this!
1930
export let mockedDataArray = [
2031
new Country("Australia", "~/common-screens-category/lists-category/images/flags/au.png", "Australia", mockedDescription),
2132
new Country("Belgium", "~/common-screens-category/lists-category/images/flags/be.png", "Europe", mockedDescriptionType2),
@@ -35,6 +46,9 @@ export let mockedDataArray = [
3546
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
3647
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
3748
];
49+
50+
51+
// revise all ListViews with structural deirectives and then delete this data
3852
export let mockedGroupDataArray = [
3953
new GroupTitle("Asia"),
4054
new Country("China", "~/common-screens-category/lists-category/images/flags/cn.png", "Asia", mockedDescriptionType4),
@@ -59,3 +73,29 @@ export let mockedGroupDataArray = [
5973

6074
new GroupFooter("all countries loaded!")
6175
];
76+
77+
export let mockedCounties = [
78+
new Header("Asia", "header"),
79+
new Country("China", "~/common-screens-category/lists-category/images/flags/cn.png", "Asia", mockedDescriptionType4),
80+
81+
new Header("Europe", "header"),
82+
new Country("Belgium", "~/common-screens-category/lists-category/images/flags/be.png", "Europe", mockedDescriptionType2),
83+
new Country("Bulgaria", "~/common-screens-category/lists-category/images/flags/bg.png", "Europe", mockedDescription),
84+
new Country("Switzerland", "~/common-screens-category/lists-category/images/flags/ch.png", "Europe", mockedDescriptionType2),
85+
new Country("Czech Republic", "~/common-screens-category/lists-category/images/flags/cz.png", "Europe", mockedDescription),
86+
new Country("Germany", "~/common-screens-category/lists-category/images/flags/de.png", "Europe", mockedDescription),
87+
new Country("Spain", "~/common-screens-category/lists-category/images/flags/es.png", "Europe", mockedDescriptionType2),
88+
new Country("Croatia", "~/common-screens-category/lists-category/images/flags/hr.png", "Europe", mockedDescription),
89+
new Country("Hungary", "~/common-screens-category/lists-category/images/flags/hu.png", "Europe", mockedDescriptionType2),
90+
new Country("Italy", "~/common-screens-category/lists-category/images/flags/it.png", "Europe", mockedDescriptionType4),
91+
new Country("Romania", "~/common-screens-category/lists-category/images/flags/ro.png", "Europe", mockedDescriptionType2),
92+
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
93+
94+
new Header("North America", "header"),
95+
new Country("Canada", "~/common-screens-category/lists-category/images/flags/ca.png", "North America", mockedDescriptionType3),
96+
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
97+
new Country("Jamaica", "~/common-screens-category/lists-category/images/flags/jm.png", "North America", mockedDescription),
98+
99+
new Footer("all countries loaded!", "footer")
100+
];
101+

‎app/common-screens-category/lists-category/multi-line-big/multi-line-big.component.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,23 @@
3434

3535
<GridLayout *tabItem="{title: 'Bigger thumbs (grouped lists)'}">
3636
<!-- >> multi-line-big-grouped-html -->
37-
<ListView class="list-group" [items]="groupedCountries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
38-
<template let-item="item">
39-
<StackLayout [ngSwitch]="checkType(item)">
40-
<Label *ngSwitchCase="'GroupTitle'" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white"
41-
fontSize="24" [text]="item.title"></Label>
42-
<Label *ngSwitchCase="'GroupFooter'" class="list-group-item h4" backgroundColor="gray" fontSize="12" [text]="item.description"></Label>
43-
<GridLayout *ngSwitchDefault class="list-group-item" rows="*" columns="*, auto">
44-
<StackLayout col="0">
45-
<Label class="list-group-item-heading" [text]="item.name"></Label>
46-
<Label class="list-group-item-text" [text]="item.desc" textWrap="true"></Label>
47-
</StackLayout>
48-
<Image col="1" [src]="item.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
49-
</GridLayout>
50-
</StackLayout>
37+
<ListView [items]="groupedCountries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white">
38+
<template nsTemplateKey="header" let-header="item">
39+
<Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
40+
</template>
41+
42+
<template nsTemplateKey="footer" let-footer="item">
43+
<Label [text]="footer.name" class="list-group-item" backgroundColor="gray" fontSize="12"></Label>
44+
</template>
45+
46+
<template nsTemplateKey="cell" let-country="item">
47+
<GridLayout class="list-group-item" rows="*" columns="*, auto">
48+
<StackLayout col="0">
49+
<Label [text]="country.name" class="list-group-item-heading"></Label>
50+
<Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
51+
</StackLayout>
52+
<Image col="1" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
53+
</GridLayout>
5154
</template>
5255
</ListView>
5356
<!-- << multi-line-big-grouped-html -->

‎app/common-screens-category/lists-category/multi-line-big/multi-line-big.component.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Component, ChangeDetectionStrategy, OnInit, Input } from "@angular/core";
33
import { ItemEventData } from "ui/list-view";
44
import { SetupItemViewArgs } from "nativescript-angular/directives";
5-
import { mockedDataArray, mockedGroupDataArray, Country } from "../mock-dataItems";
5+
import { mockedDataArray, mockedCounties, Country } from "../mock-dataItems";
66

77
@Component({
88
moduleId: module.id,
@@ -11,16 +11,18 @@ import { mockedDataArray, mockedGroupDataArray, Country } from "../mock-dataItem
1111
})
1212
export class MultiLineBigListViewExampleComponent implements OnInit {
1313
public countries: Array<Country> = [];
14-
1514
public groupedCountries: Array<any> = [];
15+
public templateSelector = (item: any, index: number, items: any) => {
16+
return item.type || "cell";
17+
}
1618

1719
ngOnInit() {
1820
for (let i = 0; i < mockedDataArray.length; i++) {
1921
this.countries.push(mockedDataArray[i]);
2022
}
2123

22-
for (let i = 0; i < mockedGroupDataArray.length; i++) {
23-
this.groupedCountries.push(mockedGroupDataArray[i]);
24+
for (let i = 0; i < mockedCounties.length; i++) {
25+
this.groupedCountries.push(mockedCounties[i]);
2426
}
2527
}
2628

@@ -41,11 +43,5 @@ export class MultiLineBigListViewExampleComponent implements OnInit {
4143
// example for creating a variable for each third element
4244
args.view.context.third = (args.index % 3 === 0);
4345
}
44-
45-
checkType(value) {
46-
// get the class name e.g. GroupTitle or Country
47-
let className = value.constructor.name;
48-
return className;
49-
}
5046
}
5147
// << multi-line-big-code

‎app/common-screens-category/lists-category/multi-line-grouped/multi-line-grouped.component.html‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,19 @@
22

33
<GridLayout *tabItem="{title: 'Basic list'}">
44
<!-- >> multi-line-grouped-basic-html -->
5-
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
6-
<template let-item="item">
7-
<StackLayout [ngSwitch]="checkType(item)">
8-
<Label *ngSwitchCase="'GroupTitle'" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white"
9-
fontSize="24" [text]="item.title"></Label>
10-
<Label *ngSwitchCase="'GroupFooter'" class="list-group-item h4" backgroundColor="gray" fontSize="12" [text]="item.description"></Label>
11-
<StackLayout *ngSwitchDefault class="list-group-item">
12-
<Label [text]="item.name" class="list-group-item-heading"></Label>
13-
<Label [text]="item.desc" class="list-group-item-text" textWrap="true"></Label>
14-
</StackLayout>
5+
<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white">
6+
<template nsTemplateKey="header" let-header="item">
7+
<Label [text]="header.name" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
8+
</template>
9+
10+
<template nsTemplateKey="footer" let-footer="item">
11+
<Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label>
12+
</template>
13+
14+
<template nsTemplateKey="cell" let-country="item">
15+
<StackLayout class="list-group-item">
16+
<Label [text]="country.name" class="list-group-item-heading"></Label>
17+
<Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
1518
</StackLayout>
1619
</template>
1720
</ListView>
@@ -20,16 +23,19 @@
2023

2124
<GridLayout *tabItem="{title: 'Dividers'}">
2225
<!-- >> multi-line-grouped-borders-html -->
23-
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
24-
<template let-item="item">
25-
<StackLayout [ngSwitch]="checkType(item)">
26-
<Label *ngSwitchCase="'GroupTitle'" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"
27-
[text]="item.title"></Label>
28-
<Label *ngSwitchCase="'GroupFooter'" class="list-group-item" backgroundColor="gray" fontSize="12" [text]="item.description"></Label>
29-
<StackLayout *ngSwitchDefault class="list-group-item">
30-
<Label [text]="item.name" class="list-group-item-heading"></Label>
31-
<Label [text]="item.desc" class="list-group-item-text" textWrap="true"></Label>
32-
</StackLayout>
26+
<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="gray">
27+
<template nsTemplateKey="header" let-header="item">
28+
<Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
29+
</template>
30+
31+
<template nsTemplateKey="footer" let-footer="item">
32+
<Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label>
33+
</template>
34+
35+
<template nsTemplateKey="cell" let-country="item">
36+
<StackLayout class="list-group-item">
37+
<Label [text]="country.name" class="list-group-item-heading"></Label>
38+
<Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
3339
</StackLayout>
3440
</template>
3541
</ListView>
@@ -38,20 +44,23 @@
3844

3945
<GridLayout *tabItem="{title: 'Thumbnails'}">
4046
<!-- >> multi-line-grouped-thumbs-html -->
41-
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)">
42-
<template let-item="item">
43-
<StackLayout [ngSwitch]="checkType(item)">
44-
<Label *ngSwitchCase="'GroupTitle'" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"
45-
[text]="item.title"></Label>
46-
<Label *ngSwitchCase="'GroupFooter'" class="list-group-item" backgroundColor="gray" fontSize="12" [text]="item.description"></Label>
47-
<GridLayout *ngSwitchDefault class="list-group-item" rows="*" columns="auto, *">
48-
<Image col="0" [src]="item.imageSrc" class="thumb img-circle" verticalAlignment="top"></Image>
49-
<StackLayout col="1">
50-
<Label class="list-group-item-heading" [text]="item.name"></Label>
51-
<Label class="list-group-item-text" [text]="item.desc" textWrap="true"></Label>
52-
</StackLayout>
53-
</GridLayout>
54-
</StackLayout>
47+
<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="gray">
48+
<template nsTemplateKey="header" let-header="item">
49+
<Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
50+
</template>
51+
52+
<template nsTemplateKey="footer" let-footer="item">
53+
<Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label>
54+
</template>
55+
56+
<template nsTemplateKey="cell" let-country="item">
57+
<GridLayout class="list-group-item" rows="*" columns="auto, *">
58+
<Image col="0" [src]="country.imageSrc" class="thumb img-circle" verticalAlignment="top"></Image>
59+
<StackLayout col="1">
60+
<Label [text]="country.name" class="list-group-item-heading"></Label>
61+
<Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
62+
</StackLayout>
63+
</GridLayout>
5564
</template>
5665
</ListView>
5766
<!-- << multi-line-grouped-thumbs-html -->

‎app/common-screens-category/lists-category/multi-line-grouped/multi-line-grouped.component.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ChangeDetectionStrategy, OnInit } from "@angular/core";
22
import { ItemEventData } from "ui/list-view";
3-
import { mockedGroupDataArray } from "../mock-dataItems";
3+
import { mockedCounties } from "../mock-dataItems";
44

55
// >> multi-line-grouped-code
66
@Component({
@@ -11,16 +11,14 @@ import { mockedGroupDataArray } from "../mock-dataItems";
1111
export class MultiLineGroupedListViewExampleComponent implements OnInit {
1212
public countries: Array<any> = [];
1313

14-
ngOnInit() {
15-
for (let i = 0; i < mockedGroupDataArray.length; i++) {
16-
this.countries.push(mockedGroupDataArray[i]);
17-
}
14+
public templateSelector = (item: any, index: number, items: any) => {
15+
return item.type || "cell";
1816
}
1917

20-
checkType(value) {
21-
// get the class name e.g. GroupTitle or Country
22-
let className = value.constructor.name;
23-
return className;
18+
ngOnInit() {
19+
for (let i = 0; i < mockedCounties.length; i++) {
20+
this.countries.push(mockedCounties[i]);
21+
}
2422
}
2523

2624
onItemTapFirstList(args: ItemEventData) {

0 commit comments

Comments
 (0)