status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix flow and lint for ScrollView 

Summary:
- getScrollResponder returns a...ScrollView!
- no more var
- no more string refs

Reviewed By: spicyj

Differential Revision: D3286596

fbshipit-source-id: d9e6e0a318eadd2521c9f5c69d2ec368f1d7b626
This commit is contained in:
Spencer Ahrens 2016-05-11 02:59:25 -07:00 committed by Facebook Github Bot 8
parent 052cd7eb8a
commit 892e509a0c
1 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
Libraries/Components/ScrollView/ScrollView.js
View File

@ -11,29 +11,26 @@
*/
'use strict';
var ColorPropType = require('ColorPropType');
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var Platform = require('Platform');
var PointPropType = require('PointPropType');
var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
var React = require('React');
var ReactNative = require('ReactNative');
var ScrollResponder = require('ScrollResponder');
var StyleSheet = require('StyleSheet');
var StyleSheetPropType = require('StyleSheetPropType');
var View = require('View');
var ViewStylePropTypes = require('ViewStylePropTypes');
const ColorPropType = require('ColorPropType');
const EdgeInsetsPropType = require('EdgeInsetsPropType');
const Platform = require('Platform');
const PointPropType = require('PointPropType');
const RCTScrollViewManager = require('NativeModules').ScrollViewManager;
const React = require('React');
const ReactNative = require('ReactNative');
const ScrollResponder = require('ScrollResponder');
const StyleSheet = require('StyleSheet');
const StyleSheetPropType = require('StyleSheetPropType');
const View = require('View');
const ViewStylePropTypes = require('ViewStylePropTypes');
var deprecatedPropType = require('deprecatedPropType');
var dismissKeyboard = require('dismissKeyboard');
var flattenStyle = require('flattenStyle');
var invariant = require('fbjs/lib/invariant');
var requireNativeComponent = require('requireNativeComponent');
var processDecelerationRate = require('processDecelerationRate');
var PropTypes = React.PropTypes;
var SCROLLVIEW = 'ScrollView';
var INNERVIEW = 'InnerScrollView';
const deprecatedPropType = require('deprecatedPropType');
const dismissKeyboard = require('dismissKeyboard');
const flattenStyle = require('flattenStyle');
const invariant = require('fbjs/lib/invariant');
const processDecelerationRate = require('processDecelerationRate');
const PropTypes = React.PropTypes;
const requireNativeComponent = require('requireNativeComponent');
/**
* Component that wraps platform ScrollView while providing
@ -50,7 +47,7 @@ var INNERVIEW = 'InnerScrollView';
* Doesn't yet support other contained responders from blocking this scroll
* view from becoming the responder.
*/
var ScrollView = React.createClass({
const ScrollView = React.createClass({
propTypes: {
...View.propTypes,
/**
@ -118,7 +115,7 @@ var ScrollView = React.createClass({
* </ScrollView>
* );
* ...
* var styles = StyleSheet.create({
* const styles = StyleSheet.create({
* contentContainer: {
* paddingVertical: 20
* }
@ -339,7 +336,7 @@ var ScrollView = React.createClass({
},
setNativeProps: function(props: Object) {
this.refs[SCROLLVIEW].setNativeProps(props);
this._scrollViewRef && this._scrollViewRef.setNativeProps(props);
},
/**
@ -357,16 +354,17 @@ var ScrollView = React.createClass({
* implement this method so that they can be composed while providing access
* to the underlying scroll responder's methods.
*/
getScrollResponder: function(): ReactComponent {
getScrollResponder: function(): ScrollView {
return this;
},
getScrollableNode: function(): any {
return ReactNative.findNodeHandle(this.refs[SCROLLVIEW]);
// console.log('getScrollableNode: ', {ref: this._scrollViewRef, node: ReactNative.findNodeHandle(this._scrollViewRef)});
return ReactNative.findNodeHandle(this._scrollViewRef);
},
getInnerViewNode: function(): any {
return ReactNative.findNodeHandle(this.refs[INNERVIEW]);
return ReactNative.findNodeHandle(this._innerViewRef);
},
/**
@ -390,7 +388,6 @@ var ScrollView = React.createClass({
} else {
({x, y, animated} = y || {});
}
// $FlowFixMe - Don't know how to pass Mixin correctly. Postpone for now
this.getScrollResponder().scrollResponderScrollTo({x: x || 0, y: y || 0, animated: animated !== false});
},
@ -405,7 +402,7 @@ var ScrollView = React.createClass({
_handleScroll: function(e: Object) {
if (__DEV__) {
if (this.props.onScroll && !this.props.scrollEventThrottle && Platform.OS === 'ios') {
console.log(
console.log( // eslint-disable-line no-console-disallow
'You specified `onScroll` on a <ScrollView> but not ' +
'`scrollEventThrottle`. You will only receive one event. ' +
'Using `16` you get all the events but be aware that it may ' +
@ -423,18 +420,29 @@ var ScrollView = React.createClass({
},
_handleContentOnLayout: function(e: Object) {
var {width, height} = e.nativeEvent.layout;
const {width, height} = e.nativeEvent.layout;
this.props.onContentSizeChange && this.props.onContentSizeChange(width, height);
},
_scrollViewRef: (null: ?ScrollView),
_setScrollViewRef: function(ref: ?ScrollView) {
this._scrollViewRef = ref;
},
_innerViewRef: (null: ?View),
_setInnerViewRef: function(ref: ?View) {
this._innerViewRef = ref;
},
render: function() {
var contentContainerStyle = [
const contentContainerStyle = [
this.props.horizontal && styles.contentContainerHorizontal,
this.props.contentContainerStyle,
];
let style, childLayoutProps;
if (__DEV__ && this.props.style) {
var style = flattenStyle(this.props.style);
var childLayoutProps = ['alignItems', 'justifyContent']
style = flattenStyle(this.props.style);
childLayoutProps = ['alignItems', 'justifyContent']
.filter((prop) => style && style[prop] !== undefined);
invariant(
childLayoutProps.length === 0,
@ -443,34 +451,34 @@ var ScrollView = React.createClass({
);
}
var contentSizeChangeProps = {};
let contentSizeChangeProps = {};
if (this.props.onContentSizeChange) {
contentSizeChangeProps = {
onLayout: this._handleContentOnLayout,
};
}
var contentContainer =
const contentContainer =
<View
{...contentSizeChangeProps}
ref={INNERVIEW}
ref={this._setInnerViewRef}
style={contentContainerStyle}
removeClippedSubviews={this.props.removeClippedSubviews}
collapsable={false}>
{this.props.children}
</View>;
var alwaysBounceHorizontal =
const alwaysBounceHorizontal =
this.props.alwaysBounceHorizontal !== undefined ?
this.props.alwaysBounceHorizontal :
this.props.horizontal;
var alwaysBounceVertical =
const alwaysBounceVertical =
this.props.alwaysBounceVertical !== undefined ?
this.props.alwaysBounceVertical :
!this.props.horizontal;
var props = {
const props = {
...this.props,
alwaysBounceHorizontal,
alwaysBounceVertical,
@ -494,7 +502,7 @@ var ScrollView = React.createClass({
sendMomentumEvents: (this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd) ? true : false,
};
var onRefreshStart = this.props.onRefreshStart;
const onRefreshStart = this.props.onRefreshStart;
if (onRefreshStart) {
// this is necessary because if we set it on props, even when empty,
// it'll trigger the default pull-to-refresh behavior on native.
@ -502,12 +510,12 @@ var ScrollView = React.createClass({
function() { onRefreshStart && onRefreshStart(this.endRefreshing); }.bind(this);
}
var { decelerationRate } = this.props;
const { decelerationRate } = this.props;
if (decelerationRate) {
props.decelerationRate = processDecelerationRate(decelerationRate);
}
var ScrollViewClass;
let ScrollViewClass;
if (Platform.OS === 'ios') {
ScrollViewClass = RCTScrollView;
} else if (Platform.OS === 'android') {
@ -522,12 +530,12 @@ var ScrollView = React.createClass({
'ScrollViewClass must not be undefined'
);
var refreshControl = this.props.refreshControl;
const refreshControl = this.props.refreshControl;
if (refreshControl) {
if (Platform.OS === 'ios') {
// On iOS the RefreshControl is a child of the ScrollView.
return (
<ScrollViewClass {...props} ref={SCROLLVIEW}>
<ScrollViewClass {...props} ref={this._setScrollViewRef}>
{refreshControl}
{contentContainer}
</ScrollViewClass>
@ -539,21 +547,21 @@ var ScrollView = React.createClass({
return React.cloneElement(
refreshControl,
{style: props.style},
<ScrollViewClass {...props} style={styles.base} ref={SCROLLVIEW}>
<ScrollViewClass {...props} style={styles.base} ref={this._setScrollViewRef}>
{contentContainer}
</ScrollViewClass>
);
}
}
return (
<ScrollViewClass {...props} ref={SCROLLVIEW}>
<ScrollViewClass {...props} ref={this._setScrollViewRef}>
{contentContainer}
</ScrollViewClass>
);
}
});
var styles = StyleSheet.create({
const styles = StyleSheet.create({
base: {
flex: 1,
},
@ -563,20 +571,21 @@ var styles = StyleSheet.create({
},
});
let nativeOnlyProps, AndroidScrollView, AndroidHorizontalScrollView, RCTScrollView;
if (Platform.OS === 'android') {
var nativeOnlyProps = {
nativeOnlyProps = {
nativeOnly: {
sendMomentumEvents: true,
}
};
var AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
var AndroidHorizontalScrollView = requireNativeComponent(
AndroidScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
AndroidHorizontalScrollView = requireNativeComponent(
'AndroidHorizontalScrollView',
ScrollView,
nativeOnlyProps
);
} else if (Platform.OS === 'ios') {
var nativeOnlyProps = {
nativeOnlyProps = {
nativeOnly: {
onMomentumScrollBegin: true,
onMomentumScrollEnd : true,
@ -584,7 +593,7 @@ if (Platform.OS === 'android') {
onScrollEndDrag: true,
}
};
var RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
RCTScrollView = requireNativeComponent('RCTScrollView', ScrollView, nativeOnlyProps);
}
module.exports = ScrollView;