katoikia-app/mobile-ui/components/Header.js

282 lines
8.4 KiB
JavaScript

import React from 'react';
import { withNavigation } from '@react-navigation/compat';
import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
import { Button, Block, NavBar, Text, theme } from 'galio-framework';
import Icon from './Icon';
import Input from './Input';
import Tabs from './Tabs';
import argonTheme from '../constants/Theme';
const { height, width } = Dimensions.get('window');
const iPhoneX = () => Platform.OS === 'ios' && (height === 812 || width === 812 || height === 896 || width === 896);
const BellButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
family="ArgonExtra"
size={16}
name="bell"
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
<Block middle style={styles.notify} />
</TouchableOpacity>
);
const BasketButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
family="ArgonExtra"
size={16}
name="basket"
color={argonTheme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
</TouchableOpacity>
);
const SearchButton = ({isWhite, style, navigation}) => (
<TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
<Icon
size={16}
family="Galio"
name="search-zoom-in"
color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
/>
</TouchableOpacity>
);
class Header extends React.Component {
handleLeftPress = () => {
const { back, navigation } = this.props;
return (back ? navigation.goBack() : navigation.openDrawer());
}
renderRight = () => {
const { white, title, navigation } = this.props;
if (title === 'Title') {
return [
<BellButton key='chat-title' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-title' navigation={navigation} isWhite={white} />
]
}
switch (title) {
case 'Home':
return ([
<BellButton key='chat-home' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-home' navigation={navigation} isWhite={white} />
]);
case 'Deals':
return ([
<BellButton key='chat-categories' navigation={navigation} />,
<BasketButton key='basket-categories' navigation={navigation} />
]);
case 'Categories':
return ([
<BellButton key='chat-categories' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-categories' navigation={navigation} isWhite={white} />
]);
case 'Category':
return ([
<BellButton key='chat-deals' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
]);
case 'Profile':
return ([
<BellButton key='chat-profile' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-deals' navigation={navigation} isWhite={white} />
]);
case 'Product':
return ([
<SearchButton key='search-product' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-product' navigation={navigation} isWhite={white} />
]);
case 'Search':
return ([
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
]);
case 'Settings':
return ([
<BellButton key='chat-search' navigation={navigation} isWhite={white} />,
<BasketButton key='basket-search' navigation={navigation} isWhite={white} />
]);
default:
break;
}
}
renderSearch = () => {
const { navigation } = this.props;
return (
<Input
right
color="black"
style={styles.search}
placeholder="What are you looking for?"
placeholderTextColor={'#8898AA'}
onFocus={() => navigation.navigate('Pro')}
iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="search-zoom-in" family="ArgonExtra" />}
/>
);
}
renderOptions = () => {
const { navigation, optionLeft, optionRight } = this.props;
return (
<Block row style={styles.options}>
<Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
<Block row middle>
<Icon name="diamond" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON} />
<Text size={16} style={styles.tabTitle}>{optionLeft || 'Beauty'}</Text>
</Block>
</Button>
<Button shadowless style={styles.tab} onPress={() => navigation.navigate('Pro')}>
<Block row middle>
<Icon size={16} name="bag-17" family="ArgonExtra" style={{ paddingRight: 8 }} color={argonTheme.COLORS.ICON}/>
<Text size={16} style={styles.tabTitle}>{optionRight || 'Fashion'}</Text>
</Block>
</Button>
</Block>
);
}
renderTabs = () => {
const { tabs, tabIndex, navigation } = this.props;
const defaultTab = tabs && tabs[0] && tabs[0].id;
if (!tabs) return null;
return (
<Tabs
data={tabs || []}
initialIndex={tabIndex || defaultTab}
onChange={id => navigation.setParams({ tabId: id })} />
)
}
renderHeader = () => {
const { search, options, tabs } = this.props;
if (search || tabs || options) {
return (
<Block center>
{search ? this.renderSearch() : null}
{options ? this.renderOptions() : null}
{tabs ? this.renderTabs() : null}
</Block>
);
}
}
render() {
const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
const headerStyles = [
!noShadow ? styles.shadow : null,
transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
];
const navbarStyles = [
styles.navbar,
bgColor && { backgroundColor: bgColor }
];
return (
<Block style={headerStyles}>
<NavBar
back={false}
title={title}
style={navbarStyles}
transparent={transparent}
right={this.renderRight()}
rightStyle={{ alignItems: 'center' }}
left={
<Icon
name={back ? 'chevron-left' : "menu"} family="entypo"
size={20} onPress={this.handleLeftPress}
color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
style={{ marginTop: 2 }}
/>
}
leftStyle={{ paddingVertical: 12, flex: 0.2 }}
titleStyle={[
styles.title,
{ color: argonTheme.COLORS[white ? 'WHITE' : 'HEADER'] },
titleColor && { color: titleColor }
]}
{...props}
/>
{this.renderHeader()}
</Block>
);
}
}
const styles = StyleSheet.create({
button: {
padding: 12,
position: 'relative',
},
title: {
width: '100%',
fontSize: 16,
fontWeight: 'bold',
},
navbar: {
paddingVertical: 0,
paddingBottom: theme.SIZES.BASE * 1.5,
paddingTop: iPhoneX ? theme.SIZES.BASE * 4 : theme.SIZES.BASE,
zIndex: 5,
},
shadow: {
backgroundColor: theme.COLORS.WHITE,
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.2,
elevation: 3,
},
notify: {
backgroundColor: argonTheme.COLORS.LABEL,
borderRadius: 4,
height: theme.SIZES.BASE / 2,
width: theme.SIZES.BASE / 2,
position: 'absolute',
top: 9,
right: 12,
},
header: {
backgroundColor: theme.COLORS.WHITE,
},
divider: {
borderRightWidth: 0.3,
borderRightColor: theme.COLORS.ICON,
},
search: {
height: 48,
width: width - 32,
marginHorizontal: 16,
borderWidth: 1,
borderRadius: 3,
borderColor: argonTheme.COLORS.BORDER
},
options: {
marginBottom: 24,
marginTop: 10,
elevation: 4,
},
tab: {
backgroundColor: theme.COLORS.TRANSPARENT,
width: width * 0.35,
borderRadius: 0,
borderWidth: 0,
height: 24,
elevation: 0,
},
tabTitle: {
lineHeight: 19,
fontWeight: '400',
color: argonTheme.COLORS.HEADER
},
});
export default withNavigation(Header);