@widergy/mobile-ui 1.4.1 → 1.4.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.4.3](https://github.com/widergy/mobile-ui/compare/v1.4.2...v1.4.3) (2024-04-15)
+
+
+### Bug Fixes
+
+* utselectablecard width with long titles ([#274](https://github.com/widergy/mobile-ui/issues/274)) ([32def84](https://github.com/widergy/mobile-ui/commit/32def847aeaca0d10598aad28c2b9625aa42826a))
+
+## [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)
 
 

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/UTSelectableCard/index.js

@@ -62,10 +62,10 @@ const UTSelectableCard = ({
         )}
         <View style={themedStyles.textContainer}>
           <View style={themedStyles.column}>
-            <View style={themedStyles.titleAndTooltip}>
+            <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
               <Label
                 color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                style={themedStyles.title}
+                style={tooltip && themedStyles.titleMargin}
               >
                 {titleText}
               </Label>

package/lib/components/UTSelectableCard/styles.js

@@ -30,7 +30,7 @@ export const getUTSelectableCardStyles = (theme = {}) =>
       flexGrow: 1,
       justifyContent: 'space-between'
     },
-    title: {
+    titleMargin: {
       marginRight: 8
     },
     titleAndTooltip: {
@@ -38,6 +38,9 @@ export const getUTSelectableCardStyles = (theme = {}) =>
       display: 'flex',
       flexDirection: 'row'
     },
+    selectedTitleAndTooltip: {
+      maxWidth: 300
+    },
 
     // Sizes
     mediumSize: {

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/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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",