Rocket.Chat.ReactNative/app/containers/HeaderButton/HeaderButtonItem.tsx

63 lines
1.5 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { Platform, StyleSheet, Text } from 'react-native';
import { PlatformPressable } from '@react-navigation/elements';
import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
import { useTheme } from '../../theme';
import sharedStyles from '../../views/Styles';
export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> {
title?: string;
iconName?: TIconsName;
onPress?: <T>(arg: T) => void;
testID?: string;
badge?(): void;
color?: string;
}
export const BUTTON_HIT_SLOP = {
top: 5,
right: 5,
bottom: 5,
left: 5
};
const styles = StyleSheet.create({
container: {
padding: 6
},
title: {
...Platform.select({
android: {
fontSize: 14
},
default: {
fontSize: 17
}
}),
...sharedStyles.textRegular
}
});
const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...props }: IHeaderButtonItem): React.ReactElement => {
const { colors } = useTheme();
return (
<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} disabled={disabled} style={styles.container}>
<>
{iconName ? (
<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />
) : (
<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}>
{title}
</Text>
)}
{badge ? badge() : null}
</>
</PlatformPressable>
);
};
Item.displayName = 'HeaderButton.Item';
export default Item;