From d3af70655848edc559e4e7eb520d751af93e031e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 23 Oct 2023 16:03:57 +0200 Subject: [PATCH 1/7] Migrate 'ImageWithSizeCalculation.js' component to TypeScript --- src/components/Image/index.js | 2 + ...lation.js => ImageWithSizeCalculation.tsx} | 54 +++++++------------ 2 files changed, 22 insertions(+), 34 deletions(-) rename src/components/{ImageWithSizeCalculation.js => ImageWithSizeCalculation.tsx} (65%) diff --git a/src/components/Image/index.js b/src/components/Image/index.js index 7434c16c6491..2511d916deef 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -69,4 +69,6 @@ const ImageWithOnyx = React.memo( imagePropsAreEqual, ); ImageWithOnyx.resizeMode = RESIZE_MODES; + +export {RESIZE_MODES}; export default ImageWithOnyx; diff --git a/src/components/ImageWithSizeCalculation.js b/src/components/ImageWithSizeCalculation.tsx similarity index 65% rename from src/components/ImageWithSizeCalculation.js rename to src/components/ImageWithSizeCalculation.tsx index 6aa87d07f23e..7c14d5af5d99 100644 --- a/src/components/ImageWithSizeCalculation.js +++ b/src/components/ImageWithSizeCalculation.tsx @@ -1,31 +1,23 @@ -import _ from 'underscore'; import React, {useState, useRef, useEffect} from 'react'; -import {View} from 'react-native'; -import PropTypes from 'prop-types'; +import {View, ViewStyle} from 'react-native'; +import delay from 'lodash/delay'; import Log from '../libs/Log'; import styles from '../styles/styles'; import FullscreenLoadingIndicator from './FullscreenLoadingIndicator'; -import Image from './Image'; +import Image, {RESIZE_MODES} from './Image'; -const propTypes = { +type ImageWithSizeCalculationProps = { /** Url for image to display */ - url: PropTypes.string.isRequired, + url: string; /** Any additional styles to apply */ - // eslint-disable-next-line react/forbid-prop-types - style: PropTypes.any, + style: ViewStyle; /** Callback fired when the image has been measured. */ - onMeasure: PropTypes.func, + onMeasure: (args: {width: number; height: number}) => void; /** Whether the image requires an authToken */ - isAuthTokenRequired: PropTypes.bool, -}; - -const defaultProps = { - style: {}, - onMeasure: () => {}, - isAuthTokenRequired: false, + isAuthTokenRequired: boolean; }; /** @@ -33,23 +25,19 @@ const defaultProps = { * Image size must be provided by parent via width and height props. Useful for * performing some calculation on a network image after fetching dimensions so * it can be appropriately resized. - * - * @param {Object} props - * @returns {React.Component} - * */ -function ImageWithSizeCalculation(props) { - const isLoadedRef = useRef(null); +function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}: ImageWithSizeCalculationProps) { + const isLoadedRef = useRef(null); const [isImageCached, setIsImageCached] = useState(true); const [isLoading, setIsLoading] = useState(false); const onError = () => { - Log.hmmm('Unable to fetch image to calculate size', {url: props.url}); + Log.hmmm('Unable to fetch image to calculate size', {url}); }; - const imageLoadedSuccessfully = (event) => { + const imageLoadedSuccessfully = (event: {nativeEvent: {width: number; height: number}}) => { isLoadedRef.current = true; - props.onMeasure({ + onMeasure({ width: event.nativeEvent.width, height: event.nativeEvent.height, }); @@ -57,10 +45,10 @@ function ImageWithSizeCalculation(props) { /** Delay the loader to detect whether the image is being loaded from the cache or the internet. */ useEffect(() => { - if (isLoadedRef.current || !isLoading) { + if (isLoadedRef.current ?? !isLoading) { return; } - const timeout = _.delay(() => { + const timeout = delay(() => { if (!isLoading || isLoadedRef.current) { return; } @@ -70,14 +58,14 @@ function ImageWithSizeCalculation(props) { }, [isLoading]); return ( - + { - if (isLoadedRef.current || isLoading) { + if (isLoadedRef.current ?? isLoading) { return; } setIsLoading(true); @@ -94,7 +82,5 @@ function ImageWithSizeCalculation(props) { ); } -ImageWithSizeCalculation.propTypes = propTypes; -ImageWithSizeCalculation.defaultProps = defaultProps; ImageWithSizeCalculation.displayName = 'ImageWithSizeCalculation'; export default React.memo(ImageWithSizeCalculation); From 1f8343eaf92babaeea0c220919aad39868f9bd98 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 24 Oct 2023 12:33:50 +0200 Subject: [PATCH 2/7] fix type definitions --- src/components/ImageWithSizeCalculation.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index 7c14d5af5d99..e9821a06d98b 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -1,20 +1,23 @@ import React, {useState, useRef, useEffect} from 'react'; import {View, ViewStyle} from 'react-native'; import delay from 'lodash/delay'; +import { OnLoadEvent } from 'react-native-fast-image' import Log from '../libs/Log'; import styles from '../styles/styles'; import FullscreenLoadingIndicator from './FullscreenLoadingIndicator'; import Image, {RESIZE_MODES} from './Image'; +type OnMeasure = (args: {width: number; height: number}) => void; + type ImageWithSizeCalculationProps = { /** Url for image to display */ url: string; /** Any additional styles to apply */ - style: ViewStyle; + style?: ViewStyle; /** Callback fired when the image has been measured. */ - onMeasure: (args: {width: number; height: number}) => void; + onMeasure: OnMeasure; /** Whether the image requires an authToken */ isAuthTokenRequired: boolean; @@ -35,7 +38,7 @@ function ImageWithSizeCalculation({url, style, onMeasure, isAuthTokenRequired}: Log.hmmm('Unable to fetch image to calculate size', {url}); }; - const imageLoadedSuccessfully = (event: {nativeEvent: {width: number; height: number}}) => { + const imageLoadedSuccessfully = (event: OnLoadEvent) => { isLoadedRef.current = true; onMeasure({ width: event.nativeEvent.width, From 59a84a5056c9c030fb4758f10368477698c65019 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 24 Oct 2023 12:42:58 +0200 Subject: [PATCH 3/7] fix prettier --- src/components/ImageWithSizeCalculation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index e9821a06d98b..0089d8bcd6ae 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -1,7 +1,7 @@ import React, {useState, useRef, useEffect} from 'react'; import {View, ViewStyle} from 'react-native'; import delay from 'lodash/delay'; -import { OnLoadEvent } from 'react-native-fast-image' +import {OnLoadEvent} from 'react-native-fast-image'; import Log from '../libs/Log'; import styles from '../styles/styles'; import FullscreenLoadingIndicator from './FullscreenLoadingIndicator'; From d3497ee2b23a07bcfed53c2d361f06a3dc40966f Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 25 Oct 2023 16:07:24 +0200 Subject: [PATCH 4/7] fix type definitions --- src/components/ImageWithSizeCalculation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index 0089d8bcd6ae..63faffef3358 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -1,5 +1,5 @@ import React, {useState, useRef, useEffect} from 'react'; -import {View, ViewStyle} from 'react-native'; +import {View, ViewStyle, StyleProp} from 'react-native'; import delay from 'lodash/delay'; import {OnLoadEvent} from 'react-native-fast-image'; import Log from '../libs/Log'; @@ -14,7 +14,7 @@ type ImageWithSizeCalculationProps = { url: string; /** Any additional styles to apply */ - style?: ViewStyle; + style?: StyleProp; /** Callback fired when the image has been measured. */ onMeasure: OnMeasure; From a578047037e67951d3977753e4ca7a4d4a9baa1b Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 26 Oct 2023 12:46:45 +0200 Subject: [PATCH 5/7] fix native export --- src/components/Image/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js index 9d9ad600b1d4..50c8d0c6a651 100644 --- a/src/components/Image/index.native.js +++ b/src/components/Image/index.native.js @@ -59,4 +59,5 @@ const ImageWithOnyx = withOnyx({ })(Image); ImageWithOnyx.resizeMode = RESIZE_MODES; ImageWithOnyx.resolveDimensions = resolveDimensions; +export {RESIZE_MODES}; export default ImageWithOnyx; From 5d64de5aeb9998b5a1163aefbd3876ab34015be7 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 30 Oct 2023 12:27:01 +0100 Subject: [PATCH 6/7] fix prettier --- src/components/ImageWithSizeCalculation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index d7cb364359b3..225c8e0a6b6b 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -1,6 +1,6 @@ -import React, {useState, useRef, useEffect} from 'react'; -import {View, ViewStyle, StyleProp} from 'react-native'; import delay from 'lodash/delay'; +import React, {useEffect, useRef, useState} from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; import {OnLoadEvent} from 'react-native-fast-image'; import Log from '@libs/Log'; import styles from '@styles/styles'; From 5f518243fc53e95c7ed11cef9ae6d09dce97434a Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 31 Oct 2023 14:58:07 +0100 Subject: [PATCH 7/7] remove constant export --- src/components/Image/index.js | 1 - src/components/Image/index.native.js | 2 +- src/components/ImageWithSizeCalculation.tsx | 3 ++- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Image/index.js b/src/components/Image/index.js index e973d8ca234e..ef1a69e19c12 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -70,5 +70,4 @@ const ImageWithOnyx = React.memo( ); ImageWithOnyx.resizeMode = RESIZE_MODES; -export {RESIZE_MODES}; export default ImageWithOnyx; diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.js index 884c3fa17b39..cf5320392d1b 100644 --- a/src/components/Image/index.native.js +++ b/src/components/Image/index.native.js @@ -59,5 +59,5 @@ const ImageWithOnyx = withOnyx({ })(Image); ImageWithOnyx.resizeMode = RESIZE_MODES; ImageWithOnyx.resolveDimensions = resolveDimensions; -export {RESIZE_MODES}; + export default ImageWithOnyx; diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx index 225c8e0a6b6b..fe4cc4a01bc0 100644 --- a/src/components/ImageWithSizeCalculation.tsx +++ b/src/components/ImageWithSizeCalculation.tsx @@ -5,7 +5,8 @@ import {OnLoadEvent} from 'react-native-fast-image'; import Log from '@libs/Log'; import styles from '@styles/styles'; import FullscreenLoadingIndicator from './FullscreenLoadingIndicator'; -import Image, {RESIZE_MODES} from './Image'; +import Image from './Image'; +import RESIZE_MODES from './Image/resizeModes'; type OnMeasure = (args: {width: number; height: number}) => void;