2019-07-09 01:54:32 +01:00
|
|
|
import React from 'react';
|
|
|
|
import { DrawerItems, SafeAreaView } from 'react-navigation';
|
2019-08-20 09:03:33 +01:00
|
|
|
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
|
|
|
|
import Icon from 'react-native-vector-icons/FontAwesome5';
|
2019-07-09 01:54:32 +01:00
|
|
|
import discoverStyle from 'styles/discover';
|
|
|
|
|
2019-08-20 09:03:33 +01:00
|
|
|
const groupedMenuItems = {
|
|
|
|
'Find content': [
|
2019-08-20 18:42:44 +01:00
|
|
|
{ icon: 'hashtag', label: 'Your tags', route: Constants.DRAWER_ROUTE_DISCOVER },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'heart', solid: true, label: 'Subscriptions', route: Constants.DRAWER_ROUTE_SUBSCRIPTIONS },
|
|
|
|
{ icon: 'globe-americas', label: 'All content', route: Constants.DRAWER_ROUTE_TRENDING },
|
|
|
|
],
|
|
|
|
'Your content': [
|
2019-09-13 08:16:06 +01:00
|
|
|
{ icon: 'at', label: 'Channels', route: Constants.DRAWER_ROUTE_CHANNEL_CREATOR },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'download', label: 'Library', route: Constants.DRAWER_ROUTE_MY_LBRY },
|
|
|
|
{ icon: 'cloud-upload-alt', label: 'Publishes', route: Constants.DRAWER_ROUTE_PUBLISHES },
|
|
|
|
{ icon: 'upload', label: 'New publish', route: Constants.DRAWER_ROUTE_PUBLISH },
|
|
|
|
],
|
|
|
|
Wallet: [
|
2019-08-20 18:42:44 +01:00
|
|
|
{ icon: 'wallet', label: 'Wallet', route: Constants.DRAWER_ROUTE_WALLET },
|
2019-08-20 09:03:33 +01:00
|
|
|
{ icon: 'award', label: 'Rewards', route: Constants.DRAWER_ROUTE_REWARDS },
|
|
|
|
],
|
|
|
|
Settings: [
|
|
|
|
{ icon: 'cog', label: 'Settings', route: Constants.DRAWER_ROUTE_SETTINGS },
|
|
|
|
{ icon: 'info', label: 'About', route: Constants.DRAWER_ROUTE_ABOUT },
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
const groupNames = Object.keys(groupedMenuItems);
|
|
|
|
|
2019-07-09 01:54:32 +01:00
|
|
|
class DrawerContent extends React.PureComponent {
|
|
|
|
render() {
|
2019-08-20 09:03:33 +01:00
|
|
|
const { activeTintColor, navigation, onItemPress } = this.props;
|
|
|
|
const { state } = navigation;
|
|
|
|
|
|
|
|
const activeItemKey = state.routes[state.index] ? state.routes[state.index].key : null;
|
2019-07-09 01:54:32 +01:00
|
|
|
|
|
|
|
return (
|
2019-09-23 17:47:30 +01:00
|
|
|
<View style={discoverStyle.drawerContentArea}>
|
|
|
|
<ScrollView contentContainerStyle={discoverStyle.menuScrollContent}>
|
|
|
|
<SafeAreaView
|
|
|
|
style={discoverStyle.drawerContentContainer}
|
|
|
|
forceInset={{ top: 'always', horizontal: 'never' }}
|
|
|
|
>
|
|
|
|
{groupNames.map(groupName => {
|
|
|
|
const menuItems = groupedMenuItems[groupName];
|
2019-07-09 01:54:32 +01:00
|
|
|
|
2019-09-23 17:47:30 +01:00
|
|
|
return (
|
|
|
|
<View key={groupName} style={discoverStyle.menuGroup}>
|
|
|
|
{groupNames[3] !== groupName && (
|
|
|
|
<Text key={`${groupName}-title`} style={discoverStyle.menuGroupName}>
|
|
|
|
{groupName}
|
|
|
|
</Text>
|
|
|
|
)}
|
|
|
|
{menuItems.map(item => {
|
|
|
|
const focused =
|
|
|
|
activeItemKey === item.route ||
|
|
|
|
(activeItemKey === Constants.FULL_ROUTE_NAME_DISCOVER &&
|
|
|
|
item.route === Constants.DRAWER_ROUTE_DISCOVER) ||
|
|
|
|
(activeItemKey === Constants.FULL_ROUTE_NAME_WALLET &&
|
|
|
|
item.route === Constants.DRAWER_ROUTE_WALLET);
|
|
|
|
return (
|
|
|
|
<TouchableOpacity
|
|
|
|
accessible
|
|
|
|
accessibilityLabel={item.label}
|
|
|
|
style={[
|
|
|
|
discoverStyle.menuItemTouchArea,
|
|
|
|
focused ? discoverStyle.menuItemTouchAreaFocused : null,
|
|
|
|
]}
|
|
|
|
key={item.label}
|
|
|
|
onPress={() => navigation.navigate({ routeName: item.route })}
|
|
|
|
delayPressIn={0}
|
|
|
|
>
|
|
|
|
<View style={discoverStyle.menuItemIcon}>
|
|
|
|
<Icon
|
|
|
|
name={item.icon}
|
|
|
|
size={16}
|
|
|
|
solid={item.solid}
|
|
|
|
color={focused ? activeTintColor : null}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
<Text style={[discoverStyle.menuItem, focused ? discoverStyle.menuItemFocused : null]}>
|
|
|
|
{item.label}
|
|
|
|
</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</SafeAreaView>
|
|
|
|
</ScrollView>
|
|
|
|
</View>
|
2019-07-09 01:54:32 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DrawerContent;
|