diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx index 826aa1fab..a769cd92e 100644 --- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx +++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx @@ -118,8 +118,8 @@ export const TransactionsTableWidget: React.FC = ({ txHash }) => { > onChangeTab(key)} + selectedTab={tabViewSelected} + updateSelectedTab={(key: number): void => onChangeTab(key)} /> diff --git a/src/apps/explorer/pages/AppData/index.tsx b/src/apps/explorer/pages/AppData/index.tsx index c06846257..a403b87c8 100644 --- a/src/apps/explorer/pages/AppData/index.tsx +++ b/src/apps/explorer/pages/AppData/index.tsx @@ -79,8 +79,8 @@ const AppDataPage: React.FC = () => { onChangeTab(key)} + selectedTab={tabViewSelected} + updateSelectedTab={(key: number): void => onChangeTab(key)} /> diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx index 0d900d646..de2c14b2e 100644 --- a/src/components/common/Tabs/Tabs.tsx +++ b/src/components/common/Tabs/Tabs.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useCallback } from 'react' +import React, { useState } from 'react' import styled from 'styled-components' // Components @@ -37,10 +37,10 @@ export interface Props { readonly className?: string readonly tabItems: TabItemInterface[] readonly tabTheme: TabTheme - readonly defaultTab?: TabId + readonly selectedTab?: TabId readonly extra?: TabBarExtraContent readonly extraPosition?: 'top' | 'bottom' - onChange?: (activeId: TabId) => void + readonly updateSelectedTab?: (activeId: TabId) => void } const Wrapper = styled.div` @@ -90,37 +90,33 @@ const Tabs: React.FC = (props) => { const { tabTheme = DEFAULT_TAB_THEME, tabItems, - defaultTab = 1, + selectedTab: parentSelectedTab, extra: tabBarExtraContent, extraPosition = 'top', - onChange, + updateSelectedTab: parentUpdateSelectedTab, } = props - const [activeTab, setActiveTab] = useState(defaultTab) - - const onTabClick = useCallback( - (key: TabId): void => { - setActiveTab(key) - onChange?.(key) - }, - [onChange], - ) - - useEffect(() => { - if (activeTab !== defaultTab) { - onTabClick(defaultTab) - } - }, [activeTab, defaultTab, onTabClick]) + const [innerSelectedTab, setInnerSelectedTab] = useState(1) + // Use parent state management if provided, otherwise use internal state + const selectedTab = parentSelectedTab ?? innerSelectedTab + const updateTab = parentUpdateSelectedTab ?? setInnerSelectedTab return ( {tabItems.map(({ tab, id }) => ( - + ))} {extraPosition === 'top' && } - + {extraPosition === 'bottom' && } ) diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx index 6cc22f059..e0660ea05 100644 --- a/src/components/orders/OrderDetails/index.tsx +++ b/src/components/orders/OrderDetails/index.tsx @@ -235,8 +235,8 @@ export const OrderDetails: React.FC = (props) => { isPriceInverted, invertPrice, )} - defaultTab={tabViewSelected} - onChange={(key: number): void => onChangeTab(key)} + selectedTab={tabViewSelected} + updateSelectedTab={(key: number): void => onChangeTab(key)} extra={ExtraComponentNode} />