Skip to content

Commit

Permalink
Generalization of isInAParentText context
Browse files Browse the repository at this point in the history
Summary:
Currently `isInAParentText` context works as imaginary `isInAAncestorText` context (not like a real `isInAParentText`).
Let's imagine we have hierarchy like:
`View -> Text -> Text* -> View* -> Text* -> Text* -> View*`
With current implementation all nodes marked with asterisk have `isInAParentText` context, which is incorrect (because some of them actually in View context).

With the new implemetations it will work like this:
`View -> Text -> Text* -> View* -> Text -> Text* -> View*`
So, only nodes which have <Text> (or <TextInput>) as a parent will have `isInAParentText` context.

This change allows to select proper `Text` vs. `VirtualText` component in cases where <Text> and <View> components can interleave each other.

Reviewed By: sahrens

Differential Revision: D6690495

fbshipit-source-id: f7c59b23d0eaf68a1d08036b858d99c9547f7878
  • Loading branch information
shergin authored and facebook-github-bot committed Jan 15, 2018
1 parent 9532062 commit 5264832
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 25 deletions.
22 changes: 13 additions & 9 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const TimerMixin = require('react-timer-mixin');
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const UIManager = require('UIManager');
const ViewPropTypes = require('ViewPropTypes');
const {ViewContextTypes} = require('ViewContext');

/* $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
Expand All @@ -48,6 +49,8 @@ const onlyMultiline = {
children: true,
};

import type {ViewChildContext} from 'ViewContext';

if (Platform.OS === 'android') {
var AndroidTextInput = requireNativeComponent('AndroidTextInput', null);
} else if (Platform.OS === 'ios') {
Expand Down Expand Up @@ -612,11 +615,6 @@ const TextInput = createReactClass({
);
},

contextTypes: {
onFocusRequested: PropTypes.func,
focusEmitter: PropTypes.instanceOf(EventEmitter),
},

_inputRef: (undefined: any),
_focusSubscription: (undefined: ?Function),
_lastNativeText: (undefined: ?string),
Expand Down Expand Up @@ -652,12 +650,18 @@ const TextInput = createReactClass({
}
},

getChildContext: function(): Object {
return {isInAParentText: true};
getChildContext(): ViewChildContext {
return {
isInAParentText: true,
};
},

childContextTypes: {
isInAParentText: PropTypes.bool,
childContextTypes: ViewContextTypes,

contextTypes: {
...ViewContextTypes,
onFocusRequested: PropTypes.func,
focusEmitter: PropTypes.instanceOf(EventEmitter),
},

/**
Expand Down
11 changes: 8 additions & 3 deletions Libraries/Components/View/View.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,18 @@

const NativeMethodsMixin = require('NativeMethodsMixin');
const Platform = require('Platform');
const PropTypes = require('prop-types');
const React = require('React');
const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
const ViewPropTypes = require('ViewPropTypes');
const {ViewContextTypes} = require('ViewContext');

const createReactClass = require('create-react-class');
const invariant = require('fbjs/lib/invariant');
const requireNativeComponent = require('requireNativeComponent');

import type {ViewProps} from 'ViewPropTypes';
import type {ViewChildContext} from 'ViewContext';

export type Props = ViewProps;

Expand Down Expand Up @@ -56,8 +57,12 @@ const View = createReactClass({
validAttributes: ReactNativeViewAttributes.RCTView,
},

contextTypes: {
isInAParentText: PropTypes.bool,
childContextTypes: ViewContextTypes,

getChildContext(): ViewChildContext {
return {
isInAParentText: false,
};
},

render() {
Expand Down
23 changes: 23 additions & 0 deletions Libraries/Components/View/ViewContext.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ViewContext
* @flow
* @format
*/
'use strict';

const PropTypes = require('prop-types');

export type ViewChildContext = {|
+isInAParentText: boolean,
|};

export const ViewContextTypes = {
isInAParentText: PropTypes.bool,
};
8 changes: 3 additions & 5 deletions Libraries/Image/Image.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
var Set = require('Set');
var StyleSheet = require('StyleSheet');
var StyleSheetPropType = require('StyleSheetPropType');
var View = require('View');
var ViewPropTypes = require('ViewPropTypes');
var ViewStylePropTypes = require('ViewStylePropTypes');

var createReactClass = require('create-react-class');
var filterObject = require('fbjs/lib/filterObject');
var flattenStyle = require('flattenStyle');
var merge = require('merge');
var requireNativeComponent = require('requireNativeComponent');
var resolveAssetSource = require('resolveAssetSource');

const {ViewContextTypes} = require('ViewContext');

var {ImageLoader} = NativeModules;

let _requestId = 1;
Expand Down Expand Up @@ -261,9 +261,7 @@ var Image = createReactClass({
validAttributes: ReactNativeViewAttributes.RCTView,
},

contextTypes: {
isInAParentText: PropTypes.bool,
},
contextTypes: ViewContextTypes,

render: function() {
const source = resolveAssetSource(this.props.source);
Expand Down
17 changes: 9 additions & 8 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,12 @@ const createReactClass = require('create-react-class');
const requireNativeComponent = require('requireNativeComponent');
const mergeFast = require('mergeFast');
const processColor = require('processColor');
const {ViewContextTypes} = require('ViewContext');

const stylePropType = StyleSheetPropType(TextStylePropTypes);

import type {ViewChildContext} from 'ViewContext';

/**
* A React component for displaying text.
*
Expand Down Expand Up @@ -401,15 +404,13 @@ const Text = createReactClass({
});
},
mixins: [NativeMethodsMixin],
getChildContext(): Object {
return {isInAParentText: true};
},
childContextTypes: {
isInAParentText: PropTypes.bool,
},
contextTypes: {
isInAParentText: PropTypes.bool,
getChildContext(): ViewChildContext {
return {
isInAParentText: true,
};
},
childContextTypes: ViewContextTypes,
contextTypes: ViewContextTypes,
/**
* Only assigned if touch is needed.
*/
Expand Down

0 comments on commit 5264832

Please sign in to comment.