From 29f11a5c978a43f66dae0905cf940b6aed414225 Mon Sep 17 00:00:00 2001
From: igorkishko <kishko.igor@gmail.com>
Date: Wed, 19 Jun 2024 17:14:05 +0300
Subject: [PATCH] fix executing callback on first render in TabsRound add
 initTab property

---
 package.json                                |  2 +-
 src/components/TabsRound/TabsRound.tsx      | 25 ++++++++++++++++-----
 src/components/TabsRound/TabsRound.types.ts |  1 +
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ecf3463..bc38dc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@airdao/ui-library",
-  "version": "1.4.20",
+  "version": "1.5.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types.d.ts",
diff --git a/src/components/TabsRound/TabsRound.tsx b/src/components/TabsRound/TabsRound.tsx
index e3ec2bb..6f1d7b1 100644
--- a/src/components/TabsRound/TabsRound.tsx
+++ b/src/components/TabsRound/TabsRound.tsx
@@ -1,12 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { TabProps, TabsRoundProps } from './TabsRound.types';
 import propTypes from 'prop-types';
 import s from './tabs-round.module.css';
 
-export function TabsRound({ tabsList, onChange, className }: TabsRoundProps) {
-  const [activeTab, setActiveTab] = useState(0);
+export function TabsRound({
+  tabsList,
+  onChange,
+  className,
+  initialTab,
+}: TabsRoundProps) {
+  const [activeTab, setActiveTab] = useState(() => {
+    if (!initialTab) return 0;
+    const initialTabIndex = tabsList.indexOf(initialTab);
+    return initialTabIndex === -1 ? 0 : initialTabIndex;
+  });
 
-  useEffect(() => onChange(tabsList[activeTab]), [activeTab]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      setActiveTab(index);
+      onChange(tabsList[index]);
+    },
+    [tabsList, onChange, setActiveTab],
+  );
 
   return (
     <div className={`${s.tabs} ${className || ''}`}>
@@ -14,7 +29,7 @@ export function TabsRound({ tabsList, onChange, className }: TabsRoundProps) {
         <Tab
           name={name}
           isActive={activeTab === index}
-          onClick={() => setActiveTab(index)}
+          onClick={() => handleTabChange(index)}
           key={`${name}-${index}`}
         />
       ))}
diff --git a/src/components/TabsRound/TabsRound.types.ts b/src/components/TabsRound/TabsRound.types.ts
index a14d224..4a0f299 100644
--- a/src/components/TabsRound/TabsRound.types.ts
+++ b/src/components/TabsRound/TabsRound.types.ts
@@ -4,6 +4,7 @@ export interface TabsRoundProps {
   tabsList: string[];
   onChange: (value: string) => void;
   className?: string;
+  initialTab?: string;
 }
 
 export interface TabProps {