Convert new image files to typescript

Expensify · Jan 15, 2024 · d51126f · d51126f
1 parent 5d46092
commit d51126f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/components/Image/BaseImage.native.js → src/components/Image/BaseImage.native.tsx b/src/components/Image/BaseImage.native.js → src/components/Image/BaseImage.native.tsx
@@ -1,10 +1,15 @@
 import {Image as ExpoImage} from 'expo-image';
-import React, {useCallback} from 'react';
-import {defaultProps, imagePropTypes} from './imagePropTypes';
+import type {ImageLoadEventData} from 'expo-image';
+import {useCallback} from 'react';
+import type ImageProps from './types';
 
-function BaseImage({onLoad, ...props}) {
+function BaseImage({onLoad, ...props}: ImageProps) {
     const imageLoadedSuccessfully = useCallback(
-        (event) => {
+        (event: ImageLoadEventData) => {
+            if (!onLoad) {
+                return;
+            }
+
             // We override `onLoad`, so both web and native have the same signature
             const {width, height} = event.source;
             onLoad({nativeEvent: {width, height}});
@@ -22,8 +27,6 @@ function BaseImage({onLoad, ...props}) {
     );
 }
 
-BaseImage.propTypes = imagePropTypes;
-BaseImage.defaultProps = defaultProps;
 BaseImage.displayName = 'BaseImage';
 
 export default BaseImage;
diff --git a/src/components/Image/BaseImage.js → src/components/Image/BaseImage.tsx b/src/components/Image/BaseImage.js → src/components/Image/BaseImage.tsx
@@ -1,12 +1,17 @@
 import React, {useCallback} from 'react';
 import {Image as RNImage} from 'react-native';
-import {defaultProps, imagePropTypes} from './imagePropTypes';
+import type {ImageLoadEventData} from 'react-native';
+import type ImageProps from './types';
 
-function BaseImage({onLoad, ...props}) {
+function BaseImage({onLoad, ...props}: ImageProps) {
     const imageLoadedSuccessfully = useCallback(
-        ({nativeEvent}) => {
+        (event: {nativeEvent: ImageLoadEventData}) => {
+            if (!onLoad) {
+                return;
+            }
+
             // We override `onLoad`, so both web and native have the same signature
-            const {width, height} = nativeEvent.source;
+            const {width, height} = event.nativeEvent.source;
             onLoad({nativeEvent: {width, height}});
         },
         [onLoad],
@@ -22,8 +27,6 @@ function BaseImage({onLoad, ...props}) {
     );
 }
 
-BaseImage.propTypes = imagePropTypes;
-BaseImage.defaultProps = defaultProps;
 BaseImage.displayName = 'BaseImage';
 
 export default BaseImage;
diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts
@@ -0,0 +1,6 @@
+type ImageProps = {
+    /** Event called with image dimensions when image is loaded */
+    onLoad?: (event: {nativeEvent: {width: number; height: number}}) => void;
+};
+
+export default ImageProps;