From 8980727dee5e56383b0741dc720039a95a530690 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Wed, 22 Nov 2023 11:03:45 +0100 Subject: [PATCH 01/13] AnimatedStep/index.js --- src/components/AnimatedStep/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index 607f4f0a4b11..368935177045 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; import * as Animatable from 'react-native-animatable'; import useNativeDriver from '@libs/useNativeDriver'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; import {AnimationDirection} from './AnimatedStepContext'; @@ -20,6 +20,7 @@ type AnimatedStepProps = ChildrenProps & { function getAnimationStyle(direction: AnimationDirection) { let transitionValue; + const styles = useThemeStyles(); if (direction === 'in') { transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; From 5ae16831ac4a78a2b6a845eddd213e17906f71f8 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Wed, 22 Nov 2023 11:08:50 +0100 Subject: [PATCH 02/13] OfflineIndicator.js --- src/components/OfflineIndicator.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 9cacc3621790..1dc0d1a9e9d3 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -3,7 +3,7 @@ import React from 'react'; import {View} from 'react-native'; import compose from '@libs/compose'; import stylePropTypes from '@styles/stylePropTypes'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; import Icon from './Icon'; @@ -44,6 +44,9 @@ const setStyles = (containerStyles, isSmallScreenWidth) => { }; function OfflineIndicator(props) { + + const styles = useThemeStyles(); + if (!props.network.isOffline) { return null; } From 1191351719302f564c4d366062197e070d35720e Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Wed, 22 Nov 2023 12:13:45 +0100 Subject: [PATCH 03/13] PressableWithDelayToggle.tsx and updated to AnimatedStep/index.js --- src/components/AnimatedStep/index.tsx | 9 ++++++--- src/components/Pressable/PressableWithDelayToggle.tsx | 3 ++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index 368935177045..d751a0ee881c 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; import * as Animatable from 'react-native-animatable'; import useNativeDriver from '@libs/useNativeDriver'; +import Styles from '@styles/styles'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -18,9 +19,8 @@ type AnimatedStepProps = ChildrenProps & { onAnimationEnd: () => void; }; -function getAnimationStyle(direction: AnimationDirection) { +function getAnimationStyle(direction: AnimationDirection, styles: typeof Styles) { let transitionValue; - const styles = useThemeStyles(); if (direction === 'in') { transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; @@ -31,6 +31,9 @@ function getAnimationStyle(direction: AnimationDirection) { } function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) { + + const styles = useThemeStyles(); + return ( { @@ -40,7 +43,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, onAnimationEnd(); }} duration={CONST.ANIMATED_TRANSITION} - animation={getAnimationStyle(direction)} + animation={getAnimationStyle(direction, styles)} useNativeDriver={useNativeDriver} style={style} > diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index 7ded9320b802..5dec68259082 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -8,7 +8,7 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import getButtonState from '@libs/getButtonState'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import * as StyleUtils from '@styles/StyleUtils'; import variables from '@styles/variables'; import PressableProps from './GenericPressable/types'; @@ -66,6 +66,7 @@ function PressableWithDelayToggle( }: PressableWithDelayToggleProps, ref: ForwardedRef, ) { + const styles = useThemeStyles(); const [isActive, temporarilyDisableInteractions] = useThrottledButtonState(); const updatePressState = () => { From d2adfaef4fb8ba5963659bf09c596d78615bf282 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Wed, 22 Nov 2023 12:25:05 +0100 Subject: [PATCH 04/13] GenericPressable/BaseGenericPressable.tsx --- .../Pressable/GenericPressable/BaseGenericPressable.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 1576fe18da54..1d6ad27b89a7 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -5,7 +5,8 @@ import useSingleExecution from '@hooks/useSingleExecution'; import Accessibility from '@libs/Accessibility'; import HapticFeedback from '@libs/HapticFeedback'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; +import Styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import CONST from '@src/CONST'; import PressableProps from './types'; @@ -13,7 +14,7 @@ import PressableProps from './types'; /** * Returns the cursor style based on the state of Pressable */ -function getCursorStyle(isDisabled: boolean, isText: boolean): Pick { +function getCursorStyle(isDisabled: boolean, isText: boolean, styles: typeof Styles): Pick { if (isDisabled) { return styles.cursorDisabled; } @@ -51,6 +52,7 @@ function GenericPressable( }: PressableProps, ref: ForwardedRef, ) { + const styles = useThemeStyles(); const {isExecuting, singleExecution} = useSingleExecution(); const isScreenReaderActive = Accessibility.useScreenReaderStatus(); const [hitSlop, onLayout] = Accessibility.useAutoHitSlop(); @@ -132,7 +134,7 @@ function GenericPressable( onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={(state) => [ - getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')), + getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text'), styles), StyleUtils.parseStyleFromFunction(style, state), isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state), state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state), From 47e473c4bdab36ecd89d3c378b2f3b6af22f7de6 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Wed, 22 Nov 2023 12:55:06 +0100 Subject: [PATCH 05/13] OfflineIndicator.js add missing passing --- src/components/OfflineIndicator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 1dc0d1a9e9d3..4293ec5fb339 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -36,7 +36,7 @@ const defaultProps = { style: [], }; -const setStyles = (containerStyles, isSmallScreenWidth) => { +const setStyles = (containerStyles, isSmallScreenWidth, styles) => { if (containerStyles.length) { return containerStyles; } @@ -52,7 +52,7 @@ function OfflineIndicator(props) { } return ( - + Date: Wed, 22 Nov 2023 12:56:25 +0100 Subject: [PATCH 06/13] prettier --- src/components/AnimatedStep/index.tsx | 3 +-- src/components/OfflineIndicator.js | 3 +-- .../Pressable/GenericPressable/BaseGenericPressable.tsx | 2 +- src/components/Pressable/PressableWithDelayToggle.tsx | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index d751a0ee881c..b8aacace603e 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -31,9 +31,8 @@ function getAnimationStyle(direction: AnimationDirection, styles: typeof Styles) } function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) { - const styles = useThemeStyles(); - + return ( { diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 4293ec5fb339..e2c87c5fafa7 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -3,8 +3,8 @@ import React from 'react'; import {View} from 'react-native'; import compose from '@libs/compose'; import stylePropTypes from '@styles/stylePropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; import * as StyleUtils from '@styles/StyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -44,7 +44,6 @@ const setStyles = (containerStyles, isSmallScreenWidth, styles) => { }; function OfflineIndicator(props) { - const styles = useThemeStyles(); if (!props.network.isOffline) { diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 1d6ad27b89a7..9de2bd1e2d31 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -5,9 +5,9 @@ import useSingleExecution from '@hooks/useSingleExecution'; import Accessibility from '@libs/Accessibility'; import HapticFeedback from '@libs/HapticFeedback'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import useThemeStyles from '@styles/useThemeStyles'; import Styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import PressableProps from './types'; diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index 5dec68259082..92affb1e862e 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -8,8 +8,8 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useThrottledButtonState from '@hooks/useThrottledButtonState'; import getButtonState from '@libs/getButtonState'; -import useThemeStyles from '@styles/useThemeStyles'; import * as StyleUtils from '@styles/StyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; import variables from '@styles/variables'; import PressableProps from './GenericPressable/types'; import PressableWithoutFeedback from './PressableWithoutFeedback'; From f37a0aac1bcbda34158e6e01d36a763d7c46be35 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Thu, 23 Nov 2023 06:41:59 +0100 Subject: [PATCH 07/13] PR update --- src/components/AnimatedStep/index.tsx | 26 +++++++------- .../GenericPressable/BaseGenericPressable.tsx | 35 ++++++++++--------- 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index b8aacace603e..b3bb910c929d 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import {StyleProp, ViewStyle} from 'react-native'; import * as Animatable from 'react-native-animatable'; import useNativeDriver from '@libs/useNativeDriver'; -import Styles from '@styles/styles'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -19,20 +18,19 @@ type AnimatedStepProps = ChildrenProps & { onAnimationEnd: () => void; }; -function getAnimationStyle(direction: AnimationDirection, styles: typeof Styles) { - let transitionValue; - - if (direction === 'in') { - transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; - } else { - transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE; - } - return styles.makeSlideInTranslation('translateX', transitionValue); -} - function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) { const styles = useThemeStyles(); + const animationStyle = useMemo(() => { + let transitionValue; + if (direction === 'in') { + transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; + } else { + transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE; + } + return styles.makeSlideInTranslation('translateX', transitionValue); + }, [direction, styles]); + return ( { @@ -42,7 +40,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, onAnimationEnd(); }} duration={CONST.ANIMATED_TRANSITION} - animation={getAnimationStyle(direction, styles)} + animation={animationStyle} useNativeDriver={useNativeDriver} style={style} > diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 9de2bd1e2d31..662c3d31f397 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -5,27 +5,11 @@ import useSingleExecution from '@hooks/useSingleExecution'; import Accessibility from '@libs/Accessibility'; import HapticFeedback from '@libs/HapticFeedback'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import Styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import PressableProps from './types'; -/** - * Returns the cursor style based on the state of Pressable - */ -function getCursorStyle(isDisabled: boolean, isText: boolean, styles: typeof Styles): Pick { - if (isDisabled) { - return styles.cursorDisabled; - } - - if (isText) { - return styles.cursorText; - } - - return styles.cursorPointer; -} - function GenericPressable( { children, @@ -57,6 +41,23 @@ function GenericPressable( const isScreenReaderActive = Accessibility.useScreenReaderStatus(); const [hitSlop, onLayout] = Accessibility.useAutoHitSlop(); + /** + * Returns the cursor style based on the state of Pressable + */ + const cursorStyle = useMemo(() => { + return (isDisabled: boolean, isText: boolean): Pick => { + if (isDisabled) { + return styles.cursorDisabled; + } + + if (isText) { + return styles.cursorText; + } + + return styles.cursorPointer; + }; + }, [styles]); + const isDisabled = useMemo(() => { let shouldBeDisabledByScreenReader = false; if (enableInScreenReaderStates === CONST.SCREEN_READER_STATES.ACTIVE) { @@ -134,7 +135,7 @@ function GenericPressable( onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={(state) => [ - getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text'), styles), + cursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text'), styles), StyleUtils.parseStyleFromFunction(style, state), isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state), state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state), From ba58958fc6f3235b32111bc0ed252e14db30b723 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Thu, 23 Nov 2023 06:57:57 +0100 Subject: [PATCH 08/13] lint and prettier --- src/components/AnimatedStep/index.tsx | 2 +- .../GenericPressable/BaseGenericPressable.tsx | 34 ++++++++++--------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index b3bb910c929d..6e14b5767955 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, {useMemo} from 'react'; import {StyleProp, ViewStyle} from 'react-native'; import * as Animatable from 'react-native-animatable'; import useNativeDriver from '@libs/useNativeDriver'; diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx index 662c3d31f397..2e42805b26f7 100644 --- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx +++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx @@ -42,21 +42,23 @@ function GenericPressable( const [hitSlop, onLayout] = Accessibility.useAutoHitSlop(); /** - * Returns the cursor style based on the state of Pressable - */ - const cursorStyle = useMemo(() => { - return (isDisabled: boolean, isText: boolean): Pick => { - if (isDisabled) { - return styles.cursorDisabled; - } - - if (isText) { - return styles.cursorText; - } - - return styles.cursorPointer; - }; - }, [styles]); + * Returns the cursor style based on the state of Pressable + */ + const cursorStyle = useMemo( + () => + (isDisabled: boolean, isText: boolean): Pick => { + if (isDisabled) { + return styles.cursorDisabled; + } + + if (isText) { + return styles.cursorText; + } + + return styles.cursorPointer; + }, + [styles], + ); const isDisabled = useMemo(() => { let shouldBeDisabledByScreenReader = false; @@ -135,7 +137,7 @@ function GenericPressable( onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={(state) => [ - cursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text'), styles), + cursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')), StyleUtils.parseStyleFromFunction(style, state), isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state), state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state), From e9e356aecd16a13f5cd01d41f33b76a2cc30fda7 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Fri, 24 Nov 2023 09:56:14 +0100 Subject: [PATCH 09/13] pr adjustments --- src/components/AnimatedStep/index.tsx | 8 ++------ src/components/OfflineIndicator.js | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index 6e14b5767955..dd6d1591fe27 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -22,12 +22,8 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, const styles = useThemeStyles(); const animationStyle = useMemo(() => { - let transitionValue; - if (direction === 'in') { - transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; - } else { - transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE; - } + const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE; + return styles.makeSlideInTranslation('translateX', transitionValue); }, [direction, styles]); diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index e2c87c5fafa7..ea750276fa64 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -36,7 +36,7 @@ const defaultProps = { style: [], }; -const setStyles = (containerStyles, isSmallScreenWidth, styles) => { +const getStyles = (containerStyles, isSmallScreenWidth, styles) => { if (containerStyles.length) { return containerStyles; } @@ -51,7 +51,7 @@ function OfflineIndicator(props) { } return ( - + Date: Fri, 24 Nov 2023 12:07:27 +0100 Subject: [PATCH 10/13] remove style default value --- src/components/AnimatedStep/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index dd6d1591fe27..1a87592cba9b 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -18,7 +18,7 @@ type AnimatedStepProps = ChildrenProps & { onAnimationEnd: () => void; }; -function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) { +function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) { const styles = useThemeStyles(); const animationStyle = useMemo(() => { From 6b9025cca55ba1281382e35ef766a99534bcd334 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Mon, 27 Nov 2023 07:33:50 +0100 Subject: [PATCH 11/13] pr adjustmnets --- src/components/OfflineIndicator.js | 18 +++++----- .../GenericPressable/BaseGenericPressable.tsx | 36 ++++++++----------- 2 files changed, 24 insertions(+), 30 deletions(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index ea750276fa64..1a7f9ed3e69e 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import {View} from 'react-native'; +import {useMemo, View} from 'react-native'; import compose from '@libs/compose'; import stylePropTypes from '@styles/stylePropTypes'; import * as StyleUtils from '@styles/StyleUtils'; @@ -36,22 +36,22 @@ const defaultProps = { style: [], }; -const getStyles = (containerStyles, isSmallScreenWidth, styles) => { - if (containerStyles.length) { - return containerStyles; - } - return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator; -}; - function OfflineIndicator(props) { const styles = useThemeStyles(); + const computedStyles = useMemo(() => { + if (props.containerStyles.length) { + return props.containerStyles; + } + return props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator; + }, [props.containerStyles, props.isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]); + if (!props.network.isOffline) { return null; } return ( - + - (isDisabled: boolean, isText: boolean): Pick => { - if (isDisabled) { - return styles.cursorDisabled; - } - - if (isText) { - return styles.cursorText; - } - - return styles.cursorPointer; - }, - [styles], - ); - const isDisabled = useMemo(() => { let shouldBeDisabledByScreenReader = false; if (enableInScreenReaderStates === CONST.SCREEN_READER_STATES.ACTIVE) { @@ -76,6 +57,19 @@ function GenericPressable( const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]); + /** + * Returns the cursor style based on the state of Pressable + */ + const cursorStyle = useMemo(() => { + if (shouldUseDisabledCursor) { + return styles.cursorDisabled; + } + if ([rest.accessibilityRole, rest.role].includes('text')) { + return styles.cursorText; + } + return styles.cursorPointer; + }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role]); + const onLongPressHandler = useCallback( (event: GestureResponderEvent) => { if (isDisabled) { @@ -137,7 +131,7 @@ function GenericPressable( onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={(state) => [ - cursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')), + cursorStyle, StyleUtils.parseStyleFromFunction(style, state), isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state), state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state), From 7d46093266f72a2d197484394c2b9a756ed56245 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Mon, 27 Nov 2023 13:25:23 +0100 Subject: [PATCH 12/13] fix --- src/components/OfflineIndicator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 1a7f9ed3e69e..191a98f33c9b 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import React from 'react'; -import {useMemo, View} from 'react-native'; +import React, {useMemo} from 'react'; +import {View} from 'react-native'; import compose from '@libs/compose'; import stylePropTypes from '@styles/stylePropTypes'; import * as StyleUtils from '@styles/StyleUtils'; From 4a99688996a8a8464d5841e47c1282a7c4ca00c7 Mon Sep 17 00:00:00 2001 From: keisyrzk Date: Tue, 28 Nov 2023 06:38:14 +0100 Subject: [PATCH 13/13] Update src/components/OfflineIndicator.js Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/OfflineIndicator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js index 191a98f33c9b..01f207b7ba97 100644 --- a/src/components/OfflineIndicator.js +++ b/src/components/OfflineIndicator.js @@ -51,7 +51,7 @@ function OfflineIndicator(props) { } return ( - +