feat(item-sliding): add open method (#17964)

resolves #17899
ionic-team · May 7, 2019 · f912206 · f912206
1 parent ddb8ef8
commit f912206
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 1 deletion.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -414,7 +414,7 @@ export class IonItemSliding {
     proxyOutputs(this, this.el, ['ionDrag']);
   }
 }
-proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']);
+proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']);
 proxyInputs(IonItemSliding, ['disabled']);
 
 export declare interface IonLabel extends StencilComponents<'IonLabel'> {}

diff --git a/core/api.txt b/core/api.txt
@@ -472,6 +472,7 @@ ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
 ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
 ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
+ion-item-sliding,method,open,open(side: string | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,void,true
 
 ion-item,shadow

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -1983,6 +1983,10 @@ export namespace Components {
     * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.
     */
     'getSlidingRatio': () => Promise<number>;
+    /**
+    * Open the sliding item.
+    */
+    'open': (side: string | undefined) => Promise<void>;
   }
   interface IonItemSlidingAttributes extends StencilHTMLAttributes {
     /**

diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
@@ -117,6 +117,52 @@ export class ItemSliding implements ComponentInterface {
     return Promise.resolve(this.getSlidingRatioSync());
   }
 
+  /**
+   * Open the sliding item.
+   *
+   * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
+   */
+   // TODO update to work with RTL
+  @Method()
+  async open(side: string | undefined) {
+    if (this.item === null) { return; }
+
+    const optionsToOpen = this.getOptions(side);
+    if (!optionsToOpen) { return; }
+
+    /**
+     * If side is not set, we need to infer the side
+     * so we know which direction to move the options
+     */
+    if (side === undefined) {
+      side = (optionsToOpen === this.leftOptions) ? 'start' : 'end';
+    }
+
+    const isStartOpen = this.openAmount < 0;
+    const isEndOpen = this.openAmount > 0;
+
+    /**
+     * If a side is open and a user tries to
+     * re-open the same side, we should not do anything
+     */
+    if (isStartOpen && optionsToOpen === this.leftOptions) { return; }
+    if (isEndOpen && optionsToOpen === this.rightOptions) { return; }
+
+    this.closeOpened();
+
+    this.state = SlidingState.Enabled;
+
+    requestAnimationFrame(() => {
+      this.calculateOptsWidth();
+
+      const width = (side === 'end') ? this.optsWidthRightSide : -this.optsWidthLeftSide;
+      openSlidingItem = this.el;
+
+      this.setOpenAmount(width, false);
+      this.state = (side === 'end') ? SlidingState.End : SlidingState.Start;
+    });
+  }
+
   /**
    * Close the sliding item. Items can also be closed from the [List](../../list/List).
    */
@@ -138,6 +184,22 @@ export class ItemSliding implements ComponentInterface {
     return false;
   }
 
+   /**
+    * Given a side, attempt to return the ion-item-options element
+    *
+    * @param side This side of the options to get. If a side is not provided it will return the first one available
+    */
+    // TODO update to work with RTL
+  private getOptions(side?: string): HTMLIonItemOptionsElement | undefined {
+      if (side === undefined) {
+        return this.leftOptions || this.rightOptions;
+      } else if (side === 'start') {
+        return this.leftOptions;
+      } else {
+        return this.rightOptions;
+      }
+    }
+
   private async updateOptions() {
     const options = this.el.querySelectorAll('ion-item-options');
 
@@ -244,13 +306,18 @@ export class ItemSliding implements ComponentInterface {
   private calculateOptsWidth() {
     this.optsWidthRightSide = 0;
     if (this.rightOptions) {
+      this.rightOptions.style.display = 'flex';
       this.optsWidthRightSide = this.rightOptions.offsetWidth;
+      this.rightOptions.style.display = '';
     }
 
     this.optsWidthLeftSide = 0;
     if (this.leftOptions) {
+      this.leftOptions.style.display = 'flex';
       this.optsWidthLeftSide = this.leftOptions.offsetWidth;
+      this.leftOptions.style.display = '';
     }
+
     this.optsDirty = false;
   }
 

diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
@@ -692,6 +692,22 @@ Type: `Promise<number>`
 
 
 
+### `open(side: string | undefined) => Promise<void>`
+
+Open the sliding item.
+
+#### Parameters
+
+| Name   | Type                  | Description                                                                                                                 |
+| ------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `side` | `string \| undefined` | The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item. |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
@@ -38,6 +38,9 @@
         <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
         <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
         <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
+        <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
+        <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
+        <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
       </div>
 
       <ion-list id="list">
@@ -405,6 +408,16 @@ <h2>Normal button (no sliding)</h2>
           list.closeSlidingItems();
         }
 
+        function openItem(side) {
+          var item = document.getElementById('item2');
+          item.open(side);
+        }
+
+        function openItemOneSide() {
+          var item = document.getElementById('item1');
+          item.open();
+        }
+
         function noclose(item) {
           var itemEle = document.getElementById(item);
           console.log('no close', itemEle);

diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html
@@ -32,6 +32,7 @@
         <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
         <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
         <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
+        <ion-button expand="block" onclick="openItem()">Open Item</ion-button>
       </div>
 
       <ion-list id="list">
@@ -356,6 +357,11 @@ <h2>Normal button (no sliding)</h2>
         list.closeSlidingItems();
       }
 
+      function openItem() {
+        var item = document.getElementById('item0');
+        item.open();
+      }
+
       function noclose(item) {
         var itemEle = document.getElementById(item);
         console.log('no close', itemEle);