Skip to content

Commit 9463859

Browse files
rigor789rigor789
committed
test(samples): update collection-view repro
1 parent eb85ed2 commit 9463859

File tree

4 files changed

+182
-55
lines changed

4 files changed

+182
-55
lines changed

‎samples/app/components/ListItem.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template functional>
2+
<GridLayout rows="60, auto, 40">
3+
<Label row="0"
4+
textAlignment="center"
5+
:text="props.item.type"/>
6+
7+
<!-- Content -->
8+
<ContentView row="1">
9+
<slot>
10+
<Label textWrap :text="props.item.body" class="content"/>
11+
</slot>
12+
</ContentView>
13+
14+
<GridLayout columns="*, *" row="2">
15+
<Button @tap="() => listeners.toggleLike()"
16+
:text="props.item.liked ? ' Unlike' : ' Like'"
17+
:color="props.item.liked ? 'blue' : 'black'"
18+
col="0" row="1"/>
19+
<Button text="Blah"
20+
col="1" row="1"/>
21+
</GridLayout>
22+
</GridLayout>
23+
</template>
24+
25+
<script>
26+
export default {
27+
functional: true,
28+
props: {
29+
item: {
30+
type: Object,
31+
required: true
32+
},
33+
}
34+
}
35+
</script>

‎samples/app/components/ListViewTest.vue

Lines changed: 138 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,153 @@
11
<template>
22
<Page>
3-
<CollectionView for="item in listItemsObservable"
4-
separatorColor="transparent">
3+
<CollectionView for="item in listItems"
4+
separatorColor="transparent">
5+
6+
7+
<!-- A post with a single image -->
8+
<v-template if="item.type === 'post.image.single'">
9+
<ListItem :item="item" @toggleLike="togglePostLike(item)">
10+
<GridLayout rows="auto, auto">
11+
<Label textWrap :text="item.body" class="content"/>
12+
13+
<Label backgroundColor="red"
14+
height="200"
15+
stretch="aspectFill"
16+
row="1"/>
17+
</GridLayout>
18+
</ListItem>
19+
</v-template>
20+
21+
<!-- A post with 2 images -->
22+
<v-template if="item.type === 'post.image.double'">
23+
<ListItem :item="item" @toggleLike="togglePostLike(item)">
24+
<GridLayout rows="auto, auto" columns="*, *">
25+
<Label textWrap :text="item.body" class="content" colSpan="2"/>
26+
27+
<Label backgroundColor="red"
28+
height="200"
29+
stretch="aspectFill"
30+
col="0"
31+
row="1"/>
32+
<Label backgroundColor="green"
33+
height="200"
34+
stretch="aspectFill"
35+
col="1"
36+
row="1"/>
37+
</GridLayout>
38+
</ListItem>
39+
</v-template>
40+
41+
<!-- A post with more than 2 images -->
42+
<v-template if="item.type === 'post.image.multiple'">
43+
<ListItem :item="item" @toggleLike="togglePostLike(item)">
44+
<GridLayout rows="auto, auto, auto" columns="2*, *">
45+
<Label textWrap :text="item.body" class="content" colSpan="2"/>
46+
47+
<Label backgroundColor="red"
48+
height="200"
49+
stretch="aspectFill"
50+
col="0"
51+
row="1"
52+
rowSpan="2"/>
53+
<Label backgroundColor="green"
54+
height="100"
55+
stretch="aspectFill"
56+
col="1"
57+
row="1"/>
58+
<Label backgroundColor="blue"
59+
height="100"
60+
stretch="aspectFill"
61+
col="1"
62+
row="2"/>
63+
</GridLayout>
64+
</ListItem>
65+
</v-template>
66+
67+
<!-- A default post if there are no events or images -->
568
<v-template if="item.type === 'post'">
6-
<!--<Label :text="JSON.stringify(item, null, 2)"/>-->
7-
<GridLayout rows="50, *, 50" margin="8" background="white" ___height="800px">
8-
<!-- Top Actions -->
9-
<Label backgroundColor="rgba(255, 0, 0, 0.2)"/>
10-
11-
<!-- Content -->
12-
<Label :text="item.body" textWrap row="1"/>
13-
<!--<Label text="Static text to test" textWrap row="1"/>-->
14-
15-
<!-- Bottom Actions -->
16-
<Label @tap="togglePostLike(item, $index)"
17-
:text="item.liked ? 'Unlike' : 'Like'"
18-
backgroundColor="rgba(0, 0, 255, 0.2)"
19-
row="2"/>
20-
</GridLayout>
69+
<ListItem :item="item" @toggleLike="togglePostLike(item)"/>
2170
</v-template>
2271

23-
<!--<v-template if="item.type === 'indicator' && item.state === 'loading'">-->
24-
<!-- <GridLayout rows="auto" padding="24">-->
25-
<!-- <Label text="Loading..." row="1"/>-->
26-
<!-- </GridLayout>-->
27-
<!--</v-template>-->
28-
<!--<v-template if="item.type === 'indicator' && item.state === 'end'">-->
29-
<!-- <GridLayout rows="auto" padding="24">-->
30-
<!-- <Label text="Reached end." row="1"/>-->
72+
<v-template>
73+
<ListItem :item="item" @toggleLike="togglePostLike(item)"/>
74+
</v-template>
75+
76+
<!--<v-template if="item.type === 'post'">-->
77+
<!-- &lt;!&ndash;<Label :text="JSON.stringify(item, null, 2)"/>&ndash;&gt;-->
78+
<!-- <GridLayout rows="50, *, 50" margin="8" background="white" ___height="800px">-->
79+
<!-- &lt;!&ndash; Top Actions &ndash;&gt;-->
80+
<!-- <Label backgroundColor="rgba(255, 0, 0, 0.2)"/>-->
81+
82+
<!-- &lt;!&ndash; Content &ndash;&gt;-->
83+
<!-- <Label :text="item.body" textWrap row="1"/>-->
84+
<!-- &lt;!&ndash;<Label text="Static text to test" textWrap row="1"/>&ndash;&gt;-->
85+
86+
<!-- &lt;!&ndash; Bottom Actions &ndash;&gt;-->
87+
<!-- <Label @tap="togglePostLike(item, $index)"-->
88+
<!-- :text="item.liked ? 'Unlike' : 'Like'"-->
89+
<!-- backgroundColor="rgba(0, 0, 255, 0.2)"-->
90+
<!-- row="2"/>-->
3191
<!-- </GridLayout>-->
3292
<!--</v-template>-->
93+
94+
<v-template if="item.type === 'indicator' && item.state === 'loading'">
95+
<GridLayout rows="auto" padding="24">
96+
<Label text="Loading..." row="1"/>
97+
</GridLayout>
98+
</v-template>
99+
<v-template if="item.type === 'indicator' && item.state === 'end'">
100+
<GridLayout rows="auto" padding="24">
101+
<Label text="Reached end." row="1"/>
102+
</GridLayout>
103+
</v-template>
33104
</CollectionView>
34105
</Page>
35106
</template>
36107

37108
<script>
109+
import ListItem from './ListItem'
38110
import {ObservableArray} from '@nativescript/core'
39-
111+
import {loremIpsum} from 'lorem-ipsum'
112+
113+
const getType = (images, event) => {
114+
let type = 'post'
115+
116+
if (event && images === 0) {
117+
type = 'post.event'
118+
} else if (images === 1) {
119+
type = 'post.image.single'
120+
} else if (images === 2) {
121+
type = 'post.image.double'
122+
} else if (images > 2) {
123+
type = 'post.image.multiple'
124+
}
125+
return type
126+
}
127+
const genPost = (sentences, images = 0, event = false) => ({
128+
liked: false,
129+
type: getType(images, event),
130+
body: loremIpsum({
131+
count: sentences,
132+
format: 'html'
133+
})
134+
})
40135
const loadItems = () => new Promise(resolve => setTimeout(() => {
41136
resolve({
42137
items: [
43-
{
44-
liked: false,
45-
body: 'Hello World '.repeat(200)
46-
},
47-
{
48-
liked: true,
49-
body: 'Something else... '.repeat(20)
50-
},
51-
{
52-
liked: false,
53-
body: 'Something even else. '.repeat(40)
54-
},
55-
{
56-
liked: true,
57-
body: 'Something else 2. '.repeat(50)
58-
},
138+
genPost(1, 0, true),
139+
genPost(3, 1, false),
140+
genPost(1, 2, false),
141+
genPost(10, 5, false),
142+
genPost(1, 0, false),
143+
genPost(1, 4, false),
144+
genPost(1, 1, true),
145+
genPost(1, 0, true),
146+
genPost(10, 3, false),
147+
genPost(1, 2, false),
148+
genPost(10, 1, false),
149+
genPost(1, 1, false),
150+
genPost(10, 0, false),
59151
]
60152
})
61153
}, 1000))
@@ -118,29 +210,21 @@
118210
return
119211
}
120212
121-
this.feedItems = res.items.map(item => {
122-
return {
123-
type: 'post',
124-
body: item.body,
125-
liked: !!item.liked
126-
}
127-
})
128-
213+
this.feedItems = res.items
129214
this.listState = ListStates.IDLE
130215
131216
},
132217
133218
async togglePostLike(item) {
134219
console.log('post like changed')
135-
136220
item.liked = !item.liked
137-
138221
// this.listItemsObservable.setItem(this.listItemsObservable.indexOf(item), {
139222
// ...item,
140223
// })
141224
}
225+
},
226+
components: {
227+
ListItem
142228
}
143229
}
144-
145-
146230
</script>

‎samples/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@vue/devtools": "5.1.0",
23+
"lorem-ipsum": "^2.0.3",
2324
"nativescript-collectionview": "2.0.26",
2425
"nativescript-socketio": "^3.3.1",
2526
"nativescript-theme-core": "1.0.6",

‎samples/yarn.lock

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1892,7 +1892,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
18921892
dependencies:
18931893
delayed-stream "~1.0.0"
18941894

1895-
commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
1895+
commander@^2.17.1, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
18961896
version "2.20.3"
18971897
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
18981898
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4161,6 +4161,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
41614161
dependencies:
41624162
js-tokens "^3.0.0 || ^4.0.0"
41634163

4164+
lorem-ipsum@^2.0.3:
4165+
version "2.0.3"
4166+
resolved "https://registry.yarnpkg.com/lorem-ipsum/-/lorem-ipsum-2.0.3.tgz#9f1fa634780c9f58a349d4e091c3ba74f733164e"
4167+
integrity sha512-CX2r84DMWjW/DWiuzicTI9aRaJPAw2cvAGMJYZh/nx12OkTGqloj8y8FU0S8ZkKwOdqhfxEA6Ly8CW2P6Yxjwg==
4168+
dependencies:
4169+
commander "^2.17.1"
4170+
41644171
loud-rejection@^1.0.0:
41654172
version "1.6.0"
41664173
resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"

0 commit comments

Comments
 (0)