90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Text, Pressable, View, ScrollView } from 'react-native';
|
|
|
|
import Emoji from '../message/Emoji';
|
|
import { useTheme } from '../../theme';
|
|
import { IReaction } from '../../definitions';
|
|
import { TGetCustomEmoji } from '../../definitions/IEmoji';
|
|
import I18n from '../../i18n';
|
|
import styles, { MIN_TAB_WIDTH } from './styles';
|
|
import { useDimensions, useOrientation } from '../../dimensions';
|
|
import { useAppSelector } from '../../lib/hooks';
|
|
|
|
interface ITabBarItem {
|
|
getCustomEmoji: TGetCustomEmoji;
|
|
tab: IReaction;
|
|
index: number;
|
|
goToPage?: (index: number) => void;
|
|
}
|
|
interface IReactionsTabBar {
|
|
getCustomEmoji: TGetCustomEmoji;
|
|
activeTab?: number;
|
|
tabs?: IReaction[];
|
|
goToPage?: (index: number) => void;
|
|
}
|
|
|
|
const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
|
|
const { colors } = useTheme();
|
|
const server = useAppSelector(state => state.server.server);
|
|
return (
|
|
<Pressable
|
|
key={tab.emoji}
|
|
onPress={() => {
|
|
goToPage?.(index);
|
|
}}
|
|
style={({ pressed }: { pressed: boolean }) => ({
|
|
opacity: pressed ? 0.7 : 1
|
|
})}
|
|
testID={`tabBarItem-${tab.emoji}`}
|
|
>
|
|
<View style={styles.tabBarItem}>
|
|
{tab._id === 'All' ? (
|
|
<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text>
|
|
) : (
|
|
<>
|
|
<Emoji
|
|
content={tab.emoji}
|
|
standardEmojiStyle={styles.standardEmojiStyle}
|
|
customEmojiStyle={styles.customEmojiStyle}
|
|
baseUrl={server}
|
|
getCustomEmoji={getCustomEmoji}
|
|
/>
|
|
<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactionsTabBar): React.ReactElement => {
|
|
const { isLandscape } = useOrientation();
|
|
const { width } = useDimensions();
|
|
const reactionsListWidth = isLandscape ? width / 2 : width;
|
|
const tabWidth = tabs && Math.max(reactionsListWidth / tabs.length, MIN_TAB_WIDTH);
|
|
const { colors } = useTheme();
|
|
return (
|
|
<View testID='reactionsTabBar'>
|
|
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
|
|
{tabs?.map((tab, index) => {
|
|
const isActiveTab = activeTab === index;
|
|
return (
|
|
<View
|
|
style={{
|
|
width: tabWidth,
|
|
borderBottomWidth: isActiveTab ? 2 : 1,
|
|
borderColor: isActiveTab ? colors.tintActive : colors.separatorColor
|
|
}}
|
|
key={tab.emoji}
|
|
>
|
|
<TabBarItem tab={tab} index={index} goToPage={goToPage} getCustomEmoji={getCustomEmoji} />
|
|
</View>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ReactionsTabBar;
|