From e28148c929a362693952904424802ddd03516c21 Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Mon, 17 Oct 2016 17:22:30 +0300
Subject: [PATCH] ListView item template selector refactoring + sample code

---
 .../ui-tests-app/list-view/first-image.png    | Bin 0 -> 990 bytes
 apps/app/ui-tests-app/list-view/list-view.css |   8 +++
 apps/app/ui-tests-app/list-view/list-view.ts  |  60 ++++++++++++++++++
 apps/app/ui-tests-app/list-view/list-view.xml |  50 +++++++++++++++
 .../ui-tests-app/list-view/main-view-model.ts |  51 +++++++++++++++
 apps/app/ui-tests-app/list-view/no-image.png  | Bin 0 -> 2193 bytes
 apps/app/ui-tests-app/mainPage.ts             |   1 +
 tests/app/ui/list-view/list-view-tests.ts     |   4 +-
 .../ui/builder/component-builder.ts           |  14 +++-
 .../ui/list-view/list-view-common.ts          |  13 ++--
 .../ui/list-view/list-view.android.ts         |   1 -
 tns-core-modules/ui/list-view/list-view.d.ts  |   2 +-
 12 files changed, 191 insertions(+), 13 deletions(-)
 create mode 100644 apps/app/ui-tests-app/list-view/first-image.png
 create mode 100644 apps/app/ui-tests-app/list-view/list-view.css
 create mode 100644 apps/app/ui-tests-app/list-view/list-view.ts
 create mode 100644 apps/app/ui-tests-app/list-view/list-view.xml
 create mode 100644 apps/app/ui-tests-app/list-view/main-view-model.ts
 create mode 100644 apps/app/ui-tests-app/list-view/no-image.png

diff --git a/apps/app/ui-tests-app/list-view/first-image.png b/apps/app/ui-tests-app/list-view/first-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d322529c74ecc7c49331705e225f512556d4aa9
GIT binary patch
literal 990
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKZ-7sTE0F&0%JBdHe+UDaTz2sn
zG8f1OiU1Yk62v8rrUhaMki<mFe|GTzP0=d}@(TviEUcVdeEj^vq7qUv^74wRYFgU*
z`UWPZmR5H5_Rg*zUcUbRq4D|k>-WD;i;3uEU|_oB>Eakt5%>0bV)-ov5w-`n1D7oB
zF<V>`(3bk;?VXtC|NmDS8yYUL^qc%M^Z0MYkG=Dr$4p{&{8g~bio2vy@50rYUFU*>
z6*7C~@y~p+C8Noirz1yiO4Ioh`zA?E>QJ{A77}n-RK!_O8a9J-<`p)%vwYK73%19t
zub;!_db{;P$r5&1UGv#zZ+i-~zi4uDRoOh3J#^=fo;eS0+Gy-jDv0G=6e-Xwb#t@A
z+?VqeSN0fcN(OtHNeihla41U1J26cPo~)oYD|zaKHAzoXcu!2b-gxry1TO}e)kS4Z
zr(TsDzcv5Mg~t*~%<4POHCPsSmz?@ADc^t3^kV|<t}aIIj_qBMH-1g|!w^*-U}$L?
z!);?@Uw@0cd-?O_(zoi@U-<r~nuXO{rRaH0WbW&Iyw~+_f7o@yv#mpv`@n6EqInu@
zS=pi2y`|sH{&L}*xg*n}mVNw+yz36KU&uB;!?Z}?gvzb!>(8cHwrCtnYT9?@!gaGd
zYq}b}BtmSr$T=&C$==_yF6{og-CrtS+mtFEyuh%lntdXRXlZqH%h9(<@_QC9s>?Gg
zVXz8Qo04fMzp1fp^?web2doEvGHT3Pynb<vXn;mgq|7Q0`RS*hKIYie`E|kxkFe7h
z7d^Z5@oNWfoaq@A1_Nhz2l;jnXa07@`{hT976>a8F=xiuxRvp|Qn7w>lI{3+&!;E+
z?#jQENv%9S*>{5Os|S*Exdiz+R&g(UcVPK6&#YV5{MA&nrA3O$MM7BwZklv#+A7#_
z&cei!>89okiJM#c4s^~ivRm9bXNBeA%`;hM?x=5?_dQzW{fQJaR<3P)HfdK~#FDqy
zY*@40;lfdFz1BHL_XR#zcR1@|Vw1hx<tm?hqsMd32`qw{o4L(4f7*4#WrcQcR>557
zGfg37@7Fn>YvjpF4|9L|FW7B{)%ktyPc|i8Qe!cEwZ$t~L5#uWw(;M`{qNRaxElGY
j=feM=`~Ne=F0fag9&tTH&FnBRKQMT@`njxgN@xNADMX{;

literal 0
HcmV?d00001

diff --git a/apps/app/ui-tests-app/list-view/list-view.css b/apps/app/ui-tests-app/list-view/list-view.css
new file mode 100644
index 000000000..20a57ed7d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/list-view/list-view.ts b/apps/app/ui-tests-app/list-view/list-view.ts
new file mode 100644
index 000000000..16c8229d2
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/list-view/list-view.xml b/apps/app/ui-tests-app/list-view/list-view.xml
new file mode 100644
index 000000000..791dea4ff
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/list-view/main-view-model.ts b/apps/app/ui-tests-app/list-view/main-view-model.ts
new file mode 100644
index 000000000..378e82585
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/list-view/no-image.png b/apps/app/ui-tests-app/list-view/no-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c215b192f22d50fc2c41aeedb6bba3e0676a14a
GIT binary patch
literal 2193
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
T%YQrn00000NkvXXu0mjfc0(4}

literal 0
HcmV?d00001

diff --git a/apps/app/ui-tests-app/mainPage.ts b/apps/app/ui-tests-app/mainPage.ts
index 544db3f7d..ac94d6ae7 100644
--- a/apps/app/ui-tests-app/mainPage.ts
+++ b/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");
diff --git a/tests/app/ui/list-view/list-view-tests.ts b/tests/app/ui/list-view/list-view-tests.ts
index b94b6dc59..df76fcf95 100644
--- a/tests/app/ui/list-view/list-view-tests.ts
+++ b/tests/app/ui/list-view/list-view-tests.ts
@@ -793,10 +793,10 @@ export class ListViewTest extends testModule.UITest<listViewModule.ListView> {
         let itemTemplateSelectorFunction = <any>listView.itemTemplateSelector;
         TKUnit.wait(0.1);
 
-        let templateKey0 = itemTemplateSelectorFunction(0, items[0]);
+        let templateKey0 = itemTemplateSelectorFunction(items[0], 0, items);
         TKUnit.assertEqual(templateKey0, "red", "itemTemplateSelector result for first item");
 
-        let templateKey1 = itemTemplateSelectorFunction(1, items[1]);
+        let templateKey1 = itemTemplateSelectorFunction(items[1], 1, items);
         TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item");
     }
 
diff --git a/tns-core-modules/ui/builder/component-builder.ts b/tns-core-modules/ui/builder/component-builder.ts
index 6e3a68fa1..568201b99 100644
--- a/tns-core-modules/ui/builder/component-builder.ts
+++ b/tns-core-modules/ui/builder/component-builder.ts
@@ -172,7 +172,8 @@ export function setPropertyValue(instance: View, instanceModule: Object, exports
             expression: bindOptions[bindingConstants.expression],
             twoWay: bindOptions[bindingConstants.twoWay]
         }, bindOptions[bindingConstants.source]);
-    } else if (isEventOrGesture(propertyName, instance)) {
+    } 
+    else if (isEventOrGesture(propertyName, instance)) {
         // Get the event handler from page module exports.
         var handler = exports && exports[propertyValue];
 
@@ -181,8 +182,7 @@ export function setPropertyValue(instance: View, instanceModule: Object, exports
             instance.on(propertyName, handler);
         }
     }
-    //TODO_ITS: This code may break some people if they have an export named like one of their attribue values.
-    else if (isFunction(exports && exports[propertyValue])) {
+    else if (isKnownFunction(propertyName, instance) && isFunction(exports && exports[propertyValue])) {
         instance[propertyName] = exports[propertyValue];             
     }
     else {
@@ -214,4 +214,12 @@ function isBinding(value: any): boolean {
     }
 
     return isBinding;
+}
+
+// For example, ListView.itemTemplateSelector
+let KNOWN_FUNCTIONS = "knownFunctions";
+function isKnownFunction(name: string, instance: View): boolean {
+    return instance.constructor 
+        && KNOWN_FUNCTIONS in instance.constructor 
+        && instance.constructor[KNOWN_FUNCTIONS].indexOf(name) !== -1;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/list-view/list-view-common.ts b/tns-core-modules/ui/list-view/list-view-common.ts
index bbd0608bf..d23f06b4d 100644
--- a/tns-core-modules/ui/list-view/list-view-common.ts
+++ b/tns-core-modules/ui/list-view/list-view-common.ts
@@ -79,8 +79,9 @@ export class ListView extends view.View implements definition.ListView {
     public static itemLoadingEvent = "itemLoading";
     public static itemTapEvent = "itemTap";
     public static loadMoreItemsEvent = "loadMoreItems";
+    public static knownFunctions = ["itemTemplateSelector"]; //See component-builder.ts isKnownFunction
     
-    private _itemTemplateSelector: (index: number, item: any) => string;
+    private _itemTemplateSelector: (item: any, index: number, items: any) => string;
     private _itemTemplateSelectorBindable = new Bindable();
     public _defaultTemplate: view.KeyedTemplate = {
         key: "default",
@@ -174,25 +175,25 @@ export class ListView extends view.View implements definition.ListView {
         this._setValue(ListView.itemTemplatesProperty, newValue);
     }
 
-    get itemTemplateSelector(): string | ((index: number, item: any) => string) {
+    get itemTemplateSelector(): string | ((item: any, index: number, items: any) => string) {
         return this._itemTemplateSelector;
     }
 
-    set itemTemplateSelector(value: string | ((index: number, item: any) => string)) {
+    set itemTemplateSelector(value: string | ((item: any, index: number, items: any) => string)) {
         if (isString(value)){
             this._itemTemplateSelectorBindable.bind({
                 sourceProperty: null,
                 targetProperty: "templateKey",
                 expression: <string>value
             });
-            this._itemTemplateSelector = (index: number, item: any) => {
+            this._itemTemplateSelector = (item: any, index: number, items: any) => {
                 item["$index"] = index;
                 this._itemTemplateSelectorBindable.bindingContext = item;
                 return this._itemTemplateSelectorBindable.get("templateKey"); 
             };
         }
         else if (isFunction(value)) {
-            this._itemTemplateSelector = <((index: number, item: any) => string)>value;
+            this._itemTemplateSelector = <((item: any, index: number, items: any) => string)>value;
         }
     }
 
@@ -230,7 +231,7 @@ export class ListView extends view.View implements definition.ListView {
         let templateKey = "default";
         if (this.itemTemplateSelector){
             let dataItem = this._getDataItem(index);
-            templateKey = this._itemTemplateSelector(index, dataItem);
+            templateKey = this._itemTemplateSelector(dataItem, index, this.items);
         }
 
         for (let i = 0, length = this._itemTemplatesInternal.length; i < length; i++) {
diff --git a/tns-core-modules/ui/list-view/list-view.android.ts b/tns-core-modules/ui/list-view/list-view.android.ts
index 012d592d3..cb199765d 100644
--- a/tns-core-modules/ui/list-view/list-view.android.ts
+++ b/tns-core-modules/ui/list-view/list-view.android.ts
@@ -8,7 +8,6 @@ import definition = require("ui/list-view");
 import {ProxyViewContainer} from "ui/proxy-view-container";
 import * as layoutBase from "ui/layouts/layout-base";
 import * as colorModule from "color";
-import * as traceModule from "trace";
 
 let color: typeof colorModule;
 function ensureColor() {
diff --git a/tns-core-modules/ui/list-view/list-view.d.ts b/tns-core-modules/ui/list-view/list-view.d.ts
index 4299846ec..1958c1351 100644
--- a/tns-core-modules/ui/list-view/list-view.d.ts
+++ b/tns-core-modules/ui/list-view/list-view.d.ts
@@ -91,7 +91,7 @@ declare module "ui/list-view" {
          * A function that returns the appropriate ket template based on the data item.
          */
 
-        itemTemplateSelector: string | ((index: number, item: any) => string);
+        itemTemplateSelector: string | ((item: any, index: number, items: any) => string);
         /**
          * Gets or set the items separator line color of the ListView. 
          */