@widergy/mobile-ui 1.32.14 → 1.32.15

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.32.15](https://github.com/widergy/mobile-ui/compare/v1.32.14...v1.32.15) (2025-01-02)
+
+
+### Bug Fixes
+
+* [EVE-4361] bottom sheet actions ([#389](https://github.com/widergy/mobile-ui/issues/389)) ([97ed997](https://github.com/widergy/mobile-ui/commit/97ed997423209b0901c061abc82ea4656d210b91))
+
 ## [1.32.14](https://github.com/widergy/mobile-ui/compare/v1.32.13...v1.32.14) (2025-01-02)
 
 

package/lib/components/UTBottomSheet/README.md

@@ -6,15 +6,35 @@
 
 ## Props
 
-| Name        | Type   | Default | Description                                                             |
-| ----------- | ------ | ------- | ----------------------------------------------------------------------- |
-| buttonText  | string |         | Text for the button that appears in the top right corner of the header. |
-| description | string |         | Description that appears below the title in the header.                 |
-| onClose     | func   |         | Function called when the bottom sheet is closed.                        |
-| required    | bool   |         | Indicates if the field is required, showing an asterisk in the title.   |
-| title       | string |         | Title that appears in the bottom sheet header.                          |
-| visible     | bool   |         | Controls the visibility of the bottom sheet.                            |
-| scrolleable | bool   | false   | Determines if the content inside the bottom sheet should be scrollable. |
+| Name                      | Type     | Default     | Description                                                                  |
+| ------------------------- | -------- | ----------- | ---------------------------------------------------------------------------  |
+| `buttonText`               | `string` |             | Text for the button that appears in the top right corner of the header.     |
+| `description`              | `string` |             | Description that appears below the title in the header.                     |
+| `onClose`                  | `func`   |             | Function called when the bottom sheet is closed.                            |
+| `required`                 | `bool`   |             | Indicates if the field is required, showing an asterisk in the title.       |
+| `title`                    | `string` |             | Title that appears in the bottom sheet header.                              |
+| `visible`                  | `bool`   |             | Controls the visibility of the bottom sheet.                                |
+| `scrolleable`              | `bool`   | `false`     | Determines if the content inside the bottom sheet should be scrollable.     |
+| `actionAlignment`          | `string` |             | Aligns the actions.                                                         |
+| `onCloseProps`             | `object` |             | Additional props passed to the `onClose` function (optional).               |
+| `primaryAction`            | `func`   |             | Callback for the primary action button.                                     |
+| `primaryActionProps`       | `object` |             | Props for the primary action button.                                        |
+| `primaryActionText`        | `string` |             | Text for the primary action button.                                         |
+| `secondaryAction`          | `func`   |             | Callback for the secondary action button.                                   |
+| `secondaryActionProps`     | `object` |             | Props for the secondary action button.                                      |
+| `secondaryActionText`      | `string` |             | Text for the secondary action button.                                       |
+| `tertiaryAction`           | `func`   |             | Callback for the tertiary action button.                                    |
+| `tertiaryActionProps`      | `object` |             | Props for the tertiary action button .                                      |
+| `tertiaryActionText`       | `string` |             | Text for the tertiary action button.                                        |
+
+### actionAlignment
+
+The value of `actionAlignment` must be one of the following:
+
+- `horizontal`
+- `vertical`
+
+By default, actions are aligned horizontally if there are two, and vertically otherwise.
 
 ## Example
 

package/lib/components/UTBottomSheet/constants.js

@@ -0,0 +1,4 @@
+export const ACTION_ALIGNMENTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};

package/lib/components/UTBottomSheet/index.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { SafeAreaView, View, PanResponder, Animated, Dimensions, ScrollView, Keyboard } from 'react-native';
 import Modal from 'react-native-modal';
-import { bool, func, string } from 'prop-types';
+import { bool, func, object, string } from 'prop-types';
 
 import { useTheme } from '../../theming';
 import UTButton from '../UTButton';
@@ -9,16 +9,28 @@ import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 
 import styles from './styles';
+import { ACTION_ALIGNMENTS } from './constants';
 
 const screenHeight = Dimensions.get('window').height;
 
 const UTBottomSheet = ({
+  actionAlignment: actionAlignment_,
   buttonText,
   children,
   description,
   onClose,
+  onCloseProps = {},
+  primaryAction,
+  primaryActionProps = {},
+  primaryActionText,
   required,
   scrolleable,
+  secondaryAction,
+  secondaryActionProps = {},
+  secondaryActionText,
+  tertiaryAction,
+  tertiaryActionProps = {},
+  tertiaryActionText,
   title,
   visible
 }) => {
@@ -76,6 +88,11 @@ const UTBottomSheet = ({
 
   const ChildrenContainer = scrolleable ? ScrollView : View;
 
+  const actionAlignment =
+    actionAlignment_ || [primaryAction, secondaryAction, tertiaryAction].filter(Boolean).length === 2
+      ? ACTION_ALIGNMENTS.HORIZONTAL
+      : ACTION_ALIGNMENTS.VERTICAL;
+
   return (
     <Modal
       animationIn="slideInUp"
@@ -101,7 +118,12 @@ const UTBottomSheet = ({
                   {title}
                 </UTFieldLabel>
                 {buttonText && (
-                  <UTButton colorTheme="primary" onPress={onClose} variant="semitransparent">
+                  <UTButton
+                    colorTheme="primary"
+                    onPress={onClose}
+                    variant="semitransparent"
+                    {...onCloseProps}
+                  >
                     {buttonText}
                   </UTButton>
                 )}
@@ -116,6 +138,43 @@ const UTBottomSheet = ({
               {children}
             </ChildrenContainer>
           </View>
+          <View style={styles.actions(actionAlignment)}>
+            {[
+              {
+                key: 'primaryAction',
+                onPress: primaryAction,
+                text: primaryActionText,
+                ...primaryActionProps
+              },
+              {
+                key: 'secondaryAction',
+                onPress: secondaryAction,
+                text: secondaryActionText,
+                variant: 'semitransparent',
+                ...secondaryActionProps
+              },
+              {
+                key: 'tertiaryAction',
+                onPress: tertiaryAction,
+                text: tertiaryActionText,
+                variant: 'text',
+                ...tertiaryActionProps
+              }
+            ].map(
+              ({ text, key, onPress, ...actionProps }) =>
+                onPress && (
+                  <UTButton
+                    key={key}
+                    onPress={onPress}
+                    size="large"
+                    style={styles.action(actionAlignment)}
+                    {...actionProps}
+                  >
+                    {text}
+                  </UTButton>
+                )
+            )}
+          </View>
         </SafeAreaView>
       </Animated.View>
     </Modal>
@@ -127,11 +186,22 @@ UTBottomSheet.defaultProps = {
 };
 
 UTBottomSheet.propTypes = {
+  actionAlignment: string,
   buttonText: string,
   description: string,
   onClose: func,
+  onCloseProps: object,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
   required: bool,
   scrolleable: bool,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  tertiaryAction: func,
+  tertiaryActionProps: object,
+  tertiaryActionText: string,
   title: string,
   visible: bool
 };

package/lib/components/UTBottomSheet/styles.js

@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 
+import { ACTION_ALIGNMENTS } from './constants';
+
 const styles = StyleSheet.create({
   animatedContainer: {
     backgroundColor: 'white', // When the component is standardized, should change to palette color
@@ -44,7 +46,32 @@ const styles = StyleSheet.create({
   },
   title: {
     flex: 1
-  }
+  },
+  action: actionAlignment => ({
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      flexGrow: 1,
+      borderRadius: {
+        [ACTION_ALIGNMENTS.VERTICAL]: 4,
+        [ACTION_ALIGNMENTS.HORIZONTAL]: 0
+      }[actionAlignment]
+    }
+  }),
+  actions: actionAlignment => ({
+    display: 'flex',
+    ...{
+      [ACTION_ALIGNMENTS.VERTICAL]: {
+        flexDirection: 'coloumn',
+        paddingHorizontal: 16,
+        gap: 8,
+        paddingBottom: 16
+      },
+      [ACTION_ALIGNMENTS.HORIZONTAL]: {
+        flexDirection: 'row'
+      }
+    }[actionAlignment]
+  })
 });
 
 export default styles;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.32.14",
+  "version": "1.32.15",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [