Skip to content

Commit

Permalink
Modernize ScrollResponder.js
Browse files Browse the repository at this point in the history 
Reviewed By: sahrens

Differential Revision: D6661084

fbshipit-source-id: 46cef96dc86842b379728d8465ce4feb408338c7
  • Loading branch information
@elicwhite @facebook-github-bot
elicwhite authored and facebook-github-bot committed Jan 5, 2018
1 parent c49d249 commit 45e6fcd
Showing 1 changed file with 34 additions and 42 deletions.
76 changes: 34 additions & 42 deletions Libraries/Components/ScrollResponder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,21 @@
*/
'use strict';

var Dimensions = require('Dimensions');
var FrameRateLogger = require('FrameRateLogger');
var Keyboard = require('Keyboard');
var ReactNative = require('ReactNative');
var Subscribable = require('Subscribable');
var TextInputState = require('TextInputState');
var UIManager = require('UIManager');

var invariant = require('fbjs/lib/invariant');
var nullthrows = require('fbjs/lib/nullthrows');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
var performanceNow = require('fbjs/lib/performanceNow');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
var warning = require('fbjs/lib/warning');

var { ScrollViewManager } = require('NativeModules');
var { getInstanceFromNode } = require('ReactNativeComponentTree');
const Dimensions = require('Dimensions');
const FrameRateLogger = require('FrameRateLogger');
const Keyboard = require('Keyboard');
const ReactNative = require('ReactNative');
const Subscribable = require('Subscribable');
const TextInputState = require('TextInputState');
const UIManager = require('UIManager');

const invariant = require('fbjs/lib/invariant');
const nullthrows = require('fbjs/lib/nullthrows');
const performanceNow = require('fbjs/lib/performanceNow');
const warning = require('fbjs/lib/warning');

const { ScrollViewManager } = require('NativeModules');
const { getInstanceFromNode } = require('ReactNativeComponentTree');

/**
* Mixin that can be integrated in order to handle scrolling that plays well
Expand Down Expand Up @@ -111,7 +105,7 @@ var { getInstanceFromNode } = require('ReactNativeComponentTree');
* this.props.onKeyboardDidHide
*/

var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;

type State = {
isTouching: boolean,
Expand All @@ -123,15 +117,15 @@ type State = {
type Event = Object;

function isTagInstanceOfTextInput(tag) {
var instance = getInstanceFromNode(tag);
const instance = getInstanceFromNode(tag);
return instance && instance.viewConfig && (
instance.viewConfig.uiViewClassName === 'AndroidTextInput' ||
instance.viewConfig.uiViewClassName === 'RCTMultilineTextInputView' ||
instance.viewConfig.uiViewClassName === 'RCTSinglelineTextInputView'
);
}

var ScrollResponderMixin = {
const ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
scrollResponderMixinGetInitialState: function(): State {
return {
Expand Down Expand Up @@ -182,7 +176,7 @@ var ScrollResponderMixin = {
*
*/
scrollResponderHandleStartShouldSetResponder: function(e: Event): boolean {
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();

if (this.props.keyboardShouldPersistTaps === 'handled' &&
currentlyFocusedTextInput != null &&
Expand All @@ -205,9 +199,9 @@ var ScrollResponderMixin = {
*/
scrollResponderHandleStartShouldSetResponderCapture: function(e: Event): boolean {
// First see if we want to eat taps while the keyboard is up
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
var {keyboardShouldPersistTaps} = this.props;
var keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
const {keyboardShouldPersistTaps} = this.props;
const keyboardNeverPersistTaps = !keyboardShouldPersistTaps ||
keyboardShouldPersistTaps === 'never';
if (keyboardNeverPersistTaps &&
currentlyFocusedTextInput != null &&
Expand Down Expand Up @@ -255,7 +249,7 @@ var ScrollResponderMixin = {
* @param {SyntheticEvent} e Event.
*/
scrollResponderHandleTouchEnd: function(e: Event) {
var nativeEvent = e.nativeEvent;
const nativeEvent = e.nativeEvent;
this.state.isTouching = nativeEvent.touches.length !== 0;
this.props.onTouchEnd && this.props.onTouchEnd(e);
},
Expand All @@ -278,7 +272,7 @@ var ScrollResponderMixin = {

// By default scroll views will unfocus a textField
// if another touch occurs outside of it
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
if (this.props.keyboardShouldPersistTaps !== true &&
this.props.keyboardShouldPersistTaps !== 'always' &&
currentlyFocusedTextInput != null &&
Expand Down Expand Up @@ -388,9 +382,9 @@ var ScrollResponderMixin = {
* a touch has just started or ended.
*/
scrollResponderIsAnimating: function(): boolean {
var now = performanceNow();
var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
const now = performanceNow();
const timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
const isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
return isAnimating;
},
Expand Down Expand Up @@ -469,15 +463,13 @@ var ScrollResponderMixin = {
* @platform ios
*/
scrollResponderZoomTo: function(
rect: { x: number, y: number, width: number, height: number, animated?: boolean },
rect: {| x: number, y: number, width: number, height: number, animated?: boolean |},
animated?: boolean // deprecated, put this inside the rect argument instead
) {
invariant(ScrollViewManager && ScrollViewManager.zoomToRect, 'zoomToRect is not implemented');
if ('animated' in rect) {
/* $FlowFixMe(>=0.60.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.60 was deployed. To see the error delete this
* comment and run Flow. */
var { animated, ...rect } = rect;
animated = rect.animated;
delete rect.animated;
} else if (typeof animated !== 'undefined') {
console.warn('`scrollResponderZoomTo` `animated` argument is deprecated. Use `options.animated` instead');
}
Expand Down Expand Up @@ -527,11 +519,11 @@ var ScrollResponderMixin = {
* @param {number} height Height of the text input.
*/
scrollResponderInputMeasureAndScrollToKeyboard: function(left: number, top: number, width: number, height: number) {
var keyboardScreenY = Dimensions.get('window').height;
let keyboardScreenY = Dimensions.get('window').height;
if (this.keyboardWillOpenTo) {
keyboardScreenY = this.keyboardWillOpenTo.endCoordinates.screenY;
}
var scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;
let scrollOffsetY = top - keyboardScreenY + height + this.additionalScrollOffset;

// By default, this can scroll with negative offset, pulling the content
// down so that the target component's bottom meets the keyboard's top.
Expand All @@ -557,7 +549,7 @@ var ScrollResponderMixin = {
* The `keyboardWillShow` is called before input focus.
*/
componentWillMount: function() {
var {keyboardShouldPersistTaps} = this.props;
const {keyboardShouldPersistTaps} = this.props;
warning(
typeof keyboardShouldPersistTaps !== 'boolean',
`'keyboardShouldPersistTaps={${keyboardShouldPersistTaps}}' is deprecated. `
Expand Down Expand Up @@ -626,7 +618,7 @@ var ScrollResponderMixin = {

};

var ScrollResponder = {
const ScrollResponder = {
Mixin: ScrollResponderMixin,
};

Expand Down

0 comments on commit 45e6fcd

Please sign in to comment.