Arthur Jamet
87 lines
1.9 KiB
TypeScript
87 lines
1.9 KiB
TypeScript
import { View } from 'react-native';
|
|
import { Pressable, Text } from 'native-base';
|
|
import React from 'react';
|
|
|
|
type TabNavigationButtonProps = {
|
|
icon?: React.ReactNode;
|
|
label: string;
|
|
onPress: () => void;
|
|
onLongPress: () => void;
|
|
isActive: boolean;
|
|
isCollapsed: boolean;
|
|
};
|
|
|
|
const TabNavigationButton = (props: TabNavigationButtonProps) => {
|
|
return (
|
|
<Pressable
|
|
onPress={props.onPress}
|
|
onLongPress={props.onLongPress}
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{({ isPressed, isHovered }) => {
|
|
let boxShadow: string | undefined = undefined;
|
|
if (isHovered) {
|
|
boxShadow = '0px 0px 16px 0px rgba(0, 0, 0, 0.25)';
|
|
} else if (props.isActive) {
|
|
boxShadow = '0px 0px 8px 0px rgba(0, 0, 0, 0.25)';
|
|
}
|
|
return (
|
|
<View
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignSelf: 'stretch',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
padding: 10,
|
|
borderRadius: 8,
|
|
flexGrow: 0,
|
|
// @ts-expect-error boxShadow isn't yet supported by react native
|
|
boxShadow: boxShadow,
|
|
backdropFilter: 'blur(2px)',
|
|
backgroundColor: (() => {
|
|
if (isPressed) {
|
|
return 'rgba(0, 0, 0, 0.1)';
|
|
} else if (isHovered) {
|
|
return 'rgba(231, 231, 232, 0.2)';
|
|
} else if (props.isActive) {
|
|
return 'rgba(16, 16, 20, 0.5)';
|
|
} else {
|
|
return 'transparent';
|
|
}
|
|
})(),
|
|
}}
|
|
>
|
|
{props.icon && (
|
|
<View
|
|
style={{
|
|
marginRight: props.isCollapsed ? undefined : 10,
|
|
}}
|
|
>
|
|
{props.icon}
|
|
</View>
|
|
)}
|
|
{!props.isCollapsed && (
|
|
<Text numberOfLines={1} selectable={false}>
|
|
{props.label}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}}
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
TabNavigationButton.defaultProps = {
|
|
icon: undefined,
|
|
onPress: () => {},
|
|
onLongPress: () => {},
|
|
isActive: false,
|
|
isCollapsed: false,
|
|
};
|
|
|
|
export default TabNavigationButton;
|