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:
parent
052cd7eb8a
commit
892e509a0c
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue