chore: update 'listview' demo for nativescript-ui-listview v6.3.2

ProgressNS · Jun 6, 2019 · 10bdb3b · 10bdb3b
1 parent 63142f3
commit 10bdb3b
Show file tree

Hide file tree

Showing 25 changed files with 58 additions and 65 deletions.
diff --git a/listview/package.json b/listview/package.json
@@ -13,28 +13,24 @@
   "readme": "README.md",
   "repository": "http://www.github.com/NativeScript/nativescript-ui-listview.git",
   "dependencies": {
-    "@angular/animations": "~7.2.0",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
-    "@angular/http": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
-    "nativescript-angular": "~7.2.0",
-    "nativescript-theme-core": "~1.0.4",
+    "@angular/animations": "~8.0.0",
+    "@angular/common": "~8.0.0",
+    "@angular/compiler": "~8.0.0",
+    "@angular/core": "~8.0.0",
+    "@angular/forms": "~8.0.0",
+    "@angular/platform-browser": "~8.0.0",
+    "@angular/platform-browser-dynamic": "~8.0.0",
+    "@angular/router": "~8.0.0",
+    "nativescript-angular": "~8.0.0",
     "nativescript-image": "~2.1.0",
+    "nativescript-theme-core": "~1.0.4",
     "nativescript-ui-listview": "*",
     "reflect-metadata": "~0.1.12",
     "rxjs": "~6.3.3",
     "tns-core-modules": "^5.0.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "~7.2.0",
-    "@nativescript/schematics": "~0.5.0",
-    "@ngtools/webpack": "~7.2.0",
     "@types/chai": "^4.0.2",
     "@types/mocha": "^2.2.41",
     "@types/node": "^7.0.5",
@@ -44,9 +40,10 @@
     "mocha-multi": "^1.0.1",
     "mochawesome": "^3.1.1",
     "nativescript-dev-appium": "5.0.0",
-    "nativescript-dev-typescript": "~0.9.0",
-    "nativescript-dev-webpack": "~0.22.0",
+    "nativescript-dev-typescript": "~0.10.0",
+    "nativescript-dev-webpack": "~0.24.0",
     "tns-platform-declarations": "^5.4.1",
-    "tslint": "~5.11.0"
+    "tslint": "~5.11.0",
+    "typescript": "~3.4.5"
   }
 }
diff --git a/listview/src/app/examples/filtering/listview-data-operations-filtering.component.ts b/listview/src/app/examples/filtering/listview-data-operations-filtering.component.ts
@@ -16,7 +16,7 @@ export class ListViewDataOperationsFilteringComponent implements OnInit {
     private _isEnabled: boolean;
     private _myFilteringFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         // >> listview-data-operations-filtering-angular

diff --git a/listview/src/app/examples/group-swipe-load-pull/listview-group-swipe-load-pull.component.ts b/listview/src/app/examples/group-swipe-load-pull/listview-group-swipe-load-pull.component.ts
@@ -19,7 +19,7 @@ export class ListViewGroupSwipeLoadPullComponent implements OnInit {
     private _loadMoreItemsCount = 2;
     private _groupByDay: (item: any) => any;
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) listViewComponent: RadListViewComponent;
 
     constructor(private _blogPostsService: BlogPostsService) {
     }

diff --git a/...xamples/grouping-collapsible/listview-data-operations-grouping-collapsible.component.html b/...xamples/grouping-collapsible/listview-data-operations-grouping-collapsible.component.html
@@ -1,5 +1,5 @@
 <GridLayout tkExampleTitle tkToggleNavButton rows="auto, *">
-    <RadListView [items]="dataItems" row="1" #myListView [groupingFunction]="myGroupingFunc" enableCollapsibleGroups="true" >
+    <RadListView [items]="dataItems" row="1" [groupingFunction]="myGroupingFunc" enableCollapsibleGroups="true" >
         <ng-template tkListItemTemplate let-item="item">
             <StackLayout>
                 <Label class="nameLabel" [text]="item.name"></Label>

diff --git a/.../examples/grouping-collapsible/listview-data-operations-grouping-collapsible.component.ts b/.../examples/grouping-collapsible/listview-data-operations-grouping-collapsible.component.ts
@@ -15,8 +15,6 @@ export class ListviewDataOperationsGroupingCollapsibleComponent implements OnIni
     private _dataItems: ObservableArray<DataItem>;
     private _myGroupingFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
-
     constructor(private _dataItemService: DataItemService) {
         this.myGroupingFunc = (item: DataItem) => {
             return item.category;

diff --git a/listview/src/app/examples/grouping-scroll-to/grouping-scroll-to.component.ts b/listview/src/app/examples/grouping-scroll-to/grouping-scroll-to.component.ts
@@ -16,7 +16,7 @@ export class ListViewDataOperationsGroupingScrollToComponent implements OnInit {
     private _isEnabled: boolean;
     private _myGroupingFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         this.myGroupingFunc = (item: DataItem) => {

diff --git a/listview/src/app/examples/grouping-with-header-footer/with-header-footer.component.ts b/listview/src/app/examples/grouping-with-header-footer/with-header-footer.component.ts
@@ -16,7 +16,7 @@ export class ListViewDataOperationsGroupingHeaderFooterComponent implements OnIn
     private _isEnabled: boolean;
     private _myGroupingFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         this.myGroupingFunc = (item: DataItem) => {

diff --git a/listview/src/app/examples/grouping/listview-data-operations-grouping.component.ts b/listview/src/app/examples/grouping/listview-data-operations-grouping.component.ts
@@ -16,7 +16,7 @@ export class ListViewDataOperationsGroupingComponent implements OnInit {
     private _isEnabled: boolean;
     private _myGroupingFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         // >> listview-data-operations-grouping-angular

diff --git a/...xamples/header-footer/change-size-at-runtime/listview-change-size-at-runtime.component.ts b/...xamples/header-footer/change-size-at-runtime/listview-change-size-at-runtime.component.ts
@@ -33,7 +33,7 @@ export class ListviewChangeSizeAtRuntimeComponent implements OnInit {
         }, 2000);
     }
 
-    @ViewChild("listView") listViewComponent: RadListViewComponent;
+    @ViewChild("listView", { read: RadListViewComponent, static: true }) listViewComponent: RadListViewComponent;
 
     get dataItems(): ObservableArray<DataItem> {
         return this._dataItems;

diff --git a/listview/src/app/examples/item-layouts/listview-item-layouts-runtime.component.ts b/listview/src/app/examples/item-layouts/listview-item-layouts-runtime.component.ts
@@ -20,7 +20,7 @@ export class ListViewItemLayoutsRuntimeComponent implements OnInit {
     constructor(private _changeDetectionRef: ChangeDetectorRef, private _dataItemService: DataItemService) {
     }
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this._dataItems = new ObservableArray<DataItem>(this._dataItemService.getStaggeredItems());
@@ -33,7 +33,7 @@ export class ListViewItemLayoutsRuntimeComponent implements OnInit {
 
     public changeToLinear(args) {
         const layout = new ListViewLinearLayout();
-        this.listViewComponent.listView.listViewLayout = layout;
+        this.myListViewComponent.listView.listViewLayout = layout;
     }
 
     public changeToGrid(args) {
@@ -43,12 +43,12 @@ export class ListViewItemLayoutsRuntimeComponent implements OnInit {
         }
 
         layout.spanCount = 2;
-        this.listViewComponent.listView.listViewLayout = layout;
+        this.myListViewComponent.listView.listViewLayout = layout;
     }
 
     public changeToStaggered(args) {
         const layout = new ListViewStaggeredLayout();
         layout.spanCount = 3;
-        this.listViewComponent.listView.listViewLayout = layout;
+        this.myListViewComponent.listView.listViewLayout = layout;
     }
 }
diff --git a/listview/src/app/examples/item-selection/listview-item-selection-programmatic.component.ts b/listview/src/app/examples/item-selection/listview-item-selection-programmatic.component.ts
@@ -20,7 +20,7 @@ export class ListViewItemSelectionProgrammaticComponent implements OnInit {
     constructor(private _dataItemService: DataItemService) {
     }
 
-    @ViewChild('myRadListView') listView: RadListViewComponent;
+    @ViewChild('myRadListView', { read: RadListViewComponent, static: false }) listViewComponent: RadListViewComponent;
 
     get dataItems(): ObservableArray<DataItem> {
         return this._dataItems;
@@ -47,19 +47,19 @@ export class ListViewItemSelectionProgrammaticComponent implements OnInit {
     }
 
     public onSelectItemAtTap() {
-        this.listView.listView.selectItemAt(Number(this.txtSelectItemIndex));
+        this.listViewComponent.listView.selectItemAt(Number(this.txtSelectItemIndex));
     }
 
     public onDeselectItemAtTap() {
-        this.listView.listView.deselectItemAt(Number(this.txtDeselectItemIndex));
+        this.listViewComponent.listView.deselectItemAt(Number(this.txtDeselectItemIndex));
     }
 
     public onSelectAllTap() {
-        this.listView.listView.selectAll();
+        this.listViewComponent.listView.selectAll();
     }
 
     public onDeselectAllTap() {
-        this.listView.listView.deselectAll();
+        this.listViewComponent.listView.deselectAll();
     }
 }
 // << angular-listview-item-selection-programmatic-component
diff --git a/...fixed-size-auto-with-small-source/listview-fixed-size-auto-with-small-source.component.ts b/...fixed-size-auto-with-small-source/listview-fixed-size-auto-with-small-source.component.ts
@@ -26,7 +26,7 @@ export class ListViewFixedSizeAutoWithSmallSourceComponent implements OnInit {
         this._allItems = serverPeopleCollection.people.slice();
     }
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: true }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this.layout = new ListViewLinearLayout();

diff --git a/...mples/multiple-operations-with-swipe/listview-multiple-operations-with-swipe.component.ts b/...mples/multiple-operations-with-swipe/listview-multiple-operations-with-swipe.component.ts
@@ -24,7 +24,7 @@ export class ListViewDataOperationsMultipleWithSwipeComponent implements OnInit
     private _mySortingFunc: (item: any, otherItem: any) => number;
     private _myFilteringFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         this.myGroupingFunc = (item: DataItem) => {

diff --git a/listview/src/app/examples/multiple-operations/listview-data-operations-multiple.component.ts b/listview/src/app/examples/multiple-operations/listview-data-operations-multiple.component.ts
@@ -22,7 +22,7 @@ export class ListViewDataOperationsMultipleComponent implements OnInit {
     private _mySortingFunc: (item: any, otherItem: any) => number;
     private _myFilteringFunc: (item: any) => any;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         this.myGroupingFunc = (item: DataItem) => {

diff --git a/...rc/app/examples/pull-to-refresh/customize/listview-pull-to-refresh-customize.component.ts b/...rc/app/examples/pull-to-refresh/customize/listview-pull-to-refresh-customize.component.ts
@@ -22,16 +22,16 @@ export class ListViewPullToRefreshCustomizeComponent implements OnInit {
     constructor(private _changeDetectionRef: ChangeDetectorRef) {
     }
 
-    @ViewChild("listView") listViewComponent: RadListViewComponent;
+    @ViewChild("listView", { read: RadListViewComponent, static: true }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this.initDataItems();
         this._changeDetectionRef.detectChanges();
-        if (this.listViewComponent && this.listViewComponent.listView) {
+        if (this.myListViewComponent && this.myListViewComponent.listView) {
             let style = new PullToRefreshStyle();
             style.indicatorColor = new Color("red");
             style.indicatorBackgroundColor = new Color("blue");
-            this.listViewComponent.listView.pullToRefreshStyle = style;
+            this.myListViewComponent.listView.pullToRefreshStyle = style;
         }
     }
 

diff --git a/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-horizontal.component.ts b/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-horizontal.component.ts
@@ -36,7 +36,7 @@ export class ListViewScrollToIndexHorizontalComponent extends OptionsExampleBase
         this.set("myScrollPosition", this._options[selectedIndex]);
     }
 
-    @ViewChild('myRadListView') listViewComponent: RadListViewComponent;
+    @ViewChild('myRadListView', { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     get dataItems(): ObservableArray<DataItem> {
         return this._dataItems;
@@ -47,7 +47,7 @@ export class ListViewScrollToIndexHorizontalComponent extends OptionsExampleBase
     }
 
     public onTap() {
-        this.listViewComponent.listView.scrollToIndex(50, false, this.get('myScrollPosition'));
+        this.myListViewComponent.listView.scrollToIndex(50, false, this.get('myScrollPosition'));
     }
 
     public onNavigatingTo(args) {

diff --git a/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-initial.component.html b/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-initial.component.html
@@ -1,6 +1,6 @@
 <GridLayout rows="auto, *" backgroundColor="lightgray" tkExampleTitle tkToggleNavButton>
     <Label class="topLabel" text="RadListView is initially scrolled so that 'item 20' is visible" textWrap="true"></Label>
-    <RadListView #myRadListView [items]="dataItems" row="1" (dataPopulated)="onDataPopulated($event)" android:backgroundColor="white">
+    <RadListView [items]="dataItems" row="1" (dataPopulated)="onDataPopulated($event)" android:backgroundColor="white">
         <ng-template tkListItemTemplate let-item="item">
             <Label class="labelNameInitialScroll" [text]="item.name" marginLeft="20"></Label>
         </ng-template>

diff --git a/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-initial.component.ts b/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-initial.component.ts
@@ -28,8 +28,6 @@ export class ListViewScrollToIndexInitialComponent extends OptionsExampleBase im
         super();
     }
 
-    @ViewChild('myRadListView') listViewComponent: RadListViewComponent;
-
     get dataItems(): ObservableArray<DataItem> {
         return this._dataItems;
     }

diff --git a/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-vertical.component.ts b/listview/src/app/examples/scroll-to-index/listview-scroll-to-index-vertical.component.ts
@@ -39,10 +39,10 @@ export class ListViewScrollToIndexVerticalComponent extends OptionsExampleBase i
     }
 
     // >> angular-listview-scroll-to-index
-    @ViewChild('myRadListView') listViewComponent: RadListViewComponent;
+    @ViewChild('myRadListView', { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     public onTap() {
-        this.listViewComponent.listView.scrollToIndex(50, false, this.get('myScrollPosition'));
+        this.myListViewComponent.listView.scrollToIndex(50, false, this.get('myScrollPosition'));
     }
     // << angular-listview-scroll-to-index
 

diff --git a/listview/src/app/examples/sorting/listview-data-operations-sorting.component.ts b/listview/src/app/examples/sorting/listview-data-operations-sorting.component.ts
@@ -22,7 +22,7 @@ export class ListViewDataOperationsSortingComponent implements OnInit {
     private _isEnabled: boolean;
     private _mySortingFunc: (item: any, otherItem: any) => number;
 
-    @ViewChild("myListView") myListViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     constructor(private _dataItemService: DataItemService) {
         // >> listview-data-operations-sorting-angular

diff --git a/listview/src/app/examples/swipe-actions/listview-swipe-actions-multiple.component.ts b/listview/src/app/examples/swipe-actions/listview-swipe-actions-multiple.component.ts
@@ -28,7 +28,7 @@ export class ListViewSwipeActionsMultipleComponent implements OnInit {
         return this._dataItems;
     }
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this._dataItems = new ObservableArray(this._dataItemService.getPostDataItems());
@@ -98,13 +98,13 @@ export class ListViewSwipeActionsMultipleComponent implements OnInit {
 
     public onLeftSwipeClick(args: EventData) {
         let itemView = args.object as View;
-        console.log("Button clicked: " + itemView.id + " for item with index: " + this.listViewComponent.listView.items.indexOf(itemView.bindingContext));
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        console.log("Button clicked: " + itemView.id + " for item with index: " + this.myListViewComponent.listView.items.indexOf(itemView.bindingContext));
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
     }
 
     public onRightSwipeClick(args: EventData) {
         let itemView = args.object as View;
-        console.log("Button clicked: " + itemView.id + " for item with index: " + this.listViewComponent.listView.items.indexOf(itemView.bindingContext));
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        console.log("Button clicked: " + itemView.id + " for item with index: " + this.myListViewComponent.listView.items.indexOf(itemView.bindingContext));
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
     }
 }
diff --git a/listview/src/app/examples/swipe-actions/listview-swipe-actions-thresholds.component.ts b/listview/src/app/examples/swipe-actions/listview-swipe-actions-thresholds.component.ts
@@ -26,7 +26,7 @@ export class ListViewSwipeActionsThresholdsComponent implements OnInit {
         return this._dataItems;
     }
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this._dataItems = new ObservableArray(this._dataItemService.getPostDataItems());
@@ -96,7 +96,7 @@ export class ListViewSwipeActionsThresholdsComponent implements OnInit {
 
     public onLeftSwipeClick(args: ListViewEventData) {
         console.log("Left swipe click");
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
     }
 
     public onRightSwipeClick(args) {

diff --git a/listview/src/app/examples/swipe-actions/listview-swipe-actions.component.ts b/listview/src/app/examples/swipe-actions/listview-swipe-actions.component.ts
@@ -25,7 +25,7 @@ export class ListViewSwipeActionsComponent implements OnInit {
         return this._dataItems;
     }
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this._dataItems = new ObservableArray(this._dataItemService.getPostDataItems());
@@ -64,7 +64,7 @@ export class ListViewSwipeActionsComponent implements OnInit {
     // >> angular-listview-swipe-action-handlers
     public onLeftSwipeClick(args: ListViewEventData) {
         console.log("Left swipe click");
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
     }
 
     public onRightSwipeClick(args) {
@@ -76,7 +76,7 @@ export class ListViewSwipeActionsComponent implements OnInit {
     public onLayoutTap(args) {
         const message = "Tap on Layout for item: " + (<DataItem>args.object.bindingContext).name;
         console.log(message);
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
         let lbl = <Label>topmost().getViewById("lbl");
         lbl.text += " \n" + message;
     }

diff --git a/listview/src/app/examples/swipe-actions/listview-swipe-disable.component.ts b/listview/src/app/examples/swipe-actions/listview-swipe-disable.component.ts
@@ -42,7 +42,7 @@ export class ListViewSwipeDisableComponent implements OnInit {
         this._currentStatus = value;
     }
 
-    @ViewChild("myListView") listViewComponent: RadListViewComponent;
+    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;
 
     ngOnInit() {
         this._dataItems = new ObservableArray(this._dataItemService.getPostDataItems());
@@ -75,7 +75,7 @@ export class ListViewSwipeDisableComponent implements OnInit {
 
     public onLeftSwipeClick(args: ListViewEventData) {
         console.log("Left swipe click");
-        this.listViewComponent.listView.notifySwipeToExecuteFinished();
+        this.myListViewComponent.listView.notifySwipeToExecuteFinished();
     }
 
     public onRightSwipeClick(args) {