87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import type { ElementRef, TeactNode } from '../../lib/teact/teact';
|
|
import { memo, useRef } from '../../lib/teact/teact';
|
|
|
|
import type { ApiMessageEntityCustomEmoji } from '../../api/types';
|
|
import type { IconName } from '../../types/icons';
|
|
import type { MenuItemContextAction } from './ListItem';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
import useHorizontalScroll from '../../hooks/useHorizontalScroll';
|
|
import useLang from '../../hooks/useLang';
|
|
import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
|
|
import useScrollToActiveTab from '../../hooks/useScrollToActiveTab';
|
|
|
|
import Tab from './Tab';
|
|
|
|
import './SquareTabList.scss';
|
|
|
|
export type TabWithProperties = {
|
|
id?: number;
|
|
title: TeactNode;
|
|
icon?: IconName;
|
|
badgeCount?: number;
|
|
isBlocked?: boolean;
|
|
isBadgeActive?: boolean;
|
|
contextActions?: MenuItemContextAction[];
|
|
emoticon?: string | ApiMessageEntityCustomEmoji;
|
|
customEmojiDocumentId?: string;
|
|
noTitleAnimations?: boolean;
|
|
};
|
|
|
|
type OwnProps = {
|
|
tabs: readonly TabWithProperties[];
|
|
activeTab: number;
|
|
className?: string;
|
|
tabClassName?: string;
|
|
contextRootElementSelector?: string;
|
|
ref?: ElementRef<HTMLDivElement>;
|
|
onSwitchTab: (index: number) => void;
|
|
};
|
|
|
|
const SquareTabList = ({
|
|
tabs,
|
|
activeTab,
|
|
className,
|
|
tabClassName,
|
|
contextRootElementSelector,
|
|
ref,
|
|
onSwitchTab,
|
|
}: OwnProps) => {
|
|
const internalRef = useRef<HTMLDivElement>();
|
|
const containerRef = ref || internalRef;
|
|
const previousActiveTab = usePreviousDeprecated(activeTab);
|
|
|
|
const lang = useLang();
|
|
|
|
useHorizontalScroll(containerRef, undefined, true);
|
|
useScrollToActiveTab(containerRef, activeTab);
|
|
|
|
return (
|
|
<div
|
|
className={buildClassName('SquareTabList', 'no-scrollbar', className)}
|
|
ref={containerRef}
|
|
dir={lang.isRtl ? 'rtl' : undefined}
|
|
>
|
|
{tabs.map((tab, i) => (
|
|
<Tab
|
|
key={tab.id}
|
|
title={tab.title}
|
|
isActive={i === activeTab}
|
|
isBlocked={tab.isBlocked}
|
|
badgeCount={tab.badgeCount}
|
|
isBadgeActive={tab.isBadgeActive}
|
|
previousActiveTab={previousActiveTab}
|
|
onClick={onSwitchTab}
|
|
clickArg={i}
|
|
contextActions={tab.contextActions}
|
|
contextRootElementSelector={contextRootElementSelector}
|
|
className={tabClassName}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(SquareTabList);
|