fix(list-view): Layout list-view items on request (NativeScript#6159)

Alexander Vakrilov · web-flow · commit ec24c5a96f9c · 2018-08-09T18:19:56.000+03:00
* test: list items relayout example

* fix(list-view): Layout list-view items on request

* refactor(tests): refactor list-view tests imports
diff --git a/apps/app/ui-tests-app/list-view/item-re-layout.css b/apps/app/ui-tests-app/list-view/item-re-layout.css
@@ -0,0 +1,20 @@
+Label {
+    margin: 6;
+    padding: 4;
+}
+
+.unselected {
+    border-width: 4;
+    border-color: gray;
+    border-radius: 10;
+    background: white;
+    color: gray
+}
+
+.selected {
+    border-width: 4;
+    border-color: blue;
+    border-radius: 10;
+    background: lightcoral;
+    color: blue;
+}
diff --git a/apps/app/ui-tests-app/list-view/item-re-layout.ts b/apps/app/ui-tests-app/list-view/item-re-layout.ts
@@ -0,0 +1,21 @@
+import { fromObject } from "tns-core-modules/data/observable";
+
+export function loaded(args) {
+    var items = [];
+
+    for (let i = 0; i < 100; i++) {
+        items.push(fromObject({
+            text:  "<" + i + ">",
+            selected: !!!(i % 5)
+        }));
+    }
+    args.object.bindingContext = { items: items };
+}
+
+export function toggle(args) {
+    console.log("toggle : ")
+    let context = args.object.bindingContext;
+    console.dir(context);
+    context.set("selected", !context.selected);
+    // args.object.requestLayout();
+}
diff --git a/apps/app/ui-tests-app/list-view/item-re-layout.xml b/apps/app/ui-tests-app/list-view/item-re-layout.xml
@@ -0,0 +1,15 @@
+<Page loaded="loaded">
+  <StackLayout>
+    <ListView items="{{ items }}">
+      <ListView.itemTemplate>
+        <StackLayout orientation="horizontal" tap="toggle">
+            <Label text="{{ text }}" />
+            <Label text="marked" visibility="{{ selected ? 'visible' : 'collapse' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}"  />
+            <Label text="test" class="{{ selected ? 'selected' : 'unselected' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}" class="{{ selected ? 'selected' : 'unselected' }}" />
+        </StackLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </StackLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/list-view/main-page.ts b/apps/app/ui-tests-app/list-view/main-page.ts
@@ -19,6 +19,7 @@ export function loadExamples() {
     examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
     examples.set("row-height", "list-view/row-height");
     examples.set("width-percent", "list-view/width-percent");
+    examples.set("item-re-layout", "list-view/item-re-layout");
 
     return examples;
 }
diff --git a/tests/app/ui/list-view/list-view-tests.ts b/tests/app/ui/list-view/list-view-tests.ts
diff --git a/tns-core-modules/ui/list-view/list-view.ios.ts b/tns-core-modules/ui/list-view/list-view.ios.ts

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ export function loadExamples() {`
`19`	`19`	`examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");`
`20`	`20`	`examples.set("row-height", "list-view/row-height");`
`21`	`21`	`examples.set("width-percent", "list-view/width-percent");`
	`22`	`+ examples.set("item-re-layout", "list-view/item-re-layout");`
`22`	`23`
`23`	`24`	`return examples;`
`24`	`25`	`}`