refactor: change the way tabs are activated

fix devhatt#28
RafaelLimaC · Mar 12, 2024 · 0a4fdd8 · 0a4fdd8
1 parent ff6e368
commit 0a4fdd8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 43 deletions.
diff --git a/src/components/Tabber/index.js b/src/components/Tabber/index.js
@@ -4,10 +4,10 @@ import './index.scss';
 const events = ['change', 'click'];
 
 const html = `
-<div class="tabber-container" data-select="tabber-container">
-  <div class="tabber-tab" data-select="tabber-tabs"></div>
-  <div class="tabber-content" data-select="tabber-content"></div>
-</div>
+  <div class="tabber-container" data-select="tabber-container">
+    <div class="tabber-tab" data-select="tabber-tabs"></div>
+    <div class="tabber-content" data-select="tabber-content"></div>
+  </div>
 `;
 // todo, emitir eventos ao desativar >> talvez manter registro da aba q estava ativa antes
 export default function Tabber({ tabs }) {
@@ -24,6 +24,7 @@ export default function Tabber({ tabs }) {
     tabsContainer.appendChild(tabButton);
 
     const tabContent = document.createElement('div');
+    tabContent.dataset.index = index;
     if (typeof tab.content.mount === 'function') {
       tab.content.mount(tabContent);
     } else {
@@ -34,44 +35,47 @@ export default function Tabber({ tabs }) {
   });
 
   const tabButtons = tabsContainer.querySelectorAll('button');
-  const tabContents = contentContainer.querySelectorAll('div');
 
-  const hideContents = () => {
-    tabContents.forEach((content) => content.classList.add('hide'));
-  };
+  tabButtons.forEach((tabButton) => tabButton.addEventListener('click', () => {
+    const index = parseInt(tabButton.dataset.index, 10);
 
-  const deactivateTabs = () => {
-    tabButtons.forEach((tab) => tab.classList.remove('tabber-button--active'));
-  };
+    this.activateTab(index);
 
-  const activateContent = (index) => {
-    tabContents[index].classList.remove('hide');
-  };
-
-  const activateTab = (tab) => {
-    tab.classList.add('tabber-button--active');
-  };
-
-  tabButtons.forEach((tabButton) =>
-    tabButton.addEventListener('click', () => {
-      const index = parseInt(tabButton.dataset.index, 10);
-
-      hideContents();
-      deactivateTabs();
-      activateTab(tabButton);
-      activateContent(index);
-
-      this.emit('change', tabs[index].value);
-    }),
-  );
+    this.emit('change', index);
+  }));
 
   this.listen('mount', () => {
-    activateTab(tabButtons[0]);
-    activateContent(0);
+    this.activateTab(0);
   });
 }
 
-Tabber.prototype = Object.assign(Tabber.prototype, Component.prototype);
-// get current tab
-// set tab >> passando index
+Tabber.prototype = Object.assign(
+  Tabber.prototype,
+  Component.prototype,
+  {
+    activateTab(index) {
+      const tabButton = this.getTab(index);
+      if (!tabButton) return;
+
+      const tabsContainer = this.selected.get('tabber-tabs');
+      const contentContainer = this.selected.get('tabber-content').querySelectorAll('div');
+
+      contentContainer.forEach((content) => content.classList.add('hide'));
+      tabsContainer.querySelectorAll('button').forEach((tab) => tab.classList.remove('tabber-button--active'));
+
+      const tabContent = this.getContent(index);
+      tabContent.classList.remove('hide');
+      tabButton.classList.add('tabber-button--active');
+    },
+    getTab(index) {
+      return this.selected.get('tabber-tabs').querySelector(`button[data-index="${index}"]`);
+    },
+    getContent(index) {
+      return this.selected.get('tabber-content').querySelector(`div[data-index="${index}"]`);
+    },
+    getCurrentTab() {
+      return this.selected.get('tabber-tabs').querySelector('.tabber-button--active');
+    },
+  },
+);
 // add- remove tab
diff --git a/src/components/Tabber/index.scss b/src/components/Tabber/index.scss
@@ -105,12 +105,6 @@ $borderHeight: 0.3rem;
   display: none;
 }
 
-.tabber-content > * {
-  padding: 20px;
-
-  background-color: rgb(255, 255, 255);
-}
-
 @include breakpoints.from667 {
   .tabber-button {
     min-height: 5rem;
@@ -138,7 +132,7 @@ $borderHeight: 0.3rem;
     padding: 0.4rem;
     border: 1px solid colors.$gray200;
 
-    border-radius: 20px;
+    border-radius: 2rem;
 
     &::after,
     &::before {