Skip to content

Commit 445fb1b

Browse files
linilini
authored
Merge pull request #295 from NativeScript/update-listview-demo
chore: update 'listview' demo for nativescript-ui-listview v8.1.0
2 parents d47e3aa + 0f103ff commit 445fb1b

8 files changed

Lines changed: 46 additions & 37 deletions

File tree

‎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.2.0"
5+
"version": "6.5.0"
66
},
77
"tns-ios": {
8-
"version": "6.2.0"
8+
"version": "6.5.0"
99
}
1010
},
1111
"description": "NativeScript UI ListView Angular Demo App",
@@ -27,7 +27,7 @@
2727
"nativescript-ui-listview": "*",
2828
"reflect-metadata": "~0.1.12",
2929
"rxjs": "^6.4.0",
30-
"tns-core-modules": "^6.2.0",
30+
"tns-core-modules": "^6.5.0",
3131
"zone.js": "^0.9.1"
3232
},
3333
"devDependencies": {
@@ -42,9 +42,9 @@
4242
"mocha-junit-reporter": "^1.18.0",
4343
"mocha-multi-reporters": "^1.1.0",
4444
"mochawesome": "^3.1.1",
45-
"nativescript-dev-appium": "^6.0.0",
46-
"nativescript-dev-webpack": "^1.3.0",
47-
"tns-platform-declarations": "^6.2.0",
45+
"nativescript-dev-appium": "next",
46+
"nativescript-dev-webpack": "^1.5.1",
47+
"tns-platform-declarations": "^6.4.2",
4848
"tslint": "~5.11.0",
4949
"typescript": "~3.5.3"
5050
}

‎listview/src/app/examples/item-layouts/listview-item-layouts-grid.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</ng-template>
1414

1515
<!-- >> angular-listview-item-layouts-grid -->
16-
<ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="250" spanCount="2"></ListViewGridLayout>
16+
<ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="250" dynamicItemSize="false" spanCount="2"></ListViewGridLayout>
1717
<!-- << angular-listview-item-layouts-grid -->
1818
</RadListView>
19-
</GridLayout>
19+
</GridLayout>

‎listview/src/app/examples/load-on-demand/dynamic-size-auto/listview-dynamic-size-auto.component.ts‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,39 +27,48 @@ export class ListViewDynamicSizeAutoComponent implements OnInit {
2727
this.initDataItems();
2828
this._changeDetectionRef.detectChanges();
2929
this._dataItems = new ObservableArray<DataItem>();
30-
this.addMoreItemsFromSource(6);
30+
this.addMoreItemsFromSource(6, null);
3131
}
3232

3333
public get dataItems(): ObservableArray<DataItem> {
3434
return this._dataItems;
3535
}
36-
public addMoreItemsFromSource(chunkSize: number) {
36+
public addMoreItemsFromSource(chunkSize: number, listView: RadListView) {
3737
let newItems = this._sourceDataItems.splice(0, chunkSize);
3838
this.dataItems.push(newItems);
39+
40+
if (listView) {
41+
// Call the optimized function for on-demand loading finished.
42+
// (with 0 because the ObservableArray has already
43+
// notified about the inserted items)
44+
listView.notifyAppendItemsOnDemandFinished(0, this._sourceDataItems.length === 0);
45+
}
3946
}
4047

4148
public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
4249
const that = new WeakRef(this);
4350
const listView: RadListView = args.object;
4451
if (this._sourceDataItems.length > 0) {
4552
setTimeout(function () {
46-
that.get().addMoreItemsFromSource(2);
47-
listView.notifyLoadOnDemandFinished();
48-
}, 1500);
53+
that.get().addMoreItemsFromSource(20, listView);
54+
}, 0);
4955
} else {
5056
args.returnValue = false;
51-
listView.notifyLoadOnDemandFinished(true);
57+
listView.notifyAppendItemsOnDemandFinished(0, true);
5258
}
5359
}
5460

5561
private initDataItems() {
5662
this._sourceDataItems = new ObservableArray<DataItem>();
57-
for (let i = 0; i < posts.names.length; i++) {
58-
if (androidApplication) {
59-
this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
60-
}
61-
else {
62-
this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
63+
// Multiply items in JSON to simulate a far bigger data source
64+
for (let mult = 0; mult < 100; mult++) {
65+
for (let i = 0; i < posts.names.length; i++) {
66+
if (androidApplication) {
67+
this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i].toLowerCase()));
68+
}
69+
else {
70+
this._sourceDataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + posts.images[i]));
71+
}
6372
}
6473
}
6574
}

‎listview/src/app/examples/load-on-demand/fixed-size-auto-with-small-source/listview-fixed-size-auto-with-small-source.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
<Button text="Manual" (tap)="onChangeManual()" class="action-button"></Button>
55
<Button text="None" (tap)="onChangeNone()" class="action-button"></Button>
66
</StackLayout>
7-
8-
<RadListView #myListView
9-
row="1"
10-
[items]="dataItems"
11-
loadOnDemandMode="Manual"
12-
(loadMoreDataRequested)="onLoadMoreDataRequested($event)"
13-
pullToRefresh="true"
7+
8+
<RadListView #myListView
9+
row="1"
10+
[items]="dataItems"
11+
loadOnDemandMode="Manual"
12+
(loadMoreDataRequested)="onLoadMoreDataRequested($event)"
13+
pullToRefresh="true"
1414
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
1515
<ng-template tkListItemTemplate let-item="item">
1616
<StackLayout class="itemTemplateStackLayout" orientation="vertical">
@@ -24,6 +24,6 @@
2424
</StackLayout>
2525
</StackLayout>
2626
</ng-template>
27-
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120" itemInsertAnimation="Fade" itemDeleteAnimation="Fade"></ListViewLinearLayout>
27+
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120" dynamicItemSize="false" itemInsertAnimation="Fade" itemDeleteAnimation="Fade"></ListViewLinearLayout>
2828
</RadListView>
29-
</GridLayout>
29+
</GridLayout>

‎listview/src/app/examples/load-on-demand/fixed-size-auto/listview-fixed-size-auto.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
</StackLayout>
1515
</ng-template>
1616

17-
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
17+
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120" dynamicItemSize="false"></ListViewLinearLayout>
1818
</RadListView>
19-
</GridLayout>
19+
</GridLayout>

‎listview/src/app/examples/load-on-demand/fixed-size-manual/listview-fixed-size-manual.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</StackLayout>
1717
</ng-template>
1818

19-
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
19+
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120" dynamicItemSize="false"></ListViewLinearLayout>
2020

2121
<div *tkIfIOS>
2222
<!-- >> listview-load-on-demand-custom-view -->
@@ -26,4 +26,4 @@
2626
<!-- << listview-load-on-demand-custom-view -->
2727
</div>
2828
</RadListView>
29-
</GridLayout>
29+
</GridLayout>

‎listview/src/app/examples/scroll-to-index/listview-scroll-to-index-initial.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
<ng-template tkListItemTemplate let-item="item">
55
<Label class="labelNameInitialScroll" [text]="item.name" marginLeft="20"></Label>
66
</ng-template>
7-
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="50"></ListViewLinearLayout>
7+
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="50" dynamicItemSize="false"></ListViewLinearLayout>
88
</RadListView>
9-
</GridLayout>
9+
</GridLayout>

‎listview/src/app/examples/scroll-to-index/listview-scroll-to-index-vertical.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
<ng-template tkListItemTemplate let-item="item">
1313
<Label class="labelName" [text]="item.name"></Label>
1414
</ng-template>
15-
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="50"></ListViewLinearLayout>
15+
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="50" dynamicItemSize="false"></ListViewLinearLayout>
1616
</RadListView>
17-
</GridLayout>
17+
</GridLayout>

0 commit comments

Comments
 (0)