From 421b7da6769d4cb62f3417ac69077a823921a1c4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 13 Jan 2017 12:02:38 -0500
Subject: [PATCH] fix(item-sliding): don't error or allow swipes with no
 options

Added items with the following use cases:

1. Sliding item without options
2. Sliding item with one set of dynamic options that toggle
3. Sliding item with two options, one dynamic

Removing my code will cause errors in all of the above examples.

Fixes #9914
---
 src/components/item/item-sliding.ts           | 12 +++-
 .../item/test/sliding/app-module.ts           |  5 +-
 src/components/item/test/sliding/main.html    | 66 ++++++++++++++-----
 3 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
index 6fc416ffb1..b3c8840dd8 100644
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -42,7 +42,7 @@ export const enum ItemSideFlags {
 })
 export class ItemOptions {
   /**
-   * @input {string} the side the option button should be on. Defaults to right
+   * @input {string} the side the option button should be on. Defaults to right.
    * If you have multiple `ion-item-options`, a side must be provided for each.
    */
   @Input() side: string;
@@ -103,7 +103,7 @@ export const enum SlidingState {
  *       <button ion-button (click)="favorite(item)">Favorite</button>
  *       <button ion-button color="danger" (click)="share(item)">Share</button>
  *     </ion-item-options>
-
+ *
  *     <ion-item-options side="right">
  *       <button ion-button (click)="unread(item)">Unread</button>
  *     </ion-item-options>
@@ -125,7 +125,7 @@ export const enum SlidingState {
  *     Archive
  *   </button>
  * </ion-item-options>
-
+ *
  * <ion-item-options side="left">
  *   <button ion-button (click)="archive(item)">
  *     <ion-icon name="archive"></ion-icon>
@@ -233,6 +233,10 @@ export class ItemSliding {
   @ContentChildren(ItemOptions)
   set _itemOptions(itemOptions: QueryList<ItemOptions>) {
     let sides = 0;
+
+    // Reset left and right options in case they were removed
+    this._leftOptions = this._rightOptions = null;
+
     for (var item of itemOptions.toArray()) {
       var side = item.getSides();
       if (side === ItemSideFlags.Left) {
@@ -293,10 +297,12 @@ export class ItemSliding {
     }
 
     let openAmount = (this._startX - x);
+
     switch (this._sides) {
       case ItemSideFlags.Right: openAmount = Math.max(0, openAmount); break;
       case ItemSideFlags.Left: openAmount = Math.min(0, openAmount); break;
       case ItemSideFlags.Both: break;
+      case ItemSideFlags.None: return;
       default: assert(false, 'invalid ItemSideFlags value'); break;
     }
 
diff --git a/src/components/item/test/sliding/app-module.ts b/src/components/item/test/sliding/app-module.ts
index 101fa1e5c2..e9e54b51df 100644
--- a/src/components/item/test/sliding/app-module.ts
+++ b/src/components/item/test/sliding/app-module.ts
@@ -14,6 +14,8 @@ export class E2EPage {
   moreText: string = 'Dynamic More';
   archiveText: string = 'Dynamic Archive';
 
+  showOptions: boolean = false;
+
   constructor(private nav: NavController, private alertCtrl: AlertController, private toastCtrl: ToastController) {
     for (let x = 0; x < 5; x++) {
       this.items.push(x);
@@ -28,10 +30,11 @@ export class E2EPage {
     if (this.moreText.includes('Dynamic')) {
       this.moreText = 'Changed More';
       this.archiveText = 'Changed Archive';
-
+      this.showOptions = true;
     } else {
       this.moreText = 'Dynamic More';
       this.archiveText = 'Dynamic Archive';
+      this.showOptions = false;
     }
   }
 
diff --git a/src/components/item/test/sliding/main.html b/src/components/item/test/sliding/main.html
index b5a3977b47..fe7af3ce8c 100644
--- a/src/components/item/test/sliding/main.html
+++ b/src/components/item/test/sliding/main.html
@@ -20,6 +20,50 @@
 
   <ion-list #myList>
 
+    <ion-item-sliding>
+      <ion-item>
+        <h2>No Options</h2>
+        <p>Should not error or swipe without options</p>
+      </ion-item>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item6>
+      <ion-item>
+        One Line, dynamic option and text
+      </ion-item>
+      <ion-item-options *ngIf="showOptions">
+        <button ion-button color="primary">
+          <ion-icon name="more"></ion-icon>
+          {{ moreText }}
+        </button>
+        <button ion-button color="secondary" (click)="archive(item6)">
+          <ion-icon name="archive"></ion-icon>
+          {{ archiveText }}
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item6>
+      <ion-item>
+        Two options, one dynamic option and text
+      </ion-item>
+      <ion-item-options side="left">
+        <button ion-button icon-only color="primary">
+          <ion-icon name="more"></ion-icon>
+        </button>
+      </ion-item-options>
+      <ion-item-options side="right" *ngIf="showOptions">
+        <button ion-button color="primary">
+          <ion-icon name="more"></ion-icon>
+          {{ moreText }}
+        </button>
+        <button ion-button color="secondary" (click)="archive(item6)">
+          <ion-icon name="archive"></ion-icon>
+          {{ archiveText }}
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+
     <ion-item-sliding #item100>
       <a ion-item>
         <h2>HubStruck Notifications</h2>
@@ -39,7 +83,7 @@
         <button ion-button icon-only color="danger" (click)="unread(item100)">
           <ion-icon name="trash"></ion-icon>
         </button>
-        <button ion-button icon-only (click)="unread(item100)" >
+        <button ion-button icon-only (click)="unread(item100)">
           <ion-icon name="star"></ion-icon>
         </button>
       </ion-item-options>
@@ -90,7 +134,6 @@
       </ion-item-options>
     </ion-item-sliding>
 
-
     <ion-item-sliding #item3>
       <ion-item text-wrap detail-push>
         <h2>RIGHT/LEFT side - icons (item-left)</h2>
@@ -146,21 +189,6 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding #item6>
-      <ion-item>
-        One Line, dynamic option
-      </ion-item>
-      <ion-item-options>
-        <button ion-button color="primary">
-          <ion-icon name="more"></ion-icon>
-          {{ moreText }}
-        </button>
-        <button ion-button color="secondary" (click)="archive(item6)">
-          <ion-icon name="archive"></ion-icon>
-          {{ archiveText }}
-        </button>
-      </ion-item-options>
-    </ion-item-sliding>
 
     <ion-item-sliding #item7>
       <ion-item>
@@ -240,6 +268,7 @@
   img {
     height: 100px;
   }
+
   #download-spinner {
     display: none;
   }
@@ -247,10 +276,13 @@
   svg circle {
     stroke: white;
   }
+
   .downloading #download-spinner {
     display: block;
   }
+
   .downloading .download-hide {
     display: none;
   }
+
 </style>