Skip to content

Commit c3f91bc

Browse files
elena-pelena-p
authored
Merge pull request #288 from NativeScript/update-listview-demo
chore: update 'listview' demo for nativescript-ui-listview v8.0.1
2 parents cfac9dc + 4652b77 commit c3f91bc

21 files changed

Lines changed: 270 additions & 42 deletions

‎listview/App_Resources/Android/src/main/res/values/styles.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<item name="colorPrimary">@color/ns_primary</item>
2727
<item name="colorPrimaryDark">@color/ns_primaryDark</item>
2828
<item name="colorAccent">@color/ns_accent</item>
29+
<item name="android:forceDarkAllowed">true</item>
2930

3031
</style>
3132

‎listview/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"nativescript": {
33
"id": "org.nativescript.demoangular",
44
"tns-android": {
5-
"version": "6.1.0"
5+
"version": "6.2.0"
66
},
77
"tns-ios": {
8-
"version": "6.1.0"
8+
"version": "6.2.0"
99
}
1010
},
1111
"description": "NativeScript UI ListView Angular Demo App",
@@ -21,13 +21,13 @@
2121
"@angular/platform-browser": "~8.2.0",
2222
"@angular/platform-browser-dynamic": "~8.2.0",
2323
"@angular/router": "~8.2.0",
24-
"nativescript-angular": "~8.2.0",
24+
"nativescript-angular": "~8.20.0",
2525
"nativescript-image": "~2.1.0",
2626
"nativescript-theme-core": "~1.0.4",
2727
"nativescript-ui-listview": "*",
2828
"reflect-metadata": "~0.1.12",
2929
"rxjs": "^6.4.0",
30-
"tns-core-modules": "^6.0.0",
30+
"tns-core-modules": "^6.2.0",
3131
"zone.js": "^0.9.1"
3232
},
3333
"devDependencies": {
@@ -43,8 +43,8 @@
4343
"mocha-multi-reporters": "^1.1.0",
4444
"mochawesome": "^3.1.1",
4545
"nativescript-dev-appium": "^6.0.0",
46-
"nativescript-dev-webpack": "^1.0.0",
47-
"tns-platform-declarations": "^6.1.1",
46+
"nativescript-dev-webpack": "^1.3.0",
47+
"tns-platform-declarations": "^6.2.0",
4848
"tslint": "~5.11.0",
4949
"typescript": "~3.5.3"
5050
}

‎listview/src/app/app-routing.module.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,20 @@ let APP_ROUTES: Routes = [
146146
"title": "Selection States"
147147
}
148148
},
149+
{
150+
path: "StylingItemSelectionComponent",
151+
loadChildren: '~/app/examples/listview-examples.module#ListViewExamplesModule',
152+
data: {
153+
"title": "Styling Single Selection"
154+
}
155+
},
156+
{
157+
path: "StylingSelectionMultipleComponent",
158+
loadChildren: '~/app/examples/listview-examples.module#ListViewExamplesModule',
159+
data: {
160+
"title": "Styling Multiple Selection"
161+
}
162+
},
149163
{
150164
path: "ListViewPullToRefreshComponent",
151165
loadChildren: '~/app/examples/listview-examples.module#ListViewExamplesModule',

‎listview/src/app/examples/item-selection/styling-item-selection.component.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.listItemStackLayout {
2+
padding-left: 16;
3+
}
4+
5+
.nameLabel {
6+
font-size: 20
7+
}
8+
9+
.descriptionLabel {
10+
font-size: 13;
11+
}
12+
13+
.red-transparent-selection-list {
14+
item-selected-background-color: red;
15+
background-color: transparent;
16+
color: white;
17+
}

‎listview/src/app/examples/item-selection/styling-item-selection.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<GridLayout backgroundColor="green" rows="*, auto" tkExampleTitle tkToggleNavButton>
2+
<RadListView class="red-transparent-selection-list" row="0" [items]="dataItems" selectionBehavior="Press" (itemSelected)="onItemSelected($event)" (itemSelecting)="onItemSelecting($event)" (itemDeselecting)="onItemDeselecting($event)" (itemDeselected)="onItemDeselected($event)">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout class="listItemStackLayout" orientation="vertical">
5+
<Label class="nameLabel" [text]="item.name"></Label>
6+
<Label class="descriptionLabel" [text]="item.description"></Label>
7+
</StackLayout>
8+
</ng-template>
9+
</RadListView>
10+
<Label [text]="selectedItems" textWrap="true" row="1"></Label>
11+
</GridLayout>

‎listview/src/app/examples/item-selection/styling-item-selection.component.ts‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { Component, OnInit } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../dataItem";
4+
import { DataItemService } from "../dataItem.service";
5+
import { ListViewEventData, RadListView } from "nativescript-ui-listview";
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: "tk-listview-item-selection",
10+
providers: [DataItemService],
11+
templateUrl: "styling-item-selection.component.html",
12+
styleUrls: ["styling-item-selection.component.css"]
13+
})
14+
export class StylingItemSelectionComponent implements OnInit {
15+
private _dataItems: ObservableArray<DataItem>;
16+
private _selectedItems: string;
17+
18+
constructor(private _dataItemService: DataItemService) {
19+
}
20+
21+
get dataItems(): ObservableArray<DataItem> {
22+
return this._dataItems;
23+
}
24+
25+
get selectedItems(): string {
26+
return this._selectedItems;
27+
}
28+
29+
ngOnInit() {
30+
this._dataItems = new ObservableArray(this._dataItemService.getNameEmailDataItems());
31+
this._selectedItems = "No Selected items.";
32+
}
33+
34+
public onItemSelected(args: ListViewEventData) {
35+
const listview = args.object as RadListView;
36+
const selectedItems = listview.getSelectedItems() as Array<DataItem>;
37+
let selectedTitles = "Selected items: ";
38+
for (let i = 0; i < selectedItems.length; i++) {
39+
selectedTitles += selectedItems[i] ? selectedItems[i].name : "";
40+
41+
if (i < selectedItems.length - 1) {
42+
selectedTitles += ", ";
43+
}
44+
}
45+
46+
this._selectedItems = selectedTitles;
47+
const selectedItem = this.dataItems.getItem(args.index);
48+
console.log("Item selected: " + (selectedItem && selectedItem.name));
49+
}
50+
51+
public onItemSelecting(args: ListViewEventData) {
52+
const listview = args.object as RadListView;
53+
const selectedItems = listview.getSelectedItems() as Array<DataItem>;
54+
let selectedTitles = "Selecting item: ";
55+
for (let i = 0; i < selectedItems.length; i++) {
56+
selectedTitles += selectedItems[i] ? selectedItems[i].name : "";
57+
58+
if (i < selectedItems.length - 1) {
59+
selectedTitles += ", ";
60+
}
61+
}
62+
63+
const selectedItem = this.dataItems.getItem(args.index);
64+
console.log("Item selecting: " + (selectedItem && selectedItem.name));
65+
}
66+
67+
public onItemDeselecting(args: ListViewEventData) {
68+
const listview = args.object as RadListView;
69+
const selectedItems = listview.getSelectedItems() as Array<DataItem>;
70+
let selectedTitles = "Deselecting item: ";
71+
for (let i = 0; i < selectedItems.length; i++) {
72+
selectedTitles += selectedItems[i] ? selectedItems[i].name : "";
73+
74+
if (i < selectedItems.length - 1) {
75+
selectedTitles += ", ";
76+
}
77+
}
78+
79+
const selectedItem = this.dataItems.getItem(args.index);
80+
console.log("Item deselecting: " + (selectedItem && selectedItem.name));
81+
}
82+
83+
public onItemDeselected(args: ListViewEventData) {
84+
const listview = args.object as RadListView;
85+
const selectedItems = listview.getSelectedItems() as Array<DataItem>;
86+
if (selectedItems.length > 0) {
87+
let selectedTitles = "Selected items: ";
88+
for (let i = 0; i < selectedItems.length; i++) {
89+
selectedTitles += selectedItems[i] ? selectedItems[i].name : "";
90+
91+
if (i < selectedItems.length - 1) {
92+
selectedTitles += ", ";
93+
}
94+
}
95+
96+
this._selectedItems = selectedTitles;
97+
} else {
98+
this._selectedItems = "No Selected items.";
99+
}
100+
101+
const deselectedItem = this.dataItems.getItem(args.index);
102+
console.log("Item deselected: " + (deselectedItem && deselectedItem.name));
103+
}
104+
}

‎listview/src/app/examples/item-selection/styling-selection-multiple.component.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* ios styles */
2+
.iosListItemStackLayout {
3+
padding-left: 50;
4+
}
5+
6+
.iosNameLabel {
7+
font-size: 20
8+
}
9+
10+
.iosDescriptionLabel {
11+
font-size: 13;
12+
}
13+
14+
/* Android styles */
15+
.androidListItemStackLayout {
16+
padding-left: 16;
17+
}
18+
19+
.androidNameLabel {
20+
font-size: 20
21+
}
22+
23+
.androidDescriptionLabel {
24+
font-size: 13;
25+
}
26+
27+
.red-transparent-selection-list {
28+
item-selected-background-color: red;
29+
background-color: transparent;
30+
color: white;
31+
}

‎listview/src/app/examples/item-selection/styling-selection-multiple.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<GridLayout backgroundColor="green" tkExampleTitle tkToggleNavButton>
2+
<RadListView class="red-transparent-selection-list" [items]="dataItems" selectionBehavior="Press" multipleSelection="true">
3+
<ng-template tkListItemTemplate let-item="item">
4+
<StackLayout ios:class="iosListItemStackLayout" android:class="androidListItemStackLayout">
5+
<Label ios:class="iosNameLabel" android:class="androidNameLabel" [text]="item.name"></Label>
6+
<Label ios:class="iosDescriptionLabel" android:class="androidDescriptionLabel" class="descriptionLabel" [text]="item.description"></Label>
7+
</StackLayout>
8+
</ng-template>
9+
</RadListView>
10+
</GridLayout>

‎listview/src/app/examples/item-selection/styling-selection-multiple.component.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, OnInit } from "@angular/core";
2+
import { ObservableArray } from "tns-core-modules/data/observable-array";
3+
import { DataItem } from "../dataItem";
4+
import { DataItemService } from "../dataItem.service";
5+
6+
@Component({
7+
moduleId: module.id,
8+
selector: "tk-listview-item-selection-multiple",
9+
providers: [DataItemService],
10+
templateUrl: "styling-selection-multiple.component.html",
11+
styleUrls: ["styling-selection-multiple.component.css"]
12+
})
13+
export class StylingSelectionMultipleComponent implements OnInit {
14+
private _dataItems: ObservableArray<DataItem>;
15+
16+
constructor(private _dataItemService: DataItemService) {
17+
}
18+
19+
get dataItems(): ObservableArray<DataItem> {
20+
return this._dataItems;
21+
}
22+
23+
ngOnInit() {
24+
this._dataItems = new ObservableArray(this._dataItemService.getNameEmailDataItems());
25+
}
26+
}

‎listview/src/app/examples/listview-examples.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { ListViewItemReorderHandleComponent } from './item-reorder/listview-item
2626
import { ListViewItemSelectionMultipleComponent } from './item-selection/listview-item-selection-multiple.component';
2727
import { ListViewItemSelectionProgrammaticComponent } from './item-selection/listview-item-selection-programmatic.component';
2828
import { ListViewItemSelectionComponent } from './item-selection/listview-item-selection.component';
29+
import { StylingSelectionMultipleComponent } from './item-selection/styling-selection-multiple.component';
30+
import { StylingItemSelectionComponent } from './item-selection/styling-item-selection.component';
2931
import { ListViewItemSeparatorComponent } from './item-separator/listview-item-separator.component';
3032
import { ListViewDynamicSizeAutoComponent } from './load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component';
3133
import { ListViewDynamicSizeManualComponent } from './load-on-demand/dynamic-size-manual/listview-dynamic-size-manual.component';
@@ -92,8 +94,10 @@ import { CommonDirectivesModule } from '../navigation/directives/common-directiv
9294
ListViewItemReorderComponent,
9395
ListViewItemReorderHandleComponent,
9496
ListViewItemSelectionMultipleComponent,
97+
StylingSelectionMultipleComponent,
9598
ListViewItemSelectionProgrammaticComponent,
9699
ListViewItemSelectionComponent,
100+
StylingItemSelectionComponent,
97101
ListViewItemSeparatorComponent,
98102
ListViewDynamicSizeAutoComponent,
99103
ListViewDynamicSizeManualComponent,

0 commit comments

Comments
 (0)