diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 2578845914fc..443a553d4689 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -25,7 +25,9 @@ type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & { function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onPressIn, onPressOut}: 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(); @@ -35,7 +37,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => ( { if (isDownloading || isOffline || !sourceID) { return; @@ -61,6 +63,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP shouldShowDownloadIcon={!!sourceID && !isOffline} shouldShowLoadingSpinnerIcon={isDownloading} isUsedAsChatAttachment + isUploading={!sourceID} /> )} diff --git a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx index ee594f66aabc..e6ac9f9f21c7 100644 --- a/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx +++ b/src/components/Attachments/AttachmentView/DefaultAttachmentView/index.tsx @@ -24,9 +24,12 @@ type DefaultAttachmentViewProps = { containerStyles?: StyleProp; icon?: IconAsset; + + /** Flag indicating if the attachment is being uploaded. */ + isUploading?: boolean; }; -function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon}: DefaultAttachmentViewProps) { +function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = false, shouldShowDownloadIcon, containerStyles, icon, isUploading}: DefaultAttachmentViewProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -53,7 +56,7 @@ function DefaultAttachmentView({fileName = '', shouldShowLoadingSpinnerIcon = fa )} {shouldShowLoadingSpinnerIcon && ( - + ; -}; +type AttachmentViewProps = Attachment & { + /** Whether this view is the active screen */ + isFocused?: boolean; -type AttachmentViewProps = AttachmentViewOnyxProps & - 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; + /** Whether the attachment is used in attachment modal */ + 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; - }; + /** Flag indicating if the attachment is being uploaded. */ + isUploading?: boolean; +}; function AttachmentView({ source, @@ -95,16 +92,20 @@ function AttachmentView({ isWorkspaceAvatar, maybeIcon, fallbackSource, - transaction, + transactionID = '-1', reportActionID, isHovered, duration, isUsedAsChatAttachment, isUploaded = true, + isUploading = false, }: AttachmentViewProps) { const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); + + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`); + const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -288,20 +289,16 @@ function AttachmentView({ ); } AttachmentView.displayName = 'AttachmentView'; -export default memo( - withOnyx({ - transaction: { - key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, - }, - })(AttachmentView), -); +export default memo(AttachmentView); export type {AttachmentViewProps}; diff --git a/src/languages/en.ts b/src/languages/en.ts index c2ff45408d3a..7d506c74042a 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -277,6 +277,7 @@ const translations = { close: 'Close', download: 'Download', downloading: 'Downloading', + uploading: 'Uploading', pin: 'Pin', unPin: 'Unpin', back: 'Back', diff --git a/src/languages/es.ts b/src/languages/es.ts index 400e5e8880f3..c5d9adb0d1e4 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -267,6 +267,7 @@ const translations = { close: 'Cerrar', download: 'Descargar', downloading: 'Descargando', + uploading: 'Subiendo', pin: 'Fijar', unPin: 'Desfijar', back: 'Volver',