Refactor UIManager view manager accesses

Summary: Replaced each view manager access with a getViewManager() function call. This will later be used to lazily load view manager classes by allowing java to avoid sending the entire list of view managers to JS.

Reviewed By: QueryConnectionException

Differential Revision: D9695788

fbshipit-source-id: 949858aa2f0b0b00b68e260461ba8f1d085cf07f
This commit is contained in:
Andrew Chen (Eng) 2018-09-27 15:55:31 -07:00 committed by Facebook Github Bot
parent 471e8c168a
commit aac7c4d5d2
17 changed files with 51 additions and 37 deletions

View File

@ -21,7 +21,8 @@ const StyleSheet = require('StyleSheet');
const UIManager = require('UIManager'); const UIManager = require('UIManager');
const View = require('View'); const View = require('View');
const DrawerConsts = UIManager.AndroidDrawerLayout.Constants; const DrawerConsts = UIManager.getViewManagerConfig('AndroidDrawerLayout')
.Constants;
const createReactClass = require('create-react-class'); const createReactClass = require('create-react-class');
const dismissKeyboard = require('dismissKeyboard'); const dismissKeyboard = require('dismissKeyboard');
@ -254,7 +255,7 @@ const DrawerLayoutAndroid = createReactClass({
openDrawer: function() { openDrawer: function() {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this._getDrawerLayoutHandle(), this._getDrawerLayoutHandle(),
UIManager.AndroidDrawerLayout.Commands.openDrawer, UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands.openDrawer,
null, null,
); );
}, },
@ -265,7 +266,8 @@ const DrawerLayoutAndroid = createReactClass({
closeDrawer: function() { closeDrawer: function() {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this._getDrawerLayoutHandle(), this._getDrawerLayoutHandle(),
UIManager.AndroidDrawerLayout.Commands.closeDrawer, UIManager.getViewManagerConfig('AndroidDrawerLayout').Commands
.closeDrawer,
null, null,
); );
}, },

View File

@ -21,8 +21,9 @@ import type {ColorValue} from 'StyleSheetTypes';
import type {ViewProps} from 'ViewPropTypes'; import type {ViewProps} from 'ViewPropTypes';
if (Platform.OS === 'android') { if (Platform.OS === 'android') {
const AndroidSwipeRefreshLayout = require('UIManager') const AndroidSwipeRefreshLayout = require('UIManager').getViewManagerConfig(
.AndroidSwipeRefreshLayout; 'AndroidSwipeRefreshLayout',
);
var RefreshLayoutConsts = AndroidSwipeRefreshLayout var RefreshLayoutConsts = AndroidSwipeRefreshLayout
? AndroidSwipeRefreshLayout.Constants ? AndroidSwipeRefreshLayout.Constants
: {SIZE: {}}; : {SIZE: {}};

View File

@ -436,7 +436,7 @@ const ScrollResponderMixin = {
} }
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
nullthrows(this.scrollResponderGetScrollableNode()), nullthrows(this.scrollResponderGetScrollableNode()),
UIManager.RCTScrollView.Commands.scrollTo, UIManager.getViewManagerConfig('RCTScrollView').Commands.scrollTo,
[x || 0, y || 0, animated !== false], [x || 0, y || 0, animated !== false],
); );
}, },
@ -454,7 +454,7 @@ const ScrollResponderMixin = {
const animated = (options && options.animated) !== false; const animated = (options && options.animated) !== false;
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.scrollResponderGetScrollableNode(), this.scrollResponderGetScrollableNode(),
UIManager.RCTScrollView.Commands.scrollToEnd, UIManager.getViewManagerConfig('RCTScrollView').Commands.scrollToEnd,
[animated], [animated],
); );
}, },
@ -513,7 +513,8 @@ const ScrollResponderMixin = {
scrollResponderFlashScrollIndicators: function() { scrollResponderFlashScrollIndicators: function() {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.scrollResponderGetScrollableNode(), this.scrollResponderGetScrollableNode(),
UIManager.RCTScrollView.Commands.flashScrollIndicators, UIManager.getViewManagerConfig('RCTScrollView').Commands
.flashScrollIndicators,
[], [],
); );
}, },

View File

@ -875,7 +875,7 @@ const TextInput = createReactClass({
render: function() { render: function() {
let textInput; let textInput;
if (Platform.OS === 'ios') { if (Platform.OS === 'ios') {
textInput = UIManager.RCTVirtualText textInput = UIManager.getViewManagerConfig('RCTVirtualText')
? this._renderIOS() ? this._renderIOS()
: this._renderIOSLegacy(); : this._renderIOSLegacy();
} else if (Platform.OS === 'android') { } else if (Platform.OS === 'android') {
@ -1048,10 +1048,9 @@ const TextInput = createReactClass({
_renderAndroid: function() { _renderAndroid: function() {
const props = Object.assign({}, this.props); const props = Object.assign({}, this.props);
props.style = [this.props.style]; props.style = [this.props.style];
props.autoCapitalize = props.autoCapitalize = UIManager.getViewManagerConfig(
UIManager.AndroidTextInput.Constants.AutoCapitalizationType[ 'AndroidTextInput',
props.autoCapitalize || 'sentences' ).Constants.AutoCapitalizationType[props.autoCapitalize || 'sentences'];
];
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
* suppresses an error when upgrading Flow's support for React. To see the * suppresses an error when upgrading Flow's support for React. To see the
* error delete this comment and run Flow. */ * error delete this comment and run Flow. */

View File

@ -42,7 +42,8 @@ function focusTextInput(textFieldID: ?number) {
} else if (Platform.OS === 'android') { } else if (Platform.OS === 'android') {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
textFieldID, textFieldID,
UIManager.AndroidTextInput.Commands.focusTextInput, UIManager.getViewManagerConfig('AndroidTextInput').Commands
.focusTextInput,
null, null,
); );
} }
@ -62,7 +63,8 @@ function blurTextInput(textFieldID: ?number) {
} else if (Platform.OS === 'android') { } else if (Platform.OS === 'android') {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
textFieldID, textFieldID,
UIManager.AndroidTextInput.Commands.blurTextInput, UIManager.getViewManagerConfig('AndroidTextInput').Commands
.blurTextInput,
null, null,
); );
} }

View File

@ -185,8 +185,9 @@ const ToolbarAndroid = createReactClass({
action.icon = resolveAssetSource(action.icon); action.icon = resolveAssetSource(action.icon);
} }
if (action.show) { if (action.show) {
action.show = action.show = UIManager.getViewManagerConfig(
UIManager.ToolbarAndroid.Constants.ShowAsAction[action.show]; 'ToolbarAndroid',
).Constants.ShowAsAction[action.show];
} }
nativeActions.push(action); nativeActions.push(action);
} }

View File

@ -223,7 +223,7 @@ const TouchableNativeFeedback = createReactClass({
_dispatchHotspotUpdate: function(destX, destY) { _dispatchHotspotUpdate: function(destX, destY) {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this), ReactNative.findNodeHandle(this),
UIManager.RCTView.Commands.hotspotUpdate, UIManager.getViewManagerConfig('RCTView').Commands.hotspotUpdate,
[destX || 0, destY || 0], [destX || 0, destY || 0],
); );
}, },
@ -231,7 +231,7 @@ const TouchableNativeFeedback = createReactClass({
_dispatchPressedStateChange: function(pressed) { _dispatchPressedStateChange: function(pressed) {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this), ReactNative.findNodeHandle(this),
UIManager.RCTView.Commands.setPressed, UIManager.getViewManagerConfig('RCTView').Commands.setPressed,
[pressed], [pressed],
); );
}, },

View File

@ -233,7 +233,7 @@ class ViewPagerAndroid extends React.Component<{
setPage = (selectedPage: number) => { setPage = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this), ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPage, UIManager.getViewManagerConfig('AndroidViewPager').Commands.setPage,
[selectedPage], [selectedPage],
); );
}; };
@ -245,7 +245,8 @@ class ViewPagerAndroid extends React.Component<{
setPageWithoutAnimation = (selectedPage: number) => { setPageWithoutAnimation = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this), ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPageWithoutAnimation, UIManager.getViewManagerConfig('AndroidViewPager').Commands
.setPageWithoutAnimation,
[selectedPage], [selectedPage],
); );
}; };

View File

@ -366,7 +366,7 @@ class WebView extends React.Component {
goForward = () => { goForward = () => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goForward, UIManager.getViewManagerConfig('RCTWebView').Commands.goForward,
null, null,
); );
}; };
@ -374,7 +374,7 @@ class WebView extends React.Component {
goBack = () => { goBack = () => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goBack, UIManager.getViewManagerConfig('RCTWebView').Commands.goBack,
null, null,
); );
}; };
@ -385,7 +385,7 @@ class WebView extends React.Component {
}); });
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.reload, UIManager.getViewManagerConfig('RCTWebView').Commands.reload,
null, null,
); );
}; };
@ -393,7 +393,7 @@ class WebView extends React.Component {
stopLoading = () => { stopLoading = () => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.stopLoading, UIManager.getViewManagerConfig('RCTWebView').Commands.stopLoading,
null, null,
); );
}; };
@ -401,7 +401,7 @@ class WebView extends React.Component {
postMessage = data => { postMessage = data => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.postMessage, UIManager.getViewManagerConfig('RCTWebView').Commands.postMessage,
[String(data)], [String(data)],
); );
}; };
@ -415,7 +415,7 @@ class WebView extends React.Component {
injectJavaScript = data => { injectJavaScript = data => {
UIManager.dispatchViewManagerCommand( UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(), this.getWebViewHandle(),
UIManager.RCTWebView.Commands.injectJavaScript, UIManager.getViewManagerConfig('RCTWebView').Commands.injectJavaScript,
[data], [data],
); );
}; };

View File

@ -561,10 +561,10 @@ class WebView extends React.Component {
_getCommands() { _getCommands() {
if (!this.props.useWebKit) { if (!this.props.useWebKit) {
return UIManager.RCTWebView.Commands; return UIManager.getViewManagerConfig('RCTWebView').Commands;
} }
return UIManager.RCTWKWebView.Commands; return UIManager.getViewManagerConfig('RCTWKWebView').Commands;
} }
/** /**

View File

@ -25,7 +25,7 @@ import type {ViewProps} from 'ViewPropTypes';
// Verify that RCTSnapshot is part of the UIManager since it is only loaded // Verify that RCTSnapshot is part of the UIManager since it is only loaded
// if you have linked against RCTTest like in tests, otherwise we will have // if you have linked against RCTTest like in tests, otherwise we will have
// a warning printed out // a warning printed out
const RCTSnapshot = UIManager.RCTSnapshot const RCTSnapshot = UIManager.getViewManagerConfig('RCTSnapshot')
? requireNativeComponent('RCTSnapshot') ? requireNativeComponent('RCTSnapshot')
: View; : View;

View File

@ -35,6 +35,9 @@ UIManager.takeSnapshot = function() {
'Use ReactNative.takeSnapshot instead.', 'Use ReactNative.takeSnapshot instead.',
); );
}; };
UIManager.getViewManagerConfig = function(viewManagerName: string) {
return UIManager[viewManagerName];
};
/** /**
* Copies the ViewManager constants and commands into UIManager. This is * Copies the ViewManager constants and commands into UIManager. This is

View File

@ -23,7 +23,7 @@ const invariant = require('fbjs/lib/invariant');
const warning = require('fbjs/lib/warning'); const warning = require('fbjs/lib/warning');
function getNativeComponentAttributes(uiViewClassName: string) { function getNativeComponentAttributes(uiViewClassName: string) {
const viewConfig = UIManager[uiViewClassName]; const viewConfig = UIManager.getViewManagerConfig(uiViewClassName);
invariant( invariant(
viewConfig != null && viewConfig.NativeProps != null, viewConfig != null && viewConfig.NativeProps != null,
@ -36,7 +36,7 @@ function getNativeComponentAttributes(uiViewClassName: string) {
let {baseModuleName, bubblingEventTypes, directEventTypes} = viewConfig; let {baseModuleName, bubblingEventTypes, directEventTypes} = viewConfig;
let nativeProps = viewConfig.NativeProps; let nativeProps = viewConfig.NativeProps;
while (baseModuleName) { while (baseModuleName) {
const baseModule = UIManager[baseModuleName]; const baseModule = UIManager.getViewManagerConfig(baseModuleName);
if (!baseModule) { if (!baseModule) {
warning(false, 'Base module "%s" does not exist', baseModuleName); warning(false, 'Base module "%s" does not exist', baseModuleName);
baseModuleName = null; baseModuleName = null;

View File

@ -258,7 +258,7 @@ const RCTText = createReactNativeComponentClass(
); );
const RCTVirtualText = const RCTVirtualText =
UIManager.RCTVirtualText == null UIManager.getViewManagerConfig('RCTVirtualText') == null
? RCTText ? RCTText
: createReactNativeComponentClass('RCTVirtualText', () => ({ : createReactNativeComponentClass('RCTVirtualText', () => ({
validAttributes: { validAttributes: {

View File

@ -21,7 +21,10 @@ function deprecatedPropType(
): ReactPropsCheckType { ): ReactPropsCheckType {
return function validate(props, propName, componentName, ...rest) { return function validate(props, propName, componentName, ...rest) {
// Don't warn for native components. // Don't warn for native components.
if (!UIManager[componentName] && props[propName] !== undefined) { if (
!UIManager.getViewManagerConfig(componentName) &&
props[propName] !== undefined
) {
console.warn( console.warn(
`\`${propName}\` supplied to \`${componentName}\` has been deprecated. ${explanation}`, `\`${propName}\` supplied to \`${componentName}\` has been deprecated. ${explanation}`,
); );

View File

@ -28,9 +28,9 @@ import javax.annotation.Nullable;
/** /**
* Generates a lazy discovery enabled version of {@link UIManagerModule} constants. It only * Generates a lazy discovery enabled version of {@link UIManagerModule} constants. It only
* contains a list of view manager names, so that JS side is aware of the managers there are. * contains a list of view manager names, so that JS side is aware of the managers there are.
* Actual ViewManager instantiation happens when {@code UIManager.SpecificViewManager} call happens. * Actual ViewManager instantiation happens when
* The View Manager is then registered on the JS side with the help of * {@code UIManager.getViewManagerConfig('SpecificViewManager')} call happens. The View Manager is then
* {@code UIManagerModule.getConstantsForViewManager}. * registered on the JS side with the help of {@code UIManagerModule.getConstantsForViewManager}.
*/ */
/* package */ static Map<String, Object> createConstants( /* package */ static Map<String, Object> createConstants(
UIManagerModule.ViewManagerResolver resolver) { UIManagerModule.ViewManagerResolver resolver) {

View File

@ -253,6 +253,7 @@ const mockNativeModules = {
createView: jest.fn(), createView: jest.fn(),
dispatchViewManagerCommand: jest.fn(), dispatchViewManagerCommand: jest.fn(),
focus: jest.fn(), focus: jest.fn(),
getViewManagerConfig: jest.fn(),
setChildren: jest.fn(), setChildren: jest.fn(),
manageChildren: jest.fn(), manageChildren: jest.fn(),
updateView: jest.fn(), updateView: jest.fn(),