feat(list-picker): add textField, valueField and selectedValue properties (#6033)

* Added textField, valueField and selectedValue properties

textField and valueField - should be used with arrays of JSON objects
textField - tells the listview which property should be used to display each item
valueField - tells the listview, which property should be used to update the selectedValue
selectedValue - is the property that will contain the selectedValue, if valueField is specified, then it will contain the value from that field, otherwise it will contain the whole selected item

* Example showing textField, valueField and selectedValue in action

* Update import paths

apps/app/ui-tests-app/list-picker/list-picker-json-array.ts

@@ -0,0 +1,37 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Observable } from "tns-core-modules/data/observable";
+
+export class ListPickerJsonArrayModel extends Observable {
+  public items = [
+    { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
+    { id: 3, name: "Piqué", role: "Defender" },
+    { id: 4, name: "I. Rakitic", role: "Midfielder" },
+    { id: 5, name: "Sergio", role: "Midfielder" },
+    { id: 6, name: "Denis Suárez", role: "Midfielder" },
+    { id: 7, name: "Arda", role: "Midfielder" },
+    { id: 8, name: "A. Iniesta", role: "Midfielder" },
+    { id: 9, name: "Suárez", role: "Forward" },
+    { id: 10, name: "Messi", role: "Forward" },
+    { id: 11, name: "Neymar", role: "Forward" },
+    { id: 12, name: "Rafinha", role: "Midfielder" },
+    { id: 13, name: "Cillessen", role: "Goalkeeper" },
+    { id: 14, name: "Mascherano", role: "Defender" },
+    { id: 17, name: "Paco Alcácer", role: "Forward" },
+    { id: 18, name: "Jordi Alba", role: "Defender" },
+    { id: 19, name: "Digne", role: "Defender" },
+    { id: 20, name: "Sergi Roberto", role: "Midfielder" },
+    { id: 21, name: "André Gomes", role: "Midfielder" },
+    { id: 22, name: "Aleix Vidal", role: "Midfielder" },
+    { id: 23, name: "Umtiti", role: "Defender" },
+    { id: 24, name: "Mathieu", role: "Defender" },
+    { id: 25, name: "Masip", role: "Goalkeeper" },
+  ];
+  
+  public selectedItem = "";
+}
+
+export function navigatingTo(args: EventData) {
+  let page = <Page>args.object;    
+  page.bindingContext = new ListPickerJsonArrayModel();
+}

apps/app/ui-tests-app/list-picker/list-picker-json-array.xml

@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <StackLayout class="p-20">
+    <ListPicker items="{{ items }}"
+      textField="name"
+      valueField="role"
+      selectedIndex="2"
+      selectedValue="{{ selectedItem }}">
+    </ListPicker>
+    <Label text="{{ selectedItem }}" textWrap="true" />
+  </StackLayout>
+</Page>

apps/app/ui-tests-app/list-picker/main-page.ts

@@ -13,5 +13,6 @@ export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("issue_2895", "list-picker/issue_2895");
     examples.set("list-picker", "list-picker/list-picker");
+    examples.set("list-picker-json-array", "list-picker/list-picker-json-array");
     return examples;
 }

tns-core-modules/ui/list-picker/list-picker-common.ts

@@ -9,6 +9,9 @@ export class ListPickerBase extends View implements ListPickerDefinition {
     public selectedIndex: number;
     public items: any[] | ItemsSource;
     public isItemsSource: boolean;
+    public textField: string;
+    public valueField: string;
+    public selectedValue: any;
 
     public _getItemAsString(index: number): any {
         let items = this.items;
@@ -17,7 +20,25 @@ export class ListPickerBase extends View implements ListPickerDefinition {
         }
 
         let item = this.isItemsSource ? (<ItemsSource>this.items).getItem(index) : this.items[index];
-        return (item === undefined || item === null) ? index + "" : item + "";
+
+        return (item === undefined || item === null) ? index + "" : this.parseItem(item);
+    }
+
+    private parseItem(item) {
+        return this.textField ? item[this.textField] + "" : item + "";
+    }
+
+    public updateSelectedValue(index) {
+        var newVal = null;
+        if (index >= 0) {
+            const item = this.items[index];
+
+            newVal = this.valueField ? item[this.valueField] : item;
+        }
+
+        if (this.selectedValue !== newVal) {
+            this.set("selectedValue", newVal);
+        }
     }
 }
 
@@ -40,6 +61,8 @@ export const selectedIndexProperty = new CoercibleProperty<ListPickerBase, numbe
             value = -1;
         }
 
+        target.updateSelectedValue(value);
+
         return value;
     }
 });
@@ -52,3 +75,21 @@ export const itemsProperty = new Property<ListPickerBase, any[] | ItemsSource>({
     }
 });
 itemsProperty.register(ListPickerBase);
+
+export const textFieldProperty = new Property<ListPickerBase, string>({
+    name: "textField",
+    defaultValue: ""
+});
+textFieldProperty.register(ListPickerBase);
+
+export const valueFieldProperty = new Property<ListPickerBase, string>({
+    name: "valueField",
+    defaultValue: ""
+});
+valueFieldProperty.register(ListPickerBase);
+
+export const selectedValueProperty = new Property<ListPickerBase, string>({
+    name: "selectedValue",
+    defaultValue: null
+});
+selectedValueProperty.register(ListPickerBase);

tns-core-modules/ui/list-picker/list-picker.android.ts

@@ -40,6 +40,7 @@ function initializeNativeClasses(): void {
 
         onValueChange(picker: android.widget.NumberPicker, oldValue: number, newValue: number): void {
             selectedIndexProperty.nativeValueChange(this.owner, newValue);
+            this.owner.updateSelectedValue(newValue);
         }
     }
 

tns-core-modules/ui/list-picker/list-picker.ios.ts

@@ -111,6 +111,7 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
         let owner = this._owner.get();
         if (owner) {
             selectedIndexProperty.nativeValueChange(owner, row);
+            owner.updateSelectedValue(row);
         }
     }
 }