Skip to content

Commit d057759

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/nativescript-collectionview
2 parents 530588b + 6d6c704 commit d057759

File tree

22 files changed

+614
-475
lines changed

22 files changed

+614
-475
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20.9.0

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [5.3.34](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.33...v5.3.34) (2024-05-24)
7+
8+
### Bug Fixes
9+
10+
* **android:** prevent possible errors on view unload ([7d39d03](https://github.com/@nativescript-community/ui-collectionview/commit/7d39d038807e1db998aab4410c51b5cacc498e24))
11+
12+
## [5.3.33](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.32...v5.3.33) (2024-05-23)
13+
14+
**Note:** Version bump only for package ui-collectionview
15+
616
## [5.3.32](https://github.com/@nativescript-community/ui-collectionview/compare/v5.3.31...v5.3.32) (2024-05-15)
717

818
### Bug Fixes

‎demo-react‎

‎demo-snippets/ng/install.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { SimpleWaterfallComponent } from './simple-waterfall/simple-waterfall.co
1010
import { SimpleTemplatesComponent } from './simple-templates/simple-templates.component';
1111
import { SwipeMenuComponent } from './swipe-menu/swipe-menu.component';
1212

13-
export const COMPONENTS = [SimpleGridComponent, HorizontalGridComponent, SimpleWaterfallComponent, SimpleTemplatesComponent];
13+
export const COMPONENTS = [SimpleGridComponent, HorizontalGridComponent, SimpleWaterfallComponent, SimpleTemplatesComponent, SwipeMenuComponent];
1414
@NgModule({
1515
imports: [CollectionViewModule, SwipeMenuModule],
1616
exports: [CollectionViewModule, SwipeMenuModule],

‎demo-snippets/ng/styles.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.item {
2+
padding: 10;
3+
color: white;
4+
5+
.title {
6+
font-size: 17;
7+
font-weight: bold;
8+
}
9+
10+
.subtitle {
11+
font-size: 14;
12+
}
13+
}

‎demo-snippets/ng/swipe-menu/swipe-menu.component.html‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,27 @@
11
<ActionBar>
22
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
3-
<Label text="Simple Grid"></Label>
3+
<Label text="Swipe Menu"></Label>
44
</ActionBar>
55

6-
<GridLayout>
7-
<CollectionView
8-
9-
[items]="items"
10-
(itemTap)="onItemTap($event)"
11-
(loadMoreItems)="onLoadMoreItems()"
12-
colWidth="50%"
13-
rowHeight="200"
14-
automationText="collectionView"
15-
>
6+
<GridLayout rows="auto,*">
7+
<CollectionView [items]="items" (itemTap)="onItemTap($event)" row="1" rowHeight="100" autoReloadItemOnLayout="true">
168
<ng-template let-item="item">
17-
<SwipeMenu
18-
leftSwipeDistance="300"
19-
[translationFunction]="drawerTranslationFunction"
20-
[startingSide]="item.startingSide"
21-
>
22-
<Gridlayout rows="*, auto" [backgroundColor]="item.color" class="item" mainContent width="100%">
23-
<Stacklayout row="1">
24-
<Label row="1" [text]="item.name" class="title" > </Label>
25-
<Label row="1" [text]="item.color" class="subtitle" > </Label>
26-
</Stacklayout>
27-
</Gridlayout>
28-
<Stacklayout leftDrawer orientation="horizontal" width="200">
29-
<Label [text]="item.menuOpened ? 'opened' : 'a'" width="100" height="100%" backgroundColor="red" textAlignment="center" > </Label>
30-
<Label text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center" > </Label>
31-
</Stacklayout>
32-
</SwipeMenu>
9+
<SwipeMenu [leftSwipeDistance]="swipeMenuThreshold" [rightSwipeDistance]="swipeMenuThreshold" [translationFunction]="drawerTranslationFunction" [startingSide]="item.startingSide">
10+
<Gridlayout rows="*, auto" [backgroundColor]="item.color" class="item" mainContent width="100%">
11+
<Stacklayout row="1">
12+
<Label row="1" [text]="item.name" class="title"></Label>
13+
<Label row="1" [text]="item.color" class="subtitle"></Label>
14+
</Stacklayout>
15+
</Gridlayout>
16+
<Stacklayout leftSwipeMenu orientation="horizontal" width="200">
17+
<Label (tap)="menuItemTap($event)" [text]="item.startingSide ? 'opened' : 'a'" width="100" height="100%" backgroundColor="red" textAlignment="center"></Label>
18+
<Label (tap)="menuItemTap($event)" text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center"></Label>
19+
</Stacklayout>
20+
<Stacklayout rightSwipeMenu orientation="horizontal" width="200">
21+
<Label (tap)="menuItemTap($event)" [text]="item.startingSide ? 'opened' : 'a'" width="100" height="100%" backgroundColor="red" textAlignment="center"></Label>
22+
<Label (tap)="menuItemTap($event)" text="b" width="100" height="100%" backgroundColor="blue" textAlignment="center"></Label>
23+
</Stacklayout>
24+
</SwipeMenu>
3325
</ng-template>
3426
</CollectionView>
3527
</GridLayout>

‎demo-snippets/ng/swipe-menu/swipe-menu.component.ts‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { RouterExtensions } from '@nativescript/angular';
3+
import { ObservableArray, Screen } from '@nativescript/core';
34

45
@Component({
56
selector: 'ns-collectionview-swipe-menu',
6-
templateUrl: './swipe-menu.component.html'
7+
templateUrl: './swipe-menu.component.html',
8+
styleUrls: ['../styles.scss']
79
})
8-
export class SwipeMenuComponent implements OnInit {
10+
export class SwipeMenuComponent {
911
constructor(private router: RouterExtensions) {}
1012

11-
items = [
13+
items = new ObservableArray([
1214
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
1315
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
1416
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
@@ -29,28 +31,37 @@ export class SwipeMenuComponent implements OnInit {
2931
{ index: 17, name: 'POMEGRANATE', color: '#c0392b' },
3032
{ index: 18, name: 'SILVER', color: '#bdc3c7' },
3133
{ index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
32-
];
34+
]);
3335

34-
ngOnInit(): void {}
35-
36-
goBack(): void {
37-
this.router.back();
38-
}
39-
40-
onItemTap({ index, item }) {
41-
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
42-
}
43-
44-
onLoadMoreItems() {
45-
console.log('EVENT TRIGGERED: onLoadMoreItems()');
46-
}
4736
drawerTranslationFunction(side, width, value, delta, progress) {
4837
const result = {
4938
mainContent: {
50-
translateX: side === 'right' ? -delta : delta
39+
translateX: side === 'right' ? -delta : delta,
40+
opacity: progress < 1 ? 1 : 0.8
41+
},
42+
backDrop: {
43+
opacity: progress * 0.00001
5144
}
5245
} as any;
53-
46+
console.log(`drawerTranslation invoked\n side: ${side}, width: ${width}, value: ${value}, delta: ${delta}, progress: ${progress}`);
5447
return result;
5548
}
49+
50+
swipeMenuThreshold = Screen.mainScreen.widthPixels;
51+
menuItemTap(e) {
52+
console.log(`EVENT TRIGGERED: Tapped on ${e.object.text}`);
53+
}
54+
onItemTap({ index, item, view }) {
55+
console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
56+
57+
// startingSide means that a swipemenu is open, so close it
58+
if (item.startingSide) {
59+
console.log('Menu open, closing ...');
60+
view.close();
61+
}
62+
}
63+
64+
goBack(): void {
65+
this.router.back();
66+
}
5667
}

‎demo-vue‎

‎docs/assets/navigation.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/search.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)