Skip to content

Commit

Permalink
Revert "Fix task title is overflown and align the checkbox and arrow …
Browse files Browse the repository at this point in the history
…correctly"
  • Loading branch information
ishpaul777 authored Oct 4, 2024
1 parent 063b8e6 commit 5e48434
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 32 deletions.
32 changes: 12 additions & 20 deletions src/components/ReportActionItem/TaskPreview.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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<ViewStyle>;
};

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();
Expand All @@ -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 = `<comment>${taskTitle}</comment>`;
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 <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />;
}

return (
<View style={[styles.chatItemMessage, !hasAssignee && styles.mv1]}>
<View style={[styles.chatItemMessage]}>
<PressableWithoutFeedback
onPress={() => 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')}
>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mr2]}>
<View style={iconWrapperStyle}>
<View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mt1]}>
<View style={[styles.taskCheckboxWrapper, styles.alignSelfCenter]}>
<Checkbox
style={[styles.mr2]}
isChecked={isTaskCompleted}
Expand All @@ -116,16 +107,18 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
accessibilityLabel={translate('task.task')}
/>
</View>
{hasAssignee && (
{taskAssigneeAccountID > 0 && (
<Avatar
containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
containerStyles={[styles.mr2, styles.alignSelfCenter, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
source={avatar}
size={avatarSize}
size={CONST.AVATAR_SIZE.SMALL}
avatarID={taskAssigneeAccountID}
type={CONST.ICON_TYPE_AVATAR}
/>
)}
<Text style={titleStyle}>{taskTitle}</Text>
<View style={[styles.alignSelfCenter]}>
<RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
</View>
</View>
{shouldShowGreenDotIndicator && (
<View style={styles.ml2}>
Expand All @@ -138,7 +131,6 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
<Icon
src={Expensicons.ArrowRight}
fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
additionalStyles={iconWrapperStyle}
/>
</PressableWithoutFeedback>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/pages/home/report/ReportActionItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -572,7 +572,6 @@ function ReportActionItem({
children = (
<ShowContextMenuContext.Provider value={contextValue}>
<TaskPreview
style={displayAsGroup ? [] : [styles.mt1]}
taskReportID={ReportActionsUtils.isAddCommentAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.taskReportID?.toString() ?? '-1' : '-1'}
chatReportID={reportID}
action={action}
Expand Down
5 changes: 5 additions & 0 deletions src/styles/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4151,6 +4151,11 @@ const styles = (theme: ThemeColors) =>
width: 1,
},

taskCheckboxWrapper: {
height: variables.fontSizeNormalHeight,
...flex.justifyContentCenter,
},

taskTitleMenuItem: {
...writingDirection.ltr,
...headlineFont,
Expand Down
11 changes: 0 additions & 11 deletions src/styles/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<TextStyle> => [
styles.flex1,
isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [],
{marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
],
});

type StyleUtilsType = ReturnType<typeof createStyleUtils>;
Expand Down

0 comments on commit 5e48434

Please sign in to comment.