From 24221c75513c1559904277c183416274045cc067 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 1 Aug 2024 18:56:32 +0530 Subject: [PATCH 01/10] fix: Chat - File does not appear with strikethrough style when uploaded offline and deleted. Signed-off-by: krishna2323 --- .../BaseAnchorForAttachmentsOnly.tsx | 3 ++- .../AnchorForAttachmentsOnly/types.ts | 3 +++ .../DefaultAttachmentView/index.tsx | 6 ++++-- .../Attachments/AttachmentView/index.tsx | 5 +++++ .../HTMLRenderers/AnchorRenderer.tsx | 9 +++++---- .../HTMLRenderers/ImageRenderer.tsx | 4 ++++ src/components/ThumbnailImage.tsx | 20 +++++++++++++++++++ .../comment/AttachmentCommentFragment.tsx | 4 +--- 8 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 1d273e847d26..e4b69e9e3b68 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -30,7 +30,7 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & onPressOut?: () => void; }; -function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) { +function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) { const sourceURLWithAuth = addEncryptedAuthTokenToURL(source); const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; @@ -66,6 +66,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow shouldShowDownloadIcon={!!sourceID && !isOffline} shouldShowLoadingSpinnerIcon={isDownloading} isUsedAsChatAttachment + isDeleted={isDeleted} /> )} diff --git a/src/components/AnchorForAttachmentsOnly/types.ts b/src/components/AnchorForAttachmentsOnly/types.ts index a5186d8c0d90..47caffa9b9b9 100644 --- a/src/components/AnchorForAttachmentsOnly/types.ts +++ b/src/components/AnchorForAttachmentsOnly/types.ts @@ -9,6 +9,9 @@ type AnchorForAttachmentsOnlyProps = { /** Any additional styles to apply */ style?: StyleProp; + + /** Any additional styles to apply */ + isDeleted?: boolean; }; export default AnchorForAttachmentsOnlyProps; diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index ee594f66aabc..0b3c99219ebb 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -24,9 +24,11 @@ type DefaultAttachmentViewProps = { containerStyles?: StyleProp; icon?: IconAsset; + + isDeleted?: boolean; }; -function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon}: DefaultAttachmentViewProps) { +function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isDeleted}: DefaultAttachmentViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -40,7 +42,7 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa /> - {fileName} + {fileName} {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && ( diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 39c25706bbfe..5e1af81b80a5 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -76,6 +76,9 @@ type AttachmentViewProps = AttachmentViewOnyxProps & /* Flag indicating whether the attachment has been uploaded. */ isUploaded?: boolean; + + /** Any additional styles to apply */ + isDeleted?: boolean; }; function AttachmentView({ @@ -100,6 +103,7 @@ function AttachmentView({ duration, isUsedAsChatAttachment, isUploaded = true, + isDeleted, }: AttachmentViewProps) { const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); @@ -286,6 +290,7 @@ function AttachmentView({ shouldShowDownloadIcon={shouldShowDownloadIcon} shouldShowLoadingSpinnerIcon={shouldShowLoadingSpinnerIcon} containerStyles={containerStyles} + isDeleted={isDeleted} /> ); } diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx index 7892d8624699..08aa639820f7 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx @@ -25,12 +25,15 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) { const isAttachment = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]; const tNodeChild = tnode?.domNode?.children?.[0]; const displayName = tNodeChild && 'data' in tNodeChild && typeof tNodeChild.data === 'string' ? tNodeChild.data : ''; - const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || ''; + const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref); const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref); const isVideo = attrHref && Str.isVideo(attrHref); + const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; + const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {}; + if (!HTMLEngineUtils.isChildOfComment(tnode)) { // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click. // We don't have this behaviour in other links in NewDot @@ -51,13 +54,11 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) { ); } - const hasStrikethroughStyle = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; - const textDecorationLineStyle = hasStrikethroughStyle ? styles.underlineLineThrough : {}; - return ( ); diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index 04d0200ea228..18e297e0fe43 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -52,6 +52,8 @@ type ThumbnailImageProps = { /** The object position of image */ objectPosition?: ImageObjectPosition; + + isDeleted?: boolean; }; type UpdateImageSizeParams = { @@ -71,6 +73,7 @@ function ThumbnailImage({ fallbackIconColor, fallbackIconBackground, objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL, + isDeleted, }: ThumbnailImageProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -110,6 +113,23 @@ function ThumbnailImage({ const sizeStyles = shouldDynamicallyResize ? [thumbnailDimensionsStyles] : [styles.w100, styles.h100]; + if (isDeleted) { + const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.sidebarHover); + + return ( + + + + + + ); + } + if (failedToLoad || previewSourceURL === '') { const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.border); diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx index 7d2d81b86e02..f9f86f0a9cd0 100644 --- a/src/pages/home/report/comment/AttachmentCommentFragment.tsx +++ b/src/pages/home/report/comment/AttachmentCommentFragment.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; -import CONST from '@src/CONST'; import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage'; import RenderCommentHTML from './RenderCommentHTML'; @@ -14,8 +13,7 @@ type AttachmentCommentFragmentProps = { function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted}: AttachmentCommentFragmentProps) { const styles = useThemeStyles(); - const isUploading = html.includes(CONST.ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE); - const htmlContent = styleAsDeleted && isUploading ? `${html}` : html; + const htmlContent = styleAsDeleted ? `${html}` : html; return ( From 05b2f2dcb03cb99da0ba872867f259dcac8aa313 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 20 Aug 2024 02:28:44 +0530 Subject: [PATCH 02/10] updated design. Signed-off-by: krishna2323 --- .../BaseAnchorForAttachmentsOnly.tsx | 2 +- src/components/ThumbnailImage.tsx | 49 +++++++++++++------ 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index e4b69e9e3b68..b77646e485da 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -66,7 +66,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow shouldShowDownloadIcon={!!sourceID && !isOffline} shouldShowLoadingSpinnerIcon={isDownloading} isUsedAsChatAttachment - isDeleted={isDeleted} + isDeleted={!!isDeleted} /> )} diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index 18e297e0fe43..9ed9c6c8d46c 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -113,22 +113,22 @@ function ThumbnailImage({ const sizeStyles = shouldDynamicallyResize ? [thumbnailDimensionsStyles] : [styles.w100, styles.h100]; - if (isDeleted) { - const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.sidebarHover); - - return ( - - - - - - ); - } + // if (isDeleted) { + // const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.sidebarHover); + + // return ( + // + // + // + // + // + // ); + // } if (failedToLoad || previewSourceURL === '') { const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.border); @@ -149,6 +149,23 @@ function ThumbnailImage({ return ( + {isDeleted && ( + <> + + + + + + + + + + )} Date: Sun, 25 Aug 2024 02:17:47 +0530 Subject: [PATCH 03/10] add deleted indicator for video renderer. Signed-off-by: krishna2323 --- .../HTMLRenderers/VideoRenderer.tsx | 3 + src/components/ThumbnailImage.tsx | 37 +---------- .../VideoPlayerThumbnail.tsx | 62 +++++++++++-------- src/components/VideoPlayerPreview/index.tsx | 8 ++- 4 files changed, 47 insertions(+), 63 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx index e0df7e7081c5..bde61badba8f 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx @@ -24,6 +24,8 @@ function VideoRenderer({tnode, key}: VideoRendererProps) { const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]); const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]); const currentReportIDValue = useCurrentReportID(); + const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; + const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; return ( @@ -36,6 +38,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) { thumbnailUrl={thumbnailUrl} videoDimensions={{width, height}} videoDuration={duration} + isDeleted={isDeleted} onShowModalPress={() => { const route = ROUTES.ATTACHMENTS.getRoute(report?.reportID ?? '-1', CONST.ATTACHMENT_TYPE.REPORT, sourceURL); Navigation.navigate(route); diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index 9ed9c6c8d46c..52f20902406f 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -9,6 +9,7 @@ import useThumbnailDimensions from '@hooks/useThumbnailDimensions'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; +import AttachmentDeletedIndicator from './AttachmentDeletedIndicator'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import type {ImageObjectPosition} from './Image/types'; @@ -53,6 +54,7 @@ type ThumbnailImageProps = { /** The object position of image */ objectPosition?: ImageObjectPosition; + /** Whether the image is deleted */ isDeleted?: boolean; }; @@ -113,23 +115,6 @@ function ThumbnailImage({ const sizeStyles = shouldDynamicallyResize ? [thumbnailDimensionsStyles] : [styles.w100, styles.h100]; - // if (isDeleted) { - // const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.sidebarHover); - - // return ( - // - // - // - // - // - // ); - // } - if (failedToLoad || previewSourceURL === '') { const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.border); @@ -149,23 +134,7 @@ function ThumbnailImage({ return ( - {isDeleted && ( - <> - - - - - - - - - - )} + {isDeleted && } )} - - {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => ( - DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} - onPressOut={() => ControlSelection.unblock()} - onLongPress={(event) => - showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)) - } - shouldUseHapticsOnLongPress - > - - - - - )} - + {!isDeleted ? ( + + {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => ( + DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} + onPressOut={() => ControlSelection.unblock()} + onLongPress={(event) => + showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)) + } + shouldUseHapticsOnLongPress + > + + + + + )} + + ) : ( + + )} ); } diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx index 2ce65f08fc20..a56fedd8fb13 100644 --- a/src/components/VideoPlayerPreview/index.tsx +++ b/src/components/VideoPlayerPreview/index.tsx @@ -38,9 +38,12 @@ type VideoPlayerPreviewProps = { /** Callback executed when modal is pressed. */ onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise; + + /** Whether the image is deleted */ + isDeleted?: boolean; }; -function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) { +function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress, isDeleted}: VideoPlayerPreviewProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL} = usePlaybackContext(); @@ -71,11 +74,12 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi return ( - {shouldUseNarrowLayout || isThumbnail ? ( + {shouldUseNarrowLayout || isThumbnail || isDeleted ? ( ) : ( From 98aa1548408956d9c902186c5316544179a22613 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 25 Aug 2024 03:02:58 +0530 Subject: [PATCH 04/10] add styles object for deleted indicator. Signed-off-by: krishna2323 --- src/components/AnchorForAttachmentsOnly/types.ts | 2 +- .../AttachmentView/DefaultAttachmentView/index.tsx | 1 + src/components/Attachments/AttachmentView/index.tsx | 2 +- .../VideoPlayerPreview/VideoPlayerThumbnail.tsx | 2 +- src/components/VideoPlayerPreview/index.tsx | 2 +- src/styles/index.ts | 11 +++++++++++ 6 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/types.ts b/src/components/AnchorForAttachmentsOnly/types.ts index 47caffa9b9b9..89932a95aa04 100644 --- a/src/components/AnchorForAttachmentsOnly/types.ts +++ b/src/components/AnchorForAttachmentsOnly/types.ts @@ -10,7 +10,7 @@ type AnchorForAttachmentsOnlyProps = { /** Any additional styles to apply */ style?: StyleProp; - /** Any additional styles to apply */ + /** Whether the attachment is deleted */ isDeleted?: boolean; }; diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 0b3c99219ebb..e9138fbcdd61 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -25,6 +25,7 @@ type DefaultAttachmentViewProps = { icon?: IconAsset; + /** Whether the attachment is deleted */ isDeleted?: boolean; }; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 5e1af81b80a5..1a63c9bfd6b8 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -77,7 +77,7 @@ type AttachmentViewProps = AttachmentViewOnyxProps & /* Flag indicating whether the attachment has been uploaded. */ isUploaded?: boolean; - /** Any additional styles to apply */ + /** Whether the attachment is deleted */ isDeleted?: boolean; }; diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx index 96bcf8b5896e..fd9861340cff 100644 --- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx +++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx @@ -24,7 +24,7 @@ type VideoPlayerThumbnailProps = { /** Accessibility label for the thumbnail. */ accessibilityLabel: string; - /** Whether the image is deleted */ + /** Whether the video is deleted */ isDeleted?: boolean; }; diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx index a56fedd8fb13..10d3e753f38a 100644 --- a/src/components/VideoPlayerPreview/index.tsx +++ b/src/components/VideoPlayerPreview/index.tsx @@ -39,7 +39,7 @@ type VideoPlayerPreviewProps = { /** Callback executed when modal is pressed. */ onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise; - /** Whether the image is deleted */ + /** Whether the video is deleted */ isDeleted?: boolean; }; diff --git a/src/styles/index.ts b/src/styles/index.ts index 9f93c799abb5..8db89c98b2e6 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1111,6 +1111,17 @@ const styles = (theme: ThemeColors) => height: 25, }, + deletedIndicator: { + zIndex: 20, + width: '100%', + height: '100%', + overflow: 'hidden', + }, + + deletedIndicatorOverlay: { + opacity: 0.8, + }, + // Actions actionAvatar: { borderRadius: 20, From 01003146a058a2a1048164f67889947ec1a14ba6 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 25 Aug 2024 03:10:05 +0530 Subject: [PATCH 05/10] add AttachmentDeletedIndicator.tsx Signed-off-by: krishna2323 --- src/components/AttachmentDeletedIndicator.tsx | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/components/AttachmentDeletedIndicator.tsx diff --git a/src/components/AttachmentDeletedIndicator.tsx b/src/components/AttachmentDeletedIndicator.tsx new file mode 100644 index 000000000000..1866e5357daf --- /dev/null +++ b/src/components/AttachmentDeletedIndicator.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; +import useNetwork from '@hooks/useNetwork'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; + +type AttachmentOfflineIndicatorProps = { + /** Any additional styles to apply */ + containerStyles?: StyleProp; +}; + +function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicatorProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {isOffline} = useNetwork(); + + if (!isOffline) { + return null; + } + + return ( + <> + + + + + + ); +} + +AttachmentDeletedIndicator.displayName = 'AttachmentDeletedIndicator'; + +export default AttachmentDeletedIndicator; From 15353c7076a8e3ac00f08340e1bcfa908656c1e0 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 1 Sep 2024 12:05:17 +0530 Subject: [PATCH 06/10] fix icon colot. Signed-off-by: krishna2323 --- src/components/AttachmentDeletedIndicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentDeletedIndicator.tsx b/src/components/AttachmentDeletedIndicator.tsx index 1866e5357daf..ada5b82f6f84 100644 --- a/src/components/AttachmentDeletedIndicator.tsx +++ b/src/components/AttachmentDeletedIndicator.tsx @@ -29,7 +29,7 @@ function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicato /> Date: Mon, 23 Sep 2024 15:19:53 +0530 Subject: [PATCH 07/10] fix lint issues. Signed-off-by: krishna2323 --- src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx index 094032fd40a4..d61dec997ab1 100644 --- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx +++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx @@ -53,12 +53,12 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel, isDele onPress={onPress} onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} onPressOut={() => ControlSelection.unblock()} - onLongPress={(event) => + onLongPress={(event) => { if (isDisabled) { return; } - showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)) - } + showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)); + }} shouldUseHapticsOnLongPress > From 6ca5df9ee44b09936077861b593a01569a07f2ce Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 27 Sep 2024 05:40:53 +0530 Subject: [PATCH 08/10] add suggested changes. Signed-off-by: krishna2323 --- .../AnchorForAttachmentsOnly/types.ts | 2 +- src/components/AttachmentDeletedIndicator.tsx | 18 +++++++++++++----- .../DefaultAttachmentView/index.tsx | 2 +- .../Attachments/AttachmentView/index.tsx | 2 +- .../HTMLRenderers/AnchorRenderer.tsx | 6 +++--- .../HTMLRenderers/ImageRenderer.tsx | 5 ++--- .../HTMLRenderers/VideoRenderer.tsx | 4 ++-- .../HTMLEngineProvider/htmlEngineUtils.ts | 10 +++++++++- src/components/ThumbnailImage.tsx | 2 +- .../VideoPlayerThumbnail.tsx | 2 +- src/components/VideoPlayerPreview/index.tsx | 2 +- src/styles/index.ts | 2 +- 12 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/types.ts b/src/components/AnchorForAttachmentsOnly/types.ts index 89932a95aa04..67a5bb532c27 100644 --- a/src/components/AnchorForAttachmentsOnly/types.ts +++ b/src/components/AnchorForAttachmentsOnly/types.ts @@ -10,7 +10,7 @@ type AnchorForAttachmentsOnlyProps = { /** Any additional styles to apply */ style?: StyleProp; - /** Whether the attachment is deleted */ + /** Whether the attachment is deleted */ isDeleted?: boolean; }; diff --git a/src/components/AttachmentDeletedIndicator.tsx b/src/components/AttachmentDeletedIndicator.tsx index ada5b82f6f84..06e700c2fd73 100644 --- a/src/components/AttachmentDeletedIndicator.tsx +++ b/src/components/AttachmentDeletedIndicator.tsx @@ -8,12 +8,12 @@ import variables from '@styles/variables'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -type AttachmentOfflineIndicatorProps = { - /** Any additional styles to apply */ +type AttachmentDeletedIndicatorProps = { + /** Additional styles for container */ containerStyles?: StyleProp; }; -function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicatorProps) { +function AttachmentDeletedIndicator({containerStyles}: AttachmentDeletedIndicatorProps) { const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); @@ -25,9 +25,17 @@ function AttachmentDeletedIndicator({containerStyles}: AttachmentOfflineIndicato return ( <> - + ); } diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx index 0a8c95971b08..7d161dc87182 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx @@ -3,6 +3,7 @@ import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import type {CustomRendererProps, TBlock} from 'react-native-render-html'; import {AttachmentContext} from '@components/AttachmentContext'; +import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils'; import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; @@ -32,9 +33,7 @@ function ImageRenderer({tnode}: ImageRendererProps) { const {translate} = useLocalize(); const htmlAttribs = tnode.attributes; - - const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; - const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; + const isDeleted = isDeletedNode(tnode); // There are two kinds of images that need to be displayed: // diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx index c8eafc4f6473..ad7ea87f4c9b 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {CustomRendererProps, TBlock} from 'react-native-render-html'; import {AttachmentContext} from '@components/AttachmentContext'; +import {isDeletedNode} from '@components/HTMLEngineProvider/htmlEngineUtils'; import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; import VideoPlayerPreview from '@components/VideoPlayerPreview'; import useCurrentReportID from '@hooks/useCurrentReportID'; @@ -25,8 +26,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) { const height = Number(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_HEIGHT_ATTRIBUTE]); const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]); const currentReportIDValue = useCurrentReportID(); - const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; - const isDeleted = 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; + const isDeleted = isDeletedNode(tnode); return ( diff --git a/src/components/HTMLEngineProvider/htmlEngineUtils.ts b/src/components/HTMLEngineProvider/htmlEngineUtils.ts index 5f082424a565..fba467add14b 100644 --- a/src/components/HTMLEngineProvider/htmlEngineUtils.ts +++ b/src/components/HTMLEngineProvider/htmlEngineUtils.ts @@ -59,4 +59,12 @@ function isChildOfH1(tnode: TNode): boolean { return isChildOfNode(tnode, (node) => node.domNode?.name !== undefined && node.domNode.name.toLowerCase() === 'h1'); } -export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1}; +/** + * Check if the parent node has deleted style. + */ +function isDeletedNode(tnode: TNode): boolean { + const parentStyle = tnode.parent?.styles?.nativeTextRet ?? {}; + return 'textDecorationLine' in parentStyle && parentStyle.textDecorationLine === 'line-through'; +} + +export {computeEmbeddedMaxWidth, isChildOfComment, isCommentTag, isChildOfH1, isDeletedNode}; diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx index 32da3d6cb6f1..24aacfbd47c5 100644 --- a/src/components/ThumbnailImage.tsx +++ b/src/components/ThumbnailImage.tsx @@ -57,7 +57,7 @@ type ThumbnailImageProps = { /** The object position of image */ objectPosition?: ImageObjectPosition; - /** Whether the image is deleted */ + /** Whether the image is deleted */ isDeleted?: boolean; }; diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx index d61dec997ab1..8103b6751d58 100644 --- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx +++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx @@ -24,7 +24,7 @@ type VideoPlayerThumbnailProps = { /** Accessibility label for the thumbnail. */ accessibilityLabel: string; - /** Whether the video is deleted */ + /** Whether the video is deleted */ isDeleted?: boolean; }; diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx index 10d3e753f38a..fb188e593949 100644 --- a/src/components/VideoPlayerPreview/index.tsx +++ b/src/components/VideoPlayerPreview/index.tsx @@ -39,7 +39,7 @@ type VideoPlayerPreviewProps = { /** Callback executed when modal is pressed. */ onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise; - /** Whether the video is deleted */ + /** Whether the video is deleted */ isDeleted?: boolean; }; diff --git a/src/styles/index.ts b/src/styles/index.ts index fbdd514f5630..43642200c737 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1111,7 +1111,7 @@ const styles = (theme: ThemeColors) => height: 25, }, - deletedIndicator: { + deletedAttachmentIndicator: { zIndex: 20, width: '100%', height: '100%', From d4a068fee53c41213993219a3025d4b52017b291 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 2 Oct 2024 07:08:13 +0530 Subject: [PATCH 09/10] fix: lint issues. Signed-off-by: krishna2323 --- .../BaseAnchorForAttachmentsOnly.tsx | 34 +++----- .../Attachments/AttachmentView/index.tsx | 82 ++++++++----------- 2 files changed, 45 insertions(+), 71 deletions(-) diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 4af09508f24f..cf8353ead352 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import AttachmentView from '@components/Attachments/AttachmentView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; @@ -13,26 +12,20 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as Download from '@userActions/Download'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Download as OnyxDownload} from '@src/types/onyx'; import type AnchorForAttachmentsOnlyProps from './types'; -type BaseAnchorForAttachmentsOnlyOnyxProps = { - /** If a file download is happening */ - download: OnyxEntry; -}; - -type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & - BaseAnchorForAttachmentsOnlyOnyxProps & { - /** Press in handler for the link */ - onPressIn?: () => void; +type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & { + /** Press in handler for the link */ + onPressIn?: () => void; - /** Press out handler for the link */ - onPressOut?: () => void; - }; + /** Press out handler for the link */ + onPressOut?: () => void; +}; -function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) { +function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut, isDeleted}: BaseAnchorForAttachmentsOnlyProps) { const sourceURLWithAuth = addEncryptedAuthTokenToURL(source); const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; + const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`); const {isOffline} = useNetwork(); const styles = useThemeStyles(); @@ -79,11 +72,4 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly'; -export default withOnyx({ - download: { - key: ({source}) => { - const sourceID = (source?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; - return `${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`; - }, - }, -})(BaseAnchorForAttachmentsOnly); +export default BaseAnchorForAttachmentsOnly; diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 25cb9e334cef..1315ddcbd889 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -2,8 +2,7 @@ import {Str} from 'expensify-common'; import React, {memo, useContext, useEffect, useState} from 'react'; import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; import type {Attachment, AttachmentSource} from '@components/Attachments/types'; import DistanceEReceipt from '@components/DistanceEReceipt'; @@ -24,63 +23,57 @@ import * as TransactionUtils from '@libs/TransactionUtils'; import type {ColorValue} from '@styles/utils/types'; import variables from '@styles/variables'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Transaction} from '@src/types/onyx'; import AttachmentViewImage from './AttachmentViewImage'; import AttachmentViewPdf from './AttachmentViewPdf'; import AttachmentViewVideo from './AttachmentViewVideo'; import DefaultAttachmentView from './DefaultAttachmentView'; import HighResolutionInfo from './HighResolutionInfo'; -type AttachmentViewOnyxProps = { - transaction: OnyxEntry; -}; - -type AttachmentViewProps = AttachmentViewOnyxProps & - Attachment & { - /** Whether this view is the active screen */ - isFocused?: boolean; +type AttachmentViewProps = Attachment & { + /** Whether this view is the active screen */ + isFocused?: boolean; - /** Function for handle on press */ - onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void; + /** Function for handle on press */ + onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void; - isUsedInAttachmentModal?: boolean; + isUsedInAttachmentModal?: boolean; - /** Flag to show/hide download icon */ - shouldShowDownloadIcon?: boolean; + /** Flag to show/hide download icon */ + shouldShowDownloadIcon?: boolean; - /** Flag to show the loading indicator */ - shouldShowLoadingSpinnerIcon?: boolean; + /** Flag to show the loading indicator */ + shouldShowLoadingSpinnerIcon?: boolean; - /** Notify parent that the UI should be modified to accommodate keyboard */ - onToggleKeyboard?: (shouldFadeOut: boolean) => void; + /** Notify parent that the UI should be modified to accommodate keyboard */ + onToggleKeyboard?: (shouldFadeOut: boolean) => void; - /** A callback when the PDF fails to load */ - onPDFLoadError?: () => void; + /** A callback when the PDF fails to load */ + onPDFLoadError?: () => void; - /** Extra styles to pass to View wrapper */ - containerStyles?: StyleProp; + /** Extra styles to pass to View wrapper */ + containerStyles?: StyleProp; - /** Denotes whether it is a workspace avatar or not */ - isWorkspaceAvatar?: boolean; + /** Denotes whether it is a workspace avatar or not */ + isWorkspaceAvatar?: boolean; - /** Denotes whether it is an icon (ex: SVG) */ - maybeIcon?: boolean; + /** Denotes whether it is an icon (ex: SVG) */ + maybeIcon?: boolean; - /** Fallback source to use in case of error */ - fallbackSource?: AttachmentSource; + /** Fallback source to use in case of error */ + fallbackSource?: AttachmentSource; - /* Whether it is hovered or not */ - isHovered?: boolean; + /* Whether it is hovered or not */ + isHovered?: boolean; - /** Whether the attachment is used as a chat attachment */ - isUsedAsChatAttachment?: boolean; + /** Whether the attachment is used as a chat attachment */ + isUsedAsChatAttachment?: boolean; - /* Flag indicating whether the attachment has been uploaded. */ - isUploaded?: boolean; + /* Flag indicating whether the attachment has been uploaded. */ + isUploaded?: boolean; - /** Whether the attachment is deleted */ - isDeleted?: boolean; - }; + /** Whether the attachment is deleted */ + isDeleted?: boolean; +}; function AttachmentView({ source, @@ -98,14 +91,15 @@ function AttachmentView({ isWorkspaceAvatar, maybeIcon, fallbackSource, - transaction, reportActionID, isHovered, duration, isUsedAsChatAttachment, isUploaded = true, isDeleted, + transactionID, }: AttachmentViewProps) { + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); @@ -301,12 +295,6 @@ function AttachmentView({ AttachmentView.displayName = 'AttachmentView'; -export default memo( - withOnyx({ - transaction: { - key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - }, - })(AttachmentView), -); +export default memo(AttachmentView); export type {AttachmentViewProps}; From a7821d12cc98f4dac99f7f9d60c36f50aa7ebf6f Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 20 Oct 2024 17:36:47 +0530 Subject: [PATCH 10/10] fix: lint issues. Signed-off-by: krishna2323 --- .../AttachmentView/DefaultAttachmentView/index.tsx | 4 +--- src/components/Attachments/AttachmentView/index.tsx | 3 --- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index 739899d8d9e3..23e13833df64 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -27,14 +27,12 @@ type DefaultAttachmentViewProps = { /** Whether the attachment is deleted */ isDeleted?: boolean; -}; -function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isDeleted}: DefaultAttachmentViewProps) { /** Flag indicating if the attachment is being uploaded. */ isUploading?: boolean; }; -function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading}: DefaultAttachmentViewProps) { +function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading, isDeleted}: DefaultAttachmentViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx index 35d0c084afa9..0af1a86992e7 100644 --- a/src/components/Attachments/AttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/index.tsx @@ -102,7 +102,6 @@ function AttachmentView({ isUsedAsChatAttachment, isUploaded = true, isDeleted, - transactionID, isUploading = false, }: AttachmentViewProps) { const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); @@ -110,8 +109,6 @@ function AttachmentView({ const {updateCurrentlyPlayingURL} = usePlaybackContext(); const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); - const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); - const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils();