1
1
// @flow weak
2
2
import React , { Component } from 'react' ;
3
- import PropTypes from 'prop-types' ;
4
3
import { View , Animated } from 'react-native' ;
5
4
import _ from 'lodash' ;
6
5
7
- class TriggeringView extends Component < * , * , * > {
6
+ type Props = {
7
+ onBeginHidden : Function ,
8
+ onHide : Function ,
9
+ onBeginDisplayed : Function ,
10
+ onDisplay : Function ,
11
+ onTouchTop : Function ,
12
+ onTouchBottom : Function ,
13
+ children ?: React$Node ,
14
+ } ;
15
+
16
+ type DefaultProps = {
17
+ onBeginHidden : Function ,
18
+ onHide : Function ,
19
+ onBeginDisplayed : Function ,
20
+ onDisplay : Function ,
21
+ onTouchTop : Function ,
22
+ onTouchBottom : Function ,
23
+ } ;
24
+
25
+ type State = {
26
+ touched : boolean ,
27
+ hidden : boolean ,
28
+ } ;
29
+
30
+ type Context = {
31
+ scrollPageY ?: number ,
32
+ scrollY : Animated . Value ,
33
+ } ;
34
+
35
+ class TriggeringView extends Component < Props , State > {
8
36
initialPageY : number ;
9
- listenerId : number ;
10
- ref : * ;
37
+ listenerId : string ;
38
+ ref : ? any ; // @see https://github.com/facebook/react-native/issues/15955
11
39
height : number ;
40
+ context : Context ;
12
41
13
42
onScroll : Function ;
14
43
onRef : Function ;
15
44
onLayout : Function ;
45
+ state : State = {
46
+ touched : false ,
47
+ hidden : false ,
48
+ } ;
49
+
50
+ static defaultProps : DefaultProps = {
51
+ onBeginHidden : ( ) => { } ,
52
+ onHide : ( ) => { } ,
53
+ onBeginDisplayed : ( ) => { } ,
54
+ onDisplay : ( ) => { } ,
55
+ onTouchTop : ( ) => { } ,
56
+ onTouchBottom : ( ) => { } ,
57
+ } ;
16
58
17
59
constructor ( props ) {
18
60
super ( props ) ;
19
- this . state = {
20
- touched : false ,
21
- hidden : false ,
22
- } ;
23
61
this . initialPageY = 0 ;
24
- this . onScroll = this . _onScroll . bind ( this ) ;
25
- this . onRef = this . _onRef . bind ( this ) ;
26
- this . onLayout = this . _onLayout . bind ( this ) ;
27
62
}
28
63
29
64
componentWillMount ( ) {
@@ -41,40 +76,46 @@ class TriggeringView extends Component<*, *, *> {
41
76
nextContext . scrollY . addListener ( this . onScroll ) ;
42
77
}
43
78
44
- _onRef ( ref ) {
79
+ onRef = ref => {
45
80
this . ref = ref ;
46
- }
81
+ } ;
47
82
48
- _onLayout ( e ) {
83
+ onLayout = e => {
84
+ if ( ! this . ref ) {
85
+ return ;
86
+ }
49
87
const layout = e . nativeEvent . layout ;
50
88
this . height = layout . height ;
51
89
this . ref . measure ( ( x , y , width , height , pageX , pageY ) => {
52
90
this . initialPageY = pageY ;
53
91
} ) ;
54
- }
92
+ } ;
55
93
56
- _onScroll ( event ) {
94
+ onScroll = event => {
95
+ if ( ! this . context . scrollPageY ) {
96
+ return ;
97
+ }
57
98
const pageY = this . initialPageY - event . value ;
58
99
this . triggerEvents ( this . context . scrollPageY , pageY , pageY + this . height ) ;
59
- }
100
+ } ;
60
101
61
102
triggerEvents ( value , top , bottom ) {
62
103
if ( ! this . state . touched && value >= top ) {
63
- this . setState ( { touched : true } ) ;
104
+ this . setState ( ( ) => ( { touched : true } ) ) ;
64
105
this . props . onBeginHidden ( ) ;
65
106
this . props . onTouchTop ( true ) ;
66
107
} else if ( this . state . touched && value < top ) {
67
- this . setState ( { touched : false } ) ;
108
+ this . setState ( ( ) => ( { touched : false } ) ) ;
68
109
this . props . onDisplay ( ) ;
69
110
this . props . onTouchTop ( false ) ;
70
111
}
71
112
72
113
if ( ! this . state . hidden && value >= bottom ) {
73
- this . setState ( { hidden : true } ) ;
114
+ this . setState ( ( ) => ( { hidden : true } ) ) ;
74
115
this . props . onHide ( ) ;
75
116
this . props . onTouchBottom ( true ) ;
76
117
} else if ( this . state . hidden && value < bottom ) {
77
- this . setState ( { hidden : false } ) ;
118
+ this . setState ( ( ) => ( { hidden : false } ) ) ;
78
119
this . props . onBeginDisplayed ( ) ;
79
120
this . props . onTouchBottom ( false ) ;
80
121
}
@@ -89,27 +130,5 @@ class TriggeringView extends Component<*, *, *> {
89
130
) ;
90
131
}
91
132
}
92
- TriggeringView . propTypes = {
93
- onBeginHidden : PropTypes . func ,
94
- onHide : PropTypes . func ,
95
- onBeginDisplayed : PropTypes . func ,
96
- onDisplay : PropTypes . func ,
97
- onTouchTop : PropTypes . func ,
98
- onTouchBottom : PropTypes . func ,
99
- } ;
100
-
101
- TriggeringView . defaultProps = {
102
- onBeginHidden : ( ) => { } ,
103
- onHide : ( ) => { } ,
104
- onBeginDisplayed : ( ) => { } ,
105
- onDisplay : ( ) => { } ,
106
- onTouchTop : ( ) => { } ,
107
- onTouchBottom : ( ) => { } ,
108
- } ;
109
-
110
- TriggeringView . contextTypes = {
111
- scrollY : PropTypes . instanceOf ( Animated . Value ) ,
112
- scrollPageY : PropTypes . number ,
113
- } ;
114
133
115
134
export default TriggeringView ;
0 commit comments