From 041aeae32bab28b71071ff4aa0548558f13eb918 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 25 Aug 2023 12:28:33 +0200 Subject: [PATCH 1/3] [TS migration] Migrate 'getNavigationModalCardStyles' style to TypeScript --- ...rdStyles.js => getBaseNavigationModalCardStyles.ts} | 5 ++++- .../{index.js => index.ts} | 0 .../{index.website.js => index.website.ts} | 5 ++++- src/styles/getNavigationModalCardStyles/types.ts | 10 ++++++++++ 4 files changed, 18 insertions(+), 2 deletions(-) rename src/styles/getNavigationModalCardStyles/{getBaseNavigationModalCardStyles.js => getBaseNavigationModalCardStyles.ts} (51%) rename src/styles/getNavigationModalCardStyles/{index.js => index.ts} (100%) rename src/styles/getNavigationModalCardStyles/{index.website.js => index.website.ts} (69%) create mode 100644 src/styles/getNavigationModalCardStyles/types.ts diff --git a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts similarity index 51% rename from src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js rename to src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts index bddb639655a0..083fbda58b70 100644 --- a/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.js +++ b/src/styles/getNavigationModalCardStyles/getBaseNavigationModalCardStyles.ts @@ -1,6 +1,7 @@ import variables from '../variables'; +import GetNavigationModalCardStyles from './types'; -export default ({isSmallScreenWidth}) => ({ +const getBaseNavigationModalCardStyles: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({ position: 'absolute', top: 0, right: 0, @@ -8,3 +9,5 @@ export default ({isSmallScreenWidth}) => ({ backgroundColor: 'transparent', height: '100%', }); + +export default getBaseNavigationModalCardStyles; diff --git a/src/styles/getNavigationModalCardStyles/index.js b/src/styles/getNavigationModalCardStyles/index.ts similarity index 100% rename from src/styles/getNavigationModalCardStyles/index.js rename to src/styles/getNavigationModalCardStyles/index.ts diff --git a/src/styles/getNavigationModalCardStyles/index.website.js b/src/styles/getNavigationModalCardStyles/index.website.ts similarity index 69% rename from src/styles/getNavigationModalCardStyles/index.website.js rename to src/styles/getNavigationModalCardStyles/index.website.ts index f5668f955111..7f1480c7afb6 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.js +++ b/src/styles/getNavigationModalCardStyles/index.website.ts @@ -1,6 +1,7 @@ import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; +import GetNavigationModalCardStyles from './types'; -export default ({isSmallScreenWidth}) => ({ +const getBaseNavigationModalCardStylesWeb: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({ ...getBaseNavigationModalCardStyles({isSmallScreenWidth}), // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM. @@ -10,3 +11,5 @@ export default ({isSmallScreenWidth}) => ({ // https://github.com/Expensify/App/issues/20709 position: 'fixed', }); + +export default getBaseNavigationModalCardStylesWeb; diff --git a/src/styles/getNavigationModalCardStyles/types.ts b/src/styles/getNavigationModalCardStyles/types.ts new file mode 100644 index 000000000000..e33ec60aa7e4 --- /dev/null +++ b/src/styles/getNavigationModalCardStyles/types.ts @@ -0,0 +1,10 @@ +import {CSSProperties} from 'react'; +import {ViewStyle} from 'react-native'; +import {Merge} from 'type-fest'; + +type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number}; +type GetNavigationModalCardStylesKeys = 'position' | 'top' | 'right' | 'width' | 'backgroundColor' | 'height'; + +type GetNavigationModalCardStyles = ({isSmallScreenWidth}: GetNavigationModalCardStylesParams) => Merge, Pick>; + +export default GetNavigationModalCardStyles; From c39bb2f83ae41571dee7b0962db02a32c364f3cf Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 25 Aug 2023 12:29:43 +0200 Subject: [PATCH 2/3] Fix getBaseNavigationModal naming issue --- src/styles/getNavigationModalCardStyles/index.website.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/getNavigationModalCardStyles/index.website.ts b/src/styles/getNavigationModalCardStyles/index.website.ts index 7f1480c7afb6..0c47536fc57c 100644 --- a/src/styles/getNavigationModalCardStyles/index.website.ts +++ b/src/styles/getNavigationModalCardStyles/index.website.ts @@ -1,7 +1,7 @@ import getBaseNavigationModalCardStyles from './getBaseNavigationModalCardStyles'; import GetNavigationModalCardStyles from './types'; -const getBaseNavigationModalCardStylesWeb: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({ +const getNavigationModalCardStyles: GetNavigationModalCardStyles = ({isSmallScreenWidth}) => ({ ...getBaseNavigationModalCardStyles({isSmallScreenWidth}), // position: fixed is set instead of position absolute to workaround Safari known issues of updating heights in DOM. @@ -12,4 +12,4 @@ const getBaseNavigationModalCardStylesWeb: GetNavigationModalCardStyles = ({isSm position: 'fixed', }); -export default getBaseNavigationModalCardStylesWeb; +export default getNavigationModalCardStyles; From 6b1a41e3d2c9d34cad7f779b34525f89b90bcdfd Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 25 Aug 2023 15:32:30 +0200 Subject: [PATCH 3/3] Simplify types --- src/styles/getNavigationModalCardStyles/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/getNavigationModalCardStyles/types.ts b/src/styles/getNavigationModalCardStyles/types.ts index e33ec60aa7e4..504b659c87b7 100644 --- a/src/styles/getNavigationModalCardStyles/types.ts +++ b/src/styles/getNavigationModalCardStyles/types.ts @@ -3,8 +3,7 @@ import {ViewStyle} from 'react-native'; import {Merge} from 'type-fest'; type GetNavigationModalCardStylesParams = {isSmallScreenWidth: number}; -type GetNavigationModalCardStylesKeys = 'position' | 'top' | 'right' | 'width' | 'backgroundColor' | 'height'; -type GetNavigationModalCardStyles = ({isSmallScreenWidth}: GetNavigationModalCardStylesParams) => Merge, Pick>; +type GetNavigationModalCardStyles = (params: GetNavigationModalCardStylesParams) => Merge>; export default GetNavigationModalCardStyles;