diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 362898e6c..8e4baf9c9 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -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({ * * ); * ... - * 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 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 = {this.props.children} ; - 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 ( - + {refreshControl} {contentContainer} @@ -539,21 +547,21 @@ var ScrollView = React.createClass({ return React.cloneElement( refreshControl, {style: props.style}, - + {contentContainer} ); } } return ( - + {contentContainer} ); } }); -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;