From 0c18129d0acb59e83f731e4997867d4ef29355aa Mon Sep 17 00:00:00 2001 From: Ayaz Alavi Date: Fri, 20 Oct 2023 18:25:06 +0500 Subject: [PATCH 1/4] added component Signed-off-by: Ayaz Alavi --- src/components/ZeroWidthComponent/index.js | 23 +++++++++++++++++ .../ZeroWidthComponent/index.native.js | 3 +++ .../home/report/ReportActionItemFragment.js | 25 ++++--------------- 3 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 src/components/ZeroWidthComponent/index.js create mode 100644 src/components/ZeroWidthComponent/index.native.js diff --git a/src/components/ZeroWidthComponent/index.js b/src/components/ZeroWidthComponent/index.js new file mode 100644 index 000000000000..e5e8b3da5beb --- /dev/null +++ b/src/components/ZeroWidthComponent/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import * as EmojiUtils from '../../libs/EmojiUtils'; +import * as Browser from '../../libs/Browser'; + +/** + * 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 ​; + } + return null; +}; + +export default checkForEmojiForSelection; diff --git a/src/components/ZeroWidthComponent/index.native.js b/src/components/ZeroWidthComponent/index.native.js new file mode 100644 index 000000000000..59e25637f777 --- /dev/null +++ b/src/components/ZeroWidthComponent/index.native.js @@ -0,0 +1,3 @@ +const checkForEmojiForSelection = () => null; + +export default checkForEmojiForSelection; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 0b6333e31ef8..392c3d422d2c 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/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 ​; - } - return null; - }; - switch (props.fragment.type) { case 'COMMENT': { const {html, text} = props.fragment; @@ -139,7 +121,10 @@ function ReportActionItemFragment(props) { return ( - {checkForEmojiForSelection(text, props.displayAsGroup)} + Date: Fri, 20 Oct 2023 18:56:28 +0500 Subject: [PATCH 2/4] added default props Signed-off-by: Ayaz Alavi --- src/components/ZeroWidthComponent/index.js | 33 ++++++++++++++-------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/ZeroWidthComponent/index.js b/src/components/ZeroWidthComponent/index.js index e5e8b3da5beb..2c4413de7b28 100644 --- a/src/components/ZeroWidthComponent/index.js +++ b/src/components/ZeroWidthComponent/index.js @@ -1,23 +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'; -/** - * 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 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, -const checkForEmojiForSelection = ({text, displayAsGroup}) => { + /** 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 ​; } return null; -}; +} + +ZeroWidthComponent.propTypes = propTypes; +ZeroWidthComponent.defaultProps = defaultProps; +ZeroWidthComponent.displayName = 'ZeroWidthComponent'; -export default checkForEmojiForSelection; +export default ZeroWidthComponent; From 33e4444c2ea8ba31e519e9bf97bd77a344316696 Mon Sep 17 00:00:00 2001 From: Ayaz Alavi Date: Fri, 20 Oct 2023 19:03:29 +0500 Subject: [PATCH 3/4] added name change Signed-off-by: Ayaz Alavi --- src/components/ZeroWidthComponent/index.native.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ZeroWidthComponent/index.native.js b/src/components/ZeroWidthComponent/index.native.js index 59e25637f777..a093a8dd1a16 100644 --- a/src/components/ZeroWidthComponent/index.native.js +++ b/src/components/ZeroWidthComponent/index.native.js @@ -1,3 +1,5 @@ -const checkForEmojiForSelection = () => null; +function ZeroWidthComponent() { + return null; +} -export default checkForEmojiForSelection; +export default ZeroWidthComponent; From b4fb81a2d887a2c5032b60ea273b926aeec279fb Mon Sep 17 00:00:00 2001 From: Ayaz Alavi Date: Fri, 20 Oct 2023 19:08:02 +0500 Subject: [PATCH 4/4] changed component name Signed-off-by: Ayaz Alavi --- src/components/ZeroWidthComponent/index.native.js | 5 ----- .../{ZeroWidthComponent => ZeroWidthView}/index.js | 10 +++++----- src/components/ZeroWidthView/index.native.js | 5 +++++ src/pages/home/report/ReportActionItemFragment.js | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 src/components/ZeroWidthComponent/index.native.js rename src/components/{ZeroWidthComponent => ZeroWidthView}/index.js (76%) create mode 100644 src/components/ZeroWidthView/index.native.js diff --git a/src/components/ZeroWidthComponent/index.native.js b/src/components/ZeroWidthComponent/index.native.js deleted file mode 100644 index a093a8dd1a16..000000000000 --- a/src/components/ZeroWidthComponent/index.native.js +++ /dev/null @@ -1,5 +0,0 @@ -function ZeroWidthComponent() { - return null; -} - -export default ZeroWidthComponent; diff --git a/src/components/ZeroWidthComponent/index.js b/src/components/ZeroWidthView/index.js similarity index 76% rename from src/components/ZeroWidthComponent/index.js rename to src/components/ZeroWidthView/index.js index 2c4413de7b28..6c3809a40a04 100644 --- a/src/components/ZeroWidthComponent/index.js +++ b/src/components/ZeroWidthView/index.js @@ -17,7 +17,7 @@ const defaultProps = { displayAsGroup: false, }; -function ZeroWidthComponent({text, displayAsGroup}) { +function ZeroWidthView({text, displayAsGroup}) { const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text); if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) { return ​; @@ -25,8 +25,8 @@ function ZeroWidthComponent({text, displayAsGroup}) { return null; } -ZeroWidthComponent.propTypes = propTypes; -ZeroWidthComponent.defaultProps = defaultProps; -ZeroWidthComponent.displayName = 'ZeroWidthComponent'; +ZeroWidthView.propTypes = propTypes; +ZeroWidthView.defaultProps = defaultProps; +ZeroWidthView.displayName = 'ZeroWidthView'; -export default ZeroWidthComponent; +export default ZeroWidthView; diff --git a/src/components/ZeroWidthView/index.native.js b/src/components/ZeroWidthView/index.native.js new file mode 100644 index 000000000000..59c3cc74ab72 --- /dev/null +++ b/src/components/ZeroWidthView/index.native.js @@ -0,0 +1,5 @@ +function ZeroWidthView() { + return null; +} + +export default ZeroWidthView; diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 392c3d422d2c..57b51ef50519 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/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 ZeroWidthComponent from '../../../components/ZeroWidthComponent'; +import ZeroWidthView from '../../../components/ZeroWidthView'; const propTypes = { /** Users accountID */ @@ -121,7 +121,7 @@ function ReportActionItemFragment(props) { return ( -