-
Notifications
You must be signed in to change notification settings - Fork 46
/
Tabs.tsx
59 lines (48 loc) · 1.68 KB
/
Tabs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { ReactNode } from 'react';
import classNames from 'classnames';
import { useHorizontalScroll } from '~hooks/useHorizontalScroll/useHorizontalScroll';
import { Account } from '~services/api/accounts/accounts.types';
import { useSocialMediaStore } from '~stores/useSocialMediaStore/useSocialMediaStore';
import scss from '~components/Tabber/Tabs/Tabs.module.scss';
import { Tab, TabId } from '../Tabber.types';
import { TabsProps } from './Tabs.types';
function Tabs(props: TabsProps): ReactNode {
const { socialMedias } = useSocialMediaStore();
const { containerRef, handleMouseEnter, handleMouseLeave, scrollToElement } =
useHorizontalScroll();
const tabClasses = (id: TabId): string =>
classNames(scss.tab, id === props.currentTab.id && scss.active);
const renderSocialMediaIcon = (account: Account): ReactNode =>
socialMedias.get(account.socialMediaId)?.icon;
const handleTabClick = (
tab: Tab,
tabId: TabId,
tabElement: HTMLElement
): void => {
props.onChangeTab(tab, tabId);
scrollToElement(tabElement);
};
const renderTabs = (tabId: TabId, tab: Tab): ReactNode => (
<div
className={tabClasses(tabId)}
key={tabId}
onClick={(e) => handleTabClick(tab, tabId, e.currentTarget)}
>
{renderSocialMediaIcon(tab.account as Account)}
<span className={scss.tabTitle}>{tab.account.userName}</span>
</div>
);
return (
<div
className={scss.tabsContainer}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
ref={containerRef}
>
{Object.entries(props.tabs).map(([tabId, tab]) =>
renderTabs(tabId as TabId, tab)
)}
</div>
);
}
export default Tabs;