GoodsGroupHeader.js
3.67 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
117
118
119
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../../classify/utils/Utils';
const {
View,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
Image,
} = ReactNative;
export default class GoodsGroupHeader extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.selectedIndex = 0;
}
_renderRow(rowData, sectionID, rowID) {
let cover = rowData.get('cover');
let url = getSlicedUrl(cover.get('cover'), 640, 640, 2);
let borderWidth = 0;
if (this.selectedIndex == rowID) {
borderWidth = 1;
}
return (
<View style={{backgroundColor: 'white'}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<TouchableOpacity onPress={() => {
if (this.selectedIndex == rowID) {
return;
}
this.props.scrollTo && this.props.scrollTo();
this.props.onPressFilter && this.props.onPressFilter(rowID);
}}>
<View style={{width: itemW - 20,height: itemH - 20,borderColor: 'black',borderWidth: borderWidth}}>
<Image source={{uri: url}} style={{width: itemW - 20 - 2*borderWidth,height: itemH - 20 - 2*borderWidth,backgroundColor:'white',}} resizeMode={'contain'}>
<View style={{width: 10,height: 10,marginLeft: itemW - 20 - 2*borderWidth - 12,marginTop: itemH - 20 - 2*borderWidth - 12,backgroundColor: 'white',borderRadius: 5}}>
</View>
</Image>
</View>
</TouchableOpacity>
</View>
</View>
);
}
render() {
let {resource} = this.props;
let rowData = resource?resource.rowData:null;
this.selectedIndex = resource?resource.goods_group_Filter:0;
let list = rowData.get('data');
if (!list || list.size == 0) {
return null;
}
let n = ((Math.ceil(this.selectedIndex)+1) *2 - 1)*10 + (itemW-20) * ((Math.ceil(this.selectedIndex)+1) - 0.5) - 8;
return (
<View style={[styles.container]}>
<ListView
contentContainerStyle={[styles.contentContainer]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(list.toArray())}
renderRow={this._renderRow}
scrollEnabled={false}
scrollsToTop={false}
/>
<View style={{width: width,height: 10,backgroundColor: 'white',}}>
</View>
<View style={{width: width,height: 9,backgroundColor: 'white'}}>
<View style={{position: 'absolute',marginTop:8,width: width,height: 1,backgroundColor: '#e0e0e0'}}/>
<Image source={require('../../image/global_arrow_up.png')} style={{marginLeft: n,width: 16,height: 9,backgroundColor: 'transparent'}}>
</Image>
</View>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let itemW = Math.ceil(width / 5);
let itemH = itemW * (50/40);
let styles = StyleSheet.create({
container: {
width: width,
height: itemH + 20,
backgroundColor:'white',
},
contentContainer: {
flexDirection: 'row',
},
rowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: itemW,
height: itemH + 20,
backgroundColor:'white',
},
});