tooot/src/components/Header/Left.tsx

66 lines
1.3 KiB
TypeScript
Raw Normal View History

2020-11-30 00:24:53 +01:00
import { Feather } from '@expo/vector-icons'
import React from 'react'
import { Pressable, StyleSheet, Text } from 'react-native'
2020-12-13 14:04:25 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
import { StyleConstants } from '@utils/styles/constants'
2020-11-30 00:24:53 +01:00
type PropsBase = {
2020-11-30 00:24:53 +01:00
onPress: () => void
}
export interface PropsText extends PropsBase {
text: string
2020-12-12 12:49:29 +01:00
icon?: any
2020-11-30 00:24:53 +01:00
}
export interface PropsIcon extends PropsBase {
text?: string
icon: any
}
const HeaderLeft: React.FC<PropsText | PropsIcon> = ({
onPress,
text,
icon
}) => {
2020-11-30 00:24:53 +01:00
const { theme } = useTheme()
return (
2020-12-13 23:38:37 +01:00
<Pressable
onPress={onPress}
style={[
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
...(icon && { height: 44, width: 44, marginLeft: -9 })
2020-12-13 23:38:37 +01:00
}
]}
>
2020-11-30 00:24:53 +01:00
{text ? (
2020-12-01 00:44:28 +01:00
<Text style={[styles.text, { color: theme.primary }]}>{text}</Text>
2020-11-30 00:24:53 +01:00
) : (
<Feather
name={icon || 'chevron-left'}
2020-12-01 00:44:28 +01:00
color={theme.primary}
2020-12-13 23:38:37 +01:00
size={StyleConstants.Spacing.L}
2020-11-30 00:24:53 +01:00
/>
)}
</Pressable>
)
}
const styles = StyleSheet.create({
base: {
2020-12-13 23:38:37 +01:00
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100
2020-11-30 00:24:53 +01:00
},
text: {
2020-12-03 01:28:56 +01:00
fontSize: StyleConstants.Font.Size.M
2020-11-30 00:24:53 +01:00
}
})
2020-12-12 12:49:29 +01:00
export default HeaderLeft