From f67e7532a59c496eeeba6708070c43033aae2e71 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 13 Nov 2023 09:11:22 +0100 Subject: [PATCH 001/470] migrate resizeModes to TypeScript --- src/components/Image/{resizeModes.js => resizeModes.ts} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/Image/{resizeModes.js => resizeModes.ts} (92%) diff --git a/src/components/Image/resizeModes.js b/src/components/Image/resizeModes.ts similarity index 92% rename from src/components/Image/resizeModes.js rename to src/components/Image/resizeModes.ts index e6cc699a2fe3..246793a9e3a3 100644 --- a/src/components/Image/resizeModes.js +++ b/src/components/Image/resizeModes.ts @@ -3,6 +3,6 @@ const RESIZE_MODES = { cover: 'cover', stretch: 'stretch', center: 'center', -}; +} as const; export default RESIZE_MODES; From ba4eda894774c0c2c37829623b55e49fee35006e Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 13 Nov 2023 09:11:42 +0100 Subject: [PATCH 002/470] start migrating Image to TypeScript --- src/components/Image/{index.js => index.tsx} | 6 ++- src/components/Image/types.ts | 41 ++++++++++++++++++++ 2 files changed, 45 insertions(+), 2 deletions(-) rename src/components/Image/{index.js => index.tsx} (92%) create mode 100644 src/components/Image/types.ts diff --git a/src/components/Image/index.js b/src/components/Image/index.tsx similarity index 92% rename from src/components/Image/index.js rename to src/components/Image/index.tsx index ef1a69e19c12..68f289b3bef0 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.tsx @@ -6,8 +6,10 @@ import _ from 'underscore'; import ONYXKEYS from '@src/ONYXKEYS'; import {defaultProps, imagePropTypes} from './imagePropTypes'; import RESIZE_MODES from './resizeModes'; +import ImageProps from './types'; -function Image(props) { +function Image(props: ImageProps) { + console.log('*** I RENDER ***', props); const {source: propsSource, isAuthTokenRequired, onLoad, session} = props; /** * Check if the image source is a URL - if so the `encryptedAuthToken` is appended @@ -19,7 +21,7 @@ function Image(props) { // in the headers of the image request so the authToken is added as a query param. // On native the authToken IS passed in the image request headers const authToken = lodashGet(session, 'encryptedAuthToken', null); - return {uri: `${propsSource.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; + return {uri: `${propsSource?.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; } return propsSource; // The session prop is not required, as it causes the image to reload whenever the session changes. For more information, please refer to issue #26034. diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts new file mode 100644 index 000000000000..99ebd0bc0e8a --- /dev/null +++ b/src/components/Image/types.ts @@ -0,0 +1,41 @@ +import {ImageResizeMode, ImageSourcePropType, ImageStyle, StyleProp} from 'react-native'; +import {OnLoadEvent} from 'react-native-fast-image'; + +type ImageProps = { + /** Styles for the Image */ + style?: StyleProp; + + /** The static asset or URI source of the image */ + source: ImageSourcePropType; + + /** Should an auth token be included in the image request */ + isAuthTokenRequired: boolean; + + /** How should the image fit within its container */ + resizeMode: ImageResizeMode; + + /** Event for when the image begins loading */ + onLoadStart: () => void; + + /** Event for when the image finishes loading */ + onLoadEnd: () => void; + + /** Event for when the image is fully loaded and returns the natural dimensions of the image */ + onLoad: (event: OnLoadEvent) => void; + + /** Progress events while the image is downloading */ + onProgress: () => void; + + /* Onyx Props */ + /** Session info for the currently logged in user. */ + session: { + /** Currently logged in user authToken */ + authToken?: string; + accountId?: number; + email?: string; + encryptedAuthToken?: string; + loading: boolean; + }; +}; + +export default ImageProps; From 98bd9e171bbf0e0c6c3791bff285c5c36c254c03 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 13 Nov 2023 14:00:40 +0100 Subject: [PATCH 003/470] migrate index.js to TypeScript --- src/components/Image/index.tsx | 35 ++++++++++++++-------------------- src/components/Image/types.ts | 27 +++++++++++++------------- 2 files changed, 27 insertions(+), 35 deletions(-) diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index 68f289b3bef0..d161d89dcbdb 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -1,26 +1,23 @@ -import lodashGet from 'lodash/get'; import React, {useEffect, useMemo} from 'react'; import {Image as RNImage} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import ONYXKEYS from '@src/ONYXKEYS'; -import {defaultProps, imagePropTypes} from './imagePropTypes'; import RESIZE_MODES from './resizeModes'; -import ImageProps from './types'; +import {ImageOnyxProps, ImageProps, ImagePropsWithOnyx} from './types'; -function Image(props: ImageProps) { - console.log('*** I RENDER ***', props); - const {source: propsSource, isAuthTokenRequired, onLoad, session} = props; +function Image(props: ImagePropsWithOnyx) { + const {source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps} = props; /** * Check if the image source is a URL - if so the `encryptedAuthToken` is appended * to the source. */ const source = useMemo(() => { - if (isAuthTokenRequired) { - // There is currently a `react-native-web` bug preventing the authToken being passed - // in the headers of the image request so the authToken is added as a query param. - // On native the authToken IS passed in the image request headers - const authToken = lodashGet(session, 'encryptedAuthToken', null); + // There is currently a `react-native-web` bug preventing the authToken being passed + // in the headers of the image request so the authToken is added as a query param. + // On native the authToken IS passed in the image request headers + const authToken = session?.encryptedAuthToken ?? null; + + if (isAuthTokenRequired && authToken && typeof propsSource !== 'number') { return {uri: `${propsSource?.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; } return propsSource; @@ -35,7 +32,7 @@ function Image(props: ImageProps) { useEffect(() => { // If an onLoad callback was specified then manually call it and pass // the natural image dimensions to match the native API - if (onLoad == null) { + if (onLoad == null || typeof source === 'number' || !source.uri) { return; } RNImage.getSize(source.uri, (width, height) => { @@ -43,9 +40,6 @@ function Image(props: ImageProps) { }); }, [onLoad, source]); - // Omit the props which the underlying RNImage won't use - const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']); - return ( ({ session: { key: ONYXKEYS.SESSION, }, })(Image), imagePropsAreEqual, ); -ImageWithOnyx.resizeMode = RESIZE_MODES; export default ImageWithOnyx; diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index 99ebd0bc0e8a..e89fc81125cf 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -1,12 +1,20 @@ -import {ImageResizeMode, ImageSourcePropType, ImageStyle, StyleProp} from 'react-native'; +import {ImageRequireSource, ImageResizeMode, ImageStyle, ImageURISource, StyleProp} from 'react-native'; import {OnLoadEvent} from 'react-native-fast-image'; +import {OnyxEntry} from 'react-native-onyx'; +import {Session} from '@src/types/onyx'; + +type ImageOnyxProps = { + /* Onyx Props */ + /** Session info for the currently logged in user. */ + session: OnyxEntry; +}; type ImageProps = { /** Styles for the Image */ style?: StyleProp; /** The static asset or URI source of the image */ - source: ImageSourcePropType; + source: ImageURISource | ImageRequireSource; /** Should an auth token be included in the image request */ isAuthTokenRequired: boolean; @@ -25,17 +33,8 @@ type ImageProps = { /** Progress events while the image is downloading */ onProgress: () => void; - - /* Onyx Props */ - /** Session info for the currently logged in user. */ - session: { - /** Currently logged in user authToken */ - authToken?: string; - accountId?: number; - email?: string; - encryptedAuthToken?: string; - loading: boolean; - }; }; -export default ImageProps; +type ImagePropsWithOnyx = ImageOnyxProps & ImageProps; + +export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx}; From 1e9542124ffe74af8e8d1000779f0e002267fa2c Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 14 Nov 2023 09:14:32 +0100 Subject: [PATCH 004/470] migrate index.native.js to TypeScript --- .../{index.native.js => index.native.tsx} | 34 ++++++++++--------- src/components/Image/types.ts | 8 ++--- 2 files changed, 22 insertions(+), 20 deletions(-) rename src/components/Image/{index.native.js => index.native.tsx} (55%) diff --git a/src/components/Image/index.native.js b/src/components/Image/index.native.tsx similarity index 55% rename from src/components/Image/index.native.js rename to src/components/Image/index.native.tsx index cf5320392d1b..0acf57d099a9 100644 --- a/src/components/Image/index.native.js +++ b/src/components/Image/index.native.tsx @@ -1,35 +1,35 @@ -import lodashGet from 'lodash/get'; import React from 'react'; -import RNFastImage from 'react-native-fast-image'; +import {ImageRequireSource, ImageURISource} from 'react-native'; +import RNFastImage, {Source} from 'react-native-fast-image'; import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import {defaultProps, imagePropTypes} from './imagePropTypes'; import RESIZE_MODES from './resizeModes'; +import {ImageOnyxProps, ImagePropsWithOnyx} from './types'; -const dimensionsCache = new Map(); +const dimensionsCache = new Map(); -function resolveDimensions(key) { +function resolveDimensions(key: string) { return dimensionsCache.get(key); } -function Image(props) { +function Image(props: ImagePropsWithOnyx) { // eslint-disable-next-line react/destructuring-assignment const {source, isAuthTokenRequired, session, ...rest} = props; - let imageSource = source; - if (source && source.uri && typeof source.uri === 'number') { + let imageSource: Omit | ImageRequireSource | Source = source; + if (typeof source !== 'number' && typeof source.uri === 'number') { imageSource = source.uri; } - if (typeof imageSource !== 'number' && isAuthTokenRequired) { - const authToken = lodashGet(props, 'session.encryptedAuthToken', null); + if (typeof source !== 'number' && isAuthTokenRequired) { + const authToken = props.session?.encryptedAuthToken ?? null; imageSource = { ...source, headers: authToken ? { [CONST.CHAT_ATTACHMENT_TOKEN_KEY]: authToken, } - : null, + : undefined, }; } @@ -39,6 +39,9 @@ function Image(props) { {...rest} source={imageSource} onLoad={(evt) => { + if (typeof source === 'number' || !source.uri) { + return; + } const {width, height} = evt.nativeEvent; dimensionsCache.set(source.uri, {width, height}); if (props.onLoad) { @@ -49,15 +52,14 @@ function Image(props) { ); } -Image.propTypes = imagePropTypes; -Image.defaultProps = defaultProps; Image.displayName = 'Image'; -const ImageWithOnyx = withOnyx({ +Image.resizeMode = RESIZE_MODES; +Image.resolveDimensions = resolveDimensions; + +const ImageWithOnyx = withOnyx({ session: { key: ONYXKEYS.SESSION, }, })(Image); -ImageWithOnyx.resizeMode = RESIZE_MODES; -ImageWithOnyx.resolveDimensions = resolveDimensions; export default ImageWithOnyx; diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index e89fc81125cf..d2cd31a75f0d 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -1,5 +1,5 @@ import {ImageRequireSource, ImageResizeMode, ImageStyle, ImageURISource, StyleProp} from 'react-native'; -import {OnLoadEvent} from 'react-native-fast-image'; +import {ImageStyle as FastImageStyle, OnLoadEvent, ResizeMode, Source} from 'react-native-fast-image'; import {OnyxEntry} from 'react-native-onyx'; import {Session} from '@src/types/onyx'; @@ -11,16 +11,16 @@ type ImageOnyxProps = { type ImageProps = { /** Styles for the Image */ - style?: StyleProp; + style?: StyleProp; /** The static asset or URI source of the image */ - source: ImageURISource | ImageRequireSource; + source: Omit | ImageRequireSource | Omit; /** Should an auth token be included in the image request */ isAuthTokenRequired: boolean; /** How should the image fit within its container */ - resizeMode: ImageResizeMode; + resizeMode: ImageResizeMode & ResizeMode; /** Event for when the image begins loading */ onLoadStart: () => void; From ed90b35e0d51391264838b3df499b25ddce1b3be Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 14 Nov 2023 10:36:06 +0100 Subject: [PATCH 005/470] remove unnecessary js files --- src/components/Image/imagePropTypes.js | 51 ------------------- src/components/Image/sourcePropTypes/index.js | 11 ---- .../Image/sourcePropTypes/index.native.js | 10 ---- 3 files changed, 72 deletions(-) delete mode 100644 src/components/Image/imagePropTypes.js delete mode 100644 src/components/Image/sourcePropTypes/index.js delete mode 100644 src/components/Image/sourcePropTypes/index.native.js diff --git a/src/components/Image/imagePropTypes.js b/src/components/Image/imagePropTypes.js deleted file mode 100644 index 78bd48ba47ec..000000000000 --- a/src/components/Image/imagePropTypes.js +++ /dev/null @@ -1,51 +0,0 @@ -import PropTypes from 'prop-types'; -import stylePropTypes from '@styles/stylePropTypes'; -import RESIZE_MODES from './resizeModes'; -import sourcePropTypes from './sourcePropTypes'; - -const imagePropTypes = { - /** Styles for the Image */ - style: stylePropTypes, - - /** The static asset or URI source of the image */ - source: sourcePropTypes.isRequired, - - /** Should an auth token be included in the image request */ - isAuthTokenRequired: PropTypes.bool, - - /** How should the image fit within its container */ - resizeMode: PropTypes.string, - - /** Event for when the image begins loading */ - onLoadStart: PropTypes.func, - - /** Event for when the image finishes loading */ - onLoadEnd: PropTypes.func, - - /** Event for when the image is fully loaded and returns the natural dimensions of the image */ - onLoad: PropTypes.func, - - /** Progress events while the image is downloading */ - onProgress: PropTypes.func, - - /* Onyx Props */ - /** Session info for the currently logged in user. */ - session: PropTypes.shape({ - /** Currently logged in user authToken */ - authToken: PropTypes.string, - }), -}; - -const defaultProps = { - style: [], - session: { - authToken: null, - }, - isAuthTokenRequired: false, - resizeMode: RESIZE_MODES.cover, - onLoadStart: () => {}, - onLoadEnd: () => {}, - onLoad: () => {}, -}; - -export {imagePropTypes, defaultProps}; diff --git a/src/components/Image/sourcePropTypes/index.js b/src/components/Image/sourcePropTypes/index.js deleted file mode 100644 index 99e88b5cf343..000000000000 --- a/src/components/Image/sourcePropTypes/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import PropTypes from 'prop-types'; - -export default PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ - uri: PropTypes.string.isRequired, - // eslint-disable-next-line react/forbid-prop-types - headers: PropTypes.object, - }), - PropTypes.string, -]); diff --git a/src/components/Image/sourcePropTypes/index.native.js b/src/components/Image/sourcePropTypes/index.native.js deleted file mode 100644 index 629b21852613..000000000000 --- a/src/components/Image/sourcePropTypes/index.native.js +++ /dev/null @@ -1,10 +0,0 @@ -import PropTypes from 'prop-types'; - -export default PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ - uri: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - // eslint-disable-next-line react/forbid-prop-types - headers: PropTypes.object, - }), -]); From c1d0c2c6885960897ed7e9c547a11262b5347271 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 14 Nov 2023 10:37:14 +0100 Subject: [PATCH 006/470] extract map type --- src/components/Image/index.native.tsx | 4 ++-- src/components/Image/types.ts | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index 0acf57d099a9..b9c36c7d1b9e 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -5,9 +5,9 @@ import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; -import {ImageOnyxProps, ImagePropsWithOnyx} from './types'; +import {DimensionsCacheValue, ImageOnyxProps, ImagePropsWithOnyx} from './types'; -const dimensionsCache = new Map(); +const dimensionsCache = new Map(); function resolveDimensions(key: string) { return dimensionsCache.get(key); diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index d2cd31a75f0d..5c46e25e8d12 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -37,4 +37,9 @@ type ImageProps = { type ImagePropsWithOnyx = ImageOnyxProps & ImageProps; -export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx}; +type DimensionsCacheValue = { + width: number; + height: number; +}; + +export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx, DimensionsCacheValue}; From 46c9f9269ce4d3988677757256b2da53fc0586d6 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 14 Nov 2023 11:17:21 +0100 Subject: [PATCH 007/470] bring back optional props --- src/components/Image/types.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index 5c46e25e8d12..d91345b1690d 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -17,22 +17,25 @@ type ImageProps = { source: Omit | ImageRequireSource | Omit; /** Should an auth token be included in the image request */ - isAuthTokenRequired: boolean; + isAuthTokenRequired?: boolean; /** How should the image fit within its container */ - resizeMode: ImageResizeMode & ResizeMode; + resizeMode?: ImageResizeMode & ResizeMode; /** Event for when the image begins loading */ - onLoadStart: () => void; + onLoadStart?: () => void; /** Event for when the image finishes loading */ - onLoadEnd: () => void; + onLoadEnd?: () => void; + + /** Error handler */ + onError?: () => void; /** Event for when the image is fully loaded and returns the natural dimensions of the image */ - onLoad: (event: OnLoadEvent) => void; + onLoad?: (event: OnLoadEvent) => void; /** Progress events while the image is downloading */ - onProgress: () => void; + onProgress?: () => void; }; type ImagePropsWithOnyx = ImageOnyxProps & ImageProps; From 0041ba83f1011b334256e2313b9d6e75205ff1eb Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 14 Nov 2023 12:16:36 +0100 Subject: [PATCH 008/470] destructure props, add return types --- src/components/Image/index.native.tsx | 13 +++++-------- src/components/Image/index.tsx | 3 +-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index b9c36c7d1b9e..2196eaa17631 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -9,20 +9,17 @@ import {DimensionsCacheValue, ImageOnyxProps, ImagePropsWithOnyx} from './types' const dimensionsCache = new Map(); -function resolveDimensions(key: string) { +function resolveDimensions(key: string): DimensionsCacheValue | undefined { return dimensionsCache.get(key); } -function Image(props: ImagePropsWithOnyx) { - // eslint-disable-next-line react/destructuring-assignment - const {source, isAuthTokenRequired, session, ...rest} = props; - +function Image({source, isAuthTokenRequired, session, ...rest}: ImagePropsWithOnyx) { let imageSource: Omit | ImageRequireSource | Source = source; if (typeof source !== 'number' && typeof source.uri === 'number') { imageSource = source.uri; } if (typeof source !== 'number' && isAuthTokenRequired) { - const authToken = props.session?.encryptedAuthToken ?? null; + const authToken = session?.encryptedAuthToken ?? null; imageSource = { ...source, headers: authToken @@ -44,8 +41,8 @@ function Image(props: ImagePropsWithOnyx) { } const {width, height} = evt.nativeEvent; dimensionsCache.set(source.uri, {width, height}); - if (props.onLoad) { - props.onLoad(evt); + if (rest.onLoad) { + rest.onLoad(evt); } }} /> diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index d161d89dcbdb..9da6020f7fb9 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -5,8 +5,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; import {ImageOnyxProps, ImageProps, ImagePropsWithOnyx} from './types'; -function Image(props: ImagePropsWithOnyx) { - const {source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps} = props; +function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps}: ImagePropsWithOnyx) { /** * Check if the image source is a URL - if so the `encryptedAuthToken` is appended * to the source. From b44660936a731c44db6b9ac173e5169d6bef5fba Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 15 Nov 2023 08:43:43 +0100 Subject: [PATCH 009/470] extract source type, improve if statements --- src/components/Image/index.native.tsx | 7 +++---- src/components/Image/index.tsx | 6 +++--- src/components/Image/types.ts | 4 +++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index 2196eaa17631..70be8f9f995e 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import {ImageRequireSource, ImageURISource} from 'react-native'; -import RNFastImage, {Source} from 'react-native-fast-image'; +import RNFastImage from 'react-native-fast-image'; import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; -import {DimensionsCacheValue, ImageOnyxProps, ImagePropsWithOnyx} from './types'; +import {DimensionsCacheValue, FastImageSource, ImageOnyxProps, ImagePropsWithOnyx} from './types'; const dimensionsCache = new Map(); @@ -14,7 +13,7 @@ function resolveDimensions(key: string): DimensionsCacheValue | undefined { } function Image({source, isAuthTokenRequired, session, ...rest}: ImagePropsWithOnyx) { - let imageSource: Omit | ImageRequireSource | Source = source; + let imageSource: FastImageSource = source; if (typeof source !== 'number' && typeof source.uri === 'number') { imageSource = source.uri; } diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index 9da6020f7fb9..61a11e31f163 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -16,8 +16,8 @@ function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...fo // On native the authToken IS passed in the image request headers const authToken = session?.encryptedAuthToken ?? null; - if (isAuthTokenRequired && authToken && typeof propsSource !== 'number') { - return {uri: `${propsSource?.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; + if (isAuthTokenRequired && authToken && typeof propsSource !== 'number' && propsSource.uri) { + return {uri: `${propsSource.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; } return propsSource; // The session prop is not required, as it causes the image to reload whenever the session changes. For more information, please refer to issue #26034. @@ -31,7 +31,7 @@ function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...fo useEffect(() => { // If an onLoad callback was specified then manually call it and pass // the natural image dimensions to match the native API - if (onLoad == null || typeof source === 'number' || !source.uri) { + if (typeof onLoad !== 'function' || typeof source === 'number' || !source.uri) { return; } RNImage.getSize(source.uri, (width, height) => { diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index d91345b1690d..3edf97b15e71 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -45,4 +45,6 @@ type DimensionsCacheValue = { height: number; }; -export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx, DimensionsCacheValue}; +type FastImageSource = Omit | ImageRequireSource | Source; + +export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx, DimensionsCacheValue, FastImageSource}; From 21c79807f87386247df859426101a6ff56ef357a Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 15 Nov 2023 12:48:51 +0100 Subject: [PATCH 010/470] change Image prop types names --- src/components/Image/index.native.tsx | 6 +++--- src/components/Image/index.tsx | 8 ++++---- src/components/Image/types.ts | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index 70be8f9f995e..d75b768b27b6 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; -import {DimensionsCacheValue, FastImageSource, ImageOnyxProps, ImagePropsWithOnyx} from './types'; +import {DimensionsCacheValue, FastImageSource, ImageOnyxProps, ImageProps} from './types'; const dimensionsCache = new Map(); @@ -12,7 +12,7 @@ function resolveDimensions(key: string): DimensionsCacheValue | undefined { return dimensionsCache.get(key); } -function Image({source, isAuthTokenRequired, session, ...rest}: ImagePropsWithOnyx) { +function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { let imageSource: FastImageSource = source; if (typeof source !== 'number' && typeof source.uri === 'number') { imageSource = source.uri; @@ -52,7 +52,7 @@ Image.displayName = 'Image'; Image.resizeMode = RESIZE_MODES; Image.resolveDimensions = resolveDimensions; -const ImageWithOnyx = withOnyx({ +const ImageWithOnyx = withOnyx({ session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index 61a11e31f163..ecf1d8fb504c 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -3,9 +3,9 @@ import {Image as RNImage} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; -import {ImageOnyxProps, ImageProps, ImagePropsWithOnyx} from './types'; +import {ImageOnyxProps, ImageOwnProps, ImageProps} from './types'; -function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps}: ImagePropsWithOnyx) { +function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps}: ImageProps) { /** * Check if the image source is a URL - if so the `encryptedAuthToken` is appended * to the source. @@ -48,7 +48,7 @@ function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...fo ); } -function imagePropsAreEqual(prevProps: ImageProps, nextProps: ImageProps) { +function imagePropsAreEqual(prevProps: ImageOwnProps, nextProps: ImageOwnProps) { return prevProps.source === nextProps.source; } @@ -56,7 +56,7 @@ Image.resizeMode = RESIZE_MODES; Image.displayName = 'Image'; const ImageWithOnyx = React.memo( - withOnyx({ + withOnyx({ session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index 3edf97b15e71..2ddf3975af8c 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -9,7 +9,7 @@ type ImageOnyxProps = { session: OnyxEntry; }; -type ImageProps = { +type ImageOwnProps = { /** Styles for the Image */ style?: StyleProp; @@ -38,7 +38,7 @@ type ImageProps = { onProgress?: () => void; }; -type ImagePropsWithOnyx = ImageOnyxProps & ImageProps; +type ImageProps = ImageOnyxProps & ImageOwnProps; type DimensionsCacheValue = { width: number; @@ -47,4 +47,4 @@ type DimensionsCacheValue = { type FastImageSource = Omit | ImageRequireSource | Source; -export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx, DimensionsCacheValue, FastImageSource}; +export type {ImageOwnProps, ImageOnyxProps, ImageProps, DimensionsCacheValue, FastImageSource}; From f11591421b72221fa191c0b6311898d417161751 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Wed, 15 Nov 2023 13:41:31 +0100 Subject: [PATCH 011/470] bring back imageSource to if statement --- src/components/Image/index.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index d75b768b27b6..981b8c1eaf2e 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -17,7 +17,7 @@ function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { if (typeof source !== 'number' && typeof source.uri === 'number') { imageSource = source.uri; } - if (typeof source !== 'number' && isAuthTokenRequired) { + if (typeof imageSource !== 'number' && typeof source !== 'number' && isAuthTokenRequired) { const authToken = session?.encryptedAuthToken ?? null; imageSource = { ...source, From e2508f9d16c1a8e0627d8a4cf514d53fffcb59a2 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 17 Nov 2023 08:24:17 +0100 Subject: [PATCH 012/470] remove resolveDimensions from native Image --- src/components/Image/index.native.tsx | 18 ++---------------- src/components/Image/types.ts | 7 +------ 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index 981b8c1eaf2e..02127c4ae63d 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -4,13 +4,7 @@ import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import RESIZE_MODES from './resizeModes'; -import {DimensionsCacheValue, FastImageSource, ImageOnyxProps, ImageProps} from './types'; - -const dimensionsCache = new Map(); - -function resolveDimensions(key: string): DimensionsCacheValue | undefined { - return dimensionsCache.get(key); -} +import {FastImageSource, ImageOnyxProps, ImageProps} from './types'; function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { let imageSource: FastImageSource = source; @@ -35,14 +29,7 @@ function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { {...rest} source={imageSource} onLoad={(evt) => { - if (typeof source === 'number' || !source.uri) { - return; - } - const {width, height} = evt.nativeEvent; - dimensionsCache.set(source.uri, {width, height}); - if (rest.onLoad) { - rest.onLoad(evt); - } + rest.onLoad?.(evt); }} /> ); @@ -50,7 +37,6 @@ function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { Image.displayName = 'Image'; Image.resizeMode = RESIZE_MODES; -Image.resolveDimensions = resolveDimensions; const ImageWithOnyx = withOnyx({ session: { diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index 2ddf3975af8c..60479e9dee50 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -40,11 +40,6 @@ type ImageOwnProps = { type ImageProps = ImageOnyxProps & ImageOwnProps; -type DimensionsCacheValue = { - width: number; - height: number; -}; - type FastImageSource = Omit | ImageRequireSource | Source; -export type {ImageOwnProps, ImageOnyxProps, ImageProps, DimensionsCacheValue, FastImageSource}; +export type {ImageOwnProps, ImageOnyxProps, ImageProps, FastImageSource}; From 3f260bc6d9407a3ecbc7b661f419e65a17280698 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 17 Nov 2023 08:40:04 +0100 Subject: [PATCH 013/470] remove references to Image.resizeModes --- src/components/ImageView/index.js | 3 ++- src/components/ImageView/index.native.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index a733466e1ae2..8da3f9ca4770 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Image from '@components/Image'; +import RESIZE_MODES from '@components/Image/resizeModes'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import styles from '@styles/styles'; @@ -238,7 +239,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) { style={isLoading || zoomScale === 0 ? undefined : [styles.w100, styles.h100]} // When Image dimensions are lower than the container boundary(zoomscale <= 1), use `contain` to render the image with natural dimensions. // Both `center` and `contain` keeps the image centered on both x and y axis. - resizeMode={zoomScale > 1 ? Image.resizeMode.center : Image.resizeMode.contain} + resizeMode={zoomScale > 1 ? RESIZE_MODES.center : RESIZE_MODES.contain} onLoadStart={imageLoadingStart} onLoad={imageLoad} onError={onError} diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js index dd17e2d27a4e..d8124f30cde9 100644 --- a/src/components/ImageView/index.native.js +++ b/src/components/ImageView/index.native.js @@ -5,6 +5,7 @@ import ImageZoom from 'react-native-image-pan-zoom'; import _ from 'underscore'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Image from '@components/Image'; +import RESIZE_MODES from '@components/Image/resizeModes'; import useWindowDimensions from '@hooks/useWindowDimensions'; import styles from '@styles/styles'; import variables from '@styles/variables'; @@ -218,7 +219,7 @@ function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style}) { ]} source={{uri: url}} isAuthTokenRequired={isAuthTokenRequired} - resizeMode={Image.resizeMode.contain} + resizeMode={RESIZE_MODES.contain} onLoadStart={imageLoadingStart} onLoad={configureImageZoom} /> From 3a76fb01e498973e4ef358670c60b7efcc181637 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 20 Nov 2023 12:36:51 +0100 Subject: [PATCH 014/470] remove RESIZE_MODES from Image --- src/components/Image/index.native.tsx | 6 ++---- src/components/Image/index.tsx | 6 ++---- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/Image/index.native.tsx b/src/components/Image/index.native.tsx index 02127c4ae63d..1d2d33501644 100644 --- a/src/components/Image/index.native.tsx +++ b/src/components/Image/index.native.tsx @@ -3,7 +3,6 @@ import RNFastImage from 'react-native-fast-image'; import {withOnyx} from 'react-native-onyx'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import RESIZE_MODES from './resizeModes'; import {FastImageSource, ImageOnyxProps, ImageProps} from './types'; function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { @@ -35,13 +34,12 @@ function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) { ); } -Image.displayName = 'Image'; -Image.resizeMode = RESIZE_MODES; - const ImageWithOnyx = withOnyx({ session: { key: ONYXKEYS.SESSION, }, })(Image); +ImageWithOnyx.displayName = 'Image'; + export default ImageWithOnyx; diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index ecf1d8fb504c..0d867c831919 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -2,7 +2,6 @@ import React, {useEffect, useMemo} from 'react'; import {Image as RNImage} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '@src/ONYXKEYS'; -import RESIZE_MODES from './resizeModes'; import {ImageOnyxProps, ImageOwnProps, ImageProps} from './types'; function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps}: ImageProps) { @@ -52,9 +51,6 @@ function imagePropsAreEqual(prevProps: ImageOwnProps, nextProps: ImageOwnProps) return prevProps.source === nextProps.source; } -Image.resizeMode = RESIZE_MODES; -Image.displayName = 'Image'; - const ImageWithOnyx = React.memo( withOnyx({ session: { @@ -64,4 +60,6 @@ const ImageWithOnyx = React.memo( imagePropsAreEqual, ); +ImageWithOnyx.displayName = 'Image'; + export default ImageWithOnyx; From 02daaf589d85faac1b8a7a67fdd983f7c78a5405 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 27 Nov 2023 11:26:57 +0100 Subject: [PATCH 015/470] remove unnecessary comment --- src/components/Image/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Image/types.ts b/src/components/Image/types.ts index 60479e9dee50..9f49ea16f076 100644 --- a/src/components/Image/types.ts +++ b/src/components/Image/types.ts @@ -4,7 +4,6 @@ import {OnyxEntry} from 'react-native-onyx'; import {Session} from '@src/types/onyx'; type ImageOnyxProps = { - /* Onyx Props */ /** Session info for the currently logged in user. */ session: OnyxEntry; }; From 0e11fb813a21955b81a8aa0f21bce1abed463834 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Mon, 27 Nov 2023 11:41:23 +0100 Subject: [PATCH 016/470] remove Image.resizeMode --- src/components/ImageView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index e2a76bf2a1f8..b96222a17c7c 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -271,7 +271,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) { source={{uri: url}} isAuthTokenRequired={isAuthTokenRequired} style={[styles.h100, styles.w100]} - resizeMode={Image.resizeMode.contain} + resizeMode={RESIZE_MODES.contain} onLoadStart={imageLoadingStart} onLoad={imageLoad} onError={onError} From 2b12285a9b16a7b70f71ba93024199db8f741454 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:04:22 +0530 Subject: [PATCH 017/470] Define image prop for Confirm Modal --- src/components/ConfirmModal.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 82c4b27be7f1..3ceb7f0da096 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -67,6 +67,9 @@ const propTypes = { /** Whether to stack the buttons */ shouldStackButtons: PropTypes.bool, + /** Image to display with content */ + image: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + ...windowDimensionsPropTypes, }; @@ -88,6 +91,7 @@ const defaultProps = { promptStyles: [], shouldCenterContent: false, shouldStackButtons: true, + image: null, }; function ConfirmModal(props) { From 2a2d2ca500fb5b369e664af072a86eb94b0e24dd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:08:41 +0530 Subject: [PATCH 018/470] Define image prop for ConfirmContent --- src/components/ConfirmContent.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index 94146a2c2957..f5a63181140e 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -64,6 +64,9 @@ type ConfirmContentProps = { /** Styles for icon */ iconAdditionalStyles?: StyleProp; + + /** Image to display with content */ + image?: IconAsset; }; function ConfirmContent({ @@ -84,6 +87,7 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, + image = null, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); From 32c4c97839a98a3308009fb12875f9c72c6fe637 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:09:03 +0530 Subject: [PATCH 019/470] Pass image to Confirm Content --- src/components/ConfirmModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 3ceb7f0da096..6cf63064267b 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -123,6 +123,7 @@ function ConfirmModal(props) { titleStyles={props.titleStyles} promptStyles={props.promptStyles} shouldStackButtons={props.shouldStackButtons} + image={props.image} /> ); From 2aff47b4ca40539b21b6e58cd9b8c98a972a9680 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:22:13 +0530 Subject: [PATCH 020/470] Add illustration to App directory --- .../three_legged_laptop_woman.svg | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 assets/images/product-illustrations/three_legged_laptop_woman.svg diff --git a/assets/images/product-illustrations/three_legged_laptop_woman.svg b/assets/images/product-illustrations/three_legged_laptop_woman.svg new file mode 100644 index 000000000000..6be000b92e37 --- /dev/null +++ b/assets/images/product-illustrations/three_legged_laptop_woman.svg @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d18f38065bdbd2f80dceabab77cd274e6836096c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 20:23:01 +0530 Subject: [PATCH 021/470] Export laptop woman svg from Illustrations.ts --- src/components/Icon/Illustrations.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 954c8d0392fc..87f584586114 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -57,6 +57,7 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; +import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, @@ -118,4 +119,5 @@ export { CommentBubbles, TrashCan, TeleScope, + ThreeLeggedLaptopWoman, }; From e89e5a1f843b3b98b16797b91c3e5d4cfc1c4ecc Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 5 Jan 2024 23:17:07 +0530 Subject: [PATCH 022/470] Fix Illustration path --- src/components/Icon/Illustrations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 87f584586114..8d8f5bef4bb5 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -27,6 +27,7 @@ import TadaBlue from '@assets/images/product-illustrations/tada--blue.svg'; import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg'; import TeleScope from '@assets/images/product-illustrations/telescope.svg'; import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg'; +import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg'; import BankArrow from '@assets/images/simple-illustrations/simple-illustration__bank-arrow.svg'; import BigRocket from '@assets/images/simple-illustrations/simple-illustration__bigrocket.svg'; import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg'; @@ -57,7 +58,6 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; -import ThreeLeggedLaptopWoman from '@assets/images/simple-illustrations/simple-illustration__three-legged-laptop-woman.svg'; export { Abracadabra, From d330fcbf26eb7a9e11dc595dcda899bc476b44bd Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 02:59:22 +0530 Subject: [PATCH 023/470] Pass ThreeLeggedWoman Illustration to Confirm Modal --- src/components/FocusModeNotification.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js index e846c1f188e2..862bf0a2f2f0 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.js @@ -8,6 +8,7 @@ import CONST from '@src/CONST'; import ConfirmModal from './ConfirmModal'; import Text from './Text'; import TextLinkWithRef from './TextLink'; +import * as Illustrations from './Icon/Illustrations'; function FocusModeNotification() { const styles = useThemeStyles(); @@ -40,6 +41,7 @@ function FocusModeNotification() { } isVisible + image={Illustrations.ThreeLeggedLaptopWoman} /> ); } From a3f1e5f02c35f90d7f4360a0037ac68e64c1fd9a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:06:40 +0530 Subject: [PATCH 024/470] Render SVG in Confirm Content --- src/components/ConfirmContent.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index f5a63181140e..ddf59ef5cab3 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -8,6 +8,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; +import useStyleUtils from '@hooks/useStyleUtils'; +import colors from '@styles/theme/colors'; +import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; @@ -87,16 +90,28 @@ function ConfirmContent({ promptStyles, contentStyles, iconAdditionalStyles, - image = null, + image, }: ConfirmContentProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); const {isOffline} = useNetwork(); + const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( + <> + {typeof image === 'function' && ( + + + + )} {typeof iconSource === 'function' && ( @@ -161,6 +176,7 @@ function ConfirmContent({ )} + ); } From 70067fdc3e544c1616c642bcb907afb6063da49a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 03:22:55 +0530 Subject: [PATCH 025/470] Use CONST for SVG dimensions --- src/CONST.ts | 6 ++++++ src/components/ConfirmContent.tsx | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 2fd592f539c2..0bf7d4d34127 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3101,6 +3101,12 @@ const CONST = { EMAIL: 'EMAIL', REPORT: 'REPORT', }, + + /** Dimensions for illustration shown in Confirmation Modal */ + CONFIRM_CONTENT_SVG_SIZE: { + HEIGHT: 220, + WIDTH: 130, + } } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index ddf59ef5cab3..db92daaad6df 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -10,6 +10,7 @@ import variables from '@styles/variables'; import type IconAsset from '@src/types/utils/IconAsset'; import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import CONST from '@src/CONST'; import ImageSVG from './ImageSVG'; import Button from './Button'; import Header from './Header'; @@ -107,8 +108,8 @@ function ConfirmContent({ )} From f9fd03f65f03c4e581125843196101387b111f14 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 6 Jan 2024 04:03:38 +0530 Subject: [PATCH 026/470] Prettier --- src/CONST.ts | 2 +- src/components/ConfirmContent.tsx | 142 ++++++++++++------------ src/components/FocusModeNotification.js | 2 +- src/components/Icon/Illustrations.ts | 2 +- 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0bf7d4d34127..5e63794af3e4 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3106,7 +3106,7 @@ const CONST = { CONFIRM_CONTENT_SVG_SIZE: { HEIGHT: 220, WIDTH: 130, - } + }, } as const; export default CONST; diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx index db92daaad6df..7030b948ddb8 100644 --- a/src/components/ConfirmContent.tsx +++ b/src/components/ConfirmContent.tsx @@ -4,17 +4,17 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import variables from '@styles/variables'; -import type IconAsset from '@src/types/utils/IconAsset'; -import useStyleUtils from '@hooks/useStyleUtils'; import colors from '@styles/theme/colors'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; -import ImageSVG from './ImageSVG'; +import type IconAsset from '@src/types/utils/IconAsset'; import Button from './Button'; import Header from './Header'; import Icon from './Icon'; +import ImageSVG from './ImageSVG'; import Text from './Text'; type ConfirmContentProps = { @@ -70,7 +70,7 @@ type ConfirmContentProps = { iconAdditionalStyles?: StyleProp; /** Image to display with content */ - image?: IconAsset; + image?: IconAsset; }; function ConfirmContent({ @@ -100,83 +100,83 @@ function ConfirmContent({ const StyleUtils = useStyleUtils(); const isCentered = shouldCenterContent; - + return ( <> - {typeof image === 'function' && ( - - - - )} - - - {typeof iconSource === 'function' && ( - - + + + )} + + + {typeof iconSource === 'function' && ( + + + + )} + +
- )} - -
+ {typeof prompt === 'string' ? {prompt} : prompt} - {typeof prompt === 'string' ? {prompt} : prompt} - - {shouldStackButtons ? ( - <> -