Merge pull request #863 from takenet/bugfix/navtree-state

fix(navtree): added states on component
takenet · Jul 29, 2024 · 9a5f889 · 9a5f889
2 parents adac21e + 3da537d
commit 9a5f889
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 46 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -1776,6 +1776,7 @@ export namespace Components {
           * Data test is the prop to specifically test the component action object.
          */
         "dataTest"?: string;
+        "disable"?: boolean;
         /**
           * Icon. Used to add icon in list item.
          */
@@ -1784,6 +1785,7 @@ export namespace Components {
           * A prop for make the nav open.
          */
         "isOpen"?: boolean;
+        "loading"?: boolean;
         /**
           * SecondaryText. Used to insert a secondaryText in the display item.
          */
@@ -5469,6 +5471,7 @@ declare namespace LocalJSX {
           * Data test is the prop to specifically test the component action object.
          */
         "dataTest"?: string;
+        "disable"?: boolean;
         /**
           * Icon. Used to add icon in list item.
          */
@@ -5477,6 +5480,7 @@ declare namespace LocalJSX {
           * A prop for make the nav open.
          */
         "isOpen"?: boolean;
+        "loading"?: boolean;
         /**
           * When de open or close of component change, the event are dispache.
          */

diff --git a/src/components/loading-spinner/readme.md b/src/components/loading-spinner/readme.md
@@ -21,12 +21,14 @@
 
  - [bds-autocomplete](../autocomplete)
  - [bds-button](../button)
+ - [bds-nav-tree](../nav-tree)
 
 ### Graph
 ```mermaid
 graph TD;
   bds-autocomplete --> bds-loading-spinner
   bds-button --> bds-loading-spinner
+  bds-nav-tree --> bds-loading-spinner
   style bds-loading-spinner fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/nav-tree/nav-tree.scss b/src/components/nav-tree/nav-tree.scss
@@ -23,6 +23,15 @@
   border: 1px solid transparent;
   overflow: hidden;
 
+  &--loading {
+    cursor: wait;
+  }
+
+  &--disable {
+    opacity: 0.5;
+    cursor:not-allowed;
+  }
+
   &:before {
     content: '';
     position: absolute;
@@ -42,6 +51,13 @@
       opacity: 0.08;
     }
   }
+
+  &--disable {
+    &:before, &:hover {
+      border-color: transparent;
+      background-color: transparent;
+    }
+  }
 
   & .icon-item {
     position: relative;
@@ -60,10 +76,16 @@
 
     & .title-item {
       color: $color-content-default;
+      &--loading {
+        color: $color-content-disable;
+      }
     }
 
     & .subtitle-item {
       color: $color-content-default;
+      &--loading {
+        color: $color-content-disable;
+      }
     }
   }
 
@@ -78,6 +100,10 @@
     transition: all ease 0.3s;
     transform: rotate(0deg);
 
+    &--disable {
+      color: $color-content-disable;
+    }
+
     &_active {
       transform: rotate(180deg);
     }
@@ -112,7 +138,14 @@
       background-color: $color-hover;
       opacity: .8;
     }
+
+    &--disable {
+      &:before {
+        background-color: transparent;
+      }
+    }
   }
+
 }
 
 .nav_tree {

diff --git a/src/components/nav-tree/nav-tree.tsx b/src/components/nav-tree/nav-tree.tsx
@@ -36,14 +36,25 @@ export class NavTree {
    * Data test is the prop to specifically test the component action object.
    */
   @Prop() dataTest?: string = null;
+/**
+ * Loading state. Indicates if the component is in a loading state.
+ */
+ @Prop() loading?: boolean = false;
+
+ /**
+  * Disable state. Indicates if the component is disabled.
+  */
+ @Prop() disable?: boolean = false;
   /**
    * When de open or close of component change, the event are dispache.
    */
   @Event() bdsToogleChange: EventEmitter;
 
   @Method()
   async toggle() {
-    this.isOpen = !this.isOpen;
+    if (!this.disable) {
+      this.isOpen = !this.isOpen;
+    }
   }
 
   @Watch('isOpen')
@@ -56,11 +67,13 @@ export class NavTree {
   }
 
   private handler = (): void => {
-    this.isOpen = !this.isOpen;
+    if (!this.loading && !this.disable) {
+      this.isOpen = !this.isOpen;
+    }
   };
 
   private handleKeyDown(event) {
-    if (event.key == 'Enter') {
+    if (event.key == 'Enter' && !this.disable) {
       this.isOpen = !this.isOpen;
     }
   }
@@ -70,54 +83,75 @@ export class NavTree {
       <Host>
         <div tabindex="0" onKeyDown={this.handleKeyDown.bind(this)} class="focus">
           <div
-            onClick={this.handler}
             class={{
-              nav_main: true,
-              nav_main_active: this.isOpen,
+              [`nav_main--disable`]: this.disable,
             }}
-            data-test={this.dataTest}
-            aria-label={this.text + (this.secondaryText && `: ${this.secondaryText}`)}
           >
-            {this.icon && (
-              <bds-icon
-                class={{
-                  [`icon-item`]: true,
-                  [`icon-item-active`]: this.isOpen,
-                }}
-                size="medium"
-                name={this.icon}
-                color="inherit"
-                theme='outline'
-              ></bds-icon>
-            )}
-            <div class="nav_main_text">
-              {this.text && (
-                <bds-typo
-                  class="title-item"
-                  variant="fs-14"
-                  tag="span"
-                  line-height="small"
-                  bold={this.isOpen ? 'bold' : 'regular'}
-                >
-                  {this.text}
-                </bds-typo>
+            <div
+              onClick={this.handler}
+              class={{
+                nav_main: true,
+                nav_main_active: this.isOpen,
+                [`nav_main--loading`]: this.loading,
+                [`nav_main--disable`]: this.disable,
+              }}
+              data-test={this.dataTest}
+              aria-label={this.text + (this.secondaryText && `: ${this.secondaryText}`)}
+            >
+              {this.loading ? (
+                <bds-loading-spinner size="extra-small"></bds-loading-spinner>
+              ) : this.icon ? (
+                <bds-icon
+                  class={{
+                    [`icon-item`]: true,
+                    [`icon-item-active`]: this.isOpen,
+                  }}
+                  size="medium"
+                  name={this.icon}
+                  color="inherit"
+                  theme="outline"
+                ></bds-icon>
+              ) : (
+                ''
               )}
-              {this.secondaryText && (
-                <bds-typo class="subtitle-item" variant="fs-12" line-height="small" tag="span" margin={false}>
-                  {this.secondaryText}
-                </bds-typo>
+              <div class="nav_main_text">
+                {this.text && (
+                  <bds-typo
+                    class={{ ['title-item']: true, [`title-item--loading`]: this.loading }}
+                    variant="fs-14"
+                    tag="span"
+                    line-height="small"
+                    bold={this.isOpen ? 'bold' : 'regular'}
+                  >
+                    {this.text}
+                  </bds-typo>
+                )}
+                {this.secondaryText && (
+                  <bds-typo
+                    class={{ ['subtitle-item']: true, [`subtitle-item--loading`]: this.loading }}
+                    variant="fs-12"
+                    line-height="small"
+                    tag="span"
+                    margin={false}
+                  >
+                    {this.secondaryText}
+                  </bds-typo>
+                )}
+              </div>
+              <div class="nav_main_content">
+                <slot name="header-content"></slot>
+              </div>
+              {this.navTreeChild && (
+                <bds-icon
+                  name="arrow-down"
+                  class={{
+                    [`nav_main_arrow`]: true,
+                    [`nav_main_arrow_active`]: this.isOpen,
+                    [`nav_main_arrow--loading`]: this.loading,
+                  }}
+                ></bds-icon>
               )}
             </div>
-            <div class="nav_main_content">
-              <slot name="header-content"></slot>
-            </div>
-            {this.navTreeChild && (
-              <bds-icon
-              name="arrow-down"
-              class={{ [`nav_main_arrow`]: true, [`nav_main_arrow_active`]: this.isOpen }}
-            ></bds-icon>
-            )}
-
           </div>
         </div>
         <div
@@ -126,7 +160,7 @@ export class NavTree {
             accordion_open: this.isOpen && this.navTreeChild,
           }}
         >
-          <div class="container">
+          <div class={{["container"]:true, [`container--disable`]: this.disable}}>
             <slot></slot>
           </div>
         </div>