[TS migration] Migrate 'IOUEditRequestReceipt' page to TypeScript

src/libs/Navigation/types.ts

@@ -283,6 +283,13 @@ type MoneyRequestNavigatorParamList = {
         iouType: string;
         reportID: string;
     };
+    [SCREENS.MONEY_REQUEST.CREATE]: {
+        action: ValueOf<typeof CONST.IOU.ACTION>;
+        iouType: ValueOf<typeof CONST.IOU.TYPE>;
+        transactionID: string;
+        reportID: string;
+        backTo: Route;
+    };
 };
 
 type NewTaskNavigatorParamList = {

src/pages/EditRequestReceiptPage.js → src/pages/EditRequestReceiptPage.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
@@ -7,23 +7,13 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import type SCREENS from '@src/SCREENS';
 import IOURequestStepScan from './iou/request/step/IOURequestStepScan';
 
-const propTypes = {
-    /** React Navigation route */
-    route: PropTypes.shape({
-        /** Params from the route */
-        params: PropTypes.shape({
-            /** The type of IOU report, i.e. bill, request, send */
-            iouType: PropTypes.string,
+type EditRequestReceiptPageProps = StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.SCAN_TAB>;
 
-            /** The report ID of the IOU */
-            reportID: PropTypes.string,
-        }),
-    }).isRequired,
-};
-
-function EditRequestReceiptPage({route}) {
+function EditRequestReceiptPage({route}: EditRequestReceiptPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDraggingOver, setIsDraggingOver] = useState(false);
@@ -50,7 +40,6 @@ function EditRequestReceiptPage({route}) {
     );
 }
 
-EditRequestReceiptPage.propTypes = propTypes;
 EditRequestReceiptPage.displayName = 'EditRequestReceiptPage';
 
 export default EditRequestReceiptPage;

src/pages/iou/ReceiptDropUI.js → src/pages/iou/ReceiptDropUI.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
@@ -9,19 +8,14 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    /** Callback to execute when a file is dropped. */
-    onDrop: PropTypes.func.isRequired,
+type ReceiptDropUIProps = {
+    /** Function to execute when an item is dropped in the drop zone. */
+    onDrop: (event: DragEvent) => void;
 
-    /** Pixels the receipt image should be shifted down to match the non-drag view UI */
-    receiptImageTopPosition: PropTypes.number,
+    receiptImageTopPosition: number;
 };
 
-const defaultProps = {
-    receiptImageTopPosition: 0,
-};
-
-function ReceiptDropUI({onDrop, receiptImageTopPosition}) {
+function ReceiptDropUI({onDrop, receiptImageTopPosition}: ReceiptDropUIProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
@@ -43,7 +37,5 @@ function ReceiptDropUI({onDrop, receiptImageTopPosition}) {
 }
 
 ReceiptDropUI.displayName = 'ReceiptDropUI';
-ReceiptDropUI.propTypes = propTypes;
-ReceiptDropUI.defaultProps = defaultProps;
 
 export default ReceiptDropUI;

src/pages/iou/request/step/IOURequestStepScan/IOURequestStepProps.tsx

@@ -0,0 +1,18 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import type {MoneyRequestNavigatorParamList} from '@libs/Navigation/types';
+import type SCREENS from '@src/SCREENS';
+import type * as OnyxTypes from '@src/types/onyx';
+
+type IOURequestStepRoute = StackScreenProps<MoneyRequestNavigatorParamList, typeof SCREENS.MONEY_REQUEST.SCAN_TAB>;
+
+type IOURequestStepReport = {
+    report: OnyxTypes.Report;
+};
+
+type IOURequestStepTransaction = {
+    transaction: OnyxTypes.Transaction;
+};
+
+type IOURequestStepProps = IOURequestStepRoute & IOURequestStepReport & IOURequestStepTransaction;
+
+export default IOURequestStepProps;

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.native.js → src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.native.tsx

@@ -1,15 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {Ref} from 'react';
 import {Camera} from 'react-native-vision-camera';
+import type {CameraDevice} from 'react-native-vision-camera';
 import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
 
-const propTypes = {
-    /* The index of the tab that contains this camera */
-    cameraTabIndex: PropTypes.number.isRequired,
+type NavigationAwareCameraProps = {
+    cameraTabIndex: number;
+    device: CameraDevice;
 };
 
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref) => {
+const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}: NavigationAwareCameraProps, ref: Ref<Camera>) => {
     const isCameraActive = useTabNavigatorFocus({tabIndex: cameraTabIndex});
 
     return (
@@ -22,7 +23,4 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref)
     );
 });
 
-NavigationAwareCamera.propTypes = propTypes;
-NavigationAwareCamera.displayName = 'NavigationAwareCamera';
-
 export default NavigationAwareCamera;

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.js → src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.tsx

@@ -1,37 +1,24 @@
-import PropTypes from 'prop-types';
-import React, {useEffect, useRef} from 'react';
+import React, {forwardRef, useEffect, useRef} from 'react';
+import type {Ref} from 'react';
 import {View} from 'react-native';
 import Webcam from 'react-webcam';
 import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
 
-const propTypes = {
-    /** Flag to turn on/off the torch/flashlight - if available */
-    torchOn: PropTypes.bool,
-
-    /** The index of the tab that contains this camera */
-    cameraTabIndex: PropTypes.number.isRequired,
-
-    /** Callback function when media stream becomes available - user granted camera permissions and camera starts to work */
-    onUserMedia: PropTypes.func,
-
-    /** Callback function passing torch/flashlight capability as bool param of the browser */
-    onTorchAvailability: PropTypes.func,
-};
-
-const defaultProps = {
-    onUserMedia: undefined,
-    onTorchAvailability: undefined,
-    torchOn: false,
+type NavigationAwareCameraProps = {
+    torchOn: boolean;
+    onTorchAvailability?: (torchAvailable: boolean) => void;
+    cameraTabIndex: number;
+    onUserMedia?: (stream: MediaStream) => void;
 };
 
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-const NavigationAwareCamera = React.forwardRef(({torchOn, onTorchAvailability, cameraTabIndex, ...props}, ref) => {
-    const trackRef = useRef(null);
+const NavigationAwareCamera = forwardRef(({torchOn, onTorchAvailability, cameraTabIndex, ...props}: NavigationAwareCameraProps, ref: Ref<Webcam>) => {
+    const trackRef = useRef<MediaStreamTrack | null>(null);
     const shouldShowCamera = useTabNavigatorFocus({
         tabIndex: cameraTabIndex,
     });
 
-    const handleOnUserMedia = (stream) => {
+    const handleOnUserMedia = (stream: MediaStream) => {
         if (props.onUserMedia) {
             props.onUserMedia(stream);
         }
@@ -73,8 +60,4 @@ const NavigationAwareCamera = React.forwardRef(({torchOn, onTorchAvailability, c
     );
 });
 
-NavigationAwareCamera.propTypes = propTypes;
-NavigationAwareCamera.displayName = 'NavigationAwareCamera';
-NavigationAwareCamera.defaultProps = defaultProps;
-
 export default NavigationAwareCamera;