From 9e2e8ec3a1df64b1f6e0add6d5fcc71e23eab0f4 Mon Sep 17 00:00:00 2001 From: Sebastian Witalec Date: Mon, 23 Jul 2018 15:06:01 +0100 Subject: [PATCH] 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 --- .../list-picker/list-picker-json-array.ts | 37 ++++++++++++++++ .../list-picker/list-picker-json-array.xml | 11 +++++ .../app/ui-tests-app/list-picker/main-page.ts | 1 + .../ui/list-picker/list-picker-common.ts | 43 ++++++++++++++++++- .../ui/list-picker/list-picker.android.ts | 1 + .../ui/list-picker/list-picker.ios.ts | 1 + 6 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 apps/app/ui-tests-app/list-picker/list-picker-json-array.ts create mode 100644 apps/app/ui-tests-app/list-picker/list-picker-json-array.xml diff --git a/apps/app/ui-tests-app/list-picker/list-picker-json-array.ts b/apps/app/ui-tests-app/list-picker/list-picker-json-array.ts new file mode 100644 index 000000000..048895140 --- /dev/null +++ b/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 = args.object; + page.bindingContext = new ListPickerJsonArrayModel(); +} diff --git a/apps/app/ui-tests-app/list-picker/list-picker-json-array.xml b/apps/app/ui-tests-app/list-picker/list-picker-json-array.xml new file mode 100644 index 000000000..089a6aaf2 --- /dev/null +++ b/apps/app/ui-tests-app/list-picker/list-picker-json-array.xml @@ -0,0 +1,11 @@ + + + + + + \ No newline at end of file diff --git a/apps/app/ui-tests-app/list-picker/main-page.ts b/apps/app/ui-tests-app/list-picker/main-page.ts index 9cd225bd7..edb93ba94 100644 --- a/apps/app/ui-tests-app/list-picker/main-page.ts +++ b/apps/app/ui-tests-app/list-picker/main-page.ts @@ -13,5 +13,6 @@ export function loadExamples() { const examples = new Map(); 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; } \ No newline at end of file diff --git a/tns-core-modules/ui/list-picker/list-picker-common.ts b/tns-core-modules/ui/list-picker/list-picker-common.ts index 5b49d863a..75eb8aab8 100644 --- a/tns-core-modules/ui/list-picker/list-picker-common.ts +++ b/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 ? (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({ } }); itemsProperty.register(ListPickerBase); + +export const textFieldProperty = new Property({ + name: "textField", + defaultValue: "" +}); +textFieldProperty.register(ListPickerBase); + +export const valueFieldProperty = new Property({ + name: "valueField", + defaultValue: "" +}); +valueFieldProperty.register(ListPickerBase); + +export const selectedValueProperty = new Property({ + name: "selectedValue", + defaultValue: null +}); +selectedValueProperty.register(ListPickerBase); diff --git a/tns-core-modules/ui/list-picker/list-picker.android.ts b/tns-core-modules/ui/list-picker/list-picker.android.ts index 051f9787d..faed19a5d 100644 --- a/tns-core-modules/ui/list-picker/list-picker.android.ts +++ b/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); } } diff --git a/tns-core-modules/ui/list-picker/list-picker.ios.ts b/tns-core-modules/ui/list-picker/list-picker.ios.ts index be8765681..77d65800a 100644 --- a/tns-core-modules/ui/list-picker/list-picker.ios.ts +++ b/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); } } }