Skip to content

Commit f7cc2d4

Browse files
farfromrefugfarfromrefug
committed
test: bring back the goold old demo!
1 parent 4379685 commit f7cc2d4

File tree

2 files changed

+54
-76
lines changed

2 files changed

+54
-76
lines changed

‎demo-vue/app/app.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {CollectionViewTraceCategory } from '@nativescript-community/ui-collectio
55

66
import CollectionView from '@nativescript-community/ui-collectionview/vue';
77
Vue.use(CollectionView);
8-
Trace.addCategories(CollectionViewTraceCategory);
9-
Trace.enable();
8+
// Trace.addCategories(CollectionViewTraceCategory);
9+
// Trace.enable();
1010

1111
Vue.config.silent = true;
1212

‎demo-vue/app/components/App.vue‎

Lines changed: 52 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -8,91 +8,69 @@
88
<CollectionView
99
automationText="collectionView"
1010
iosOverflowSafeArea="true"
11-
:items="items"
12-
@loaded="onLoaded"
13-
rowHeight="50"
11+
:items="itemList"
12+
@itemTap="onItemTap"
13+
@loadMoreItems="onLoadMoreItems"
14+
@itemLoadingEvent="onItemLoadingEvent"
15+
itemIdGenerator="index"
16+
colWidth="50%"
17+
rowHeight="200"
1418
>
1519
<v-template>
16-
<ListItem :rightValue="itemConnected(item)" :title="itemTitle(item)" :subtitle="itemSubtitle(item)" />
20+
<GridLayout rows="*, auto" :backgroundColor="item.color" class="item">
21+
<StackLayout row="1">
22+
<Label row="1" :text="item.name" class="title" />
23+
<Label row="1" :text="item.color" class="subtitle" />
24+
</StackLayout>
25+
</GridLayout>
1726
</v-template>
1827
</CollectionView>
1928
</GridLayout>
2029
</Page>
2130
</template>
2231

23-
<script lang="ts">
32+
<script>
2433
import { ObservableArray } from '@nativescript/core';
25-
import { Component, Prop } from 'vue-property-decorator';
26-
27-
import Vue from 'nativescript-vue';
28-
import ListItem from './ListItem.vue';
29-
30-
@Component({
31-
components: { ListItem }
32-
})
33-
export default class App extends Vue {
34-
items = new ObservableArray([
35-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c', subTitle: '', connected: true },
36-
{ index: 1, name: 'EMERALD', color: '#2ecc71', subTitle: '', connected: false },
37-
{ index: 2, name: 'PETER RIVER', color: '#3498db', subTitle: '', connected: true },
38-
{ index: 3, name: 'AMETHYST', color: '#9b59b6', subTitle: '' , connected: false},
39-
{ index: 4, name: 'WET ASPHALT', color: '#34495e', subTitle: '', connected: false }
40-
// { index: 5, name: 'GREEN SEA', color: '#16a085' },
41-
// { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
42-
// { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
43-
// { index: 8, name: 'WISTERIA', color: '#8e44ad' },
44-
// { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
45-
// { index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
46-
// { index: 11, name: 'CARROT', color: '#e67e22' },
47-
// { index: 12, name: 'ALIZARIN', color: '#e74c3c' },
48-
// { index: 13, name: 'CLOUDS', color: '#ecf0f1' },
49-
// { index: 14, name: 'CONCRETE', color: '#95a5a6' },
50-
// { index: 15, name: 'ORANGE', color: '#f39c12' },
51-
// { index: 16, name: 'PUMPKIN', color: '#d35400' },
52-
// { index: 17, name: 'POMEGRANATE', color: '#c0392b' },
53-
// { index: 18, name: 'SILVER', color: '#bdc3c7' },
54-
// { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
55-
]);
56-
get itemTitle() {
57-
return item => item.name;
58-
}
59-
get itemSubtitle() {
60-
return item => item.subTitle || item.UUID;
61-
}
62-
get itemConnected() {
63-
return item => {
64-
console.log('itemConnected', item.index, item.connected);
65-
return (item.connected ? 'connected' : 'disconnected')
34+
export default {
35+
data() {
36+
const items = new ObservableArray([
37+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
38+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
39+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
40+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
41+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
42+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
43+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
44+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
45+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
46+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
47+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
48+
{ index: 11, name: 'CARROT', color: '#e67e22' },
49+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
50+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
51+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
52+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
53+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
54+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
55+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
56+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
57+
]);
58+
return {
59+
itemList: items
6660
};
61+
},
62+
methods: {
63+
onItemTap({ index, item }) {
64+
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
65+
},
66+
onLoadMoreItems() {
67+
console.log('EVENT TRIGGERED: onLoadMoreItems()');
68+
},
69+
logEvent(e) {
70+
console.log('logEvent', e.eventName, e.extraData);
71+
}
6772
}
68-
onLoaded() {
69-
// start to stress timer
70-
setInterval(() => {
71-
const index = Math.round(Math.random() * 4);
72-
73-
this.items.some((d, i) => {
74-
if (i === index) {
75-
d.subTitle = Math.random().toFixed(2) + 'asdasdagƒ';
76-
this.items.setItem(index, d);
77-
return true;
78-
}
79-
return false;
80-
});
81-
// const item = this.items.getItem(index);
82-
// item.name = Math.random() + '';
83-
// this.items.setItem(index, item);
84-
}, 100);
85-
}
86-
onItemTap({ index, item }) {
87-
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
88-
}
89-
onLoadMoreItems() {
90-
console.log('EVENT TRIGGERED: onLoadMoreItems()');
91-
}
92-
logEvent(e) {
93-
console.log('logEvent', e.eventName, e.extraData);
94-
}
95-
}
73+
};
9674
</script>
9775

9876
<style scoped lang="scss">

0 commit comments

Comments
 (0)