88 *
99 * @providesModule ScrollViewStickyHeader
1010 * @flow
11+ * @format
1112 */
1213'use strict' ;
1314
1415const Animated = require ( 'Animated' ) ;
1516const React = require ( 'React' ) ;
1617const StyleSheet = require ( 'StyleSheet' ) ;
1718
19+ import type { LayoutEvent } from 'CoreEventTypes' ;
20+
1821type Props = {
1922 children ?: React . Element < any > ,
2023 nextHeaderLayoutY : ?number ,
21- onLayout : ( event : Object ) => void ,
24+ onLayout : ( event : LayoutEvent ) => void ,
2225 scrollAnimatedValue : Animated . Value ,
26+ // Will cause sticky headers to stick at the bottom of the ScrollView instead
27+ // of the top.
28+ inverted : ?boolean ,
29+ // The height of the parent ScrollView. Currently only set when inverted.
30+ scrollViewHeight : ?number ,
2331} ;
2432
25- class ScrollViewStickyHeader extends React . Component < Props , {
33+ type State = {
2634 measured : boolean ,
2735 layoutY : number ,
2836 layoutHeight : number ,
2937 nextHeaderLayoutY : ?number ,
30- } > {
31- constructor ( props : Props , context : Object ) {
32- super ( props , context ) ;
33- this . state = {
34- measured : false ,
35- layoutY : 0 ,
36- layoutHeight : 0 ,
37- nextHeaderLayoutY : props . nextHeaderLayoutY ,
38- } ;
39- }
38+ } ;
39+
40+ class ScrollViewStickyHeader extends React . Component < Props , State > {
41+ state = {
42+ measured : false ,
43+ layoutY : 0 ,
44+ layoutHeight : 0 ,
45+ nextHeaderLayoutY : this . props . nextHeaderLayoutY ,
46+ } ;
4047
4148 setNextHeaderY ( y : number ) {
42- this . setState ( { nextHeaderLayoutY : y } ) ;
49+ this . setState ( { nextHeaderLayoutY : y } ) ;
4350 }
4451
45- _onLayout = ( event ) => {
52+ _onLayout = event => {
4653 this . setState ( {
4754 measured : true ,
4855 layoutY : event . nativeEvent . layout . y ,
@@ -57,32 +64,70 @@ class ScrollViewStickyHeader extends React.Component<Props, {
5764 } ;
5865
5966 render ( ) {
67+ const { inverted , scrollViewHeight } = this . props ;
6068 const { measured, layoutHeight, layoutY, nextHeaderLayoutY} = this . state ;
6169 const inputRange : Array < number > = [-1, 0];
6270 const outputRange: Array< number > = [0, 0];
6371
6472 if (measured) {
65- // The interpolation looks like:
66- // - Negative scroll: no translation
67- // - From 0 to the y of the header: no translation. This will cause the header
68- // to scroll normally until it reaches the top of the scroll view.
69- // - From header y to when the next header y hits the bottom edge of the header: translate
70- // equally to scroll. This will cause the header to stay at the top of the scroll view.
71- // - Past the collision with the next header y: no more translation. This will cause the
72- // header to continue scrolling up and make room for the next sticky header.
73- // In the case that there is no next header just translate equally to
74- // scroll indefinitely.
75- inputRange . push ( layoutY ) ;
76- outputRange . push ( 0 ) ;
77- // Sometimes headers jump around so we make sure we don't violate the monotonic inputRange
78- // condition.
79- const collisionPoint = ( nextHeaderLayoutY || 0 ) - layoutHeight ;
80- if ( collisionPoint >= layoutY ) {
81- inputRange . push ( collisionPoint , collisionPoint + 1 ) ;
82- outputRange . push ( collisionPoint - layoutY , collisionPoint - layoutY ) ;
73+ if ( inverted ) {
74+ // The interpolation looks like:
75+ // - Negative scroll: no translation
76+ // - `stickStartPoint` is the point at which the header will start sticking.
77+ // It is calculated using the ScrollView viewport height so it is a the bottom.
78+ // - Headers that are in the initial viewport will never stick, `stickStartPoint`
79+ // will be negative.
80+ // - From 0 to `stickStartPoint` no translation. This will cause the header
81+ // to scroll normally until it reaches the top of the scroll view.
82+ // - From `stickStartPoint` to when the next header y hits the bottom edge of the header: translate
83+ // equally to scroll. This will cause the header to stay at the top of the scroll view.
84+ // - Past the collision with the next header y: no more translation. This will cause the
85+ // header to continue scrolling up and make room for the next sticky header.
86+ // In the case that there is no next header just translate equally to
87+ // scroll indefinitely.
88+ if ( scrollViewHeight != null ) {
89+ const stickStartPoint = layoutY + layoutHeight - scrollViewHeight ;
90+ if ( stickStartPoint > 0 ) {
91+ inputRange . push ( stickStartPoint ) ;
92+ outputRange . push ( 0 ) ;
93+ inputRange . push ( stickStartPoint + 1 ) ;
94+ outputRange . push ( 1 ) ;
95+ // If the next sticky header has not loaded yet (probably windowing) or is the last
96+ // we can just keep it sticked forever.
97+ const collisionPoint =
98+ ( nextHeaderLayoutY || 0 ) - layoutHeight - scrollViewHeight ;
99+ if ( collisionPoint > stickStartPoint ) {
100+ inputRange . push ( collisionPoint , collisionPoint + 1 ) ;
101+ outputRange . push (
102+ collisionPoint - stickStartPoint ,
103+ collisionPoint - stickStartPoint ,
104+ ) ;
105+ }
106+ }
107+ }
83108 } else {
84- inputRange . push ( layoutY + 1 ) ;
85- outputRange . push ( 1 ) ;
109+ // The interpolation looks like:
110+ // - Negative scroll: no translation
111+ // - From 0 to the y of the header: no translation. This will cause the header
112+ // to scroll normally until it reaches the top of the scroll view.
113+ // - From header y to when the next header y hits the bottom edge of the header: translate
114+ // equally to scroll. This will cause the header to stay at the top of the scroll view.
115+ // - Past the collision with the next header y: no more translation. This will cause the
116+ // header to continue scrolling up and make room for the next sticky header.
117+ // In the case that there is no next header just translate equally to
118+ // scroll indefinitely.
119+ inputRange . push ( layoutY ) ;
120+ outputRange . push ( 0 ) ;
121+ // If the next sticky header has not loaded yet (probably windowing) or is the last
122+ // we can just keep it sticked forever.
123+ const collisionPoint = ( nextHeaderLayoutY || 0 ) - layoutHeight ;
124+ if ( collisionPoint >= layoutY ) {
125+ inputRange . push ( collisionPoint , collisionPoint + 1 ) ;
126+ outputRange . push ( collisionPoint - layoutY , collisionPoint - layoutY ) ;
127+ } else {
128+ inputRange . push ( layoutY + 1 ) ;
129+ outputRange . push ( 1 ) ;
130+ }
86131 }
87132 }
88133
0 commit comments