Merge pull request #39874 from Expensify/hayata-lock-features-if-conn…

…ection-exists Support disable status for the `Switch` component
Expensify · Apr 11, 2024 · 1fee23e · 1fee23e
2 parents a5f4fc9 + 4eb8c6f
commit 1fee23e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
@@ -1,8 +1,11 @@
 import React, {useEffect, useRef} from 'react';
 import {Animated} from 'react-native';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 type SwitchProps = {
@@ -27,6 +30,7 @@ const OFFSET_X = {
 function Switch({isOn, onToggle, accessibilityLabel, disabled}: SwitchProps) {
     const styles = useThemeStyles();
     const offsetX = useRef(new Animated.Value(isOn ? OFFSET_X.ON : OFFSET_X.OFF));
+    const theme = useTheme();
 
     useEffect(() => {
         Animated.timing(offsetX.current, {
@@ -49,7 +53,16 @@ function Switch({isOn, onToggle, accessibilityLabel, disabled}: SwitchProps) {
             hoverDimmingValue={1}
             pressDimmingValue={0.8}
         >
-            <Animated.View style={[styles.switchThumb, styles.switchThumbTransformation(offsetX.current)]} />
+            <Animated.View style={[styles.switchThumb, styles.switchThumbTransformation(offsetX.current)]}>
+                {disabled && (
+                    <Icon
+                        src={Expensicons.Lock}
+                        fill={isOn ? theme.text : theme.icon}
+                        width={styles.toggleSwitchLockIcon.width}
+                        height={styles.toggleSwitchLockIcon.height}
+                    />
+                )}
+            </Animated.View>
         </PressableWithFeedback>
     );
 }

diff --git a/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx b/src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx
@@ -27,10 +27,12 @@ type ToggleSettingOptionRowProps = {
     errors?: Errors;
     /** Callback to close the error messages */
     onCloseError?: () => void;
+    /** Whether the toggle should be disabled */
+    disabled?: boolean;
 };
 const ICON_SIZE = 48;
 
-function ToggleSettingOptionRow({icon, title, subtitle, onToggle, subMenuItems, isActive, pendingAction, errors, onCloseError}: ToggleSettingOptionRowProps) {
+function ToggleSettingOptionRow({icon, title, subtitle, onToggle, subMenuItems, isActive, pendingAction, errors, onCloseError, disabled = false}: ToggleSettingOptionRowProps) {
     const styles = useThemeStyles();
 
     return (
@@ -77,6 +79,7 @@ function ToggleSettingOptionRow({icon, title, subtitle, onToggle, subMenuItems,
                         accessibilityLabel={subtitle}
                         onToggle={onToggle}
                         isOn={isActive}
+                        disabled={disabled}
                     />
                 </View>
                 {isActive && subMenuItems}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2861,7 +2861,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         switchInactive: {
-            backgroundColor: theme.border,
+            backgroundColor: theme.icon,
         },
 
         switchThumb: {
@@ -2870,6 +2870,8 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 11,
             position: 'absolute',
             left: 4,
+            justifyContent: 'center',
+            alignItems: 'center',
             backgroundColor: theme.appBG,
         },
 
@@ -2889,6 +2891,11 @@ const styles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        toggleSwitchLockIcon: {
+            width: variables.iconSizeExtraSmall,
+            height: variables.iconSizeExtraSmall,
+        },
+
         checkedContainer: {
             backgroundColor: theme.checkBox,
         },