-
Notifications
You must be signed in to change notification settings - Fork 24k
/
RecyclerViewBackedScrollView.android.js
176 lines (157 loc) · 5.47 KB
/
RecyclerViewBackedScrollView.android.js
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule RecyclerViewBackedScrollView
*/
'use strict';
var React = require('React');
var ScrollResponder = require('ScrollResponder');
var ScrollView = require('ScrollView');
var View = require('View');
var StyleSheet = require('StyleSheet');
var requireNativeComponent = require('requireNativeComponent');
var INNERVIEW = 'InnerView';
/**
* Wrapper around android native recycler view.
*
* It simply renders rows passed as children in a separate recycler view cells
* similarly to how `ScrollView` is doing it. Thanks to the fact that it uses
* native `RecyclerView` though, rows that are out of sight are going to be
* automatically detached (similarly on how this would work with
* `removeClippedSubviews = true` on a `ScrollView.js`).
*
* CAUTION: This is an experimental component and should only be used together
* with javascript implementation of list view (see ListView.js). In order to
* use it pass this component as `renderScrollComponent` to the list view. For
* now only horizontal scrolling is supported.
*
* Example:
*
* ```
* getInitialState: function() {
* var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
* return {
* dataSource: ds.cloneWithRows(['row 1', 'row 2']),
* };
* },
*
* render: function() {
* return (
* <ListView
* dataSource={this.state.dataSource}
* renderRow={rowData => <Text>{rowData}</Text>}
* renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
* />
* );
* },
* ```
*/
var RecyclerViewBackedScrollView = React.createClass({
propTypes: {
...ScrollView.propTypes,
},
mixins: [ScrollResponder.Mixin],
getInitialState: function() {
return this.scrollResponderMixinGetInitialState();
},
getScrollResponder: function() {
return this;
},
setNativeProps: function(props: Object) {
this.refs[INNERVIEW].setNativeProps(props);
},
_handleContentSizeChange: function(event) {
var {width, height} = event.nativeEvent;
this.props.onContentSizeChange(width, height);
},
/**
* A helper function to scroll to a specific point in the scrollview.
* This is currently used to help focus on child textviews, but can also
* be used to quickly scroll to any element we want to focus. Syntax:
*
* scrollResponderScrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
*
* Note: The weird argument signature is due to the fact that, for historical reasons,
* the function also accepts separate arguments as as alternative to the options object.
* This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
*/
scrollTo: function(
y?: number | { x?: number, y?: number, animated?: boolean },
x?: number,
animated?: boolean
) {
if (typeof y === 'number') {
console.warn('`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, animated: true})` instead.');
} else {
({x, y, animated} = y || {});
}
this.getScrollResponder().scrollResponderScrollTo({x: x || 0, y: y || 0, animated: animated !== false});
},
render: function() {
var recyclerProps = {
...this.props,
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
onTouchEnd: this.scrollResponderHandleTouchEnd,
onScrollBeginDrag: this.scrollResponderHandleScrollBeginDrag,
onScrollEndDrag: this.scrollResponderHandleScrollEndDrag,
onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin,
onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd,
onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder,
onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture,
onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder,
onResponderGrant: this.scrollResponderHandleResponderGrant,
onResponderRelease: this.scrollResponderHandleResponderRelease,
onResponderReject: this.scrollResponderHandleResponderReject,
onScroll: this.scrollResponderHandleScroll,
ref: INNERVIEW,
};
if (this.props.onContentSizeChange) {
recyclerProps.onContentSizeChange = this._handleContentSizeChange;
}
var wrappedChildren = React.Children.map(this.props.children, (child) => {
if (!child) {
return null;
}
return (
<View
collapsable={false}
style={styles.absolute}>
{child}
</View>
);
});
const refreshControl = this.props.refreshControl;
if (refreshControl) {
// Wrap the NativeAndroidRecyclerView with a AndroidSwipeRefreshLayout.
return React.cloneElement(
refreshControl,
{style: [styles.base, this.props.style]},
<NativeAndroidRecyclerView {...recyclerProps} style={styles.base}>
{wrappedChildren}
</NativeAndroidRecyclerView>
);
}
return (
<NativeAndroidRecyclerView {...recyclerProps} style={[styles.base, this.props.style]}>
{wrappedChildren}
</NativeAndroidRecyclerView>
);
},
});
var styles = StyleSheet.create({
absolute: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
},
base: {
flex: 1,
},
});
var NativeAndroidRecyclerView = requireNativeComponent(
'AndroidRecyclerViewBackedScrollView',
RecyclerViewBackedScrollView
);
module.exports = RecyclerViewBackedScrollView;