Skip to content

Commit 19c35ac

Browse files
author
farfromrefug
committed
chore: lint
1 parent da6964c commit 19c35ac

File tree

3 files changed

+91
-101
lines changed

3 files changed

+91
-101
lines changed

‎demo-snippets/svelte/HorizontalGrid.svelte‎

Lines changed: 44 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
1+
<style>
2+
ActionBar {
3+
background-color: #ed3e04;
4+
color: white;
5+
}
6+
.item {
7+
padding: 10;
8+
color: white;
9+
}
10+
.title {
11+
font-size: 17;
12+
font-weight: bold;
13+
}
14+
.subtitle {
15+
font-size: 14;
16+
}
17+
</style>
18+
119
<script lang="ts">
220
import { Template } from 'svelte-native/components';
321
const items = [
4-
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
5-
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
6-
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
7-
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
8-
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
9-
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
10-
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
11-
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
12-
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
13-
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
14-
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
15-
{ index: 11, name: 'CARROT', color: '#e67e22' },
16-
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
17-
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
18-
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
19-
{ index: 15, name: 'ORANGE', color: '#f39c12' },
20-
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
21-
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
22-
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
23-
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
24-
];
25-
22+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
23+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
24+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
25+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
26+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
27+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
28+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
29+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
30+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
31+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' },
32+
{ index: 10, name: 'SUN FLOWER', color: '#f1c40f' },
33+
{ index: 11, name: 'CARROT', color: '#e67e22' },
34+
{ index: 12, name: 'ALIZARIN', color: '#e74c3c' },
35+
{ index: 13, name: 'CLOUDS', color: '#ecf0f1' },
36+
{ index: 14, name: 'CONCRETE', color: '#95a5a6' },
37+
{ index: 15, name: 'ORANGE', color: '#f39c12' },
38+
{ index: 16, name: 'PUMPKIN', color: '#d35400' },
39+
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
40+
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
41+
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
42+
];
43+
2644
function onItemTap({ index, item }) {
2745
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
2846
}
@@ -34,41 +52,15 @@
3452
<page>
3553
<actionBar title="Simple Grid" />
3654
<gridLayout>
37-
<collectionView
38-
{items}
39-
40-
colWidth="50%"
41-
rowHeight="50%"
42-
on:itemTap="{onItemTap}"
43-
on:loadMoreItems="{onLoadMoreItems}"
44-
orientation="horizontal"
45-
>
55+
<collectionView colWidth="50%" {items} orientation="horizontal" rowHeight="50%" on:itemTap={onItemTap} on:loadMoreItems={onLoadMoreItems}>
4656
<Template let:item>
47-
<gridlayout rows="*, auto" backgroundColor="{item.color}" class="item">
57+
<gridlayout class="item" backgroundColor={item.color} rows="*, auto">
4858
<stacklayout row="1">
49-
<label row="1" text="{item.name}" class="title" />
50-
<label row="1" text="{item.color}" class="subtitle" />
59+
<label class="title" row="1" text={item.name} />
60+
<label class="subtitle" row="1" text={item.color} />
5161
</stacklayout>
5262
</gridlayout>
5363
</Template>
5464
</collectionView>
5565
</gridLayout>
5666
</page>
57-
58-
<style>
59-
ActionBar {
60-
background-color:#ed3e04;
61-
color: white;
62-
}
63-
.item {
64-
padding: 10;
65-
color: white;
66-
}
67-
.title {
68-
font-size: 17;
69-
font-weight: bold;
70-
}
71-
.subtitle {
72-
font-size: 14;
73-
}
74-
</style>

‎demo-snippets/svelte/ResizeCell.svelte‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
1+
<style>
2+
ActionBar {
3+
background-color: #ed3e04;
4+
color: white;
5+
}
6+
.item {
7+
padding: 10;
8+
color: white;
9+
}
10+
.title {
11+
font-size: 17;
12+
font-weight: bold;
13+
}
14+
.subtitle {
15+
font-size: 14;
16+
}
17+
</style>
18+
119
<script lang="ts">
220
import { ObservableArray, View } from '@nativescript/core';
321
import { Template } from 'svelte-native/components';
422
import ResizeView from './ResizeView.svelte';
523
6-
let items = new ObservableArray([
24+
const items = new ObservableArray([
725
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
826
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
927
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
@@ -29,21 +47,21 @@
2947
async function resizeCell(item, event) {
3048
try {
3149
const actualItem = item;
32-
actualItem.showMenu = !actualItem.showMenu;
33-
console.log('resizeCell', actualItem.showMenu)
34-
async function animate(options = {}) {
35-
const newHeight = actualItem.showMenu ? 200 : 100;
36-
return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
37-
}
50+
actualItem.showMenu = !actualItem.showMenu;
51+
console.log('resizeCell', actualItem.showMenu);
52+
async function animate(options = {}) {
53+
const newHeight = actualItem.showMenu ? 200 : 100;
54+
return (event.object as View).animate({ height: newHeight, ...options, duration: 300 });
55+
}
3856
39-
const updateItem = () => {
40-
if (item) {
41-
const index = this.items.findIndex((i) => i === item);
42-
// console.log('updateItem', index, item);
43-
this.items.setItem(index, item);
44-
}
45-
};
46-
await animate();
57+
const updateItem = () => {
58+
if (item) {
59+
const index = this.items.findIndex((i) => i === item);
60+
// console.log('updateItem', index, item);
61+
this.items.setItem(index, item);
62+
}
63+
};
64+
await animate();
4765
} catch (error) {
4866
console.error(error);
4967
}
@@ -53,41 +71,23 @@
5371
<page>
5472
<actionBar title="Resize Cell" />
5573
<gridLayout rows="auto,*">
56-
<collectionView {items} row="1" autoReloadItemOnLayout={true}>
74+
<collectionView autoReloadItemOnLayout={true} {items} row="1">
5775
<Template let:item>
5876
<!-- it is important to use a custom component
5977
the reason is that for this to work in collectionview
6078
upon resize animation the Svelte component needs to update its "height" property
6179
otherwise Collectionview bind will report wrong height on cell reuse -->
62-
<gridlayout id="resizeHolder" rows="101,100" on:tap={e=>resizeCell(item,e)} height={item.showMenu === true ? 200 : 100} verticalAlignment="top">
63-
<stacklayout row="0" class="item" backgroundColor={item.color}>
64-
<label row="1" text={item.name} class="title" />
65-
<label row="1" text={item.color} class="subtitle" />
80+
<gridlayout id="resizeHolder" height={item.showMenu === true ? 200 : 100} rows="101,100" verticalAlignment="top" on:tap={(e) => resizeCell(item, e)}>
81+
<stacklayout class="item" backgroundColor={item.color} row="0">
82+
<label class="title" row="1" text={item.name} />
83+
<label class="subtitle" row="1" text={item.color} />
6684
</stacklayout>
67-
<stacklayout row="1" orientation="horizontal" height="100">
68-
<label text="a" width="100" height="100%" backgroundColor="red" textAlignment="center" />
69-
<label text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center" />
85+
<stacklayout height="100" orientation="horizontal" row="1">
86+
<label backgroundColor="red" height="100%" text="a" textAlignment="center" width="100" />
87+
<label backgroundColor="blue" height="100%" text="b" textAlignment="center" width="100" />
7088
</stacklayout>
7189
</gridlayout>
7290
</Template>
7391
</collectionView>
7492
</gridLayout>
7593
</page>
76-
77-
<style>
78-
ActionBar {
79-
background-color: #ed3e04;
80-
color: white;
81-
}
82-
.item {
83-
padding: 10;
84-
color: white;
85-
}
86-
.title {
87-
font-size: 17;
88-
font-weight: bold;
89-
}
90-
.subtitle {
91-
font-size: 14;
92-
}
93-
</style>

‎demo-snippets/svelte/install.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
2-
import {CollectionViewTraceCategory} from '@nativescript-community/ui-collectionview';
3-
import install from '@nativescript-community/ui-collectionview-waterfall';
41
import SwipeMenuElement from '@nativescript-community/ui-collectionview-swipemenu/svelte';
5-
import {Trace} from '@nativescript/core';
2+
import install from '@nativescript-community/ui-collectionview-waterfall';
3+
import CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';
64

7-
import SimpleGrid from './SimpleGrid.svelte';
85
import HorizontalGrid from './HorizontalGrid.svelte';
9-
import SimpleWaterfall from './SimpleWaterfall.svelte';
6+
import ResizeCell from './ResizeCell.svelte';
7+
import SimpleGrid from './SimpleGrid.svelte';
108
import SimpleTemplates from './SimpleTemplates.svelte';
9+
import SimpleWaterfall from './SimpleWaterfall.svelte';
1110
import SwipeMenu from './SwipeMenu.svelte';
12-
import ResizeCell from './ResizeCell.svelte';
1311

1412
export function installPlugin() {
1513
CollectionViewElement.register();
@@ -27,4 +25,4 @@ export const demos = [
2725
];
2826

2927
// Trace.addCategories(CollectionViewTraceCategory)
30-
// Trace.enable()
28+
// Trace.enable()

0 commit comments

Comments
 (0)