Merge pull request #41664 from hungvu193/feat/update-connection-layout

Add ability to use View in ConnectionLayout
Expensify · May 7, 2024 · 23297de · 23297de
2 parents 84118d8 + 2cf4bc4
commit 23297de
Showing 1 changed file with 39 additions and 7 deletions.
diff --git a/src/components/ConnectionLayout.tsx b/src/components/ConnectionLayout.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -45,8 +46,25 @@ type ConnectionLayoutProps = {
 
     /** Style of the subtitle text */
     subTitleStyle?: StyleProp<TextStyle> | undefined;
+
+    /** Whether to use ScrollView or not */
+    shouldUseScrollView?: boolean;
 };
 
+type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'subtitle' | 'subTitleStyle' | 'children'>;
+
+function ConnectionLayoutContent({title, titleStyle, subtitle, subTitleStyle, children}: ConnectionLayoutContentProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    return (
+        <>
+            {title && <Text style={[styles.pb5, titleStyle]}>{translate(title)}</Text>}
+            {subtitle && <Text style={[styles.textLabelSupporting, subTitleStyle]}>{translate(subtitle)}</Text>}
+            {children}
+        </>
+    );
+}
+
 function ConnectionLayout({
     displayName,
     headerTitle,
@@ -59,10 +77,24 @@ function ConnectionLayout({
     contentContainerStyle,
     titleStyle,
     subTitleStyle,
+    shouldUseScrollView = true,
 }: ConnectionLayoutProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const renderSelectionContent = useMemo(
+        () => (
+            <ConnectionLayoutContent
+                title={title}
+                subtitle={subtitle}
+                subTitleStyle={subTitleStyle}
+                titleStyle={titleStyle}
+            >
+                {children}
+            </ConnectionLayoutContent>
+        ),
+        [title, subtitle, titleStyle, subTitleStyle, children],
+    );
+
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
@@ -78,11 +110,11 @@ function ConnectionLayout({
                     title={translate(headerTitle)}
                     onBackButtonPress={() => Navigation.goBack()}
                 />
-                <ScrollView contentContainerStyle={contentContainerStyle}>
-                    {title && <Text style={[styles.pb5, titleStyle]}>{translate(title)}</Text>}
-                    {subtitle && <Text style={[styles.textLabelSupporting, subTitleStyle]}>{translate(subtitle)}</Text>}
-                    {children}
-                </ScrollView>
+                {shouldUseScrollView ? (
+                    <ScrollView contentContainerStyle={contentContainerStyle}>{renderSelectionContent}</ScrollView>
+                ) : (
+                    <View style={contentContainerStyle}>{renderSelectionContent}</View>
+                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );