[CP Staging] added component

src/components/ZeroWidthComponent/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as EmojiUtils from '../../libs/EmojiUtils';
+import * as Browser from '../../libs/Browser';
+import Text from '../Text';
+
+const propTypes = {
+    /** If this is the Concierge chat, we'll open the modal for requesting a setup call instead of showing popover menu */
+    text: PropTypes.string,
+
+    /** URL to the assigned guide's appointment booking calendar */
+    displayAsGroup: PropTypes.bool,
+};
+
+const defaultProps = {
+    text: '',
+    displayAsGroup: false,
+};
+
+function ZeroWidthComponent({text, displayAsGroup}) {
+    const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
+    if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
+        return <Text>&#x200b;</Text>;
+    }
+    return null;
+}
+
+ZeroWidthComponent.propTypes = propTypes;
+ZeroWidthComponent.defaultProps = defaultProps;
+ZeroWidthComponent.displayName = 'ZeroWidthComponent';
+
+export default ZeroWidthComponent;

src/components/ZeroWidthComponent/index.native.js

@@ -0,0 +1,3 @@
+const checkForEmojiForSelection = () => null;
+
+export default checkForEmojiForSelection;

src/pages/home/report/ReportActionItemFragment.js

@@ -18,7 +18,7 @@ import CONST from '../../../CONST';
 import editedLabelStyles from '../../../styles/editedLabelStyles';
 import UserDetailsTooltip from '../../../components/UserDetailsTooltip';
 import avatarPropTypes from '../../../components/avatarPropTypes';
-import * as Browser from '../../../libs/Browser';
+import ZeroWidthComponent from '../../../components/ZeroWidthComponent';
 
 const propTypes = {
     /** Users accountID */
@@ -90,24 +90,6 @@ const defaultProps = {
 };
 
 function ReportActionItemFragment(props) {
-    /**
-     * Checks text element for presence of emoji as first character
-     * and insert Zero-Width character to avoid selection issue
-     * mentioned here https://github.com/Expensify/App/issues/29021
-     *
-     * @param {String} text
-     * @param {Boolean} displayAsGroup
-     * @returns {ReactNode | null} Text component with zero width character
-     */
-
-    const checkForEmojiForSelection = (text, displayAsGroup) => {
-        const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
-        if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
-            return <Text>&#x200b;</Text>;
-        }
-        return null;
-    };
-
     switch (props.fragment.type) {
         case 'COMMENT': {
             const {html, text} = props.fragment;
@@ -139,7 +121,10 @@ function ReportActionItemFragment(props) {
 
             return (
                 <Text style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}>
-                    {checkForEmojiForSelection(text, props.displayAsGroup)}
+                    <ZeroWidthComponent
+                        text={text}
+                        displayAsGroup={props.displayAsGroup}
+                    />
                     <Text
                         selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                         style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete ? styles.offlineFeedback.deleted : undefined]}