diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 9e699bfe1ae3..d6be7e49bdd4 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -46,6 +46,9 @@ const propTypes = { /** Optional callback to fire when we want to do something after modal hide. */ onModalHide: PropTypes.func, + /** Optional callback to fire when we want to do something after attachment carousel changes. */ + onCarouselAttachmentChange: PropTypes.func, + /** Optional original filename when uploading */ originalFileName: PropTypes.string, @@ -81,13 +84,14 @@ const defaultProps = { report: {}, onModalShow: () => {}, onModalHide: () => {}, + onCarouselAttachmentChange: () => {}, }; function AttachmentModal(props) { const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen); const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false); const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false); - const [isAuthTokenRequired] = useState(props.isAuthTokenRequired); + const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(null); const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null); const [source, setSource] = useState(props.source); @@ -102,14 +106,21 @@ function AttachmentModal(props) { : undefined, ); + const onCarouselAttachmentChange = props.onCarouselAttachmentChange; + /** * Keeps the attachment source in sync with the attachment displayed currently in the carousel. * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string } }} attachment */ - const onNavigate = useCallback((attachment) => { - setSource(attachment.source); - setFile(attachment.file); - }, []); + const onNavigate = useCallback( + (attachment) => { + setSource(attachment.source); + setFile(attachment.file); + setIsAuthTokenRequired(attachment.isAuthTokenRequired); + onCarouselAttachmentChange(attachment); + }, + [onCarouselAttachmentChange], + ); /** * If our attachment is a PDF, return the unswipeable Modal type. diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 38e7781aedf5..c8b5dd1ae685 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/src/pages/home/report/ReportAttachments.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import AttachmentModal from '../../../components/AttachmentModal'; import Navigation from '../../../libs/Navigation/Navigation'; import * as ReportUtils from '../../../libs/ReportUtils'; +import ROUTES from '../../../ROUTES'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -30,6 +31,10 @@ function ReportAttachments(props) { report={report} source={source} onModalHide={() => Navigation.dismissModal(reportID)} + onCarouselAttachmentChange={(attachment) => { + const route = ROUTES.getReportAttachmentRoute(reportID, attachment.source); + Navigation.navigate(route); + }} /> ); }