From 040eeefcf5f7a364daa1e4d1f8e959fdab69c320 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 28 Mar 2023 09:53:10 +0200 Subject: [PATCH 1/6] fix skin tone on replaceEmojis --- src/libs/EmojiUtils.js | 5 +++-- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 5 ++++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index 9e52eec797e6..47fcd7691fef 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -190,9 +190,10 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) { * If we're on mobile, we also add a space after the emoji granted there's no text after it. * @param {String} text * @param {Boolean} isSmallScreenWidth + * @param {Number} preferredSkinTone * @returns {String} */ -function replaceEmojis(text, isSmallScreenWidth = false) { +function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1) { let newText = text; const emojiData = text.match(CONST.REGEX.EMOJI_NAME); if (!emojiData || emojiData.length === 0) { @@ -201,7 +202,7 @@ function replaceEmojis(text, isSmallScreenWidth = false) { for (let i = 0; i < emojiData.length; i++) { const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1)); if (checkEmoji && checkEmoji.metaData.code) { - let emojiReplacement = checkEmoji.metaData.code; + let emojiReplacement = checkEmoji.metaData.types[preferredSkinTone] || checkEmoji.metaData.code; // If this is the last emoji in the message and it's the end of the message so far, // add a space after it so the user can keep typing easily. diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 4e57dba3b159..0755212273c3 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -529,7 +529,7 @@ class ReportActionCompose extends React.Component { * @param {Boolean} shouldDebounceSaveComment */ updateComment(comment, shouldDebounceSaveComment) { - const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth); + const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth, this.props.preferredSkinTone); this.setState((prevState) => { const newState = { isCommentEmpty: !!newComment.match(/^(\s)*$/), diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index eb84a6837236..677121e9aad2 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -121,7 +121,7 @@ class ReportActionItemMessageEdit extends React.Component { * @param {String} draft */ updateDraft(draft) { - const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth); + const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth, this.props.preferredSkinTone); this.setState((prevState) => { const newState = {draft: newDraft}; if (draft !== newDraft) { @@ -336,6 +336,9 @@ export default compose( key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${action.reportActionID}`, initWithStoredValues: false, }, + preferredSkinTone: { + key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, + }, }), )(React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ From 7768680d63b15db2652e90c323562feceebc00f9 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 28 Mar 2023 10:52:55 +0200 Subject: [PATCH 2/6] add eslint rule 'onyx-props-must-have-default' --- src/pages/home/report/ReportActionItemMessageEdit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 677121e9aad2..0ffe1ab6cd79 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -1,3 +1,4 @@ +/* eslint-disable rulesdir/onyx-props-must-have-default */ import lodashGet from 'lodash/get'; import React from 'react'; import {InteractionManager, Keyboard, View} from 'react-native'; From d4a97412e014a8b2dbf8bfda836587f8184ced38 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 31 Mar 2023 10:59:40 +0200 Subject: [PATCH 3/6] move definition outside component to circumvent onyx bug --- src/libs/EmojiUtils.js | 7 +------ src/pages/home/report/ReportActionItem.js | 13 +++++++++++++ .../home/report/ReportActionItemMessageEdit.js | 3 --- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index e49e3165bdee..39c116ceea99 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -202,12 +202,7 @@ function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1) for (let i = 0; i < emojiData.length; i++) { const checkEmoji = emojisTrie.search(emojiData[i].slice(1, -1)); if (checkEmoji && checkEmoji.metaData.code) { - let emojiReplacement; - if (preferredSkinTone >= 0) { - emojiReplacement = checkEmoji.metaData.types[preferredSkinTone]; - } else { - emojiReplacement = checkEmoji.metaData.code; - } + let emojiReplacement = this.getEmojiCodeWithSkinColor(checkEmoji.metaData, preferredSkinTone); // If this is the last emoji in the message and it's the end of the message so far, // add a space after it so the user can keep typing easily. diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 7415a51aff48..caaede886cc5 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -3,6 +3,7 @@ import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; import reportActionPropTypes from './reportActionPropTypes'; @@ -64,12 +65,16 @@ const propTypes = { /** Draft message - if this is set the comment is in 'edit' mode */ draftMessage: PropTypes.string, + /** Stores user's preferred skin tone */ + preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + ...windowDimensionsPropTypes, }; const defaultProps = { draftMessage: '', hasOutstandingIOU: false, + preferredSkinTone: -1, }; class ReportActionItem extends Component { @@ -192,6 +197,9 @@ class ReportActionItem extends Component { index={this.props.index} ref={el => this.textInput = el} report={this.props.report} + + // Avoid defining within component due to an existing Onyx bug + preferredSkinTone={this.props.preferredSkinTone} shouldDisableEmojiPicker={ (ReportUtils.chatIncludesConcierge(this.props.report) && User.isBlockedFromConcierge(this.props.blockedFromConcierge)) || ReportUtils.isArchivedRoom(this.props.report) @@ -314,4 +322,9 @@ export default compose( return lodashGet(drafts, draftKey, ''); }, }), + withOnyx({ + preferredSkinTone: { + key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, + }, + }), )(ReportActionItem); diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 0ffe1ab6cd79..50c214bda6da 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -337,9 +337,6 @@ export default compose( key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${action.reportActionID}`, initWithStoredValues: false, }, - preferredSkinTone: { - key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, - }, }), )(React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ From d829d81ee5228b74a4cc26372c4160739be025b5 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Fri, 31 Mar 2023 17:46:08 +0200 Subject: [PATCH 4/6] update propTypes --- src/pages/home/report/ReportActionItemMessageEdit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 50c214bda6da..48d1207bc95d 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -54,6 +54,9 @@ const propTypes = { /** Whether or not the emoji picker is disabled */ shouldDisableEmojiPicker: PropTypes.bool, + /** Stores user's preferred skin tone */ + preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, ...keyboardStatePropTypes, From 71ac6678bdabafcf066289e299230272fb932ba2 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Mon, 3 Apr 2023 11:30:48 +0200 Subject: [PATCH 5/6] remove required from preferredSkinTone --- src/pages/home/report/ReportActionItemMessageEdit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 48d1207bc95d..e832863dd9ba 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -55,7 +55,7 @@ const propTypes = { shouldDisableEmojiPicker: PropTypes.bool, /** Stores user's preferred skin tone */ - preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -67,6 +67,7 @@ const defaultProps = { report: {}, shouldDisableEmojiPicker: false, numberOfLines: 1, + preferredSkinTone: -1, }; class ReportActionItemMessageEdit extends React.Component { From 3073e4b8056ca5c4b5e3cb82dd08750c3820cfaf Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Mon, 3 Apr 2023 15:28:44 +0200 Subject: [PATCH 6/6] use preferredSkinTone from CONST --- src/libs/EmojiUtils.js | 2 +- src/pages/home/report/ReportActionItem.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js index 39c116ceea99..cdf434150cf8 100644 --- a/src/libs/EmojiUtils.js +++ b/src/libs/EmojiUtils.js @@ -193,7 +193,7 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) { * @param {Number} preferredSkinTone * @returns {String} */ -function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = -1) { +function replaceEmojis(text, isSmallScreenWidth = false, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE) { let newText = text; const emojiData = text.match(CONST.REGEX.EMOJI_NAME); if (!emojiData || emojiData.length === 0) { diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index caaede886cc5..2e57e9b7e542 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -74,7 +74,7 @@ const propTypes = { const defaultProps = { draftMessage: '', hasOutstandingIOU: false, - preferredSkinTone: -1, + preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, }; class ReportActionItem extends Component { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index e832863dd9ba..8dd683569248 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -67,7 +67,7 @@ const defaultProps = { report: {}, shouldDisableEmojiPicker: false, numberOfLines: 1, - preferredSkinTone: -1, + preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, }; class ReportActionItemMessageEdit extends React.Component {