[TS migration] Migrate 'AttachmentView' and 'AttachmentCarousel' components to TypeScript

src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js → src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx

@@ -1,19 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {PixelRatio, View} from 'react-native';
+import {PixelRatio, StyleProp, View, ViewStyle} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useThemeStyles from '@styles/useThemeStyles';
 
-const propTypes = {
+type AttachmentCarouselCellRendererProps = {
     /** Cell Container styles */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    style: StyleProp<ViewStyle>;
 };
 
-const defaultProps = {
-    style: [],
-};
-
-function AttachmentCarouselCellRenderer(props) {
+function AttachmentCarouselCellRenderer(props: AttachmentCarouselCellRendererProps) {
     const styles = useThemeStyles();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
@@ -28,8 +23,6 @@ function AttachmentCarouselCellRenderer(props) {
     );
 }
 
-AttachmentCarouselCellRenderer.propTypes = propTypes;
-AttachmentCarouselCellRenderer.defaultProps = defaultProps;
 AttachmentCarouselCellRenderer.displayName = 'AttachmentCarouselCellRenderer';
 
 export default React.memo(AttachmentCarouselCellRenderer);

src/components/Attachments/AttachmentCarousel/CarouselActions.tsx

@@ -0,0 +1,33 @@
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import CONST from '@src/CONST';
+
+type CarouselActionsProps = {
+    onCycleThroughAttachments: (direction: number) => void;
+};
+
+const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
+const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT;
+
+function CarouselActions({onCycleThroughAttachments}: CarouselActionsProps) {
+    useKeyboardShortcut(shortcutLeftConfig, (e) => {
+        const target = e?.target as HTMLElement;
+        // prevents focus from highlighting around the modal
+        target?.blur();
+
+        onCycleThroughAttachments(-1);
+    });
+
+    useKeyboardShortcut(shortcutRightConfig, (e) => {
+        const target = e?.target as HTMLElement;
+        // prevents focus from highlighting around the modal
+        target?.blur();
+
+        onCycleThroughAttachments(1);
+    });
+
+    return null;
+}
+
+CarouselActions.displayName = 'CarouselActions';
+
+export default CarouselActions;

src/components/Attachments/AttachmentCarousel/CarouselButtons.js → src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx

@@ -1,45 +1,29 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
-import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import {Attachment} from './CarouselItem';
 
-const propTypes = {
-    /** Where the arrows should be visible */
-    shouldShowArrows: PropTypes.bool.isRequired,
-
-    /** The current page index */
-    page: PropTypes.number.isRequired,
-
-    /** The attachments from the carousel */
-    attachments: AttachmentCarouselViewPropTypes.attachmentsPropType.isRequired,
-
-    /** Callback to go one page back */
-    onBack: PropTypes.func.isRequired,
-    /** Callback to go one page forward */
-    onForward: PropTypes.func.isRequired,
-
-    autoHideArrow: PropTypes.func,
-    cancelAutoHideArrow: PropTypes.func,
-};
-
-const defaultProps = {
-    autoHideArrow: () => {},
-    cancelAutoHideArrow: () => {},
+type CarouselButtonsProps = {
+    shouldShowArrows: boolean;
+    page: number;
+    attachments: Attachment[];
+    onBack: () => void;
+    onForward: () => void;
+    autoHideArrow?: () => void;
+    cancelAutoHideArrow?: () => void;
 };
 
-function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow, autoHideArrow}) {
+function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow = () => {}, autoHideArrow = () => {}}: CarouselButtonsProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const isBackDisabled = page === 0;
-    const isForwardDisabled = page === _.size(attachments) - 1;
+    const isForwardDisabled = page === attachments.length - 1;
 
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -58,6 +42,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
+                            text=""
                         />
                     </View>
                 </Tooltip>
@@ -74,6 +59,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
+                            text=""
                         />
                     </View>
                 </Tooltip>
@@ -82,8 +68,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
     ) : null;
 }
 
-CarouselButtons.propTypes = propTypes;
-CarouselButtons.defaultProps = defaultProps;
 CarouselButtons.displayName = 'CarouselButtons';
 
 export default CarouselButtons;

src/components/Attachments/AttachmentCarousel/CarouselItem.js → src/components/Attachments/AttachmentCarousel/CarouselItem.tsx

@@ -1,8 +1,6 @@
-import PropTypes from 'prop-types';
 import React, {useContext, useState} from 'react';
-import {View} from 'react-native';
+import {Role, StyleProp, View, ViewStyle} from 'react-native';
 import AttachmentView from '@components/Attachments/AttachmentView';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
 import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
@@ -11,51 +9,26 @@ import useLocalize from '@hooks/useLocalize';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {Attachment} from './types';
 
-const propTypes = {
+type CarouselItemProps = {
     /** Attachment required information such as the source and file name */
-    item: PropTypes.shape({
-        /** Report action ID of the attachment */
-        reportActionID: PropTypes.string,
-
-        /** Whether source URL requires authentication */
-        isAuthTokenRequired: PropTypes.bool,
-
-        /** URL to full-sized attachment or SVG function */
-        source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
-
-        /** Additional information about the attachment file */
-        file: PropTypes.shape({
-            /** File name of the attachment */
-            name: PropTypes.string,
-        }),
-
-        /** Whether the attachment has been flagged */
-        hasBeenFlagged: PropTypes.bool,
-
-        /** The id of the transaction related to the attachment */
-        transactionID: PropTypes.string,
-    }).isRequired,
+    item: Attachment;
 
     /** Whether the attachment is currently being viewed in the carousel */
-    isFocused: PropTypes.bool.isRequired,
+    isFocused: boolean;
 
     /** onPress callback */
-    onPress: PropTypes.func,
-};
-
-const defaultProps = {
-    onPress: undefined,
+    onPress?: () => void;
 };
 
-function CarouselItem({item, isFocused, onPress}) {
+function CarouselItem({item, isFocused, onPress = undefined}: CarouselItemProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
-    // eslint-disable-next-line es/no-nullish-coalescing-operators
-    const [isHidden, setIsHidden] = useState(() => isAttachmentHidden(item.reportActionID) ?? item.hasBeenFlagged);
+    const reportAttachmentsContext = useContext(ReportAttachmentsContext);
+    const [isHidden, setIsHidden] = useState<boolean>(() => !!reportAttachmentsContext?.isAttachmentHidden(item.reportActionID ?? '') ?? item.hasBeenFlagged);
 
-    const renderButton = (style) => (
+    const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
             small
             style={style}
@@ -81,7 +54,7 @@ function CarouselItem({item, isFocused, onPress}) {
             <PressableWithoutFeedback
                 style={[styles.attachmentRevealButtonContainer]}
                 onPress={onPress}
-                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON as Role}
                 accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
             >
                 {children}
@@ -114,8 +87,7 @@ function CarouselItem({item, isFocused, onPress}) {
     );
 }
 
-CarouselItem.propTypes = propTypes;
-CarouselItem.defaultProps = defaultProps;
 CarouselItem.displayName = 'CarouselItem';
 
 export default CarouselItem;
+export type {Attachment};