diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx similarity index 52% rename from src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js rename to src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index 6161ba140726..df8a0a30b129 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -1,6 +1,6 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import AttachmentView from '@components/Attachments/AttachmentView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext'; @@ -10,59 +10,52 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as Download from '@userActions/Download'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import {defaultProps as anchorForAttachmentsOnlyDefaultProps, propTypes as anchorForAttachmentsOnlyPropTypes} from './anchorForAttachmentsOnlyPropTypes'; - -const propTypes = { - /** Press in handler for the link */ - onPressIn: PropTypes.func, - - /** Press out handler for the link */ - onPressOut: PropTypes.func, +import type {Download as OnyxDownload} from '@src/types/onyx'; +import type AnchorForAttachmentsOnlyProps from './types'; +type BaseAnchorForAttachmentsOnlyOnyxProps = { /** If a file download is happening */ - download: PropTypes.shape({ - isDownloading: PropTypes.bool.isRequired, - }), - - ...anchorForAttachmentsOnlyPropTypes, + download: OnyxEntry; }; -const defaultProps = { - onPressIn: undefined, - onPressOut: undefined, - download: {isDownloading: false}, - ...anchorForAttachmentsOnlyDefaultProps, -}; +type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & + BaseAnchorForAttachmentsOnlyOnyxProps & { + /** Press in handler for the link */ + onPressIn?: () => void; + + /** Press out handler for the link */ + onPressOut?: () => void; + }; -function BaseAnchorForAttachmentsOnly(props) { - const sourceURL = props.source; - const sourceURLWithAuth = addEncryptedAuthTokenToURL(sourceURL); - const sourceID = (sourceURL.match(CONST.REGEX.ATTACHMENT_ID) || [])[1]; - const fileName = props.displayName; +function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', download, onPressIn, onPressOut}: BaseAnchorForAttachmentsOnlyProps) { + const sourceURLWithAuth = addEncryptedAuthTokenToURL(source); + const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; - const isDownloading = props.download && props.download.isDownloading; + const isDownloading = download?.isDownloading ?? false; return ( {({anchor, report, action, checkIfContextMenuActive}) => ( { if (isDownloading) { return; } Download.setDownload(sourceID, true); - fileDownload(sourceURLWithAuth, fileName).then(() => Download.setDownload(sourceID, false)); + fileDownload(sourceURLWithAuth, displayName).then(() => Download.setDownload(sourceID, false)); }} - onPressIn={props.onPressIn} - onPressOut={props.onPressOut} + onPressIn={onPressIn} + onPressOut={onPressOut} + // @ts-expect-error TODO: Remove this once ShowContextMenuContext (https://github.com/Expensify/App/issues/24980) is migrated to TypeScript. onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - accessibilityLabel={fileName} + accessibilityLabel={displayName} role={CONST.ROLE.BUTTON} > @@ -73,13 +66,11 @@ function BaseAnchorForAttachmentsOnly(props) { } BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly'; -BaseAnchorForAttachmentsOnly.propTypes = propTypes; -BaseAnchorForAttachmentsOnly.defaultProps = defaultProps; -export default withOnyx({ +export default withOnyx({ download: { key: ({source}) => { - const sourceID = (source.match(CONST.REGEX.ATTACHMENT_ID) || [])[1]; + const sourceID = (source?.match(CONST.REGEX.ATTACHMENT_ID) ?? [])[1]; return `${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`; }, }, diff --git a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js b/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js deleted file mode 100644 index 9452e615d31c..000000000000 --- a/src/components/AnchorForAttachmentsOnly/anchorForAttachmentsOnlyPropTypes.js +++ /dev/null @@ -1,21 +0,0 @@ -import PropTypes from 'prop-types'; -import stylePropTypes from '@styles/stylePropTypes'; - -const propTypes = { - /** The URL of the attachment */ - source: PropTypes.string, - - /** Filename for attachments. */ - displayName: PropTypes.string, - - /** Any additional styles to apply */ - style: stylePropTypes, -}; - -const defaultProps = { - source: '', - style: {}, - displayName: '', -}; - -export {propTypes, defaultProps}; diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.tsx similarity index 62% rename from src/components/AnchorForAttachmentsOnly/index.native.js rename to src/components/AnchorForAttachmentsOnly/index.native.tsx index 3277d51ec058..2e0e94bc0b88 100644 --- a/src/components/AnchorForAttachmentsOnly/index.native.js +++ b/src/components/AnchorForAttachmentsOnly/index.native.tsx @@ -1,9 +1,9 @@ import React from 'react'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes'; import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly'; +import type AnchorForAttachmentsOnlyProps from './types'; -function AnchorForAttachmentsOnly(props) { +function AnchorForAttachmentsOnly(props: AnchorForAttachmentsOnlyProps) { const styles = useThemeStyles(); return ( ; +}; + +export default AnchorForAttachmentsOnlyProps;