-
Notifications
You must be signed in to change notification settings - Fork 6
/
ListItem.js
81 lines (72 loc) · 2.28 KB
/
ListItem.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
import React, { PureComponent } from 'react';
import { View, StyleSheet, TouchableOpacity, Text, ViewPropTypes } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
export default class ListItem extends PureComponent {
constructor(props) {
super(props);
this.onTouch = this.onTouch.bind(this);
}
onTouch() {
const { checked, index, onTouch } = this.props;
onTouch(!checked, index);
}
render() {
const { text, activeContainerStyle, activeTextStyle, inactiveContainerStyle, inactiveTextStyle, checked, activeIcon, inactiveIcon } = this.props;
return (
<TouchableOpacity onPress={this.onTouch}>
{checked ? <View style={[styles.container, styles.activeContainer, activeContainerStyle]}>
<Text numberOfLines={1} style={[styles.text, styles.activeText, activeTextStyle]}>{text}</Text>
{activeIcon ? activeIcon : <Ionicons name='md-close' size={16} style={[styles.icon, styles.activeText, activeTextStyle]} />}
</View> :
<View style={[styles.container, inactiveContainerStyle]}>
<Text numberOfLines={1} style={[styles.text, inactiveTextStyle]}>{text}</Text>
{inactiveIcon ? inactiveIcon : <Ionicons name='md-add' size={16} style={[styles.icon, styles.text, inactiveTextStyle]} />}
</View>}
</TouchableOpacity>
);
}
}
ListItem.propTypes = {
...TouchableOpacity.propTypes,
text: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
activeContainerStyle: ViewPropTypes.style,
inactiveContainerStyle: ViewPropTypes.style,
activeTextStyle: Text.propTypes.style,
inactiveTextStyle: Text.propTypes.style,
checked: PropTypes.bool.isRequired,
activeIcon: PropTypes.element,
inactiveIcon: PropTypes.element,
onTouch: PropTypes.func.isRequired
}
const styles = StyleSheet.create(
{
container: {
paddingVertical: 5,
marginTop: 10,
marginRight: 10,
paddingLeft: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderRadius: 2,
backgroundColor: '#f8f8f8'
},
activeContainer: {
backgroundColor: '#BDD358',
borderColor: 'transparent'
},
activeText: {
color: '#fff'
},
text: {
fontSize: 16,
color: 'black',
paddingRight: 10
},
icon: {
marginTop: 3,
width: 20,
}
});