From 33a4cac5efa625d839299f4feca289e49a54d0a6 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 9 Oct 2023 16:35:00 +0200 Subject: [PATCH 1/3] Migrate to TS --- .../{index.native.js => index.native.ts} | 13 +++++++++++-- .../useWindowDimensions/{index.js => index.ts} | 13 +++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) rename src/hooks/useWindowDimensions/{index.native.js => index.native.ts} (74%) rename src/hooks/useWindowDimensions/{index.js => index.ts} (81%) diff --git a/src/hooks/useWindowDimensions/index.native.js b/src/hooks/useWindowDimensions/index.native.ts similarity index 74% rename from src/hooks/useWindowDimensions/index.native.js rename to src/hooks/useWindowDimensions/index.native.ts index 358e43f1b75d..298afb2e5b54 100644 --- a/src/hooks/useWindowDimensions/index.native.js +++ b/src/hooks/useWindowDimensions/index.native.ts @@ -2,16 +2,25 @@ import {useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; +type WindowDimensions = { + windowWidth: number; + windowHeight: number; + isExtraSmallScreenHeight: boolean, + isSmallScreenWidth: boolean, + isMediumScreenWidth: boolean, + isLargeScreenWidth: boolean, +} + /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. - * @returns {Object} */ -export default function () { +export default function(): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; const isSmallScreenWidth = true; const isMediumScreenWidth = false; const isLargeScreenWidth = false; + return { windowWidth, windowHeight, diff --git a/src/hooks/useWindowDimensions/index.js b/src/hooks/useWindowDimensions/index.ts similarity index 81% rename from src/hooks/useWindowDimensions/index.js rename to src/hooks/useWindowDimensions/index.ts index 1a1f7eed5a67..83a6e831e86c 100644 --- a/src/hooks/useWindowDimensions/index.js +++ b/src/hooks/useWindowDimensions/index.ts @@ -2,11 +2,19 @@ import {Dimensions, useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; +type WindowDimensions = { + windowWidth: number; + windowHeight: number; + isExtraSmallScreenHeight: boolean, + isSmallScreenWidth: boolean, + isMediumScreenWidth: boolean, + isLargeScreenWidth: boolean, +} + /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. - * @returns {Object} */ -export default function () { +export default function(): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight. const screenHeight = Dimensions.get('screen').height; @@ -14,6 +22,7 @@ export default function () { const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint; + return { windowWidth, windowHeight, From caf91fc958670925d4afc4d081d530bfd611d5dd Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 9 Oct 2023 16:35:23 +0200 Subject: [PATCH 2/3] Run linter --- src/hooks/useWindowDimensions/index.native.ts | 12 ++++++------ src/hooks/useWindowDimensions/index.ts | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts index 298afb2e5b54..4ca5ff06c46b 100644 --- a/src/hooks/useWindowDimensions/index.native.ts +++ b/src/hooks/useWindowDimensions/index.native.ts @@ -5,16 +5,16 @@ import variables from '../../styles/variables'; type WindowDimensions = { windowWidth: number; windowHeight: number; - isExtraSmallScreenHeight: boolean, - isSmallScreenWidth: boolean, - isMediumScreenWidth: boolean, - isLargeScreenWidth: boolean, -} + isExtraSmallScreenHeight: boolean; + isSmallScreenWidth: boolean; + isMediumScreenWidth: boolean; + isLargeScreenWidth: boolean; +}; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. */ -export default function(): WindowDimensions { +export default function (): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; const isSmallScreenWidth = true; diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts index 83a6e831e86c..0a2f6c41958e 100644 --- a/src/hooks/useWindowDimensions/index.ts +++ b/src/hooks/useWindowDimensions/index.ts @@ -5,16 +5,16 @@ import variables from '../../styles/variables'; type WindowDimensions = { windowWidth: number; windowHeight: number; - isExtraSmallScreenHeight: boolean, - isSmallScreenWidth: boolean, - isMediumScreenWidth: boolean, - isLargeScreenWidth: boolean, -} + isExtraSmallScreenHeight: boolean; + isSmallScreenWidth: boolean; + isMediumScreenWidth: boolean; + isLargeScreenWidth: boolean; +}; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. */ -export default function(): WindowDimensions { +export default function (): WindowDimensions { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight. const screenHeight = Dimensions.get('screen').height; From 415360c8f610a668f5f086793a1b163dac3588cd Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 9 Oct 2023 17:44:23 +0200 Subject: [PATCH 3/3] Types.ts file with common types --- src/hooks/useWindowDimensions/index.native.ts | 10 +--------- src/hooks/useWindowDimensions/index.ts | 10 +--------- src/hooks/useWindowDimensions/types.ts | 10 ++++++++++ 3 files changed, 12 insertions(+), 18 deletions(-) create mode 100644 src/hooks/useWindowDimensions/types.ts diff --git a/src/hooks/useWindowDimensions/index.native.ts b/src/hooks/useWindowDimensions/index.native.ts index 4ca5ff06c46b..5b0ec2002201 100644 --- a/src/hooks/useWindowDimensions/index.native.ts +++ b/src/hooks/useWindowDimensions/index.native.ts @@ -1,15 +1,7 @@ // eslint-disable-next-line no-restricted-imports import {useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; - -type WindowDimensions = { - windowWidth: number; - windowHeight: number; - isExtraSmallScreenHeight: boolean; - isSmallScreenWidth: boolean; - isMediumScreenWidth: boolean; - isLargeScreenWidth: boolean; -}; +import WindowDimensions from './types'; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts index 0a2f6c41958e..f9fee6301d06 100644 --- a/src/hooks/useWindowDimensions/index.ts +++ b/src/hooks/useWindowDimensions/index.ts @@ -1,15 +1,7 @@ // eslint-disable-next-line no-restricted-imports import {Dimensions, useWindowDimensions} from 'react-native'; import variables from '../../styles/variables'; - -type WindowDimensions = { - windowWidth: number; - windowHeight: number; - isExtraSmallScreenHeight: boolean; - isSmallScreenWidth: boolean; - isMediumScreenWidth: boolean; - isLargeScreenWidth: boolean; -}; +import WindowDimensions from './types'; /** * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints. diff --git a/src/hooks/useWindowDimensions/types.ts b/src/hooks/useWindowDimensions/types.ts new file mode 100644 index 000000000000..9b59d4968935 --- /dev/null +++ b/src/hooks/useWindowDimensions/types.ts @@ -0,0 +1,10 @@ +type WindowDimensions = { + windowWidth: number; + windowHeight: number; + isExtraSmallScreenHeight: boolean; + isSmallScreenWidth: boolean; + isMediumScreenWidth: boolean; + isLargeScreenWidth: boolean; +}; + +export default WindowDimensions;