feat(tabs): able to change value with the active prop on the bal-tab-…

…item
baloise · Jan 9, 2022 · f9553cb · f9553cb
1 parent 7499068
commit f9553cb
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -1220,6 +1220,10 @@ export namespace Components {
         "small": boolean;
     }
     interface BalTabItem {
+        /**
+          * Tells if this route is active
+         */
+        "active": boolean;
         /**
           * If `true` a small red bubble is added to the tab.
          */
@@ -3221,6 +3225,10 @@ declare namespace LocalJSX {
         "small"?: boolean;
     }
     interface BalTabItem {
+        /**
+          * Tells if this route is active
+         */
+        "active"?: boolean;
         /**
           * If `true` a small red bubble is added to the tab.
          */

diff --git a/packages/components/src/components/bal-tabs/bal-tab-item/bal-tab-item.tsx b/packages/components/src/components/bal-tabs/bal-tab-item/bal-tab-item.tsx
@@ -9,6 +9,11 @@ export class TabItem {
 
   @State() isActive = false
 
+  /**
+   * Tells if this route is active and overrides the bal-tabs value property.
+   */
+  @Prop() active = false
+
   /**
    * This is the key of the tab.
    */
@@ -75,6 +80,7 @@ export class TabItem {
       value: this.value,
       label: this.label,
       href: this.href,
+      active: this.active,
       disabled: this.disabled,
       done: this.done,
       failed: this.failed,

diff --git a/packages/components/src/components/bal-tabs/bal-tab.type.ts b/packages/components/src/components/bal-tabs/bal-tab.type.ts
@@ -4,6 +4,7 @@ export interface BalTabOption {
   value: string
   label: string
   href: string
+  active: boolean
   disabled: boolean
   done: boolean
   failed: boolean

diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -119,6 +119,11 @@ export class Tabs {
     await Promise.all(this.tabs.map(value => value.getOptions())).then(tabsOptions => {
       this.tabsOptions = tabsOptions
     })
+    const activeTabs = this.tabsOptions.filter(t => t.active)
+    if (activeTabs.length > 0) {
+      const firstActiveTab = activeTabs[0]
+      this.value = firstActiveTab.value
+    }
   }
 
   private async onSelectTab(event: MouseEvent, tab: BalTabOption) {