Files
Sebastian Witalec 9e2e8ec3a1 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
2018-07-23 17:06:01 +03:00

96 lines
2.7 KiB
TypeScript

import { ListPicker as ListPickerDefinition, ItemsSource } from ".";
import { View, Property, CoercibleProperty, CSSType } from "../core/view";
export * from "../core/view";
@CSSType("ListPicker")
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;
if (!items) {
return " ";
}
let item = this.isItemsSource ? (<ItemsSource>this.items).getItem(index) : this.items[index];
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);
}
}
}
ListPickerBase.prototype.recycleNativeView = "auto";
export const selectedIndexProperty = new CoercibleProperty<ListPickerBase, number>({
name: "selectedIndex", defaultValue: -1,
valueConverter: (v) => parseInt(v),
coerceValue: (target, value) => {
let items = target.items;
if (items) {
let max = items.length - 1;
if (value < 0) {
value = 0;
}
if (value > max) {
value = max;
}
} else {
value = -1;
}
target.updateSelectedValue(value);
return value;
}
});
selectedIndexProperty.register(ListPickerBase);
export const itemsProperty = new Property<ListPickerBase, any[] | ItemsSource>({
name: "items", valueChanged: (target, oldValue, newValue) => {
let getItem = newValue && (<ItemsSource>newValue).getItem;
target.isItemsSource = typeof getItem === "function";
}
});
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);