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

Author: brandyscarney

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;
     }
 

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;
     }
   }
 

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 @@ <h2>HubStruck Notifications</h2>
         <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 @@ <h2>RIGHT/LEFT side - icons</h2>
       </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 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
       </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,17 +268,21 @@ <h3>ng-for {{data}}</h3>
   img {
     height: 100px;
   }
+
   #download-spinner {
     display: none;
   }
 
   svg circle {
     stroke: white;
   }
+
   .downloading #download-spinner {
     display: block;
   }
+
   .downloading .download-hide {
     display: none;
   }
+
 </style>