59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import { Text, StyleSheet, Platform } from 'react-native';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import Touchable from 'react-native-platform-touchable';
|
||
|
|
|
||
|
|
import { CustomIcon } from '../../lib/Icons';
|
||
|
|
import { withTheme } from '../../theme';
|
||
|
|
import { themes } from '../../constants/colors';
|
||
|
|
import sharedStyles from '../../views/Styles';
|
||
|
|
|
||
|
|
export const BUTTON_HIT_SLOP = {
|
||
|
|
top: 5, right: 5, bottom: 5, left: 5
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
marginHorizontal: 6
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
...Platform.select({
|
||
|
|
android: {
|
||
|
|
fontSize: 14
|
||
|
|
},
|
||
|
|
default: {
|
||
|
|
fontSize: 17
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
...sharedStyles.textRegular
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const Item = ({
|
||
|
|
title, iconName, onPress, testID, theme, badge
|
||
|
|
}) => (
|
||
|
|
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
|
||
|
|
<>
|
||
|
|
{
|
||
|
|
iconName
|
||
|
|
? <CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
|
||
|
|
: <Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
|
||
|
|
}
|
||
|
|
{badge ? badge() : null}
|
||
|
|
</>
|
||
|
|
</Touchable>
|
||
|
|
);
|
||
|
|
|
||
|
|
Item.propTypes = {
|
||
|
|
onPress: PropTypes.func.isRequired,
|
||
|
|
title: PropTypes.string,
|
||
|
|
iconName: PropTypes.string,
|
||
|
|
testID: PropTypes.string,
|
||
|
|
theme: PropTypes.string,
|
||
|
|
badge: PropTypes.func
|
||
|
|
};
|
||
|
|
|
||
|
|
Item.displayName = 'HeaderButton.Item';
|
||
|
|
|
||
|
|
export default withTheme(Item);
|