From 127da1ac797a580c8be9b22b3dd93f52e007af87 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Thu, 13 Sep 2018 21:07:12 +0200
Subject: [PATCH] fix(sliding-item): swipe event

---
 core/src/components.d.ts                      |  2 +-
 .../components/item-option/item-option.scss   |  7 ++---
 .../components/item-options/item-options.tsx  |  6 ++--
 .../components/item-sliding/item-sliding.tsx  | 30 +++++++++++--------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 92ea704f84..367e569fc1 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2030,7 +2030,7 @@ export namespace Components {
     /**
     * Emitted when the item has been fully swiped.
     */
-    'onIonSwipe'?: (event: CustomEvent<void>) => void;
+    'onIonSwipe'?: (event: CustomEvent<any>) => void;
     /**
     * The side the option button should be on. Possible values: `"start"` and `"end"`. Defaults to `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
     */
diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss
index 646ead051d..124b0bcd45 100644
--- a/core/src/components/item-option/item-option.scss
+++ b/core/src/components/item-option/item-option.scss
@@ -7,6 +7,7 @@
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
 
+  background: #{current-color(base)};
   color: #{current-color(contrast)};
 
   font-family: $font-family-base;
@@ -23,16 +24,12 @@
 
   outline: none;
 
-  background: #{current-color(base)};
+  background: transparent;
 
   cursor: pointer;
   appearance: none;
 }
 
-.item-option-native:hover {
-  opacity: 0.8;
-}
-
 .item-option-button-inner {
   display: flex;
 
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index f65e274e34..4aa2eb05d0 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -24,11 +24,13 @@ export class ItemOptions {
   /**
    * Emitted when the item has been fully swiped.
    */
-  @Event() ionSwipe!: EventEmitter<void>;
+  @Event() ionSwipe!: EventEmitter<any>;
 
   @Method()
   fireSwipeEvent() {
-    this.ionSwipe.emit();
+    this.ionSwipe.emit({
+      side: this.side
+    });
   }
 
   hostData() {
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index 72a0501ab5..7ed37927fd 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -108,14 +108,8 @@ export class ItemSliding {
    * the width of the options.
    */
   @Method()
-  async getSlidingRatio(): Promise<number> {
-    if (this.openAmount > 0) {
-      return this.openAmount / this.optsWidthRightSide;
-    } else if (this.openAmount < 0) {
-      return this.openAmount / this.optsWidthLeftSide;
-    } else {
-      return 0;
-    }
+  getSlidingRatio(): Promise<number> {
+    return Promise.resolve(this.getSlidingRatioSync());
   }
 
   /**
@@ -232,11 +226,12 @@ export class ItemSliding {
       restingPoint = 0;
     }
 
+    const state = this.state;
     this.setOpenAmount(restingPoint, true);
 
-    if ((this.state & SlidingState.SwipeEnd) !== 0 && this.rightOptions) {
+    if ((state & SlidingState.SwipeEnd) !== 0 && this.rightOptions) {
       this.rightOptions.fireSwipeEvent();
-    } else if ((this.state & SlidingState.SwipeStart) !== 0 && this.leftOptions) {
+    } else if ((state & SlidingState.SwipeStart) !== 0 && this.leftOptions) {
       this.leftOptions.fireSwipeEvent();
     }
   }
@@ -290,14 +285,24 @@ export class ItemSliding {
 
     style.transform = `translate3d(${-openAmount}px,0,0)`;
     this.ionDrag.emit({
-      amount: openAmount
+      amount: openAmount,
+      ratio: this.getSlidingRatioSync()
     });
   }
 
+  private getSlidingRatioSync(): number {
+    if (this.openAmount > 0) {
+      return this.openAmount / this.optsWidthRightSide;
+    } else if (this.openAmount < 0) {
+      return this.openAmount / this.optsWidthLeftSide;
+    } else {
+      return 0;
+    }
+  }
+
   hostData() {
     return {
       class: {
-        'item-sliding': true,
         'item-sliding-active-slide': (this.state !== SlidingState.Disabled),
         'item-sliding-active-options-end': (this.state & SlidingState.End) !== 0,
         'item-sliding-active-options-start': (this.state & SlidingState.Start) !== 0,
@@ -308,7 +313,6 @@ export class ItemSliding {
   }
 }
 
-/** @hidden */
 function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean {
   // The logic required to know when the sliding item should close (openAmount=0)
   // depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)