Skip to content

Commit d29333b

Browse files
seibei-iguchiAdam Havel
seibei-iguchi
authored and
Adam Havel
committed
chore(suite): use Tabs component
1 parent a2aca7b commit d29333b

File tree

11 files changed

+140
-454
lines changed

11 files changed

+140
-454
lines changed

‎packages/suite/src/components/suite/HoverAnimation.tsx‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎packages/suite/src/components/suite/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ import { NumberInput, NumberInputProps } from './NumberInput';
4848
import { QrCode } from './QrCode';
4949
import { CoinBalance } from './CoinBalance';
5050
import { DeviceAuthenticationExplainer } from './DeviceAuthenticationExplainer';
51-
import { HoverAnimation } from './HoverAnimation';
5251
import { Preloader } from './Preloader/Preloader';
5352
import { PinMatrix } from './PinMatrix/PinMatrix';
5453
import { UdevDownload } from './UdevDownload';
@@ -104,7 +103,6 @@ export {
104103
QrCode,
105104
CoinBalance,
106105
DeviceAuthenticationExplainer,
107-
HoverAnimation,
108106
Preloader,
109107
PinMatrix,
110108
UdevDownload,

‎packages/suite/src/components/suite/layouts/SuiteLayout/MobileMenu/MobileNavigation.tsx‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { variables } from '@trezor/components';
55
import { typography } from '@trezor/theme';
66

77
import { findRouteByName } from 'src/utils/suite/router';
8-
import { HoverAnimation, Translation } from 'src/components/suite';
8+
import { Translation } from 'src/components/suite';
99
import { MAIN_MENU_ITEMS } from 'src/constants/suite/menu';
1010
import { useAccountSearch, useSelector, useDispatch } from 'src/hooks/suite';
1111
import { goto } from 'src/actions/suite/routerActions';
@@ -93,35 +93,34 @@ export const MobileNavigation = ({ closeMobileNavigation }: MobileNavigationProp
9393
const isActive = routeObj ? routeObj.app === activeApp : false;
9494

9595
return (
96-
<HoverAnimation isHoverable={!isActive} key={route}>
97-
<MenuItem
98-
data-testid={`@suite/menu/${route}`}
99-
onClick={() => {
100-
if (!isDisabled) {
101-
if (route === 'wallet-index') {
102-
setCoinFilter(undefined);
103-
setSearchString(undefined);
104-
}
105-
dispatch(goto(route));
106-
closeMobileNavigation?.();
96+
<MenuItem
97+
key={route}
98+
data-testid={`@suite/menu/${route}`}
99+
onClick={() => {
100+
if (!isDisabled) {
101+
if (route === 'wallet-index') {
102+
setCoinFilter(undefined);
103+
setSearchString(undefined);
107104
}
108-
}}
109-
isActive={isActive}
110-
isDisabled={isDisabled}
111-
>
112-
<ItemTitleWrapper>
113-
<ItemTitle isActive={isActive} isDisabled={isDisabled}>
114-
<Translation id={translationId} />
115-
</ItemTitle>
116-
117-
{isDisabled && (
118-
<NewBadge>
119-
<Translation id="TR_NAV_SOON_BADGE" />
120-
</NewBadge>
121-
)}
122-
</ItemTitleWrapper>
123-
</MenuItem>
124-
</HoverAnimation>
105+
dispatch(goto(route));
106+
closeMobileNavigation?.();
107+
}
108+
}}
109+
isActive={isActive}
110+
isDisabled={isDisabled}
111+
>
112+
<ItemTitleWrapper>
113+
<ItemTitle isActive={isActive} isDisabled={isDisabled}>
114+
<Translation id={translationId} />
115+
</ItemTitle>
116+
117+
{isDisabled && (
118+
<NewBadge>
119+
<Translation id="TR_NAV_SOON_BADGE" />
120+
</NewBadge>
121+
)}
122+
</ItemTitleWrapper>
123+
</MenuItem>
125124
);
126125
})}
127126
</Container>

‎packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/PageHeader.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,19 @@ import { useSelector } from 'src/hooks/suite';
99
import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer';
1010
import { selectIsAccountTabPage, selectRouteName } from 'src/reducers/suite/routerReducer';
1111
import { TradeActions } from 'src/components/suite/layouts/SuiteLayout/PageHeader/TradeActions';
12+
import { HEADER_HEIGHT } from 'src/constants/suite/layout';
1213

1314
import { HeaderActions } from './HeaderActions';
1415
import { PageName } from './PageNames/PageName';
1516

16-
const HEADER_HEIGHT = 64;
17-
1817
const Container = styled.div`
1918
position: sticky;
2019
top: 0;
2120
display: flex;
2221
justify-content: space-between;
2322
width: 100%;
24-
height: ${HEADER_HEIGHT}px;
25-
min-height: ${HEADER_HEIGHT}px;
23+
height: ${HEADER_HEIGHT};
24+
min-height: ${HEADER_HEIGHT};
2625
padding: ${spacingsPx.xs} ${spacingsPx.md};
2726
background: ${({ theme }) => theme.backgroundSurfaceElevation0};
2827
border-bottom: 1px solid ${({ theme }) => theme.borderElevation1};

‎packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx‎

Lines changed: 28 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,23 @@
11
import styled from 'styled-components';
2-
import { LayoutGroup, motion } from 'framer-motion';
32

43
import { spacingsPx, zIndices } from '@trezor/theme';
5-
import { motionEasing, variables } from '@trezor/components';
4+
import { Tabs } from '@trezor/components';
65
import { Route } from '@suite-common/suite-types';
76

87
import { useSelector } from 'src/hooks/suite';
98
import { selectRouteName } from 'src/reducers/suite/routerReducer';
10-
import { SUBPAGE_NAV_HEIGHT } from 'src/constants/suite/layout';
11-
import { selectIsLoggedOut } from 'src/reducers/suite/suiteReducer';
9+
import { HEADER_HEIGHT } from 'src/constants/suite/layout';
1210

13-
import { HoverAnimation } from '../../HoverAnimation';
1411
import { AppNavigationTooltip } from '../../AppNavigation/AppNavigationTooltip';
1512

16-
const Container = styled.div<{ $isFullWidth: boolean }>`
13+
const Container = styled.div`
1714
position: sticky;
18-
top: 64px;
19-
display: flex;
20-
justify-content: flex-start;
21-
gap: ${spacingsPx.sm};
22-
min-height: ${SUBPAGE_NAV_HEIGHT};
15+
top: ${HEADER_HEIGHT};
2316
background: ${({ theme }) => theme.backgroundSurfaceElevation0};
24-
padding: ${spacingsPx.xs} 0 ${spacingsPx.sm};
2517
border-bottom: 1px solid ${({ theme }) => theme.borderElevation1};
26-
overflow: auto hidden;
2718
z-index: ${zIndices.pageHeader};
2819
width: 100%;
29-
padding-left: ${spacingsPx.md};
30-
padding-right: ${spacingsPx.md};
31-
`;
32-
33-
const MenuElement = styled.div<{ $isActive: boolean }>`
34-
position: relative;
35-
display: flex;
36-
align-items: center;
37-
color: ${({ $isActive, theme }) => !$isActive && theme.textOnTertiary};
38-
white-space: nowrap;
39-
40-
@media (max-width: ${variables.SCREEN_SIZE.SM}) {
41-
margin-right: ${spacingsPx.md};
42-
}
43-
`;
44-
45-
const Underline = styled(motion.div)`
46-
position: absolute;
47-
bottom: -${spacingsPx.sm};
48-
left: 0;
49-
right: 0;
50-
height: 2px;
51-
background: ${({ theme }) => theme.iconDefault};
52-
`;
53-
54-
const StyledNavLink = styled.div<{ $isActive: boolean; $isNavigationDisabled: boolean }>`
55-
padding: ${spacingsPx.xs} ${spacingsPx.sm};
56-
opacity: ${({ $isActive, $isNavigationDisabled }) =>
57-
!$isActive && $isNavigationDisabled && '.5'};
58-
cursor: ${({ $isActive, $isNavigationDisabled }) =>
59-
$isActive || $isNavigationDisabled ? 'default' : 'pointer'};
20+
padding: ${spacingsPx.md} ${spacingsPx.md} 0;
6021
`;
6122

6223
type TabRoute = Route['name'] | undefined;
@@ -70,62 +31,37 @@ export type NavigationItem = {
7031
activeRoutes?: TabRoute[];
7132
};
7233

73-
interface SubpageNavigationProps {
34+
type SubpageNavigationProps = {
7435
items: NavigationItem[];
75-
className?: string;
76-
}
36+
};
7737

78-
export const SubpageNavigation = ({ items, className }: SubpageNavigationProps) => {
38+
export const SubpageNavigation = ({ items }: SubpageNavigationProps) => {
7939
const routeName = useSelector(selectRouteName);
8040
const selectedAccount = useSelector(state => state.wallet.selectedAccount);
81-
const isLoggedOut = useSelector(selectIsLoggedOut);
8241

8342
const isAccountLoading = selectedAccount.status === 'loading';
84-
85-
const visibleItems = items.filter(item => !item.isHidden);
43+
const activeItemdId = items.find(
44+
({ id, activeRoutes }) => activeRoutes?.includes(routeName) || id === routeName,
45+
)?.id;
8646

8747
return (
88-
<Container $isFullWidth={isLoggedOut} className={className}>
89-
<LayoutGroup id={items[0].id}>
90-
{visibleItems.map(item => {
91-
const { id, title, activeRoutes } = item;
92-
93-
const isActive = activeRoutes
94-
? activeRoutes.includes(routeName)
95-
: routeName === id;
96-
const isHoverable = !isActive && !isAccountLoading;
97-
const onClick = isAccountLoading ? undefined : item.callback;
98-
99-
return (
100-
<MenuElement key={id} $isActive={isActive}>
101-
<HoverAnimation isHoverable={isHoverable}>
102-
<AppNavigationTooltip isActiveTab={isActive}>
103-
<StyledNavLink
104-
$isActive={isActive}
105-
$isNavigationDisabled={isAccountLoading}
106-
onClick={onClick}
107-
data-testid={item['data-testid']}
108-
>
109-
{title}
110-
</StyledNavLink>
111-
</AppNavigationTooltip>
112-
</HoverAnimation>
113-
114-
{isActive && (
115-
<Underline
116-
// TODO: get rid of the weird jump when switching tabs on the account page before enabling this
117-
// layoutId="underline"
118-
transition={{
119-
layout: {
120-
ease: motionEasing.transition,
121-
},
122-
}}
123-
/>
124-
)}
125-
</MenuElement>
126-
);
127-
})}
128-
</LayoutGroup>
48+
<Container>
49+
<AppNavigationTooltip>
50+
<Tabs
51+
hasBorder={false}
52+
size="large"
53+
isDisabled={isAccountLoading}
54+
activeItemId={activeItemdId}
55+
>
56+
{items
57+
.filter(item => !item.isHidden)
58+
.map(({ id, callback, title, 'data-testid': dataTestId }) => (
59+
<Tabs.Item key={id} id={id} onClick={callback} data-testid={dataTestId}>
60+
{title}
61+
</Tabs.Item>
62+
))}
63+
</Tabs>
64+
</AppNavigationTooltip>
12965
</Container>
13066
);
13167
};

0 commit comments

Comments
 (0)