From 45e6fcdba089900555faa63fe8e37b4bd4a7700a Mon Sep 17 00:00:00 2001 From: Eli White Date: Fri, 5 Jan 2018 12:35:43 -0800 Subject: [PATCH] Modernize ScrollResponder.js Reviewed By: sahrens Differential Revision: D6661084 fbshipit-source-id: 46cef96dc86842b379728d8465ce4feb408338c7 --- Libraries/Components/ScrollResponder.js | 76 +++++++++++-------------- 1 file changed, 34 insertions(+), 42 deletions(-) diff --git a/Libraries/Components/ScrollResponder.js b/Libraries/Components/ScrollResponder.js index 6a3cbf2d05d2fb..5b3244d3eea910 100644 --- a/Libraries/Components/ScrollResponder.js +++ b/Libraries/Components/ScrollResponder.js @@ -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 @@ -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, };