[TS migration] Migrate AnchorForAttachmentsOnly component

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js → 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<OnyxDownload>;
 };
 
-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 (
         <ShowContextMenuContext.Consumer>
             {({anchor, report, action, checkIfContextMenuActive}) => (
                 <PressableWithoutFeedback
-                    style={props.style}
+                    style={style}
                     onPress={() => {
                         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}
                 >
                     <AttachmentView
+                        // @ts-expect-error TODO: Remove this once AttachmentView (https://github.com/Expensify/App/issues/25150) is migrated to TypeScript.
                         source={sourceURLWithAuth}
-                        file={{name: fileName}}
+                        file={{name: displayName}}
                         shouldShowDownloadIcon
                         shouldShowLoadingSpinnerIcon={isDownloading}
                     />
@@ -73,13 +66,11 @@ function BaseAnchorForAttachmentsOnly(props) {
 }
 
 BaseAnchorForAttachmentsOnly.displayName = 'BaseAnchorForAttachmentsOnly';
-BaseAnchorForAttachmentsOnly.propTypes = propTypes;
-BaseAnchorForAttachmentsOnly.defaultProps = defaultProps;
 
-export default withOnyx({
+export default withOnyx<BaseAnchorForAttachmentsOnlyProps, BaseAnchorForAttachmentsOnlyOnyxProps>({
     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}`;
         },
     },

src/components/AnchorForAttachmentsOnly/index.native.js → 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 (
         <BaseAnchorForAttachmentsOnly
@@ -14,8 +14,6 @@ function AnchorForAttachmentsOnly(props) {
     );
 }
 
-AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
-AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
 AnchorForAttachmentsOnly.displayName = 'AnchorForAttachmentsOnly';
 
 export default AnchorForAttachmentsOnly;

src/components/AnchorForAttachmentsOnly/index.js → src/components/AnchorForAttachmentsOnly/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
+import type AnchorForAttachmentsOnlyProps from './types';
 
-function AnchorForAttachmentsOnly(props) {
+function AnchorForAttachmentsOnly(props: AnchorForAttachmentsOnlyProps) {
     return (
         <BaseAnchorForAttachmentsOnly
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -15,8 +15,6 @@ function AnchorForAttachmentsOnly(props) {
     );
 }
 
-AnchorForAttachmentsOnly.propTypes = anchorForAttachmentsOnlyPropTypes.propTypes;
-AnchorForAttachmentsOnly.defaultProps = anchorForAttachmentsOnlyPropTypes.defaultProps;
 AnchorForAttachmentsOnly.displayName = 'AnchorForAttachmentsOnly';
 
 export default AnchorForAttachmentsOnly;

src/components/AnchorForAttachmentsOnly/types.ts

@@ -0,0 +1,14 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+type AnchorForAttachmentsOnlyProps = {
+    /** The URL of the attachment */
+    source?: string;
+
+    /** Filename for attachments. */
+    displayName?: string;
+
+    /** Any additional styles to apply */
+    style?: StyleProp<ViewStyle>;
+};
+
+export default AnchorForAttachmentsOnlyProps;