Merge pull request #24577 from bernhardoj/fix/24516-disable-timezone-…

…list-if-automatic-is-on Disable timezone list if automatic timezone is turned on
Expensify · Aug 18, 2023 · a068ca5 · a068ca5
2 parents 3b2f852 + b7ae912
commit a068ca5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/SelectionListRadio/BaseSelectionListRadio.js b/src/components/SelectionListRadio/BaseSelectionListRadio.js
@@ -158,12 +158,14 @@ function BaseSelectionListRadio(props) {
     };
 
     const renderItem = ({item, index, section}) => {
-        const isFocused = focusedIndex === index + lodashGet(section, 'indexOffset', 0);
+        const isDisabled = section.isDisabled;
+        const isFocused = !isDisabled && focusedIndex === index + lodashGet(section, 'indexOffset', 0);
 
         return (
             <RadioListItem
                 item={item}
                 isFocused={isFocused}
+                isDisabled={isDisabled}
                 onSelectRow={props.onSelectRow}
             />
         );

diff --git a/src/components/SelectionListRadio/RadioListItem.js b/src/components/SelectionListRadio/RadioListItem.js
@@ -16,25 +16,29 @@ const propTypes = {
     /** Whether this item is focused (for arrow key controls) */
     isFocused: PropTypes.bool,
 
+    /** Whether this item is disabled */
+    isDisabled: PropTypes.bool,
+
     /** Callback to fire when the item is pressed */
     onSelectRow: PropTypes.func,
 };
 
 const defaultProps = {
     item: {},
     isFocused: false,
+    isDisabled: false,
     onSelectRow: () => {},
 };
 
 function RadioListItem(props) {
     return (
         <PressableWithFeedback
             onPress={() => props.onSelectRow(props.item)}
+            disabled={props.isDisabled}
             accessibilityLabel={props.item.text}
             accessibilityRole="button"
             hoverDimmingValue={1}
             hoverStyle={styles.hoveredComponentBG}
-            focusStyle={styles.hoveredComponentBG}
         >
             <View style={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.optionRow, props.isFocused && styles.sidebarLinkActive]}>
                 <View style={[styles.flex1, styles.alignItemsStart]}>

diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -35,18 +35,18 @@ const getUserTimezone = (currentUserPersonalDetails) => lodashGet(currentUserPer
 
 function TimezoneSelectPage(props) {
     const {translate} = useLocalize();
-    const timezone = useRef(getUserTimezone(props.currentUserPersonalDetails));
+    const timezone = getUserTimezone(props.currentUserPersonalDetails);
     const allTimezones = useRef(
         _.chain(moment.tz.names())
             .filter((tz) => !tz.startsWith('Etc/GMT'))
             .map((text) => ({
                 text,
                 keyForList: getKey(text),
-                isSelected: text === timezone.current.selected,
+                isSelected: text === timezone.selected,
             }))
             .value(),
     );
-    const [timezoneInputText, setTimezoneInputText] = useState(timezone.current.selected);
+    const [timezoneInputText, setTimezoneInputText] = useState(timezone.selected);
     const [timezoneOptions, setTimezoneOptions] = useState(allTimezones.current);
 
     /**
@@ -76,8 +76,8 @@ function TimezoneSelectPage(props) {
                 textInputValue={timezoneInputText}
                 onChangeText={filterShownTimezones}
                 onSelectRow={saveSelectedTimezone}
-                sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.current.automatic}]}
-                initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.current.selected)[0], 'keyForList')}
+                sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
+                initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
             />
         </ScreenWrapper>
     );