@widergy/mobile-ui 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.4.2](https://github.com/widergy/mobile-ui/compare/v1.4.1...v1.4.2) (2024-04-15)
+
+
+### Bug Fixes
+
+* native back button handler for UTTopbar ([#272](https://github.com/widergy/mobile-ui/issues/272)) ([36f8fd7](https://github.com/widergy/mobile-ui/commit/36f8fd7f467a7c0f342fc9d844452eec385e99a8))
+
+## [1.4.1](https://github.com/widergy/mobile-ui/compare/v1.4.0...v1.4.1) (2024-04-04)
+
+
+### Bug Fixes
+
+* minor fixes ([#271](https://github.com/widergy/mobile-ui/issues/271)) ([4cf7246](https://github.com/widergy/mobile-ui/commit/4cf724618ced022d4dbe515bf90395875957442d))
+
 # [1.4.0](https://github.com/widergy/mobile-ui/compare/v1.3.4...v1.4.0) (2024-03-26)
 
 

package/lib/components/Checkbox/index.js

@@ -70,8 +70,8 @@ const Checkbox = ({
             disabled
               ? disabledCheckedColor || theme.colors.disabled
               : checked
-              ? checkedColor || theme.colors.primary
-              : uncheckedColor || theme.colors.checkbox.unchecked
+                ? checkedColor || theme.colors.primary
+                : uncheckedColor || theme.colors.checkbox.unchecked
           }
           name={checked ? CHECKED_ICON : UNCHECKED_ICON}
           size={iconSize}

package/lib/components/UTMenu/components/ListView/index.js

@@ -22,8 +22,8 @@ class ListView extends PureComponent {
     return isMultiple
       ? !!selectedOption?.find?.(elem => elem === item.value)
       : !query
-      ? item.id === selectedOption
-      : item.id === filteredOptions[0].id;
+        ? item.id === selectedOption
+        : item.id === filteredOptions[0].id;
   };
 
   handleOnPress = item => {

package/lib/components/UTModal/index.js

@@ -15,26 +15,27 @@ import ownStyles from './styles';
 import { CLOSE_ICON } from './constants';
 
 const UTModal = ({
-  children,
-  onRequestClose,
   acceptButton,
-  cancelButton,
-  visible,
-  title,
-  subtitle,
-  subtitleProps = {},
-  loading,
+  backgroundImg,
   backgroundStyles,
-  imageStyles,
-  disableTouchable,
-  loadingText,
-  modalBackgroundColor,
+  cancelButton,
+  children,
   color,
+  disableTouchable,
+  hideCloseButton,
+  hideSeparatorBar,
   imageComponent,
+  imageStyles,
   labelProps,
+  loading,
+  loadingText,
+  modalBackgroundColor,
   modalStyles,
-  backgroundImg,
-  hideSeparatorBar
+  onRequestClose,
+  subtitle,
+  subtitleProps = {},
+  title,
+  visible
 }) => {
   const theme = useTheme();
   const themeStyles = theme.simpleButton;
@@ -67,18 +68,20 @@ const UTModal = ({
                 )}
                 {!!imageComponent && (
                   <View style={[styles.content, imageStyles]}>
-                    <Touchable
-                      borderless
-                      style={styles.closeIcon}
-                      onPress={onRequestClose || cancelButton.onPress}
-                    >
-                      <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
-                    </Touchable>
+                    {!hideCloseButton && (
+                      <Touchable
+                        borderless
+                        style={styles.closeIcon}
+                        onPress={onRequestClose || cancelButton.onPress}
+                      >
+                        <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
+                      </Touchable>
+                    )}
                     <View style={styles.imageContainer}>{imageComponent}</View>
                   </View>
                 )}
                 <View style={styles.content}>
-                  {!backgroundImg && !imageComponent && (
+                  {!backgroundImg && !imageComponent && !hideCloseButton && (
                     <Touchable borderless style={styles.closeIcon} onPress={onRequestClose}>
                       <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
                     </Touchable>

package/lib/components/UTModal/proptypes.js

@@ -6,30 +6,31 @@ import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
 const buttonPropType = shape({
   backgroundColor: string,
-  text: string,
-  onPress: func,
   disabled: bool,
   loadingText: string,
+  onPress: func,
+  text: string,
   textColor: string
 });
 
 export default {
-  onRequestClose: IS_ANDROID ? func.isRequired : func,
-  cancelButton: buttonPropType,
   acceptButton: buttonPropType,
-  visible: bool.isRequired,
-  loading: bool,
-  title: string,
+  backgroundImg: number,
+  backgroundStyles: ViewPropTypes.style,
+  cancelButton: buttonPropType,
   disableTouchable: bool,
-  modalBackgroundColor: string,
-  onKeyboardDismiss: func,
-  loadingText: string,
   fill: string,
-  imageStyles: ViewPropTypes.style,
-  backgroundStyles: ViewPropTypes.style,
-  modalStyles: ViewPropTypes.style,
+  hideCloseButton: bool,
   image: element,
-  backgroundImg: number,
+  imageStyles: ViewPropTypes.style,
   labelProps: shape(bool),
-  theme: themeType
+  loading: bool,
+  loadingText: string,
+  modalBackgroundColor: string,
+  modalStyles: ViewPropTypes.style,
+  onKeyboardDismiss: func,
+  onRequestClose: IS_ANDROID ? func.isRequired : func,
+  theme: themeType,
+  title: string,
+  visible: bool.isRequired
 };

package/lib/components/UTSwitch/index.js

@@ -91,8 +91,8 @@ const UTSwitch = ({
     thumbTrackDiference <= 0
       ? trackLength - thumbSize
       : thumbTrackDiference > thumbSize / 2
-      ? trackLength - thumbSize * 1.5
-      : trackLength - thumbSize * 1.2;
+        ? trackLength - thumbSize * 1.5
+        : trackLength - thumbSize * 1.2;
 
   return (
     <TouchableWithoutFeedback

package/lib/components/UTTextInput/components/BaseInput/index.js

@@ -9,7 +9,7 @@ import Icon from '../../../Icon';
 import Touchable from '../../../Touchable';
 
 import { DEBOUNCE_DELAY, DEBOUNCE_CONFIG, VISIBILITY, VISIBILITY_OFF } from './constants';
-import styles, { ICON_SIZE } from './styles';
+import styles from './styles';
 
 const BaseInput = forwardRef(
   (

package/lib/components/UTTextInput/flavors/OutlinedInput/index.js

@@ -79,10 +79,10 @@ const OutlinedInput = ({
               borderWidth: borderless
                 ? 0
                 : focused
-                ? 2
-                : disabled
-                ? themeStyles?.inactive?.disabledBorderWidth ?? 1
-                : 1,
+                  ? 2
+                  : disabled
+                    ? themeStyles?.inactive?.disabledBorderWidth ?? 1
+                    : 1,
               borderColor: active ? activeColor : inactiveColor
             },
             styles?.inputContainer

package/lib/components/UTTopbar/index.js

@@ -1,6 +1,8 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useCallback } from 'react';
+import { BackHandler, View } from 'react-native';
 import { number } from 'prop-types';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useFocusEffect } from '@react-navigation/native';
 
 import IconButton from '../IconButton';
 import Label from '../Label';
@@ -23,6 +25,19 @@ const UTTopbar = ({
 
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
+  useFocusEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        goBack();
+        return true;
+      };
+
+      const subscription = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+
+      return () => subscription.remove();
+    }, [goBack])
+  );
+
   return (
     <View>
       <View style={[ownStyles.container, ownTheme?.container]}>

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/index.js

@@ -20,6 +20,7 @@ const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
         lowerCase
         title={label}
         onPress={onPress}
+        contentStyle={themedStyles.buttonContent}
         containerStyle={themedStyles.buttonContainer}
       />
     </View>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -23,17 +23,18 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.7",
     "prop-types": "*",
     "react": "*",
     "react-native": "*",
     "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
     "react-native-pager-view": "^6.2.0",
-    "@bam.tech/react-native-image-resizer": "^3.0.7",
     "react-native-svg": "^13.0.0",
     "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.1.9",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
     "deprecated-react-native-prop-types": "^4.2.1",