Merge pull request #2909 from NativeScript/its

ListView item template selector

apps/app/ui-tests-app/list-view/list-view.css

@@ -0,0 +1,8 @@
+Label, Button {
+    font-size: 8;
+}
+
+ListView {
+    border-width: 1;
+    margin: 1;
+}

apps/app/ui-tests-app/list-view/list-view.ts

@@ -0,0 +1,60 @@
+import { EventData } from 'data/observable';
+import { ObservableArray } from "data/observable-array";
+import { View, KeyedTemplate } from "ui/core/view";
+import { Page } from 'ui/page';
+import { ViewModel, Item } from './main-view-model';
+import { ListView } from "ui/list-view";
+import { Label } from "ui/label";
+import { GridLayout } from "ui/layouts/grid-layout";
+import { Color } from "color";
+
+export function selectItemTemplate(item: Item, index: number, items: ObservableArray<Item>): string {
+    return item.id % 10 === 0 ? "red" : item.id % 2 === 0 ? "green" : "yellow"; 
+}
+
+export function pageLoaded(args: EventData) {
+  let page = <Page>args.object;
+  page.bindingContext = new ViewModel();
+
+  let lv4 = page.getViewById<ListView>("lv4");
+  lv4.itemTemplateSelector = (item: Item, index: number, items: ObservableArray<Item>) => {
+    return index % 10 === 0 ? "red" : index % 2 === 0 ? "green" : "yellow"; 
+  };
+
+  let createLabel = (backgroundColor: Color) => { 
+    let label = new Label(); 
+    label.bind({
+        sourceProperty: null,
+        targetProperty: "text",
+        expression: "$value"
+    });
+    label.style.backgroundColor = backgroundColor;
+    return label;
+  };
+
+  lv4.itemTemplates = new Array<KeyedTemplate>(
+      {
+          key: "red",
+          createView: () => { return createLabel(new Color("red")); }
+      },
+      {
+          key: "green",
+          createView: () => { return createLabel(new Color("green")); }
+      },
+      {
+          key: "yellow",
+          createView: () => { return createLabel(new Color("yellow")); }
+      }
+  );
+}
+
+let scrollToBottom = true;
+export function onScroll(args: EventData){
+  let page = (<View>args.object).page;
+  let gridLayout = page.getViewById<GridLayout>("grid-layout");
+  for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++){
+      let listView = <ListView>gridLayout.getChildAt(i);
+      listView.scrollToIndex(scrollToBottom ? listView.items.length - 1 : 0);
+  }
+  scrollToBottom = !scrollToBottom;
+}

apps/app/ui-tests-app/list-view/list-view.xml

@@ -0,0 +1,50 @@
+<Page loaded="pageLoaded">
+    <StackLayout>
+        <Button text="SCROLL" tap="onScroll" height="30"/>
+        <GridLayout id="grid-layout" columns="*,*" rows="*,*">
+            <ListView id="lv1" col="0" row="0" items="{{ items }}" itemTemplateSelector="selectItemTemplate">
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv2" col="1" row="0" items="{{ items }}" itemTemplateSelector="id % 10 === 0 ? 'red' : id % 2 === 0 ? 'green' : 'yellow'">
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv3" col="0" row="1" items="{{ items }}" itemTemplateSelector="$index % 10 === 0 ? 'wrong' : $index % 2 === 0 ? 'green' : 'yellow'">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value + ' itemTemplate' }}" textWrap="true"/>
+                </ListView.itemTemplate>
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv4" col="1" row="1" items="{{ items }}"></ListView>
+        </GridLayout>
+    </StackLayout>
+</Page>

apps/app/ui-tests-app/list-view/main-view-model.ts

@@ -0,0 +1,51 @@
+import { Observable } from 'data/observable';
+import { ObservableArray } from 'data/observable-array';
+
+export class Item extends Observable {
+  private _name: string;
+  private _id: number;
+
+  constructor(name: string, id: number) {
+    super();
+    this._name = name;
+    this._id = id;
+  }
+
+  get name(): string {
+    return this._name;
+  }
+
+  set name(value: string) {
+    if (this._name !== value) {
+      this._name = value;
+      this.notifyPropertyChange('name', value)
+    }
+  }
+
+  get id(): number {
+    return this._id;
+  }
+
+  set id(value: number) {
+    if (this._id !== value) {
+      this._id = value;
+      this.notifyPropertyChange('id', value)
+    }
+  }
+
+  public toString() {
+    return `${this.name} ${this.id}`;
+  }
+}
+
+export class ViewModel extends Observable {
+  private _items: ObservableArray<Item>;
+
+  get items(): ObservableArray<Item> {
+    this._items = new ObservableArray<Item>();
+    for (let i = 0; i < 100; i++){
+      this._items.push(new Item(`Item`, i));
+    }
+    return this._items;
+  }
+}

apps/app/ui-tests-app/mainPage.ts

@@ -36,6 +36,7 @@ export function pageLoaded(args: EventData) {
     examples.set("transitions", "transitions/page0");
     examples.set("segStyle", "segmented-bar/all");
     examples.set("flexBox", "flexbox/flexbox");
+    examples.set("list-view", "list-view/list-view");
 
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");