Modernize ScrollResponder.js

Reviewed By: sahrens

Differential Revision: D6661084

fbshipit-source-id: 46cef96dc86842b379728d8465ce4feb408338c7
This commit is contained in:
Eli White 2018-01-05 12:35:43 -08:00 committed by Facebook Github Bot
parent c49d249fd7
commit 45e6fcdba0
1 changed files with 32 additions and 40 deletions

View File

@ -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');
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');
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');
const invariant = require('fbjs/lib/invariant');
const nullthrows = require('fbjs/lib/nullthrows');
const performanceNow = require('fbjs/lib/performanceNow');
const warning = require('fbjs/lib/warning');
var { ScrollViewManager } = require('NativeModules');
var { getInstanceFromNode } = require('ReactNativeComponentTree');
const { ScrollViewManager } = require('NativeModules');
const { getInstanceFromNode } = require('ReactNativeComponentTree');
/**
* Mixin that can be integrated in order to handle scrolling that plays well
@ -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,
@ -123,7 +117,7 @@ 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' ||
@ -131,7 +125,7 @@ function isTagInstanceOfTextInput(tag) {
);
}
var ScrollResponderMixin = {
const ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
scrollResponderMixinGetInitialState: function(): State {
return {
@ -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 &&
@ -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 &&
@ -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);
},
@ -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 &&
@ -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;
},
@ -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');
}
@ -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.
@ -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. `
@ -626,7 +618,7 @@ var ScrollResponderMixin = {
};
var ScrollResponder = {
const ScrollResponder = {
Mixin: ScrollResponderMixin,
};