From 672a937b80e088402de664172068817f1e328b65 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 5 Oct 2024 20:43:31 +0800 Subject: [PATCH 1/5] Revert "Revert "Fix task title is overflown and align the checkbox and arrow correctly"" This reverts commit 5e484340deae19d14a4a6a98f4c83f51bc26b32b. --- .../ReportActionItem/TaskPreview.tsx | 32 ++++++++++++------- src/pages/home/report/ReportActionItem.tsx | 1 + src/styles/index.ts | 5 --- src/styles/utils/index.ts | 11 +++++++ 4 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 187dfbafa5c4..da72ffd654c0 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -1,6 +1,7 @@ import {Str} from 'expensify-common'; import React from 'react'; import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Avatar from '@components/Avatar'; @@ -12,6 +13,7 @@ import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import RenderHTML from '@components/RenderHTML'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; +import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; @@ -54,9 +56,12 @@ type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & { /** Callback for updating context menu active state, used for showing context menu */ checkIfContextMenuActive: () => void; + + /** Style for the task preview container */ + style: StyleProp; }; -function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) { +function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false, style}: TaskPreviewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -71,29 +76,33 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED; const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? '')); const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; + const hasAssignee = taskAssigneeAccountID > 0; const personalDetails = usePersonalDetails(); const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar; - const htmlForTaskPreview = `${taskTitle}`; + const avatarSize = CONST.AVATAR_SIZE.SMALL; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); + const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined); + const titleStyle = StyleUtils.getTaskPreviewTitleStyle(iconWrapperStyle.height, isTaskCompleted); + const shouldShowGreenDotIndicator = ReportUtils.isOpenTaskReport(taskReport, action) && ReportUtils.isReportManager(taskReport); if (isDeletedParentAction) { return ${translate('parentReportAction.deletedTask')}`} />; } return ( - + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))} onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} onPressOut={() => ControlSelection.unblock()} onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)} shouldUseHapticsOnLongPress - style={[styles.flexRow, styles.justifyContentBetween]} + style={[styles.flexRow, styles.justifyContentBetween, style]} role={CONST.ROLE.BUTTON} accessibilityLabel={translate('task.task')} > - - + + - {taskAssigneeAccountID > 0 && ( + {hasAssignee && ( )} - - ${htmlForTaskPreview}` : htmlForTaskPreview} /> - + {taskTitle} {shouldShowGreenDotIndicator && ( @@ -132,6 +139,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index d9701219418e..5b826b94aa77 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -572,6 +572,7 @@ function ReportActionItem({ children = ( width: 1, }, - taskCheckboxWrapper: { - height: variables.fontSizeNormalHeight, - ...flex.justifyContentCenter, - }, - taskTitleMenuItem: { ...writingDirection.ltr, ...headlineFont, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index c7665fc1e3dd..9eeced6de5a6 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1667,6 +1667,17 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ alignItems: 'center', justifyContent: 'center', }), + + getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => ({ + height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight, + ...styles.justifyContentCenter, + }), + + getTaskPreviewTitleStyle: (iconHeight: number, isTaskCompleted: boolean): StyleProp => [ + styles.flex1, + isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [], + {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2}, + ], }); type StyleUtilsType = ReturnType; From 998fe1dbd31f593d679eb3fdd1ba9e9966842fef Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 5 Oct 2024 20:51:48 +0800 Subject: [PATCH 2/5] remove unused import --- src/components/ReportActionItem/TaskPreview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index da72ffd654c0..8d036fc6167b 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -8,7 +8,6 @@ import Avatar from '@components/Avatar'; import Checkbox from '@components/Checkbox'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; -import iconWrapperStyle from '@components/Icon/IconWrapperStyles'; import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import RenderHTML from '@components/RenderHTML'; From 8616228e9e7868fcbdaf7e775ff060dcc7d0a29c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 5 Oct 2024 21:08:53 +0800 Subject: [PATCH 3/5] fix task title is not updated dynamically --- src/components/ReportActionItem/TaskPreview.tsx | 2 +- src/libs/TaskUtils.ts | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 8d036fc6167b..a31add4eeee3 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -73,7 +73,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che const isTaskCompleted = !isEmptyObject(taskReport) ? taskReport?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && taskReport.statusNum === CONST.REPORT.STATUS_NUM.APPROVED : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED; - const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? '')); + const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitleFromReport(taskReport, action?.childReportName ?? '')); const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; const hasAssignee = taskAssigneeAccountID > 0; const personalDetails = usePersonalDetails(); diff --git a/src/libs/TaskUtils.ts b/src/libs/TaskUtils.ts index 06745a49217b..2da9d6c5bbbd 100644 --- a/src/libs/TaskUtils.ts +++ b/src/libs/TaskUtils.ts @@ -2,6 +2,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import {Report} from '@src/types/onyx'; import type {Message} from '@src/types/onyx/ReportAction'; import type ReportAction from '@src/types/onyx/ReportAction'; import * as Localize from './Localize'; @@ -37,12 +38,16 @@ function getTaskReportActionMessage(action: OnyxEntry): Pick, fallbackTitle = ''): string { // We need to check for reportID, not just reportName, because when a receiver opens the task for the first time, // an optimistic report is created with the only property – reportName: 'Chat report', // and it will be displayed as the task title without checking for reportID to be present. - return Object.hasOwn(taskReport, 'reportID') && 'reportName' in taskReport && typeof taskReport.reportName === 'string' ? taskReport.reportName : fallbackTitle; + return taskReport?.reportID && taskReport.reportName ? taskReport.reportName : fallbackTitle; +} + +function getTaskTitle(taskReportID: string, fallbackTitle = ''): string { + const taskReport = ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`]; + return getTaskTitleFromReport(taskReport, fallbackTitle); } function getTaskCreatedMessage(reportAction: OnyxEntry) { @@ -51,4 +56,4 @@ function getTaskCreatedMessage(reportAction: OnyxEntry) { return taskTitle ? Localize.translateLocal('task.messages.created', {title: taskTitle}) : ''; } -export {isActiveTaskEditRoute, getTaskReportActionMessage, getTaskTitle, getTaskCreatedMessage}; +export {isActiveTaskEditRoute, getTaskReportActionMessage, getTaskTitle, getTaskTitleFromReport, getTaskCreatedMessage}; From 78e2a624d95350a4659051cee458099cc1336756 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 5 Oct 2024 21:14:51 +0800 Subject: [PATCH 4/5] lint --- src/libs/TaskUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/TaskUtils.ts b/src/libs/TaskUtils.ts index 2da9d6c5bbbd..11434373dafb 100644 --- a/src/libs/TaskUtils.ts +++ b/src/libs/TaskUtils.ts @@ -2,7 +2,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import {Report} from '@src/types/onyx'; +import type {Report} from '@src/types/onyx'; import type {Message} from '@src/types/onyx/ReportAction'; import type ReportAction from '@src/types/onyx/ReportAction'; import * as Localize from './Localize'; From de3121920efbb3d73d52dca2e6af17ab4e997ee3 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 7 Oct 2024 12:28:01 +0800 Subject: [PATCH 5/5] remove extra margin --- src/components/ReportActionItem/TaskPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index a31add4eeee3..e6f2e36adee7 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -128,7 +128,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che {taskTitle} {shouldShowGreenDotIndicator && ( - +