From e802bd0ea9c09e37164e94bcdcbcd1daa5163db4 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Sat, 2 Nov 2019 16:54:07 -0700 Subject: [PATCH] RN: Prepare More Touchable Experiments Summary: Expands `TouchableWithoutFeedbackInjection` as `TouchableInjection` for use in testing out new implementations of all five `Touchable.Mixin` components. Changelog: [Internal] Reviewed By: TheSavior Differential Revision: D18278876 fbshipit-source-id: d511bdecefe38579f03a9d5ad52011f7cd71f4c0 --- .../Components/Touchable/TouchableBounce.js | 9 ++++- .../Touchable/TouchableHighlight.js | 9 ++++- .../Touchable/TouchableInjection.js | 25 ++++++++++++ .../TouchableNativeFeedback.android.js | 39 +++++++++++++++++-- .../Components/Touchable/TouchableOpacity.js | 9 ++++- .../Touchable/TouchableWithoutFeedback.js | 6 +-- .../TouchableWithoutFeedbackInjection.js | 18 --------- 7 files changed, 88 insertions(+), 27 deletions(-) create mode 100644 Libraries/Components/Touchable/TouchableInjection.js delete mode 100644 Libraries/Components/Touchable/TouchableWithoutFeedbackInjection.js diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index b4b145993ee..1c6e53c5c37 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -10,6 +10,8 @@ 'use strict'; +import TouchableInjection from './TouchableInjection'; + const Animated = require('../../Animated/src/Animated'); const DeprecatedViewPropTypes = require('../../DeprecatedPropTypes/DeprecatedViewPropTypes'); const DeprecatedEdgeInsetsPropType = require('../../DeprecatedPropTypes/DeprecatedEdgeInsetsPropType'); @@ -52,7 +54,7 @@ type Props = $ReadOnly<{| * `TouchableMixin` expects us to implement some abstract methods to handle * interesting interactions such as `handleTouchablePress`. */ -const TouchableBounce = ((createReactClass({ +const TouchableBounceImpl = ((createReactClass({ displayName: 'TouchableBounce', mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur, NativeMethodsMixin], @@ -212,4 +214,9 @@ const TouchableBounce = ((createReactClass({ }, }): any): React.ComponentType); +const TouchableBounce: React.ComponentType = + TouchableInjection.unstable_TouchableBounce == null + ? TouchableBounceImpl + : TouchableInjection.unstable_TouchableBounce; + module.exports = TouchableBounce; diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 561d2345488..2fcdf3f6088 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -10,6 +10,8 @@ 'use strict'; +import TouchableInjection from './TouchableInjection'; + const DeprecatedColorPropType = require('../../DeprecatedPropTypes/DeprecatedColorPropType'); const DeprecatedViewPropTypes = require('../../DeprecatedPropTypes/DeprecatedViewPropTypes'); const NativeMethodsMixin = require('../../Renderer/shims/NativeMethodsMixin'); @@ -160,7 +162,7 @@ export type Props = $ReadOnly<{| * */ -const TouchableHighlight = ((createReactClass({ +const TouchableHighlightImpl = ((createReactClass({ displayName: 'TouchableHighlight', propTypes: { /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an @@ -436,4 +438,9 @@ const TouchableHighlight = ((createReactClass({ }, }): any): React.ComponentType); +const TouchableHighlight: React.ComponentType = + TouchableInjection.unstable_TouchableHighlight == null + ? TouchableHighlightImpl + : TouchableInjection.unstable_TouchableHighlight; + module.exports = TouchableHighlight; diff --git a/Libraries/Components/Touchable/TouchableInjection.js b/Libraries/Components/Touchable/TouchableInjection.js new file mode 100644 index 00000000000..4794242d1c2 --- /dev/null +++ b/Libraries/Components/Touchable/TouchableInjection.js @@ -0,0 +1,25 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import typeof TouchableBounce from './TouchableBounce'; +import typeof TouchableHighlight from './TouchableHighlight'; +import typeof TouchableNativeFeedback from './TouchableNativeFeedback'; +import typeof TouchableOpacity from './TouchableOpacity'; +import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback'; + +export default { + unstable_TouchableBounce: (null: ?TouchableBounce), + unstable_TouchableHighlight: (null: ?TouchableHighlight), + unstable_TouchableNativeFeedback: (null: ?TouchableNativeFeedback), + unstable_TouchableOpacity: (null: ?TouchableOpacity), + unstable_TouchableWithoutFeedback: (null: ?TouchableWithoutFeedback), +}; diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js index d3d50404818..3fc000f4c17 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js @@ -10,6 +10,8 @@ 'use strict'; +import TouchableInjection from './TouchableInjection'; + const Platform = require('../../Utilities/Platform'); const PropTypes = require('prop-types'); const React = require('react'); @@ -23,6 +25,7 @@ const createReactClass = require('create-react-class'); const ensurePositiveDelayProps = require('./ensurePositiveDelayProps'); const processColor = require('../../StyleSheet/processColor'); +import type {Props as TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback'; import type {PressEvent} from '../../Types/CoreEventTypes'; const rippleBackgroundPropType = PropTypes.shape({ @@ -43,6 +46,31 @@ const backgroundPropType = PropTypes.oneOfType([ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +export type Props = $ReadOnly<{| + ...TouchableWithoutFeedbackProps, + + background?: ?( + | $ReadOnly<{| + type: 'ThemeAttrAndroid', + attribute: + | 'selectableItemBackground' + | 'selectableItemBackgroundBorderless', + |}> + | $ReadOnly<{| + type: 'RippleAndroid', + color: ?number, + borderless: boolean, + |}> + ), + hasTVPreferredFocus?: ?boolean, + nextFocusDown?: ?number, + nextFocusForward?: ?number, + nextFocusLeft?: ?number, + nextFocusRight?: ?number, + nextFocusUp?: ?number, + useForeground?: ?boolean, +|}>; + /** * A wrapper for making views respond properly to touches (Android only). * On Android this component uses native state drawable to display touch @@ -72,7 +100,7 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * ``` */ -const TouchableNativeFeedback = createReactClass({ +const TouchableNativeFeedbackImpl = createReactClass({ displayName: 'TouchableNativeFeedback', propTypes: { /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment @@ -294,7 +322,7 @@ const TouchableNativeFeedback = createReactClass({ } if ( this.props.useForeground && - !TouchableNativeFeedback.canUseNativeForeground() + !TouchableNativeFeedbackImpl.canUseNativeForeground() ) { console.warn( 'Requested foreground ripple, but it is not available on this version of Android. ' + @@ -304,7 +332,7 @@ const TouchableNativeFeedback = createReactClass({ } const drawableProp = this.props.useForeground && - TouchableNativeFeedback.canUseNativeForeground() + TouchableNativeFeedbackImpl.canUseNativeForeground() ? 'nativeForegroundAndroid' : 'nativeBackgroundAndroid'; const childProps = { @@ -348,4 +376,9 @@ const TouchableNativeFeedback = createReactClass({ }, }); +const TouchableNativeFeedback: React.ComponentType = + TouchableInjection.unstable_TouchableNativeFeedback == null + ? TouchableNativeFeedbackImpl + : TouchableInjection.unstable_TouchableNativeFeedback; + module.exports = (TouchableNativeFeedback: $FlowFixMe); diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 9751492e48d..a5475fcd42a 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -10,6 +10,8 @@ 'use strict'; +import TouchableInjection from './TouchableInjection'; + const Animated = require('../../Animated/src/Animated'); const Easing = require('../../Animated/src/Easing'); const NativeMethodsMixin = require('../../Renderer/shims/NativeMethodsMixin'); @@ -133,7 +135,7 @@ export type Props = $ReadOnly<{| * ``` * */ -const TouchableOpacity = ((createReactClass({ +const TouchableOpacityImpl = ((createReactClass({ displayName: 'TouchableOpacity', mixins: [Touchable.Mixin.withoutDefaultFocusAndBlur, NativeMethodsMixin], @@ -341,4 +343,9 @@ const TouchableOpacity = ((createReactClass({ }, }): any): React.ComponentType); +const TouchableOpacity: React.ComponentType = + TouchableInjection.unstable_TouchableOpacity == null + ? TouchableOpacityImpl + : TouchableInjection.unstable_TouchableOpacity; + module.exports = TouchableOpacity; diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 1adc2d14bd4..c033711b77f 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -10,7 +10,7 @@ 'use strict'; -import TouchableWithoutFeedbackInjection from './TouchableWithoutFeedbackInjection'; +import TouchableInjection from './TouchableInjection'; const DeprecatedEdgeInsetsPropType = require('../../DeprecatedPropTypes/DeprecatedEdgeInsetsPropType'); const React = require('react'); @@ -281,8 +281,8 @@ const TouchableWithoutFeedbackImpl = ((createReactClass({ }): any): React.ComponentType); const TouchableWithoutFeedback: React.ComponentType = - TouchableWithoutFeedbackInjection.unstable_Override == null + TouchableInjection.unstable_TouchableWithoutFeedback == null ? TouchableWithoutFeedbackImpl - : TouchableWithoutFeedbackInjection.unstable_Override; + : TouchableInjection.unstable_TouchableWithoutFeedback; module.exports = TouchableWithoutFeedback; diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedbackInjection.js b/Libraries/Components/Touchable/TouchableWithoutFeedbackInjection.js deleted file mode 100644 index 4b515bd5541..00000000000 --- a/Libraries/Components/Touchable/TouchableWithoutFeedbackInjection.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -import type {Props} from './TouchableWithoutFeedback'; -import * as React from 'react'; - -export default { - unstable_Override: (null: ?React.ComponentType), -};