|
@@ -4,6 +4,7 @@ import React from 'react'; |
|
@@ -4,6 +4,7 @@ import React from 'react'; |
4
|
import ReactNative from 'react-native';
|
4
|
import ReactNative from 'react-native';
|
5
|
import {isEmptyObject} from '../../utils/Utils';
|
5
|
import {isEmptyObject} from '../../utils/Utils';
|
6
|
import Immutable, {Map} from 'immutable';
|
6
|
import Immutable, {Map} from 'immutable';
|
|
|
7
|
+import * as _ from 'lodash';
|
7
|
|
8
|
|
8
|
const {
|
9
|
const {
|
9
|
View,
|
10
|
View,
|
|
@@ -19,6 +20,10 @@ export default class IndexListView extends React.Component { |
|
@@ -19,6 +20,10 @@ export default class IndexListView extends React.Component { |
19
|
constructor(props) {
|
20
|
constructor(props) {
|
20
|
super (props);
|
21
|
super (props);
|
21
|
this.onTouchMove = this.onTouchMove.bind(this);
|
22
|
this.onTouchMove = this.onTouchMove.bind(this);
|
|
|
23
|
+
|
|
|
24
|
+ this.state = {
|
|
|
25
|
+ list:[]
|
|
|
26
|
+ };
|
22
|
}
|
27
|
}
|
23
|
|
28
|
|
24
|
shouldComponentUpdate(nextProps){
|
29
|
shouldComponentUpdate(nextProps){
|
|
@@ -31,10 +36,25 @@ export default class IndexListView extends React.Component { |
|
@@ -31,10 +36,25 @@ export default class IndexListView extends React.Component { |
31
|
|
36
|
|
32
|
onTouchMove(e) {
|
37
|
onTouchMove(e) {
|
33
|
let {dataSource} = this.props;
|
38
|
let {dataSource} = this.props;
|
34
|
- let Y = e.nativeEvent.pageY - Math.ceil((viewHeight - dataSource.length * (itemHeight+2))/2) - 8;
|
|
|
35
|
- var index = Math.ceil(Y/(itemHeight+2))-1;
|
|
|
36
|
- let sectionID = dataSource[index];
|
|
|
37
|
- this.props.onLetterPress && this.props.onLetterPress(index,sectionID);
|
39
|
+ let Y = e.nativeEvent.pageY;
|
|
|
40
|
+ for (var i = 0; i < this.state.list.length; i++) {
|
|
|
41
|
+ if (Y > this.state.list[i].y && Y < this.state.list[i].y + 12) {
|
|
|
42
|
+ let name = this.state.list[i].name;
|
|
|
43
|
+ if (name == '0') {
|
|
|
44
|
+ name = '0-9';
|
|
|
45
|
+ }
|
|
|
46
|
+ this.props.onLetterPress && this.props.onLetterPress(i,name);
|
|
|
47
|
+ break;
|
|
|
48
|
+ }
|
|
|
49
|
+ }
|
|
|
50
|
+ }
|
|
|
51
|
+
|
|
|
52
|
+ onLayout(name,e) {
|
|
|
53
|
+ let {y} = e.nativeEvent.layout;
|
|
|
54
|
+ let Y = {'name':name,'y':y}
|
|
|
55
|
+ let list = this.state.list;
|
|
|
56
|
+ list.push(Y);
|
|
|
57
|
+ this.setState(list)
|
38
|
}
|
58
|
}
|
39
|
|
59
|
|
40
|
render() {
|
60
|
render() {
|
|
@@ -52,7 +72,9 @@ export default class IndexListView extends React.Component { |
|
@@ -52,7 +72,9 @@ export default class IndexListView extends React.Component { |
52
|
if (name == '0-9') {
|
72
|
if (name == '0-9') {
|
53
|
name = '0';
|
73
|
name = '0';
|
54
|
}
|
74
|
}
|
55
|
- keyData.push(<Text key={i} style={styles.text}>{name}</Text>);
|
75
|
+
|
|
|
76
|
+
|
|
|
77
|
+ keyData.push(<View key={i} style={styles.TV} onLayout={this.onLayout.bind(this, name)}><Text style={styles.text}>{name}</Text></View>);
|
56
|
}
|
78
|
}
|
57
|
|
79
|
|
58
|
return (
|
80
|
return (
|
|
@@ -78,13 +100,20 @@ let styles = StyleSheet.create({ |
|
@@ -78,13 +100,20 @@ let styles = StyleSheet.create({ |
78
|
alignItems: 'center',
|
100
|
alignItems: 'center',
|
79
|
justifyContent: 'center',
|
101
|
justifyContent: 'center',
|
80
|
},
|
102
|
},
|
|
|
103
|
+ TV: {
|
|
|
104
|
+ width: 12,
|
|
|
105
|
+ height: 12,
|
|
|
106
|
+ backgroundColor: 'transparent',
|
|
|
107
|
+ marginTop: 2,
|
|
|
108
|
+ justifyContent: 'center',
|
|
|
109
|
+ },
|
81
|
text: {
|
110
|
text: {
|
82
|
justifyContent: 'center',
|
111
|
justifyContent: 'center',
|
83
|
textAlign: 'center',
|
112
|
textAlign: 'center',
|
84
|
fontSize: 11,
|
113
|
fontSize: 11,
|
85
|
color: 'black',
|
114
|
color: 'black',
|
86
|
backgroundColor: 'transparent',
|
115
|
backgroundColor: 'transparent',
|
87
|
- marginTop: 2,
|
116
|
+
|
88
|
fontWeight: 'bold',
|
117
|
fontWeight: 'bold',
|
89
|
},
|
118
|
},
|
90
|
image: {
|
119
|
image: {
|