FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(list-picker): add textField, valueField and selectedValue proper… · NativeScript/NativeScript@9e2e8ec · GitHub

/ NativeScript Public

Commit 9e2e8ec

Browse files
sebawita
authored and
MartoYankov
committed
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
1 parent feaf140 commit 9e2e8ec

6 files changed

Lines changed: 93 additions & 1 deletion

File tree

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

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

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
2+
<StackLayout class="p-20">
3+
<ListPicker items="{{ items }}"
4+
textField="name"
5+
valueField="role"
6+
selectedIndex="2"
7+
selectedValue="{{ selectedItem }}">
8+
</ListPicker>
9+
<Label text="{{ selectedItem }}" textWrap="true" />
10+
</StackLayout>
11+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ export function loadExamples() {
1313
const examples = new Map<string, string>();
1414
examples.set("issue_2895", "list-picker/issue_2895");
1515
examples.set("list-picker", "list-picker/list-picker");
16+
examples.set("list-picker-json-array", "list-picker/list-picker-json-array");
1617
return examples;
1718
}

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

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export class ListPickerBase extends View implements ListPickerDefinition {
99
public selectedIndex: number;
1010
public items: any[] | ItemsSource;
1111
public isItemsSource: boolean;
12+
public textField: string;
13+
public valueField: string;
14+
public selectedValue: any;
1215

1316
public _getItemAsString(index: number): any {
1417
let items = this.items;
@@ -17,7 +20,25 @@ export class ListPickerBase extends View implements ListPickerDefinition {
1720
}
1821

1922
let item = this.isItemsSource ? (<ItemsSource>this.items).getItem(index) : this.items[index];
20-
return (item === undefined || item === null) ? index + "" : item + "";
23+
24+
return (item === undefined || item === null) ? index + "" : this.parseItem(item);
25+
}
26+
27+
private parseItem(item) {
28+
return this.textField ? item[this.textField] + "" : item + "";
29+
}
30+
31+
public updateSelectedValue(index) {
32+
var newVal = null;
33+
if (index >= 0) {
34+
const item = this.items[index];
35+
36+
newVal = this.valueField ? item[this.valueField] : item;
37+
}
38+
39+
if (this.selectedValue !== newVal) {
40+
this.set("selectedValue", newVal);
41+
}
2142
}
2243
}
2344

@@ -40,6 +61,8 @@ export const selectedIndexProperty = new CoercibleProperty<ListPickerBase, numbe
4061
value = -1;
4162
}
4263

64+
target.updateSelectedValue(value);
65+
4366
return value;
4467
}
4568
});
@@ -52,3 +75,21 @@ export const itemsProperty = new Property<ListPickerBase, any[] | ItemsSource>({
5275
}
5376
});
5477
itemsProperty.register(ListPickerBase);
78+
79+
export const textFieldProperty = new Property<ListPickerBase, string>({
80+
name: "textField",
81+
defaultValue: ""
82+
});
83+
textFieldProperty.register(ListPickerBase);
84+
85+
export const valueFieldProperty = new Property<ListPickerBase, string>({
86+
name: "valueField",
87+
defaultValue: ""
88+
});
89+
valueFieldProperty.register(ListPickerBase);
90+
91+
export const selectedValueProperty = new Property<ListPickerBase, string>({
92+
name: "selectedValue",
93+
defaultValue: null
94+
});
95+
selectedValueProperty.register(ListPickerBase);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function initializeNativeClasses(): void {
4040

4141
onValueChange(picker: android.widget.NumberPicker, oldValue: number, newValue: number): void {
4242
selectedIndexProperty.nativeValueChange(this.owner, newValue);
43+
this.owner.updateSelectedValue(newValue);
4344
}
4445
}
4546

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
111111
let owner = this._owner.get();
112112
if (owner) {
113113
selectedIndexProperty.nativeValueChange(owner, row);
114+
owner.updateSelectedValue(row);
114115
}
115116
}
116117
}

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL