Skip to content

Commit ec24c5a

Browse files
author
Alexander Vakrilov
authored
fix(list-view): Layout list-view items on request (#6159)
* test: list items relayout example * fix(list-view): Layout list-view items on request * refactor(tests): refactor list-view tests imports
1 parent 9c67d7b commit ec24c5a

6 files changed

Lines changed: 221 additions & 89 deletions

File tree

‎apps/app/ui-tests-app/list-view/item-re-layout.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Label {
2+
margin: 6;
3+
padding: 4;
4+
}
5+
6+
.unselected {
7+
border-width: 4;
8+
border-color: gray;
9+
border-radius: 10;
10+
background: white;
11+
color: gray
12+
}
13+
14+
.selected {
15+
border-width: 4;
16+
border-color: blue;
17+
border-radius: 10;
18+
background: lightcoral;
19+
color: blue;
20+
}

‎apps/app/ui-tests-app/list-view/item-re-layout.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { fromObject } from "tns-core-modules/data/observable";
2+
3+
export function loaded(args) {
4+
var items = [];
5+
6+
for (let i = 0; i < 100; i++) {
7+
items.push(fromObject({
8+
text: "<" + i + ">",
9+
selected: !!!(i % 5)
10+
}));
11+
}
12+
args.object.bindingContext = { items: items };
13+
}
14+
15+
export function toggle(args) {
16+
console.log("toggle : ")
17+
let context = args.object.bindingContext;
18+
console.dir(context);
19+
context.set("selected", !context.selected);
20+
// args.object.requestLayout();
21+
}

‎apps/app/ui-tests-app/list-view/item-re-layout.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Page loaded="loaded">
2+
<StackLayout>
3+
<ListView items="{{ items }}">
4+
<ListView.itemTemplate>
5+
<StackLayout orientation="horizontal" tap="toggle">
6+
<Label text="{{ text }}" />
7+
<Label text="marked" visibility="{{ selected ? 'visible' : 'collapse' }}" />
8+
<Label text="{{ selected ? 'yep' : 'nope' }}" />
9+
<Label text="test" class="{{ selected ? 'selected' : 'unselected' }}" />
10+
<Label text="{{ selected ? 'yep' : 'nope' }}" class="{{ selected ? 'selected' : 'unselected' }}" />
11+
</StackLayout>
12+
</ListView.itemTemplate>
13+
</ListView>
14+
</StackLayout>
15+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export function loadExamples() {
1919
examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
2020
examples.set("row-height", "list-view/row-height");
2121
examples.set("width-percent", "list-view/width-percent");
22+
examples.set("item-re-layout", "list-view/item-re-layout");
2223

2324
return examples;
2425
}

0 commit comments

Comments
 (0)