From faf0a0987a7795fbbdf617523cf1988d53dd0eed Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Tue, 17 Oct 2023 03:55:53 +0530 Subject: [PATCH 01/16] fix: Chat - No details tooltip for assignee name on task title. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 14 +++++++++++++- src/components/ReportActionItem/TaskView.js | 3 +++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 6c41290f1d17..10ab1c4d18d1 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -25,6 +25,7 @@ import * as Session from '../libs/actions/Session'; import Hoverable from './Hoverable'; import useWindowDimensions from '../hooks/useWindowDimensions'; import RenderHTML from './RenderHTML'; +import UserDetailsTooltip from './UserDetailsTooltip'; const propTypes = menuItemPropTypes; @@ -79,6 +80,8 @@ const defaultProps = { shouldRenderAsHTML: false, rightComponent: undefined, shouldShowRightComponent: false, + isTitleUserName: false, + titleUserNameId: '', }; const MenuItem = React.forwardRef((props, ref) => { @@ -262,7 +265,16 @@ const MenuItem = React.forwardRef((props, ref) => { numberOfLines={props.numberOfLinesTitle || undefined} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}} > - {convertToLTR(props.title)} + {props.isTitleUserName && props.titleUserNameId ? ( + + {convertToLTR(props.title)} + + ) : ( + convertToLTR(props.title) + )} )} {Boolean(props.shouldShowTitleIcon) && ( diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index 7cddc7a969dc..95452fe27dd1 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -52,6 +52,7 @@ function TaskView(props) { const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID); const disableState = !canModifyTask; const isDisableInteractive = !canModifyTask || !isOpen; + return ( ) : ( From 79b030d6fcba4a41acc75082f11851c7c2ac0471 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 12:52:25 +0530 Subject: [PATCH 02/16] fix: tooltip for assignee & share report. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 58 ++++++++++++++++----- src/components/ReportActionItem/TaskView.js | 3 +- src/pages/tasks/NewTaskPage.js | 4 ++ 3 files changed, 51 insertions(+), 14 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 10ab1c4d18d1..9133e2218d30 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -80,8 +80,10 @@ const defaultProps = { shouldRenderAsHTML: false, rightComponent: undefined, shouldShowRightComponent: false, - isTitleUserName: false, - titleUserNameId: '', + titleParticipantsDetailsDetails: [], + titleParticipantAccountId: 0, + shouldUseFullTitle: false, + useIconForTitleTooltip: false, }; const MenuItem = React.forwardRef((props, ref) => { @@ -138,6 +140,41 @@ const MenuItem = React.forwardRef((props, ref) => { const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); + const renderTitleContent = () => { + if (props.useIconForTitleTooltip && props.icon && _.isArray(props.icon) && props.icon.length > 0 && !props.shouldUseFullTitle) { + return _.map(props.icon, (accountIdOrUserObject, index) => ( + + + {convertToLTR(accountIdOrUserObject.name)} + + {index < props.icon.length - 1 && , } + + )); + } + // if (props.titleParticipantsDetails && props.titleParticipantsDetails.length > 0 && !props.shouldUseFullTitle) { + // return _.map(props.titleParticipantsDetails, (accountIdOrUserObject, index) => ( + // + // + // {convertToLTR(accountIdOrUserObject.displayName)} + // + // {index < props.titleParticipantsDetails.length - 1 && , } + // + // )); + // } + + // if (props.titleParticipantAccountId && !props.shouldUseFullTitle) { + // return ( + // + // + // {convertToLTR(props.title)} + // + // + // ); + // } + + return convertToLTR(props.title); + }; + return ( {(isHovered) => ( @@ -265,16 +302,7 @@ const MenuItem = React.forwardRef((props, ref) => { numberOfLines={props.numberOfLinesTitle || undefined} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}} > - {props.isTitleUserName && props.titleUserNameId ? ( - - {convertToLTR(props.title)} - - ) : ( - convertToLTR(props.title) - )} + {renderTitleContent()} )} {Boolean(props.shouldShowTitleIcon) && ( @@ -379,3 +407,9 @@ MenuItem.defaultProps = defaultProps; MenuItem.displayName = 'MenuItem'; export default MenuItem; + +// +// +// {convertToLTR(props.title)} +// +// diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index 95452fe27dd1..fbe59ff22064 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -157,8 +157,7 @@ function TaskView(props) { isSmallAvatarSubscriptMenu shouldGreyOutWhenDisabled={false} interactive={!isDisableInteractive} - titleUserNameId={props.report.managerID} - isTitleUserName + useIconForTitleTooltip /> ) : ( diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js index 790bd6ceeb64..db0ea1932c03 100644 --- a/src/pages/tasks/NewTaskPage.js +++ b/src/pages/tasks/NewTaskPage.js @@ -93,6 +93,7 @@ function NewTaskPage(props) { // the share destination data if (props.task.shareDestination) { setParentReport(lodashGet(props.reports, `report_${props.task.shareDestination}`, {})); + // console.log(lodashGet(props.reports, `report_${props.task.shareDestination}`, {})); const displayDetails = Task.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails); setShareDestination(displayDetails); } @@ -185,6 +186,7 @@ function NewTaskPage(props) { icon={assignee.icons} onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)} shouldShowRightIcon + useIconForTitleTooltip /> Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)} interactive={!props.task.parentReportID} shouldShowRightIcon={!props.task.parentReportID} + shouldUseFullTitle={shareDestination.shouldShowDestinationTooltip} + useIconForTitleTooltip /> From 7046eac369b6d015f452fd9b6f3c079debe338ae Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 12:54:34 +0530 Subject: [PATCH 03/16] fix: getShareDestination function. Signed-off-by: Krishna Gupta --- src/libs/actions/Task.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js index e7b29bb7ea6c..6c59076d43f7 100644 --- a/src/libs/actions/Task.js +++ b/src/libs/actions/Task.js @@ -590,10 +590,11 @@ function setDescriptionValue(description) { /** * Sets the shareDestination value for the task * @param {string} shareDestination + * @param {string} shouldShowDestinationTooltip */ -function setShareDestinationValue(shareDestination) { +function setShareDestinationValue(shareDestination, shouldShowDestinationTooltip) { // This is only needed for creation of a new task and so it should only be stored locally - Onyx.merge(ONYXKEYS.TASK, {shareDestination}); + Onyx.merge(ONYXKEYS.TASK, {shareDestination, shouldShowDestinationTooltip}); } /* Sets the assigneeChatReport details for the task @@ -708,6 +709,7 @@ function getAssignee(assigneeAccountID, personalDetails) { * */ function getShareDestination(reportID, reports, personalDetails) { const report = lodashGet(reports, `report_${reportID}`, {}); + let subtitle = ''; if (ReportUtils.isChatReport(report) && ReportUtils.isDM(report) && ReportUtils.hasSingleParticipant(report)) { const participantAccountID = lodashGet(report, 'participantAccountIDs[0]'); @@ -721,6 +723,12 @@ function getShareDestination(reportID, reports, personalDetails) { icons: ReportUtils.getIcons(report, personalDetails, Expensicons.FallbackAvatar), displayName: ReportUtils.getReportName(report), subtitle, + shouldShowDestinationTooltip: + ReportUtils.isChatThread(report) || + ReportUtils.isPolicyExpenseChat(report) || + ReportUtils.isMoneyRequestReport(report) || + ReportUtils.isThread(report) || + ReportUtils.isTaskReport(report), }; } From 9259899022adc48ef0f25efc900ffb8b6ffcbd34 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 12:58:01 +0530 Subject: [PATCH 04/16] cleaup. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 28 ---------------------------- src/libs/actions/Task.js | 5 ++--- 2 files changed, 2 insertions(+), 31 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 9133e2218d30..8b952d428222 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -80,8 +80,6 @@ const defaultProps = { shouldRenderAsHTML: false, rightComponent: undefined, shouldShowRightComponent: false, - titleParticipantsDetailsDetails: [], - titleParticipantAccountId: 0, shouldUseFullTitle: false, useIconForTitleTooltip: false, }; @@ -151,26 +149,6 @@ const MenuItem = React.forwardRef((props, ref) => { )); } - // if (props.titleParticipantsDetails && props.titleParticipantsDetails.length > 0 && !props.shouldUseFullTitle) { - // return _.map(props.titleParticipantsDetails, (accountIdOrUserObject, index) => ( - // - // - // {convertToLTR(accountIdOrUserObject.displayName)} - // - // {index < props.titleParticipantsDetails.length - 1 && , } - // - // )); - // } - - // if (props.titleParticipantAccountId && !props.shouldUseFullTitle) { - // return ( - // - // - // {convertToLTR(props.title)} - // - // - // ); - // } return convertToLTR(props.title); }; @@ -407,9 +385,3 @@ MenuItem.defaultProps = defaultProps; MenuItem.displayName = 'MenuItem'; export default MenuItem; - -// -// -// {convertToLTR(props.title)} -// -// diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js index 6c59076d43f7..e32626d26da5 100644 --- a/src/libs/actions/Task.js +++ b/src/libs/actions/Task.js @@ -590,11 +590,10 @@ function setDescriptionValue(description) { /** * Sets the shareDestination value for the task * @param {string} shareDestination - * @param {string} shouldShowDestinationTooltip */ -function setShareDestinationValue(shareDestination, shouldShowDestinationTooltip) { +function setShareDestinationValue(shareDestination) { // This is only needed for creation of a new task and so it should only be stored locally - Onyx.merge(ONYXKEYS.TASK, {shareDestination, shouldShowDestinationTooltip}); + Onyx.merge(ONYXKEYS.TASK, {shareDestination}); } /* Sets the assigneeChatReport details for the task From 9e1713dfee03be04024c444e58e832666aae23ef Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 13:02:52 +0530 Subject: [PATCH 05/16] cleaup. Signed-off-by: Krishna Gupta --- src/pages/tasks/NewTaskPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js index db0ea1932c03..3ac9d61e0d9e 100644 --- a/src/pages/tasks/NewTaskPage.js +++ b/src/pages/tasks/NewTaskPage.js @@ -93,7 +93,6 @@ function NewTaskPage(props) { // the share destination data if (props.task.shareDestination) { setParentReport(lodashGet(props.reports, `report_${props.task.shareDestination}`, {})); - // console.log(lodashGet(props.reports, `report_${props.task.shareDestination}`, {})); const displayDetails = Task.getShareDestination(props.task.shareDestination, props.reports, props.personalDetails); setShareDestination(displayDetails); } From 0228fbc94284fb25c39f3d6e0b40aa69c7c84e6b Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 13:41:15 +0530 Subject: [PATCH 06/16] fix: use displayNamesWithTooltips for assignee tooltip. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 12 ++++++------ src/components/ReportActionItem/TaskView.js | 3 ++- src/libs/actions/Task.js | 6 ++++++ src/pages/tasks/NewTaskPage.js | 6 ++++-- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 8b952d428222..ab6e3e84bad5 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -81,7 +81,7 @@ const defaultProps = { rightComponent: undefined, shouldShowRightComponent: false, shouldUseFullTitle: false, - useIconForTitleTooltip: false, + titleWithTooltips: [], }; const MenuItem = React.forwardRef((props, ref) => { @@ -139,13 +139,13 @@ const MenuItem = React.forwardRef((props, ref) => { const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); const renderTitleContent = () => { - if (props.useIconForTitleTooltip && props.icon && _.isArray(props.icon) && props.icon.length > 0 && !props.shouldUseFullTitle) { - return _.map(props.icon, (accountIdOrUserObject, index) => ( + if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0 && !props.shouldUseFullTitle) { + return _.map(props.titleWithTooltips, (accountIdOrUserObject, index) => ( - - {convertToLTR(accountIdOrUserObject.name)} + + {convertToLTR(accountIdOrUserObject.displayName)} - {index < props.icon.length - 1 && , } + {index < props.titleWithTooltips.length - 1 && , } )); } diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js index fbe59ff22064..61e7f9ea6ece 100644 --- a/src/components/ReportActionItem/TaskView.js +++ b/src/components/ReportActionItem/TaskView.js @@ -47,6 +47,7 @@ function TaskView(props) { }, [props.report]); const taskTitle = convertToLTR(props.report.reportName || ''); + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails), false); const isCompleted = ReportUtils.isCompletedTaskReport(props.report); const isOpen = ReportUtils.isOpenTaskReport(props.report); const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID); @@ -157,7 +158,7 @@ function TaskView(props) { isSmallAvatarSubscriptMenu shouldGreyOutWhenDisabled={false} interactive={!isDisableInteractive} - useIconForTitleTooltip + titleWithTooltips={assigneeTooltipDetails} /> ) : ( diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js index e32626d26da5..292954634103 100644 --- a/src/libs/actions/Task.js +++ b/src/libs/actions/Task.js @@ -8,6 +8,7 @@ import Navigation from '../Navigation/Navigation'; import ROUTES from '../../ROUTES'; import CONST from '../../CONST'; import DateUtils from '../DateUtils'; +import * as OptionsListUtils from '../OptionsListUtils'; import * as UserUtils from '../UserUtils'; import * as ErrorUtils from '../ErrorUtils'; import * as ReportActionsUtils from '../ReportActionsUtils'; @@ -709,6 +710,10 @@ function getAssignee(assigneeAccountID, personalDetails) { function getShareDestination(reportID, reports, personalDetails) { const report = lodashGet(reports, `report_${reportID}`, {}); + const participantAccountIDs = lodashGet(report, 'participantAccountIDs'); + const isMultipleParticipant = participantAccountIDs.length > 1; + const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant); + let subtitle = ''; if (ReportUtils.isChatReport(report) && ReportUtils.isDM(report) && ReportUtils.hasSingleParticipant(report)) { const participantAccountID = lodashGet(report, 'participantAccountIDs[0]'); @@ -722,6 +727,7 @@ function getShareDestination(reportID, reports, personalDetails) { icons: ReportUtils.getIcons(report, personalDetails, Expensicons.FallbackAvatar), displayName: ReportUtils.getReportName(report), subtitle, + displayNamesWithTooltips, shouldShowDestinationTooltip: ReportUtils.isChatThread(report) || ReportUtils.isPolicyExpenseChat(report) || diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js index 3ac9d61e0d9e..43a5ff3ce84e 100644 --- a/src/pages/tasks/NewTaskPage.js +++ b/src/pages/tasks/NewTaskPage.js @@ -16,6 +16,7 @@ import ROUTES from '../../ROUTES'; import MenuItemWithTopDescription from '../../components/MenuItemWithTopDescription'; import MenuItem from '../../components/MenuItem'; import reportPropTypes from '../reportPropTypes'; +import * as OptionsListUtils from '../../libs/OptionsListUtils'; import * as Task from '../../libs/actions/Task'; import * as ReportUtils from '../../libs/ReportUtils'; import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton'; @@ -64,6 +65,7 @@ const defaultProps = { function NewTaskPage(props) { const [assignee, setAssignee] = useState({}); + const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.task.assigneeAccountID], props.personalDetails), false); const [shareDestination, setShareDestination] = useState({}); const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); @@ -185,7 +187,7 @@ function NewTaskPage(props) { icon={assignee.icons} onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)} shouldShowRightIcon - useIconForTitleTooltip + titleWithTooltips={assigneeTooltipDetails} /> From 3e76f620fea6780f29476e5c9728c235685d21d5 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 13:49:49 +0530 Subject: [PATCH 07/16] update: menuItemPropTypes. . Signed-off-by: Krishna Gupta --- src/components/menuItemPropTypes.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index e33170ac67f4..277396ac283a 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -153,6 +153,12 @@ const propTypes = { /** Should render component on the right */ shouldShowRightComponent: PropTypes.bool, + + /** Should render title without tooltip or not, we don't show tooltip on some items like, workspace and few more */ + shouldUseFullTitle: PropTypes.bool, + + /** Render title with tooltips for menu items like, asignee & share somewhere menu */ + titleWithTooltips: PropTypes.arrayOf(PropTypes.object), }; export default propTypes; From ab7df2fdd6c8615fe63ff04eac8073414dbd2020 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 13:54:32 +0530 Subject: [PATCH 08/16] fix: add key for title content. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index ab6e3e84bad5..4d2a4fe07716 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -141,7 +141,7 @@ const MenuItem = React.forwardRef((props, ref) => { const renderTitleContent = () => { if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0 && !props.shouldUseFullTitle) { return _.map(props.titleWithTooltips, (accountIdOrUserObject, index) => ( - + {convertToLTR(accountIdOrUserObject.displayName)} From f19e36c7d37c4815a607f7f1625aba1c3bf98e05 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Wed, 18 Oct 2023 15:49:26 +0530 Subject: [PATCH 09/16] fix lint error. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 4a14bdaa9cc2..116ccb8d4820 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -153,6 +153,7 @@ const MenuItem = React.forwardRef((props, ref) => { } return convertToLTR(props.title); + }; const onPressAction = (e) => { if (props.disabled || !props.interactive) { From cd039db156ad8d3426a28b7a59a42b53886cb7e9 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 00:36:25 +0530 Subject: [PATCH 10/16] fix: map item name, removed unnecessary flag. Signed-off-by: Krishna Gupta --- src/components/menuItemPropTypes.js | 5 +---- src/libs/actions/Task.js | 7 +------ src/pages/tasks/NewTaskPage.js | 3 +-- 3 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js index 273aa186d002..4b37e8040d45 100644 --- a/src/components/menuItemPropTypes.js +++ b/src/components/menuItemPropTypes.js @@ -154,10 +154,7 @@ const propTypes = { /** Should render component on the right */ shouldShowRightComponent: PropTypes.bool, - /** Should render title without tooltip or not, we don't show tooltip on some items like, workspace and few more */ - shouldUseFullTitle: PropTypes.bool, - - /** Render title with tooltips for menu items like, asignee & share somewhere menu */ + /** Array of objects that map display names to their corresponding tooltip */ titleWithTooltips: PropTypes.arrayOf(PropTypes.object), /** Should check anonymous user in onPress function */ diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js index 292954634103..c0e794b85fd9 100644 --- a/src/libs/actions/Task.js +++ b/src/libs/actions/Task.js @@ -728,12 +728,7 @@ function getShareDestination(reportID, reports, personalDetails) { displayName: ReportUtils.getReportName(report), subtitle, displayNamesWithTooltips, - shouldShowDestinationTooltip: - ReportUtils.isChatThread(report) || - ReportUtils.isPolicyExpenseChat(report) || - ReportUtils.isMoneyRequestReport(report) || - ReportUtils.isThread(report) || - ReportUtils.isTaskReport(report), + shouldUseFullTitleToDisplay: ReportUtils.shouldUseFullTitleToDisplay(report), }; } diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js index 43a5ff3ce84e..f0d2d506c9d8 100644 --- a/src/pages/tasks/NewTaskPage.js +++ b/src/pages/tasks/NewTaskPage.js @@ -197,8 +197,7 @@ function NewTaskPage(props) { onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)} interactive={!props.task.parentReportID} shouldShowRightIcon={!props.task.parentReportID} - shouldUseFullTitle={shareDestination.shouldShowDestinationTooltip} - titleWithTooltips={shareDestination.displayNamesWithTooltips} + titleWithTooltips={!shareDestination.shouldUseFullTitleToDisplay && shareDestination.displayNamesWithTooltips} /> From 54dcc548da9a57ab96adbe65a2aff1b53dea850a Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 00:38:49 +0530 Subject: [PATCH 11/16] minor fix. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 116ccb8d4820..56400c25398a 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -80,7 +80,6 @@ const defaultProps = { shouldRenderAsHTML: false, rightComponent: undefined, shouldShowRightComponent: false, - shouldUseFullTitle: false, titleWithTooltips: [], shouldCheckActionAllowedOnPress: true, }; @@ -141,7 +140,7 @@ const MenuItem = React.forwardRef((props, ref) => { const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); const renderTitleContent = () => { - if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0 && !props.shouldUseFullTitle) { + if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) { return _.map(props.titleWithTooltips, (accountIdOrUserObject, index) => ( From aa8147988a203ee6d0c39086d041419d0c86f586 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 00:40:29 +0530 Subject: [PATCH 12/16] minor fix. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 56400c25398a..45fc189591e9 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -141,10 +141,10 @@ const MenuItem = React.forwardRef((props, ref) => { const renderTitleContent = () => { if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) { - return _.map(props.titleWithTooltips, (accountIdOrUserObject, index) => ( + return _.map(props.titleWithTooltips, (tooltipDetails, index) => ( - - {convertToLTR(accountIdOrUserObject.displayName)} + + {convertToLTR(tooltipDetails.displayName)} {index < props.titleWithTooltips.length - 1 && , } From e29b08b72ee96edeb0115ff26c53ea4775fdea7a Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 01:14:34 +0530 Subject: [PATCH 13/16] fix: show title on tooltip ellipsis. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 45fc189591e9..816ff904572e 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -2,6 +2,7 @@ import _ from 'underscore'; import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; +import lodashGet from 'lodash/get'; import Text from './Text'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; @@ -26,6 +27,7 @@ import Hoverable from './Hoverable'; import useWindowDimensions from '../hooks/useWindowDimensions'; import RenderHTML from './RenderHTML'; import UserDetailsTooltip from './UserDetailsTooltip'; +import Tooltip from './Tooltip'; const propTypes = menuItemPropTypes; @@ -115,6 +117,7 @@ const MenuItem = React.forwardRef((props, ref) => { const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT; const titleRef = React.useRef(''); + const titleContainerRef = React.useRef(null); useEffect(() => { if (!props.title || (titleRef.current.length && titleRef.current === props.title) || !props.shouldParseTitle) { return; @@ -140,15 +143,29 @@ const MenuItem = React.forwardRef((props, ref) => { const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); const renderTitleContent = () => { + const isEllipsisActive = lodashGet(titleContainerRef.current, 'offsetWidth') < lodashGet(titleContainerRef.current, 'scrollWidth'); + if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) { - return _.map(props.titleWithTooltips, (tooltipDetails, index) => ( - - - {convertToLTR(tooltipDetails.displayName)} - - {index < props.titleWithTooltips.length - 1 && , } + return ( + + {_.map(props.titleWithTooltips, (tooltipDetails, index) => ( + + + {convertToLTR(tooltipDetails.displayName)} + + {index < props.titleWithTooltips.length - 1 && , } + + ))} + {Boolean(isEllipsisActive) && ( + + + {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */} + .... + + + )} - )); + ); } return convertToLTR(props.title); @@ -282,6 +299,7 @@ const MenuItem = React.forwardRef((props, ref) => { style={titleTextStyle} numberOfLines={props.numberOfLinesTitle || undefined} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}} + ref={titleContainerRef} > {renderTitleContent()} From 07c5236fc0d39d0c1695403065d7509d240a9613 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 01:21:33 +0530 Subject: [PATCH 14/16] minor fix. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 816ff904572e..f22578528910 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -159,8 +159,8 @@ const MenuItem = React.forwardRef((props, ref) => { {Boolean(isEllipsisActive) && ( - {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */} - .... + {/* There is some Gap for real ellipsis so we are adding 5 `.` to cover */} + ..... )} From f64ffd07cc6ff7e1449e4a8f29bb7e9d735b8089 Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 19:03:48 +0530 Subject: [PATCH 15/16] fix: use DisplayNamesWithTooltip for assignee tooltip. Signed-off-by: Krishna Gupta --- .../DisplayNames/displayNamesPropTypes.js | 2 +- src/components/MenuItem.js | 30 +++++-------------- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/src/components/DisplayNames/displayNamesPropTypes.js b/src/components/DisplayNames/displayNamesPropTypes.js index 5ad332f7a117..0f5a2a304b29 100644 --- a/src/components/DisplayNames/displayNamesPropTypes.js +++ b/src/components/DisplayNames/displayNamesPropTypes.js @@ -34,7 +34,7 @@ const propTypes = { const defaultProps = { numberOfLines: 1, tooltipEnabled: false, - titleStyles: [], + textStyles: [], }; export {propTypes, defaultProps}; diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index f22578528910..769e9ae0f41b 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -2,7 +2,6 @@ import _ from 'underscore'; import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import ExpensiMark from 'expensify-common/lib/ExpensiMark'; -import lodashGet from 'lodash/get'; import Text from './Text'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; @@ -26,8 +25,7 @@ import * as Session from '../libs/actions/Session'; import Hoverable from './Hoverable'; import useWindowDimensions from '../hooks/useWindowDimensions'; import RenderHTML from './RenderHTML'; -import UserDetailsTooltip from './UserDetailsTooltip'; -import Tooltip from './Tooltip'; +import DisplayNames from './DisplayNames'; const propTypes = menuItemPropTypes; @@ -143,28 +141,14 @@ const MenuItem = React.forwardRef((props, ref) => { const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent); const renderTitleContent = () => { - const isEllipsisActive = lodashGet(titleContainerRef.current, 'offsetWidth') < lodashGet(titleContainerRef.current, 'scrollWidth'); - if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) { return ( - - {_.map(props.titleWithTooltips, (tooltipDetails, index) => ( - - - {convertToLTR(tooltipDetails.displayName)} - - {index < props.titleWithTooltips.length - 1 && , } - - ))} - {Boolean(isEllipsisActive) && ( - - - {/* There is some Gap for real ellipsis so we are adding 5 `.` to cover */} - ..... - - - )} - + ); } From 1608cca8791e373a331d2026789ad1f22dde987d Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 20 Oct 2023 19:05:40 +0530 Subject: [PATCH 16/16] minor fix. Signed-off-by: Krishna Gupta --- src/components/MenuItem.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 769e9ae0f41b..3c52c41f1992 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -115,7 +115,6 @@ const MenuItem = React.forwardRef((props, ref) => { const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT; const titleRef = React.useRef(''); - const titleContainerRef = React.useRef(null); useEffect(() => { if (!props.title || (titleRef.current.length && titleRef.current === props.title) || !props.shouldParseTitle) { return; @@ -283,7 +282,6 @@ const MenuItem = React.forwardRef((props, ref) => { style={titleTextStyle} numberOfLines={props.numberOfLinesTitle || undefined} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}} - ref={titleContainerRef} > {renderTitleContent()}