Create ImageContext object to allow udpating the analyticsTag prop for RN sections

Summary:
As part of this diff I create the new ImageContext object that will be used to allow the update of the analyticsTag prop for components that contain multiple images in their view hierarchy

changelog: [JS][Added] Add ImageContext object, this object can be used to update the Imageview's analyticsTag prop on RN components that contain multiple images in their view hierarchy

Reviewed By: JoshuaGross

Differential Revision: D20880603

fbshipit-source-id: f2094bfd3ab1c867cf7c107e678a098aab7e94a8
This commit is contained in:
David Vacca 2020-04-06 18:23:43 -07:00 коммит произвёл Facebook GitHub Bot
Родитель 1c10568967
Коммит 0128e4602e
2 изменённых файлов: 35 добавлений и 9 удалений

Просмотреть файл

@ -20,6 +20,7 @@ const ReactNative = require('../Renderer/shims/ReactNative'); // eslint-disable-
const StyleSheet = require('../StyleSheet/StyleSheet');
const TextAncestor = require('../Text/TextAncestor');
const ImageContext = require('./ImageContext');
const flattenStyle = require('../StyleSheet/flattenStyle');
const resolveAssetSource = require('./resolveAssetSource');
@ -292,15 +293,25 @@ let Image = (props: ImagePropsType, forwardedRef) => {
};
return (
<TextAncestor.Consumer>
{hasTextAncestor =>
hasTextAncestor ? (
<TextInlineImageNativeComponent {...nativeProps} />
) : (
<ImageViewNativeComponent {...nativeProps} />
)
}
</TextAncestor.Consumer>
<ImageContext.Consumer>
{analyticTag => {
const nativePropsWithAnalytics = {
...nativeProps,
analyticTag: analyticTag,
};
return (
<TextAncestor.Consumer>
{hasTextAncestor =>
hasTextAncestor ? (
<TextInlineImageNativeComponent {...nativePropsWithAnalytics} />
) : (
<ImageViewNativeComponent {...nativePropsWithAnalytics} />
)
}
</TextAncestor.Consumer>
);
}}
</ImageContext.Consumer>
);
};

Просмотреть файл

@ -0,0 +1,15 @@
/**
* 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.
*
* @flow strict
* @format
*/
'use strict';
const React = require('react');
module.exports = (React.createContext(null): React$Context<$FlowFixMe>);