From fa293595f0b3e521e9157b4226bf008539088d25 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 17 Dec 2024 16:28:35 +0200
Subject: [PATCH] add scroll container option to ActionSheet component

---
 .../componentScreens/ActionSheetScreen.tsx    | 20 ++++++++------
 src/components/actionSheet/index.tsx          | 26 ++++++++++++++-----
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/demo/src/screens/componentScreens/ActionSheetScreen.tsx b/demo/src/screens/componentScreens/ActionSheetScreen.tsx
index 8ad4320d64..d9a91ac8bd 100644
--- a/demo/src/screens/componentScreens/ActionSheetScreen.tsx
+++ b/demo/src/screens/componentScreens/ActionSheetScreen.tsx
@@ -1,6 +1,7 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {View, Text, Button, ActionSheet} from 'react-native-ui-lib'; //eslint-disable-line
-import _ from 'lodash';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 const useCases = [
   {label: 'Default (Android/iOS)', useNativeIOS: false, icons: false},
@@ -11,13 +12,13 @@ const collectionsIcon = require('../../assets/icons/collections.png');
 const starIcon = require('../../assets/icons/star.png');
 const shareIcon = require('../../assets/icons/share.png');
 
-
 export default class ActionSheetScreen extends Component {
   state = {
     showNative: false,
     showCustom: false,
     showCustomIcons: false,
-    pickedOption: undefined
+    pickedOption: undefined,
+    scrollContainer: false
   };
 
   pickOption(index: string) {
@@ -27,7 +28,7 @@ export default class ActionSheetScreen extends Component {
   }
 
   render() {
-    const {showCustom, showCustomIcons, showNative, pickedOption} = this.state;
+    const {showCustom, showCustomIcons, showNative, pickedOption, scrollContainer} = this.state;
     return (
       <View flex padding-25>
         <Text text30>Action Sheet</Text>
@@ -47,7 +48,8 @@ export default class ActionSheetScreen extends Component {
                     showNative: useCase.useNativeIOS,
                     showCustom: !useCase.useNativeIOS && !useCase.icons,
                     showCustomIcons: !useCase.useNativeIOS && useCase.icons
-                  })}
+                  })
+                }
               />
             );
           })}
@@ -57,7 +59,6 @@ export default class ActionSheetScreen extends Component {
             <Text>User picked {pickedOption}</Text>
           </View>
         )}
-
         <ActionSheet
           title={'Title'}
           message={'Message of action sheet'}
@@ -65,6 +66,7 @@ export default class ActionSheetScreen extends Component {
           destructiveButtonIndex={0}
           useNativeIOS={false}
           migrateDialog
+          scrollContainer={scrollContainer}
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -74,13 +76,13 @@ export default class ActionSheetScreen extends Component {
           visible={showCustom}
           onDismiss={() => this.setState({showCustom: false})}
         />
-
         <ActionSheet
           title={'Title'}
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           migrateDialog
+          scrollContainer={scrollContainer}
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},
@@ -91,7 +93,6 @@ export default class ActionSheetScreen extends Component {
           visible={showCustomIcons}
           onDismiss={() => this.setState({showCustomIcons: false})}
         />
-
         <ActionSheet
           title={'Title'}
           message={'Message of action sheet'}
@@ -107,6 +108,9 @@ export default class ActionSheetScreen extends Component {
           useNativeIOS
           onDismiss={() => this.setState({showNative: false})}
         />
+        <View marginT-s2>
+          {renderBooleanOption.call(this, 'Use ScrollView (default ActionSheet):', 'scrollContainer')}
+        </View>
       </View>
     );
   }
diff --git a/src/components/actionSheet/index.tsx b/src/components/actionSheet/index.tsx
index 155a132f90..ff5a751050 100644
--- a/src/components/actionSheet/index.tsx
+++ b/src/components/actionSheet/index.tsx
@@ -1,6 +1,14 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ActionSheetIOS, StyleSheet, StyleProp, ViewStyle, ImageProps, ImageSourcePropType} from 'react-native';
+import {
+  ActionSheetIOS,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ImageProps,
+  ImageSourcePropType,
+  ScrollView
+} from 'react-native';
 import {Colors} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
 import Dialog, {DialogProps} from '../dialog';
@@ -73,7 +81,7 @@ type ActionSheetProps = {
    */
   optionsStyle?: StyleProp<ViewStyle>;
   /**
-   * Render custom title
+   * Render custom title, relevant for old Dialog only
    */
   renderTitle?: () => JSX.Element;
   /**
@@ -101,6 +109,10 @@ type ActionSheetProps = {
    * testID for e2e tests
    */
   testID?: string;
+  /**
+   * Whether to use ScrollView as the container
+   */
+  scrollContainer?: boolean;
 };
 
 /**
@@ -211,12 +223,13 @@ class ActionSheet extends Component<ActionSheetProps> {
 
   renderSheet() {
     const {renderTitle} = this.props;
-    const {containerStyle} = this.props;
+    const {containerStyle, migrateDialog, scrollContainer = false} = this.props;
+    const Container = scrollContainer ? ScrollView : View;
     return (
-      <View style={[styles.sheet, containerStyle]}>
-        {_.isFunction(renderTitle) ? renderTitle() : this.renderTitle()}
+      <Container style={[styles.sheet, containerStyle]}>
+        {_.isFunction(renderTitle) ? renderTitle() : !migrateDialog && this.renderTitle()}
         {this.renderActions()}
-      </View>
+      </Container>
     );
   }
 
@@ -266,6 +279,7 @@ class ActionSheet extends Component<ActionSheetProps> {
         containerStyle={[styles.incubatorDialog, dialogStyle]}
         visible={visible}
         onDismiss={onDismiss}
+        headerProps={{title: this.props.title}}
       >
         {this.renderSheet()}
       </IncubatorDialog>