chore: update 'autocomplete' demo for nativescript-ui-autocomplete v4…

….0.0
ProgressNS · Mar 12, 2019 · 0ef3ec3 · 0ef3ec3
1 parent 21eaa9f
commit 0ef3ec3
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 51 deletions.
diff --git a/autocomplete/README.md b/autocomplete/README.md
@@ -1,3 +1,7 @@
-# AutoComplete NativeScript Vanilla demo application
+# Demo application
 
-This application showcases scenarios of using the `RadAutoCompleteTextView` inside a TypeScript NativeScript Vanilla application.
+This is a demo application that showcases the plugin in action.
+
+# Running the application
+
+If you are coming here for the first time after cloning the repository make sure to build the plugin's code located in the `src` folder. To build it simply run the `npm run postclone` scripts in `src`. After that you can use the NativeScripty CLI commands like `tns run` as usual.
diff --git a/autocomplete/app/app-root.xml b/autocomplete/app/app-root.xml
@@ -0,0 +1,2 @@
+<Frame defaultPage="navigation/category-list-page">
+</Frame>
diff --git a/autocomplete/app/app.ts b/autocomplete/app/app.ts
@@ -1,2 +1,2 @@
 import * as application from 'tns-core-modules/application';
-application.start({ moduleName: "navigation/category-list-page" });
+application.run({ moduleName: "app-root" });
diff --git a/autocomplete/app/examples/completion-mode/autocomplete-completion-mode-model.ts b/autocomplete/app/examples/completion-mode/autocomplete-completion-mode-model.ts
@@ -1,9 +1,9 @@
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, RadAutoCompleteTextView, AutoCompleteLayoutMode } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 
 export class ViewModel extends Observable {
-    private autocomplete;
+    private autocomplete: RadAutoCompleteTextView;
     private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
         "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
         "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
@@ -13,7 +13,7 @@ export class ViewModel extends Observable {
     constructor(args) {
         super();
         const page = args.object;
-        this.autocomplete = page.getViewById("autocomplete");
+        this.autocomplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         this.initDataItems();
     }
 
@@ -34,12 +34,12 @@ export class ViewModel extends Observable {
     }
 
     public onHorizontalSelected(args) {
-        this.autocomplete.layoutMode = "Horizontal";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Horizontal;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onWrapSelected(args) {
-        this.autocomplete.layoutMode = "Wrap";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Wrap;
+        this.autocomplete.resetAutoComplete();
     }
 }
diff --git a/autocomplete/app/examples/display-mode/autocomplete-display-mode-model.ts b/autocomplete/app/examples/display-mode/autocomplete-display-mode-model.ts
@@ -1,9 +1,9 @@
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, RadAutoCompleteTextView, AutoCompleteLayoutMode } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 
 export class ViewModel extends Observable {
-    private autocomplete;
+    private autocomplete: RadAutoCompleteTextView;
     private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
         "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
         "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
@@ -13,7 +13,7 @@ export class ViewModel extends Observable {
     constructor(args) {
         super();
         const page = args.object;
-        this.autocomplete = page.getViewById("autocomplete");
+        this.autocomplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         this.initDataItems();
     }
 
@@ -34,12 +34,12 @@ export class ViewModel extends Observable {
     }
 
     public onHorizontalSelected(args) {
-        this.autocomplete.layoutMode = "Horizontal";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Horizontal;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onWrapSelected(args) {
-        this.autocomplete.layoutMode = "Wrap";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Wrap;
+        this.autocomplete.resetAutoComplete();
     }
 }
diff --git a/autocomplete/app/examples/getting-started/autocomplete-getting-started-model.ts b/autocomplete/app/examples/getting-started/autocomplete-getting-started-model.ts
@@ -1,9 +1,9 @@
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, RadAutoCompleteTextView, AutoCompleteDisplayMode, AutoCompleteSuggestMode, AutoCompleteCompletionMode } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 
 export class ViewModel extends Observable {
-    private autocomplete;
+    private autocomplete: RadAutoCompleteTextView;
     private countries = ["Australia", "Albania", "Austria", "Argentina", "Maldives", "Bulgaria", "Belgium", "Cyprus", "Italy", "Japan",
         "Denmark", "Finland", "France", "Germany", "Greece", "Hungary", "Ireland",
         "Latvia", "Luxembourg", "Macedonia", "Moldova", "Monaco", "Netherlands", "Norway",
@@ -13,7 +13,7 @@ export class ViewModel extends Observable {
     constructor(args) {
         super();
         const page = args.object;
-        this.autocomplete = page.getViewById("autocomplete");
+        this.autocomplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         this.initDataItems();
     }
 
@@ -34,40 +34,40 @@ export class ViewModel extends Observable {
     }
 
     public onSuggestSelected(args) {
-        this.autocomplete.suggestMode = "Suggest";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.suggestMode = AutoCompleteSuggestMode.Suggest;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onAppendSelected(args) {
-        this.autocomplete.suggestMode = "Append";
-        this.autocomplete.completionMode = "StartsWith";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.suggestMode = AutoCompleteSuggestMode.Append;
+        this.autocomplete.completionMode = AutoCompleteCompletionMode.StartsWith;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onSuggestAppendSelected(args) {
-        this.autocomplete.suggestMode = "SuggestAppend";
-        this.autocomplete.completionMode = "StartsWith";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.suggestMode = AutoCompleteSuggestMode.SuggestAppend;
+        this.autocomplete.completionMode = AutoCompleteCompletionMode.StartsWith;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onStartsWithSelected(args) {
-        this.autocomplete.completionMode = "StartsWith";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.completionMode = AutoCompleteCompletionMode.StartsWith;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onContainsSelected(args) {
-        this.autocomplete.completionMode = "Contains";
-        this.autocomplete.suggestMode = "Suggest";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.completionMode = AutoCompleteCompletionMode.Contains;
+        this.autocomplete.suggestMode = AutoCompleteSuggestMode.Suggest;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onPlainSelected(args) {
-        this.autocomplete.displayMode = "Plain";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.displayMode = AutoCompleteDisplayMode.Plain;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onTokensSelected(args) {
-        this.autocomplete.displayMode = "Tokens";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.displayMode = AutoCompleteDisplayMode.Tokens;
+        this.autocomplete.resetAutoComplete();
     }
 }
diff --git a/autocomplete/app/examples/layouts/autocomplete-layout-model.ts b/autocomplete/app/examples/layouts/autocomplete-layout-model.ts
@@ -1,5 +1,5 @@
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, AutoCompleteLayoutMode } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 
 export class ViewModel extends Observable {
@@ -35,11 +35,11 @@ export class ViewModel extends Observable {
     }
 
     public onHorizontalSelected(args) {
-        this.autocomplete.layoutMode = "Horizontal";
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Horizontal;
     }
 
     public onWrapSelected(args) {
-        this.autocomplete.layoutMode = "Wrap";
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Wrap;
     }
 
     public onAddToken(args) {

diff --git a/autocomplete/app/examples/preselected-tokens/autocomplete-preselected-tokens-model.ts b/autocomplete/app/examples/preselected-tokens/autocomplete-preselected-tokens-model.ts
@@ -14,7 +14,7 @@ export class ViewModel extends Observable {
     constructor(args) {
         super();
         const page = args.object;
-        this.autoComplete = page.getViewById("autocomplete");
+        this.autoComplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         this.initDataItems();
 
         this.autoComplete.addToken(this.dataItems.getItem(0));

diff --git a/autocomplete/app/examples/remote-data-fetch/autocomplete-remote-model.ts b/autocomplete/app/examples/remote-data-fetch/autocomplete-remote-model.ts
@@ -1,18 +1,18 @@
 
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, RadAutoCompleteTextView } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 import * as  http from "tns-core-modules/http";
 
 // >> autocomplete-async-model
 export class ViewModel extends Observable {
-    private autocomplete;
+    private autocomplete: RadAutoCompleteTextView;
     private jsonUrl = "https://raw.githubusercontent.com/telerik/nativescript-ui-samples/master/examples-data/airports.json";
 
     constructor(args) {
         super();
         const page = args.object;
-        this.autocomplete = page.getViewById("autocomplete");
+        this.autocomplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         let that = this;
         this.autocomplete.loadSuggestionsAsync = function (text) {
             const promise = new Promise((resolve, reject)   => {

diff --git a/autocomplete/app/examples/suggest-mode/autocomplete-suggest-mode-model.ts b/autocomplete/app/examples/suggest-mode/autocomplete-suggest-mode-model.ts
@@ -1,5 +1,5 @@
 import { ObservableArray } from "tns-core-modules/data/observable-array";
-import { TokenModel } from "nativescript-ui-autocomplete";
+import { TokenModel, RadAutoCompleteTextView, AutoCompleteLayoutMode } from "nativescript-ui-autocomplete";
 import { Observable } from "tns-core-modules/data/observable";
 
 export class ViewModel extends Observable {
@@ -13,7 +13,7 @@ export class ViewModel extends Observable {
     constructor(args) {
         super();
         const page = args.object;
-        this.autocomplete = page.getViewById("autocomplete");
+        this.autocomplete = <RadAutoCompleteTextView>page.getViewById("autocomplete");
         this.initDataItems();
     }
 
@@ -34,12 +34,12 @@ export class ViewModel extends Observable {
     }
 
     public onHorizontalSelected(args) {
-        this.autocomplete.layoutMode = "Horizontal";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Horizontal;
+        this.autocomplete.resetAutoComplete();
     }
 
     public onWrapSelected(args) {
-        this.autocomplete.layoutMode = "Wrap";
-        this.autocomplete.resetAutocomplete();
+        this.autocomplete.layoutMode = AutoCompleteLayoutMode.Wrap;
+        this.autocomplete.resetAutoComplete();
     }
 }
diff --git a/autocomplete/package.json b/autocomplete/package.json
@@ -37,7 +37,7 @@
     "nativescript-dev-appium": "4.0.9",
     "nativescript-dev-typescript": "~0.8.0",
     "nativescript-dev-webpack": "~0.20.0",
-    "tns-platform-declarations": "^5.2.1",
+    "tns-platform-declarations": "^5.2.2",
     "tslint": "~5.11.0",
     "typescript": "^3.1.6"
   }