/
DrawerItem.js
114 lines (106 loc) · 2.56 KB
/
DrawerItem.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React from "react";
import { StyleSheet } from "react-native";
import { Block, Text, theme } from "galio-framework";
import Icon from "./Icon";
import argonTheme from "../constants/Theme";
class DrawerItem extends React.Component {
renderIcon = () => {
const { title, focused } = this.props;
switch (title) {
case "Home":
return (
<Icon
name="shop"
family="ArgonExtra"
size={10}
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
/>
);
case "Elements":
return (
<Icon
name="map-big"
family="ArgonExtra"
size={12}
color={focused ? "white" : argonTheme.COLORS.ERROR}
/>
);
case "Articles":
return (
<Icon
name="spaceship"
family="ArgonExtra"
size={12}
color={focused ? "white" : argonTheme.COLORS.PRIMARY}
/>
);
case "Profile":
return (
<Icon
name="chart-pie-35"
family="ArgonExtra"
size={12}
color={focused ? "white" : argonTheme.COLORS.WARNING}
/>
);
case "Account":
return (
<Icon
name="calendar-date"
family="ArgonExtra"
size={12}
color={focused ? "white" : argonTheme.COLORS.INFO}
/>
);
case "Getting Started":
return <Icon />;
case "Log out":
return <Icon />;
default:
return null;
}
};
render() {
const { focused, title } = this.props;
const containerStyles = [
styles.defaultStyle,
focused ? [styles.activeStyle, styles.shadow] : null
];
return (
<Block flex row style={containerStyles}>
<Block middle flex={0.1} style={{ marginRight: 5 }}>
{this.renderIcon()}
</Block>
<Block row center flex={0.9}>
<Text
size={15}
bold={focused ? true : false}
color={focused ? "white" : "rgba(0,0,0,0.5)"}
>
{title}
</Text>
</Block>
</Block>
);
}
}
const styles = StyleSheet.create({
defaultStyle: {
paddingVertical: 15,
paddingHorizontal: 14
},
activeStyle: {
backgroundColor: argonTheme.COLORS.ACTIVE,
borderRadius: 4
},
shadow: {
shadowColor: theme.COLORS.BLACK,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 8,
shadowOpacity: 0.1
}
});
export default DrawerItem;