2019-03-12 16:23:06 +00:00
|
|
|
import React from 'react';
|
2021-09-13 20:41:05 +00:00
|
|
|
import { Text, View } from 'react-native';
|
2019-03-12 16:23:06 +00:00
|
|
|
|
2022-06-06 14:17:51 +00:00
|
|
|
import Touch from '../../lib/methods/helpers/touch';
|
2022-04-07 14:10:03 +00:00
|
|
|
import { themes } from '../../lib/constants';
|
2022-04-12 16:27:05 +00:00
|
|
|
import { TSupportedThemes, withTheme } from '../../theme';
|
2021-09-13 20:41:05 +00:00
|
|
|
import styles from './styles';
|
2019-03-12 16:23:06 +00:00
|
|
|
|
2021-11-10 20:14:45 +00:00
|
|
|
interface SidebarItemProps {
|
|
|
|
left: JSX.Element;
|
2022-01-17 16:10:39 +00:00
|
|
|
right?: JSX.Element;
|
2021-11-10 20:14:45 +00:00
|
|
|
text: string;
|
2022-01-17 16:10:39 +00:00
|
|
|
current?: boolean;
|
2021-11-10 20:14:45 +00:00
|
|
|
onPress(): void;
|
|
|
|
testID: string;
|
2022-04-12 16:27:05 +00:00
|
|
|
theme: TSupportedThemes;
|
2021-11-10 20:14:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const Item = React.memo(({ left, right, text, onPress, testID, current, theme }: SidebarItemProps) => (
|
2019-12-04 16:39:53 +00:00
|
|
|
<Touch
|
2019-03-12 16:23:06 +00:00
|
|
|
key={testID}
|
|
|
|
testID={testID}
|
|
|
|
onPress={onPress}
|
2019-12-04 16:39:53 +00:00
|
|
|
theme={theme}
|
2021-09-13 20:41:05 +00:00
|
|
|
style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}>
|
|
|
|
<View style={styles.itemHorizontal}>{left}</View>
|
2019-03-12 16:23:06 +00:00
|
|
|
<View style={styles.itemCenter}>
|
2021-12-02 13:19:15 +00:00
|
|
|
<Text style={[styles.itemText, { color: themes[theme].titleText }]} numberOfLines={1} accessibilityLabel={text}>
|
2019-03-12 16:23:06 +00:00
|
|
|
{text}
|
|
|
|
</Text>
|
|
|
|
</View>
|
2021-09-13 20:41:05 +00:00
|
|
|
<View style={styles.itemHorizontal}>{right}</View>
|
2019-12-04 16:39:53 +00:00
|
|
|
</Touch>
|
2019-03-12 16:23:06 +00:00
|
|
|
));
|
|
|
|
|
2019-12-04 16:39:53 +00:00
|
|
|
export default withTheme(Item);
|