fix: Fix actions sizing (#2)

* fix: Fix actions height * bump version
PeterStaev · Apr 3, 2023 · 0b02a11 · 0b02a11
1 parent 7beb85f
commit 0b02a11
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml
@@ -11,14 +11,16 @@
                 </sv:SwipeView.leftActionsTemplate>
 
                 <sv:SwipeView.rightActionsTemplate>
-                    <StackLayout backgroundColor="red" color="white" tap="onDelete">
-                        <Label text="Delete" />
-                    </StackLayout>
+                    <GridLayout rows="*, auto, *" backgroundColor="red" color="white" tap="onDelete">
+                        <Label row="1" text="Delete" />
+                    </GridLayout>
                 </sv:SwipeView.rightActionsTemplate>
 
-                <GridLayout backgroundColor="white">
+                <StackLayout backgroundColor="white">
+                    <Label text="{{ value }}" verticalAlignment="center"/>
+                    <Label text="{{ value }}" verticalAlignment="center"/>
                     <Label text="{{ value }}" verticalAlignment="center"/>
-                </GridLayout>
+                </StackLayout>
             </sv:SwipeView>
         </ListView.itemTemplate>
     </ListView>

diff --git a/src/package.json b/src/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nativescript-swipe-view",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "NativeScript plugin to connect with Azure Notification Hubs",
   "main": "dist/swipe-view",
   "typings": "swipe-view.d.ts",

diff --git a/src/swipe-view.ts b/src/swipe-view.ts
@@ -128,11 +128,24 @@ export class SwipeView extends GridLayout implements definition.SwipeView {
             return;
         }
 
-        if (this._prevPanState !== e.state) {
+        // Swipe start
+        if (e.state === 2
+            && this._prevPanState !== e.state) {
             this.parent?.notify({
                 eventName: SwipeView.swipeViewSwipeStartedEvent,
                 object: this,
             });
+
+            // Set the height of the swipe view to the max from all. Otherwise it is not resized correctly.
+            const itemViewHeight = this.getChildAt(1)?.getMeasuredHeight();
+            const leftActionsHeight = this._leftActionsTemplateView?.getMeasuredHeight();
+            const rightActionsHeight = this._rightActionsTemplateView?.getMeasuredHeight();
+            const finalHeight = Math.max(
+                itemViewHeight || 0,
+                leftActionsHeight || 0,
+                rightActionsHeight || 0,
+            );
+            this._swipeView.height = Utils.layout.toDeviceIndependentPixels(finalHeight);
         }
 
         this._prevPanState = e.state;