Skip to content

Commit 7b57f64

Browse files
tsonevntsonevn
authored
Merge pull request #132 from NativeScript/niliev/list-templates
list views multiple item templates implemented
2 parents 4bc7921 + cdc2c8c commit 7b57f64

File tree

12 files changed

+188
-246
lines changed

12 files changed

+188
-246
lines changed

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

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
/* tslint:disable:max-line-length */
2-
export class GroupTitle {
3-
constructor(public title: string) { }
4-
}
5-
62
let mockedDescription = "Cras ut turpis mollis, vestibulum leo a, eleifend enim. Nam rutrum justo vestibulum dignissim tempor. Cras ac consequat ante. Nullam malesuada vulputate leo fringilla consectetur. In ligula felis, pharetra nec lacus ornare, laoreet pellentesque odio.";
7-
83
let mockedDescriptionType2 = "Nunc vel augue quam. Phasellus pharetra lobortis nulla, at tincidunt augue consectetur sit amet. Praesent eget tellus diam. Suspendisse potenti. Praesent commodo lacinia consectetur. Pellentesque lacinia accumsan semper.";
9-
104
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.";
11-
125
let mockedDescriptionType4 = "Donec dictum tortor leo, ac pharetra leo fringilla vitae. Cras pellentesque ac arcu sed auctor.";
136

147
export class Country {
158
constructor(public name: string, public imageSrc: string, public continent: string, public desc: string) { }
169
}
1710

18-
export class GroupFooter {
19-
constructor(public description: string) { }
20-
}
21-
2211
export let mockedDataArray = [
2312
new Country("Australia", "~/common-screens-category/lists-category/images/flags/au.png", "Australia", mockedDescription),
2413
new Country("Belgium", "~/common-screens-category/lists-category/images/flags/be.png", "Europe", mockedDescriptionType2),
@@ -38,27 +27,4 @@ export let mockedDataArray = [
3827
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
3928
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
4029
];
41-
export let mockedGroupDataArray = [
42-
new GroupTitle("Asia"),
43-
new Country("China", "~/common-screens-category/lists-category/images/flags/cn.png", "Asia", mockedDescriptionType4),
4430

45-
new GroupTitle("Europe"),
46-
new Country("Belgium", "~/common-screens-category/lists-category/images/flags/be.png", "Europe", mockedDescriptionType2),
47-
new Country("Bulgaria", "~/common-screens-category/lists-category/images/flags/bg.png", "Europe", mockedDescription),
48-
new Country("Switzerland", "~/common-screens-category/lists-category/images/flags/ch.png", "Europe", mockedDescriptionType2),
49-
new Country("Czech Republic", "~/common-screens-category/lists-category/images/flags/cz.png", "Europe", mockedDescription),
50-
new Country("Germany", "~/common-screens-category/lists-category/images/flags/de.png", "Europe", mockedDescription),
51-
new Country("Spain", "~/common-screens-category/lists-category/images/flags/es.png", "Europe", mockedDescriptionType2),
52-
new Country("Croatia", "~/common-screens-category/lists-category/images/flags/hr.png", "Europe", mockedDescription),
53-
new Country("Hungary", "~/common-screens-category/lists-category/images/flags/hu.png", "Europe", mockedDescriptionType2),
54-
new Country("Italy", "~/common-screens-category/lists-category/images/flags/it.png", "Europe", mockedDescriptionType4),
55-
new Country("Romania", "~/common-screens-category/lists-category/images/flags/ro.png", "Europe", mockedDescriptionType2),
56-
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
57-
58-
new GroupTitle("North America"),
59-
new Country("Canada", "~/common-screens-category/lists-category/images/flags/ca.png", "North America", mockedDescriptionType3),
60-
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
61-
new Country("Jamaica", "~/common-screens-category/lists-category/images/flags/jm.png", "North America", mockedDescription),
62-
63-
new GroupFooter("all countries loaded!")
64-
];

‎app/common-screens-category/lists-category/cards/cards-listview.component.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
2-
32
<GridLayout *tabItem="{title: 'Basic cards list'}">
43
<!-- >> ext-listview-cards-lines-html -->
54
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
@@ -15,8 +14,6 @@
1514
</ListView>
1615
<!-- << ext-listview-cards-lines-html -->
1716
</GridLayout>
18-
19-
2017
<GridLayout *tabItem="{title: 'Thumbnails'}">
2118
<!-- >> ext-listview-thumbs-cards-lines-html -->
2219
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)" >
@@ -28,7 +25,6 @@
2825
<Label row="1" col="0" class="list-group-item-text" [text]="'Continent: '+country.continent "></Label>
2926
</GridLayout>
3027
</StackLayout>
31-
3228
</template>
3329
</ListView>
3430
<!-- << ext-listview-thumbs-cards-lines-html -->

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

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/* tslint:disable:max-line-length */
2-
export class GroupTitle {
3-
constructor(public title: string) { }
2+
export class Header {
3+
constructor(public name: string, public type: string, public imageSrc?: string, public desc?: string) { }
44
}
55

6-
let mockedDescription = "Cras ut turpis mollis, vestibulum leo a, eleifend enim. Nam rutrum justo vestibulum dignissim tempor. Cras ac consequat ante. Nullam malesuada vulputate leo fringilla consectetur. In ligula felis, pharetra nec lacus ornare, laoreet pellentesque odio.";
7-
let mockedDescriptionType2 = "Nunc vel augue quam. Phasellus pharetra lobortis nulla, at tincidunt augue consectetur sit amet. Praesent eget tellus diam. Suspendisse potenti. Praesent commodo lacinia consectetur. Pellentesque lacinia accumsan semper.";
8-
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.";
9-
let mockedDescriptionType4 = "Donec dictum tortor leo, ac pharetra leo fringilla vitae. Cras pellentesque ac arcu sed auctor.";
6+
export class Footer {
7+
constructor(public name: string, public type: string, public imageSrc?: string, public desc?: string) { }
8+
}
109

1110
export class Country {
1211
constructor(public name: string, public imageSrc: string, public continent: string, public desc: string) { }
1312
}
1413

15-
export class GroupFooter {
16-
constructor(public description: string) { }
17-
}
14+
let mockedDescription = "Cras ut turpis mollis, vestibulum leo a, eleifend enim. Nam rutrum justo vestibulum dignissim tempor. Cras ac consequat ante. Nullam malesuada vulputate leo fringilla consectetur. In ligula felis, pharetra nec lacus ornare, laoreet pellentesque odio.";
15+
let mockedDescriptionType2 = "Nunc vel augue quam. Phasellus pharetra lobortis nulla, at tincidunt augue consectetur sit amet. Praesent eget tellus diam. Suspendisse potenti. Praesent commodo lacinia consectetur. Pellentesque lacinia accumsan semper.";
16+
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.";
17+
let mockedDescriptionType4 = "Donec dictum tortor leo, ac pharetra leo fringilla vitae. Cras pellentesque ac arcu sed auctor.";
1818

1919
export let mockedDataArray = [
2020
new Country("Australia", "~/common-screens-category/lists-category/images/flags/au.png", "Australia", mockedDescription),
@@ -35,11 +35,11 @@ export let mockedDataArray = [
3535
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
3636
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
3737
];
38-
export let mockedGroupDataArray = [
39-
new GroupTitle("Asia"),
40-
new Country("China", "~/common-screens-category/lists-category/images/flags/cn.png", "Asia", mockedDescriptionType4),
4138

42-
new GroupTitle("Europe"),
39+
export let mockedCounties = [
40+
new Header("Asia", "header"),
41+
new Country("China", "~/common-screens-category/lists-category/images/flags/cn.png", "Asia", mockedDescriptionType4),
42+
new Header("Europe", "header"),
4343
new Country("Belgium", "~/common-screens-category/lists-category/images/flags/be.png", "Europe", mockedDescriptionType2),
4444
new Country("Bulgaria", "~/common-screens-category/lists-category/images/flags/bg.png", "Europe", mockedDescription),
4545
new Country("Switzerland", "~/common-screens-category/lists-category/images/flags/ch.png", "Europe", mockedDescriptionType2),
@@ -51,11 +51,9 @@ export let mockedGroupDataArray = [
5151
new Country("Italy", "~/common-screens-category/lists-category/images/flags/it.png", "Europe", mockedDescriptionType4),
5252
new Country("Romania", "~/common-screens-category/lists-category/images/flags/ro.png", "Europe", mockedDescriptionType2),
5353
new Country("Russia", "~/common-screens-category/lists-category/images/flags/ru.png", "Europe", mockedDescriptionType4),
54-
55-
new GroupTitle("North America"),
54+
new Header("North America", "header"),
5655
new Country("Canada", "~/common-screens-category/lists-category/images/flags/ca.png", "North America", mockedDescriptionType3),
5756
new Country("United States", "~/common-screens-category/lists-category/images/flags/us.png", "North America", mockedDescriptionType3),
5857
new Country("Jamaica", "~/common-screens-category/lists-category/images/flags/jm.png", "North America", mockedDescription),
59-
60-
new GroupFooter("all countries loaded!")
58+
new Footer("all countries loaded!", "footer")
6159
];

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
2-
32
<GridLayout *tabItem="{title: 'Bigger thumbs on the left'}">
43
<!-- >> multi-line-big-left-html -->
54
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" (setupItemView)="onSetupItemView($event)">
@@ -15,7 +14,6 @@
1514
</ListView>
1615
<!-- << multi-line-big-left-html -->
1716
</GridLayout>
18-
1917
<GridLayout *tabItem="{title: 'Bigger thumbs on the right'}">
2018
<!-- >> multi-line-big-right-html -->
2119
<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)" (setupItemView)="onSetupItemView($event)">
@@ -31,23 +29,25 @@
3129
</ListView>
3230
<!-- << multi-line-big-right-html -->
3331
</GridLayout>
34-
3532
<GridLayout *tabItem="{title: 'Bigger thumbs (grouped lists)'}">
3633
<!-- >> 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>
34+
<ListView [items]="groupedCountries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white">
35+
<template nsTemplateKey="header" let-header="item">
36+
<Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
37+
</template>
38+
39+
<template nsTemplateKey="footer" let-footer="item">
40+
<Label [text]="footer.name" class="list-group-item" backgroundColor="gray" fontSize="12"></Label>
41+
</template>
42+
43+
<template nsTemplateKey="cell" let-country="item">
44+
<GridLayout class="list-group-item" rows="*" columns="*, auto">
45+
<StackLayout col="0">
46+
<Label [text]="country.name" class="list-group-item-heading"></Label>
47+
<Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
48+
</StackLayout>
49+
<Image col="1" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
50+
</GridLayout>
5151
</template>
5252
</ListView>
5353
<!-- << 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

0 commit comments

Comments
 (0)