From ef3db66bb179b29b71b108074aa3280833aa7160 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 22 Mar 2017 09:58:00 -0700 Subject: [PATCH] Added deprecation warning for View.* static accessibility traits accessors Reviewed By: spicyj Differential Revision: D4749932 fbshipit-source-id: 5f07200e953f589f939196a161a1bc796c553868 --- Examples/UIExplorer/js/TouchableExample.js | 7 +- .../Touchable/TouchableWithoutFeedback.js | 14 +++- Libraries/Components/View/View.js | 75 +++++++++++++++---- 3 files changed, 76 insertions(+), 20 deletions(-) diff --git a/Examples/UIExplorer/js/TouchableExample.js b/Examples/UIExplorer/js/TouchableExample.js index 9ae2f06e2..ede3f1ccb 100644 --- a/Examples/UIExplorer/js/TouchableExample.js +++ b/Examples/UIExplorer/js/TouchableExample.js @@ -37,6 +37,11 @@ var { View, } = ReactNative; +const NativeModules = require('NativeModules'); + +const forceTouchAvailable = (NativeModules.PlatformConstants && + NativeModules.PlatformConstants.forceTouchAvailable) || false; + exports.displayName = (undefined: ?string); exports.description = 'Touchable and onPress examples.'; exports.title = ' and onPress'; @@ -263,7 +268,7 @@ class ForceTouchExample extends React.Component { }; _renderConsoleText = () => { - return View.forceTouchAvailable ? + return forceTouchAvailable ? 'Force: ' + this.state.force.toFixed(3) : '3D Touch is not available on this device'; }; diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 582832b2a..0886c577e 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -15,11 +15,15 @@ const EdgeInsetsPropType = require('EdgeInsetsPropType'); const React = require('React'); const TimerMixin = require('react-timer-mixin'); const Touchable = require('Touchable'); -const View = require('View'); const ensurePositiveDelayProps = require('ensurePositiveDelayProps'); const warning = require('fbjs/lib/warning'); +const { + AccessibilityComponentTypes, + AccessibilityTraits, +} = require('ViewAccessibility'); + type Event = Object; const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; @@ -37,10 +41,12 @@ const TouchableWithoutFeedback = React.createClass({ propTypes: { accessible: React.PropTypes.bool, - accessibilityComponentType: React.PropTypes.oneOf(View.AccessibilityComponentType), + accessibilityComponentType: React.PropTypes.oneOf( + AccessibilityComponentTypes + ), accessibilityTraits: React.PropTypes.oneOfType([ - React.PropTypes.oneOf(View.AccessibilityTraits), - React.PropTypes.arrayOf(React.PropTypes.oneOf(View.AccessibilityTraits)), + React.PropTypes.oneOf(AccessibilityTraits), + React.PropTypes.arrayOf(React.PropTypes.oneOf(AccessibilityTraits)), ]), /** * If true, disable all interactions for this component. diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 385ffb124..e3b4d1b77 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -23,6 +23,7 @@ const StyleSheetPropType = require('StyleSheetPropType'); const ViewStylePropTypes = require('ViewStylePropTypes'); const invariant = require('fbjs/lib/invariant'); +const warning = require('fbjs/lib/warning'); const { AccessibilityComponentTypes, @@ -43,16 +44,6 @@ const stylePropType = StyleSheetPropType(ViewStylePropTypes); const forceTouchAvailable = (NativeModules.PlatformConstants && NativeModules.PlatformConstants.forceTouchAvailable) || false; -const statics = { - AccessibilityTraits, - AccessibilityComponentType: AccessibilityComponentTypes, - /** - * Is 3D Touch / Force Touch available (i.e. will touch events include `force`) - * @platform ios - */ - forceTouchAvailable, -}; - /** * The most fundamental component for building a UI, `View` is a container that supports layout with * [flexbox](docs/flexbox.html), [style](docs/style.html), @@ -116,10 +107,6 @@ const View = React.createClass({ validAttributes: ReactNativeViewAttributes.RCTView }, - statics: { - ...statics, - }, - // TODO (bvaughn) Replace this with a deprecated getter warning. This object // should be accessible via a separate import. It will not be available in // production mode in the future and so should not be directly accessed. @@ -520,6 +507,63 @@ const View = React.createClass({ }, }); +// Warn about unsupported use of View static properties as these will no longer +// be supported with React fiber. This warning message will go away in the next +// ReactNative release. Use defineProperty() rather than createClass() statics +// because the mixin process auto-triggers the 1-time warning message. +// TODO (bvaughn) Remove these warning messages after the April ReactNative tag. +function mixinStatics (target) { + let warnedAboutAccessibilityTraits = false; + let warnedAboutAccessibilityComponentType = false; + let warnedAboutForceTouchAvailable = false; + + // $FlowFixMe https://github.com/facebook/flow/issues/285 + Object.defineProperty(target, 'AccessibilityTraits', { + get: function() { + if (!warnedAboutAccessibilityTraits) { + warnedAboutAccessibilityTraits = true; + warning( + false, + 'View.AccessibilityTraits has been deprecated and will be ' + + 'removed in a future version of ReactNative. Use ' + + 'ViewAccessibility.AccessibilityTraits instead.' + ); + } + return AccessibilityTraits; + } + }); + // $FlowFixMe https://github.com/facebook/flow/issues/285 + Object.defineProperty(target, 'AccessibilityComponentType', { + get: function() { + if (!warnedAboutAccessibilityComponentType) { + warnedAboutAccessibilityComponentType = true; + warning( + false, + 'View.AccessibilityComponentType has been deprecated and will be ' + + 'removed in a future version of ReactNative. Use ' + + 'ViewAccessibility.AccessibilityComponentTypes instead.' + ); + } + return AccessibilityComponentTypes; + } + }); + // $FlowFixMe https://github.com/facebook/flow/issues/285 + Object.defineProperty(target, 'forceTouchAvailable', { + get: function() { + if (!warnedAboutForceTouchAvailable) { + warnedAboutForceTouchAvailable = true; + warning( + false, + 'View.forceTouchAvailable has been deprecated and will be removed ' + + 'in a future version of ReactNative. Use ' + + 'NativeModules.PlatformConstants.forceTouchAvailable instead.' + ); + } + return forceTouchAvailable; + } + }); +} + const RCTView = requireNativeComponent('RCTView', View, { nativeOnly: { nativeBackgroundAndroid: true, @@ -548,10 +592,11 @@ if ( __DEV__ || ReactNativeFeatureFlags.useFiber ) { + mixinStatics(View); ViewToExport = View; } else { // TODO (bvaughn) Remove this mixin once all static View accessors are gone. - Object.assign((RCTView : any), statics); + mixinStatics((RCTView : any)); } // TODO (bvaughn) Temporarily mask Flow warnings for View property accesses.