feat(item-sliding): add open method

ionic-team · Apr 6, 2019 · 5444c93 · 5444c93
1 parent 77c980b
commit 5444c93
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 1 deletion.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -413,7 +413,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
@@ -471,6 +471,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() => 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
@@ -1978,6 +1978,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': () => 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
@@ -116,6 +116,21 @@ export class ItemSliding implements ComponentInterface {
     return Promise.resolve(this.getSlidingRatioSync());
   }
 
+  /**
+   * Open the sliding item.
+   */
+  @Method()
+  async open() {
+    const options = this.el.querySelector('ion-item-options');
+    if (options) {
+      options.style.display = 'flex';
+      const width = options.offsetWidth;
+      openSlidingItem = this.el;
+      options.style.display = '';
+      this.setOpenAmount(width, true);
+    }
+  }
+
   /**
    * Close the sliding item. Items can also be closed from the [List](../../list/List).
    */

diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
@@ -692,6 +692,16 @@ Type: `Promise<number>`
 
 
 
+### `open() => Promise<void>`
+
+Open the sliding 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,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">
@@ -367,6 +368,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);

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