groovinads-ui 1.2.38 → 1.2.39

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.38",
+	"version": "1.2.39",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Navigation/Tabnav.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Nav } from 'react-bootstrap';
 
@@ -8,19 +8,27 @@ import { Icon } from '../Labels';
 // HOOKS
 import useTextFormatter from '../../hooks/useTextFormatter';
 
-function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
+function Tabnav({ 
+	tabs = [],
+	activeTab = 1,
+	navigateTab= false,
+	setActiveTab,
+}) {
 	const { toCamelCase } = useTextFormatter();
 
-	const handleSelect = (k) => {
-    if (customFunction){
-      console.log('custom function');
-    }else{
-      const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k);
-      console.log(tabs[tabIndex].url);
-  
-      window.location.href = tabs[tabIndex].url;
-    }
+	// initial activeTab (in case it's not sent, it has a default value)
+	const [activeTabState, setActiveTabState] = useState(activeTab); 
 
+	const handleSelect = (k) => {
+		if (navigateTab) {
+			const tab = tabs.find((tab) => toCamelCase(tab.tab) === k);
+			console.log(tab.url);
+			window.location.href = tab.url;
+		}else{
+			// console.log('Valor de k:', k);
+			const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k) + 1;
+			setActiveTab ? setActiveTab(tabIndex) : setActiveTabState(tabIndex);
+		}	
 	};
 
 	const formatTabsName = (tab) => {
@@ -31,24 +39,27 @@ function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
 		return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
 	};
 
+	useEffect(() => {
+		setActiveTabState(activeTab);
+	}, [activeTab]);
+	
 	return (
 		<Nav
 			variant='tabs'
-			activeKey={toCamelCase(tabs[activeTab - 1].tab)}
+			activeKey={toCamelCase(tabs[activeTabState - 1].tab)}
 			onSelect={handleSelect}
 		>
-			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => (
-				<Nav.Item key={index}>
-					<Nav.Link
-						eventKey={toCamelCase(tab)}
-					>
-						{/* Dia 1 => dia1 */}
-						{warningIcon && <Icon iconName='triangle-exclamation' />}
-						{formatTabsName(tab)}
-						{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
-					</Nav.Link>
-				</Nav.Item>
-			))}
+			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => {
+				return (
+					<Nav.Item key={`tabs.tab: ${index}`}>
+						<Nav.Link eventKey={toCamelCase(tab)}>
+							{warningIcon && <Icon iconName='triangle-exclamation' />}
+							{formatTabsName(tab)}
+							{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
+						</Nav.Link>
+					</Nav.Item>
+				);
+			})}
 		</Nav>
 	);
 }
@@ -56,7 +67,9 @@ function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
 Tabnav.propTypes = {
 	tabs: PropTypes.array,
 	activeTab: PropTypes.number,
-  customFunction: PropTypes.bool
+  	customFunction: PropTypes.bool,
+	navigateTab: PropTypes.bool,
+	setExternalTab: PropTypes.func,
 };
 
 export default Tabnav;

package/src/stories/Tabnav.stories.jsx

@@ -1,5 +1,6 @@
-import React, { act, useState } from 'react';
+import React, { useState } from 'react';
 import Tabnav from '../components/Navigation/Tabnav';
+import { Button } from 'react-bootstrap';
 
 export default {
   title: 'Navigation/Tabnav',
@@ -8,13 +9,47 @@ export default {
 
 const Template = (args) => {
   const tabs = [
-    { tab: 'hola', badgeNumber: '', url: '/com', warningIcon: true },
-    { tab: 'tab 2', badgeNumber: '2', url: '/abc', warningIcon: false },
-    { tab: 'tab 3', badgeNumber: '1', url: '/www', warningIcon: false },
+    { tab: 'Tab', badgeNumber: '', url: '/com', warningIcon: true },  
+    { tab: 'Tab 1', badgeNumber: '1', url: '/abc', warningIcon: false },
+    { tab: 'Tab 2', badgeNumber: '2', url: '/www', warningIcon: false },
   ];
-  const activeTab = tabs[0].tab;
+  
+  const [activeTab, setActiveTab] = useState(1);
 
-  return <Tabnav {...args} tabs={tabs} activeTab={activeTab} />;
+  return (
+    <>
+      {/* test: external Buttons to change */}
+      <Button onClick={() => setActiveTab(1)}>1</Button>
+      <Button onClick={() => setActiveTab(2)}>2</Button>
+      <Button onClick={() => setActiveTab(3)}>3</Button>
+    
+      <Tabnav
+        {...args}
+        tabs={tabs}
+        activeTab={activeTab} // Send the external state
+        setActiveTab={setActiveTab} // Send the setter of the external state
+      />
+      <Tabnav 
+        {...args} 
+        tabs={tabs} 
+        activeTab={2} // Test with the activeTab prop
+
+      />
+
+      <Tabnav 
+        {...args} 
+        tabs={tabs} // Test without the activeTab prop
+      />
+
+      <Tabnav
+        {...args}
+        tabs={tabs}
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        navigateTab={true} // Test with navigateTab prop
+      />
+    </>
+  );
 };
 
 export const Default = Template.bind({});