IndexListView.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
117
118
119
120
121
122
123
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import {isEmptyObject} from '../../utils/Utils';
import Immutable, {Map} from 'immutable';
import * as _ from 'lodash';
const {
View,
Image,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class IndexListView extends React.Component {
constructor(props) {
super (props);
this.onTouchMove = this.onTouchMove.bind(this);
this.state = {
list:[]
};
}
shouldComponentUpdate(nextProps){
if (Immutable.is(Immutable.fromJS(nextProps.dataSource), Immutable.fromJS(this.props.dataSource))) {
return false;
} else {
return true;
}
}
onTouchMove(e) {
let {dataSource} = this.props;
let Y = e.nativeEvent.pageY;
for (var i = 0; i < this.state.list.length; i++) {
if (Y > this.state.list[i].y && Y < this.state.list[i].y + 12) {
let name = this.state.list[i].name;
if (name == '0') {
name = '0-9';
}
this.props.onLetterPress && this.props.onLetterPress(i,name);
break;
}
}
}
onLayout(name,e) {
let {y} = e.nativeEvent.layout;
let Y = {'name':name,'y':y}
let list = this.state.list;
list.push(Y);
this.setState(list)
}
render() {
let {dataSource} = this.props;
if (dataSource.length == 0) {
return null;
}
let keyData = [];
keyData.push(<Image key={'search'} style={styles.image} source={require('../../images/search.png')}/>);
for (var i = 0; i < dataSource.length; i++) {
let name = dataSource[i];
if (name == '0-9') {
name = '0';
}
keyData.push(<View key={i} style={styles.TV} onLayout={this.onLayout.bind(this, name)}><Text style={styles.text}>{name}</Text></View>);
}
return (
<View style={styles.container} onTouchStart={this.onTouchMove} onTouchMove={this.onTouchMove} >
{keyData.map((elem, index) => {return elem;})}
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let itemHeight = 12;
let viewHeight = height - 64;
let styles = StyleSheet.create({
container: {
position: 'absolute',
width: 20,
height: viewHeight,
bottom : 1,
right: 1,
backgroundColor: 'rgba(255,255,255,0.2)',
alignItems: 'center',
justifyContent: 'center',
},
TV: {
width: 12,
height: 12,
backgroundColor: 'transparent',
marginTop: 2,
justifyContent: 'center',
},
text: {
justifyContent: 'center',
textAlign: 'center',
fontSize: 11,
color: 'black',
backgroundColor: 'transparent',
fontWeight: 'bold',
},
image: {
width: 8,
height: 8,
},
});