Merge pull request #31691 from keisyrzk/auth2faThemeUpdate

Auth2fa theme update
Expensify · Nov 29, 2023 · a8672be · a8672be
2 parents 64969e0 + 4a99688
commit a8672be
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 42 deletions.
diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
-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';
 import {AnimationDirection} from './AnimatedStepContext';
@@ -18,18 +18,15 @@ type AnimatedStepProps = ChildrenProps & {
     onAnimationEnd: () => void;
 };
 
-function getAnimationStyle(direction: AnimationDirection) {
-    let transitionValue;
+function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) {
+    const styles = useThemeStyles();
 
-    if (direction === 'in') {
-        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    } else {
-        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    }
-    return styles.makeSlideInTranslation('translateX', transitionValue);
-}
+    const animationStyle = useMemo(() => {
+        const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+
+        return styles.makeSlideInTranslation('translateX', transitionValue);
+    }, [direction, styles]);
 
-function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
     return (
         <Animatable.View
             onAnimationEnd={() => {
@@ -39,7 +36,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN,
                 onAnimationEnd();
             }}
             duration={CONST.ANIMATED_TRANSITION}
-            animation={getAnimationStyle(direction)}
+            animation={animationStyle}
             useNativeDriver={useNativeDriver}
             style={style}
         >

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import compose from '@libs/compose';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 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';
@@ -36,20 +36,22 @@ const defaultProps = {
     style: [],
 };
 
-const setStyles = (containerStyles, isSmallScreenWidth) => {
-    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 (
-        <View style={[setStyles(props.containerStyles, props.isSmallScreenWidth), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
+        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
             <Icon
                 src={Expensicons.OfflineCloud}
                 width={variables.iconSizeSmall}

diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -1,30 +1,15 @@
 import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import {GestureResponderEvent, Pressable, View, ViewStyle} from 'react-native';
+import {GestureResponderEvent, Pressable, View} from 'react-native';
 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): Pick<ViewStyle, 'cursor'> {
-    if (isDisabled) {
-        return styles.cursorDisabled;
-    }
-
-    if (isText) {
-        return styles.cursorText;
-    }
-
-    return styles.cursorPointer;
-}
-
 function GenericPressable(
     {
         children,
@@ -51,6 +36,7 @@ function GenericPressable(
     }: PressableProps,
     ref: ForwardedRef<View>,
 ) {
+    const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
     const isScreenReaderActive = Accessibility.useScreenReaderStatus();
     const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
@@ -71,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) {
@@ -132,7 +131,7 @@ function GenericPressable(
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             style={(state) => [
-                getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')),
+                cursorStyle,
                 StyleUtils.parseStyleFromFunction(style, state),
                 isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state),
                 state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state),

diff --git 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 styles from '@styles/styles';
 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';
@@ -66,6 +66,7 @@ function PressableWithDelayToggle(
     }: PressableWithDelayToggleProps,
     ref: ForwardedRef<RNText | View>,
 ) {
+    const styles = useThemeStyles();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {