2020-10-30 16:15:58 +00:00
|
|
|
import React from 'react';
|
2021-09-13 20:41:05 +00:00
|
|
|
import { Platform, StyleSheet, Text } from 'react-native';
|
2022-07-06 13:23:02 +00:00
|
|
|
import { PlatformPressable } from '@react-navigation/elements';
|
2020-10-30 16:15:58 +00:00
|
|
|
|
2022-07-06 13:23:02 +00:00
|
|
|
import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
|
2022-03-24 19:55:01 +00:00
|
|
|
import { useTheme } from '../../theme';
|
2020-10-30 16:15:58 +00:00
|
|
|
import sharedStyles from '../../views/Styles';
|
|
|
|
|
2022-07-06 13:23:02 +00:00
|
|
|
export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> {
|
2022-01-17 16:10:39 +00:00
|
|
|
title?: string;
|
2022-05-02 19:21:15 +00:00
|
|
|
iconName?: TIconsName;
|
2022-03-24 19:55:01 +00:00
|
|
|
onPress?: <T>(arg: T) => void;
|
2022-01-17 16:10:39 +00:00
|
|
|
testID?: string;
|
|
|
|
badge?(): void;
|
2022-07-06 13:23:02 +00:00
|
|
|
color?: string;
|
2021-09-13 20:41:05 +00:00
|
|
|
}
|
|
|
|
|
2020-10-30 16:15:58 +00:00
|
|
|
export const BUTTON_HIT_SLOP = {
|
2021-09-13 20:41:05 +00:00
|
|
|
top: 5,
|
|
|
|
right: 5,
|
|
|
|
bottom: 5,
|
|
|
|
left: 5
|
2020-10-30 16:15:58 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
2022-07-06 13:23:02 +00:00
|
|
|
padding: 6
|
2020-10-30 16:15:58 +00:00
|
|
|
},
|
|
|
|
title: {
|
|
|
|
...Platform.select({
|
|
|
|
android: {
|
|
|
|
fontSize: 14
|
|
|
|
},
|
|
|
|
default: {
|
|
|
|
fontSize: 17
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
...sharedStyles.textRegular
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2023-08-04 14:09:36 +00:00
|
|
|
const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...props }: IHeaderButtonItem): React.ReactElement => {
|
2022-07-06 13:23:02 +00:00
|
|
|
const { colors } = useTheme();
|
2022-03-24 19:55:01 +00:00
|
|
|
return (
|
2023-08-04 14:09:36 +00:00
|
|
|
<PlatformPressable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} disabled={disabled} style={styles.container}>
|
2022-03-24 19:55:01 +00:00
|
|
|
<>
|
|
|
|
{iconName ? (
|
2022-07-06 13:23:02 +00:00
|
|
|
<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />
|
2022-03-24 19:55:01 +00:00
|
|
|
) : (
|
2022-07-06 13:23:02 +00:00
|
|
|
<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}>
|
|
|
|
{title}
|
|
|
|
</Text>
|
2022-03-24 19:55:01 +00:00
|
|
|
)}
|
|
|
|
{badge ? badge() : null}
|
|
|
|
</>
|
2022-07-06 13:23:02 +00:00
|
|
|
</PlatformPressable>
|
2022-03-24 19:55:01 +00:00
|
|
|
);
|
|
|
|
};
|
2020-10-30 16:15:58 +00:00
|
|
|
|
|
|
|
Item.displayName = 'HeaderButton.Item';
|
|
|
|
|
2022-03-24 19:55:01 +00:00
|
|
|
export default Item;
|