Merge pull request #14829 from Expensify/OSBotify-cherry-pick-staging…

…-14826

🍒 Cherry pick PR #14826 to staging 🍒

android/app/build.gradle

@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001026406
-        versionName "1.2.64-6"
+        versionCode 1001026407
+        versionName "1.2.64-7"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.64.6</string>
+	<string>1.2.64.7</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.64.6</string>
+	<string>1.2.64.7</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.64-6",
+  "version": "1.2.64-7",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/OptionsList/BaseOptionsList.js

@@ -104,6 +104,7 @@ class BaseOptionsList extends Component {
      * @returns {Array<Object>}
      */
     buildFlatSectionArray() {
+        const optionHeight = variables.optionRowHeight;
         let offset = 0;
 
         // Start with just an empty list header
@@ -120,12 +121,8 @@ class BaseOptionsList extends Component {
 
             // Add section items
             for (let i = 0; i < section.data.length; i++) {
-                let fullOptionHeight = variables.optionRowHeight;
-                if (i > 0 && this.props.shouldHaveOptionSeparator) {
-                    fullOptionHeight += variables.borderTopWidth;
-                }
-                flatArray.push({length: fullOptionHeight, offset});
-                offset += fullOptionHeight;
+                flatArray.push({length: optionHeight, offset});
+                offset += optionHeight;
             }
 
             // Add the section footer

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -39,11 +39,10 @@ class BaseOptionsSelector extends Component {
         this.relatedTarget = null;
 
         const allOptions = this.flattenSections();
-        const focusedIndex = this.getInitiallyFocusedIndex(allOptions);
 
         this.state = {
             allOptions,
-            focusedIndex,
+            focusedIndex: this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0,
         };
     }
 
@@ -86,8 +85,6 @@ class BaseOptionsSelector extends Component {
             true,
         );
 
-        this.scrollToIndex(this.state.focusedIndex, false);
-
         if (!this.props.autoFocus) {
             return;
         }
@@ -139,25 +136,6 @@ class BaseOptionsSelector extends Component {
         }
     }
 
-    /**
-     * @param {Array<Object>} allOptions
-     * @returns {Number}
-     */
-    getInitiallyFocusedIndex(allOptions) {
-        const defaultIndex = this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0;
-        if (_.isUndefined(this.props.initiallyFocusedOptionKey)) {
-            return defaultIndex;
-        }
-
-        const indexOfInitiallyFocusedOption = _.findIndex(allOptions, option => option.keyForList === this.props.initiallyFocusedOptionKey);
-
-        if (indexOfInitiallyFocusedOption >= 0) {
-            return indexOfInitiallyFocusedOption;
-        }
-
-        return defaultIndex;
-    }
-
     /**
      * Flattens the sections into a single array of options.
      * Each object in this array is enhanced to have:
@@ -198,9 +176,8 @@ class BaseOptionsSelector extends Component {
      * Scrolls to the focused index within the SectionList
      *
      * @param {Number} index
-     * @param {Boolean} animated
      */
-    scrollToIndex(index, animated = true) {
+    scrollToIndex(index) {
         const option = this.state.allOptions[index];
         if (!this.list || !option) {
             return;
@@ -219,7 +196,7 @@ class BaseOptionsSelector extends Component {
             }
         }
 
-        this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated});
+        this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex});
     }
 
     /**
@@ -293,13 +270,7 @@ class BaseOptionsSelector extends Component {
                 showTitleTooltip={this.props.showTitleTooltip}
                 isDisabled={this.props.isDisabled}
                 shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
-                onLayout={() => {
-                    this.scrollToIndex(this.state.focusedIndex, false);
-
-                    if (this.props.onLayout) {
-                        this.props.onLayout();
-                    }
-                }}
+                onLayout={this.props.onLayout}
             />
         ) : <FullScreenLoadingIndicator />;
         return (

src/components/OptionsSelector/optionsSelectorPropTypes.js

@@ -89,9 +89,6 @@ const propTypes = {
 
     /** Whether to show a line separating options in list */
     shouldHaveOptionSeparator: PropTypes.bool,
-
-    /** Key of the option that we should focus on when first opening the options list */
-    initiallyFocusedOptionKey: PropTypes.string,
 };
 
 const defaultProps = {
@@ -116,7 +113,6 @@ const defaultProps = {
     disableArrowKeysActions: false,
     isDisabled: false,
     shouldHaveOptionSeparator: false,
-    initiallyFocusedOptionKey: undefined,
 };
 
 export {propTypes, defaultProps};

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -88,9 +88,8 @@ class TimezoneSelectPage extends Component {
                     onChangeText={this.filterShownTimezones}
                     onSelectRow={this.saveSelectedTimezone}
                     optionHoveredStyle={styles.hoveredComponentBG}
-                    sections={[{data: this.state.timezoneOptions, indexOffset: 0}]}
+                    sections={[{data: this.state.timezoneOptions}]}
                     shouldHaveOptionSeparator
-                    initiallyFocusedOptionKey={this.currentSelectedTimezone}
                 />
             </ScreenWrapper>
         );

src/styles/styles.js

@@ -1770,7 +1770,7 @@ const styles = {
     },
 
     borderTop: {
-        borderTopWidth: variables.borderTopWidth,
+        borderTopWidth: 1,
         borderColor: themeColors.border,
     },
 

src/styles/variables.js

@@ -92,5 +92,4 @@ export default {
     checkboxLabelActiveOpacity: 0.7,
     avatarChatSpacing: 12,
     chatInputSpacing: 52, // 40 + avatarChatSpacing
-    borderTopWidth: 1,
 };