From 2f192b4e36f6d5066e1ea30f0cf99a8c54f5f590 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Fri, 4 Oct 2024 10:19:40 -0700 Subject: [PATCH] Merge pull request #50255 from ishpaul777/revert-49686-fix/49086-task-title-overflown Revert "Fix task title is overflown and align the checkbox and arrow correctly" (cherry picked from commit 85c7b5abec38acd97a964ca7e707241e41718775) (CP triggered by jasperhuangg) --- .../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, 17 insertions(+), 32 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 95528286d1e..a2ea7487df0 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -1,7 +1,6 @@ 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,7 +11,6 @@ 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'; @@ -55,12 +53,9 @@ 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, style}: TaskPreviewProps) { +function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -75,33 +70,29 @@ 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 avatarSize = CONST.AVATAR_SIZE.SMALL; + const htmlForTaskPreview = `${taskTitle}`; 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]} + style={[styles.flexRow, styles.justifyContentBetween]} role={CONST.ROLE.BUTTON} accessibilityLabel={translate('task.task')} > - - + + - {hasAssignee && ( + {taskAssigneeAccountID > 0 && ( )} - {taskTitle} + + ${htmlForTaskPreview}` : htmlForTaskPreview} /> + {shouldShowGreenDotIndicator && ( @@ -138,7 +131,6 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index be77f2cd857..1917a7bf257 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -568,7 +568,6 @@ 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 9eeced6de5a..c7665fc1e3d 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1667,17 +1667,6 @@ 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;