feat(container): auto detect ion-content and handle scrolling

docs(container): document noScroll attribute

Author: ihadeed

Diff for: angular/src/directives/proxies.ts

@@ -6,8 +6,8 @@ import { ProxyCmp, proxyOutputs } from './proxies-utils';
 import { Components } from '@ionic-super-tabs/core';
 
 export declare interface SuperTab extends Components.SuperTab {}
-@ProxyCmp({'methods': ['getRootScrollableEl']})
-@Component({ selector: 'super-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
+@ProxyCmp({inputs: ['noScroll'], 'methods': ['getRootScrollableEl']})
+@Component({ selector: 'super-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['noScroll'] })
 export class SuperTab {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

Diff for: core/src/components.d.ts

@@ -18,6 +18,10 @@ export namespace Components {
     * Returns the root scrollable element
     */
     'getRootScrollableEl': () => Promise<HTMLElement | null>;
+    /**
+    * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.
+    */
+    'noScroll': boolean;
   }
   interface SuperTabButton {
     'active'?: boolean;
@@ -157,7 +161,12 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface SuperTab {}
+  interface SuperTab {
+    /**
+    * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`.
+    */
+    'noScroll': boolean;
+  }
   interface SuperTabButton {
     /**
     * Whether the button is disabled

Diff for: core/src/super-tab/readme.md

@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property                | Attribute   | Description                                                                                                                                                                                                                                                             | Type      | Default     |
+| ----------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `noScroll` _(required)_ | `no-scroll` | Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.  This property will automatically be set to true if there is a direct child element of `ion-content`. To override this behaviour make sure to explicitly set this property to `false`. | `boolean` | `undefined` |
+
+
 ## Methods
 
 ### `getRootScrollableEl() => Promise<HTMLElement | null>`

Diff for: core/src/super-tab/super-tab.component.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, h, Method } from '@stencil/core';
+import { Component, ComponentInterface, Element, h, Method, Prop } from '@stencil/core';
 
 
 @Component({
@@ -10,12 +10,46 @@ import { Component, ComponentInterface, Element, h, Method } from '@stencil/core
 export class SuperTabComponent implements ComponentInterface {
   @Element() el!: HTMLSuperTabElement;
 
+  /**
+   * Set this to true to prevent vertical scrolling of this tab. Defaults to `false`.
+   *
+   * This property will automatically be set to true if there is
+   * a direct child element of `ion-content`. To override this
+   * behaviour make sure to explicitly set this property to `false`.
+   */
+  @Prop({
+    reflect: true,
+  }) noScroll!: boolean;
+
+  componentDidLoad() {
+    this.checkIonContent();
+  }
+
+  componentDidUpdate() {
+    // check for ion-content after update, in case it was dynamically loaded
+    this.checkIonContent();
+  }
+
+  /**
+   * Check if we have an ion-content as a child and update the `noScroll` property
+   * if it's not set yet.
+   */
+  private checkIonContent() {
+    if (typeof this.noScroll !== 'boolean') {
+      const ionContentEl = this.el.querySelector('ion-content');
+
+      if (ionContentEl && ionContentEl.parentElement === this.el) {
+        this.noScroll = true;
+      }
+    }
+  }
+
   /**
    * Returns the root scrollable element
    */
   @Method()
   async getRootScrollableEl(): Promise<HTMLElement | null> {
-    if (this.el.scrollHeight > this.el.clientHeight) {
+    if (!this.noScroll && this.el.scrollHeight > this.el.clientHeight) {
       return this.el;
     }
 
@@ -25,6 +59,10 @@ export class SuperTabComponent implements ComponentInterface {
       return ionContent.getScrollElement();
     }
 
+    if (this.noScroll) {
+      return null;
+    }
+
     return this.el;
   }