BrandFliter.js
2.9 KB
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
115
116
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class BrandFliter extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.state = {
selectedIndex: this.props.selectID,
};
}
_renderRow(rowData, sectionID, rowID) {
let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
return (
<TouchableOpacity onPress={() => {
if (this.state.selectedIndex == rowID) {
return;
}
if (rowID != 3) {
this.setState({
selectedIndex: rowID,
});
}
this.props.onPressFilter && this.props.onPressFilter(rowID);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {dataSource} = this.props;
let res = dataSource.toJS();
return (
<View style={styles.container}>
<ListView
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(res)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollEnabled={false}
scrollsToTop={false}
/>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
marginLeft: -1,
width: width + 2,
height: 37,
borderTopColor: 'transparent',
borderBottomColor: '#e5e5e5',
borderWidth: 0.5,
backgroundColor:'white',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: Math.ceil(width / 3),
height: 37,
backgroundColor:'white',
},
name: {
color: '#b0b0b0',
},
separator: {
width: 0.5,
top: 37 / 4,
height: 37 / 2,
backgroundColor: '#e5e5e5',
},
});