@widergy/mobile-ui 1.4.4 → 1.4.6

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [1.4.6](https://github.com/widergy/mobile-ui/compare/v1.4.5...v1.4.6) (2024-04-22)
+
+
+### Bug Fixes
+
+* allow autocomplete custom behaviour ([#273](https://github.com/widergy/mobile-ui/issues/273)) ([775faf0](https://github.com/widergy/mobile-ui/commit/775faf02c9ed0f184a150d735735dd0a40cd8753))
+
+## [1.4.5](https://github.com/widergy/mobile-ui/compare/v1.4.4...v1.4.5) (2024-04-22)
+
+
+### Bug Fixes
+
+* goback ([1f85d68](https://github.com/widergy/mobile-ui/commit/1f85d682b0966087e7273a8bfa3d859eeabcb5c5))
+* margin password field ([de3c51a](https://github.com/widergy/mobile-ui/commit/de3c51a8d4dc38e67754dfdb9e1420cef3776ea5))
+* topbar ([f49a436](https://github.com/widergy/mobile-ui/commit/f49a436235a4635ae24e59df39984231ff8d2d73))
+* utheader styles ([926250f](https://github.com/widergy/mobile-ui/commit/926250ff3ceccac50b75eb861b5b4fc1cecab23e))
+
 ## [1.4.4](https://github.com/widergy/mobile-ui/compare/v1.4.3...v1.4.4) (2024-04-18)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -1,4 +1,4 @@
-import { arrayOf, bool, func, oneOf, shape, string } from 'prop-types';
+import { arrayOf, bool, element, func, oneOf, shape, string } from 'prop-types';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -8,9 +8,19 @@ import UTTextInput from '../UTTextInput';
 
 import styles from './styles';
 
-const UTAutocomplete = ({ input, options, disabled, label, error, variant, autoCompletePlaceholder }) => {
+const UTAutocomplete = ({
+  input,
+  options,
+  disabled,
+  label,
+  error,
+  variant,
+  autoCompletePlaceholder,
+  MenuOptionComponent,
+  filterOptions
+}) => {
   const selectedOption = useMemo(
-    () => options.find(option => option.value === input.value),
+    () => options?.find(option => option.value === input.value),
     [options, input.value]
   );
 
@@ -29,8 +39,11 @@ const UTAutocomplete = ({ input, options, disabled, label, error, variant, autoC
         onOpen={input.onFocus}
         onClose={input.onBlur}
         disabled={disabled}
+        onQueryChange={input.onQueryChange}
         autoCompletePlaceholder={autoCompletePlaceholder}
         maxHeight={WINDOW_HEIGHT * 0.25}
+        MenuOptionComponent={MenuOptionComponent}
+        filterOptions={filterOptions}
       >
         <UTTextInput
           variant={variant}
@@ -64,7 +77,9 @@ UTAutocomplete.propTypes = {
   label: string,
   error: oneOf([bool, string]),
   variant: string,
-  autoCompletePlaceholder: string
+  autoCompletePlaceholder: string,
+  MenuOptionComponent: element,
+  filterOptions: bool
 };
 
 export default UTAutocomplete;

package/lib/components/UTHeader/index.js

@@ -18,35 +18,52 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
 
   const Tagline = renderComponent(
     tagline,
-    <Label disabled bold useMarkdown={useMarkdown} style={themedStyles.child}>
+    <Label
+      color={themedStyles.taglineColor || theme.colors.disabled}
+      bold
+      useMarkdown={useMarkdown}
+      style={[themedStyles.child, themedStyles.tagline]}
+    >
       {tagline?.toUpperCase?.()}
     </Label>
   );
 
   const Title = renderComponent(
     title,
-    <Label big bold style={themedStyles.title} useMarkdown={useMarkdown}>
+    <Label color={themedStyles.titleColor} big bold style={themedStyles.title} useMarkdown={useMarkdown}>
       {title}
     </Label>
   );
 
   const Subtitle = renderComponent(
     subtitle,
-    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
+    <Label
+      color={themedStyles.subtitleColor || theme.colors.disabled}
+      useMarkdown={useMarkdown}
+      style={[themedStyles.child, themedStyles.subtitle]}
+    >
       {subtitle}
     </Label>
   );
 
   const RequiredFieldInfo = renderComponent(
     requiredFieldInfo,
-    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
+    <Label
+      color={themedStyles.requiredFieldInfoColor || theme.colors.disabled}
+      useMarkdown={useMarkdown}
+      style={[themedStyles.child, themedStyles.requiredFieldInfo]}
+    >
       {requiredFieldInfo}
     </Label>
   );
 
   const HelpText = renderComponent(
     helpText,
-    <Label disabled useMarkdown={useMarkdown} style={themedStyles.child}>
+    <Label
+      color={themedStyles.helpTextColor || theme.colors.disabled}
+      useMarkdown={useMarkdown}
+      style={[themedStyles.child, themedStyles.helpText]}
+    >
       {helpText}
     </Label>
   );

package/lib/components/UTMenu/index.js

@@ -27,6 +27,8 @@ const UTMenu = ({
   maxHeight,
   isMultiple,
   autoCompletePlaceholder,
+  onQueryChange,
+  filterOptions = true,
   withAutocomplete
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -37,10 +39,11 @@ const UTMenu = ({
   const [menuDimentions, setMenuDimentions] = useState({ width: 0, height: 0 });
   const [query, setQuery] = useState('');
   const searchTextInputRef = useRef();
-  const filteredOptions = useMemo(
-    () => options.filter(option => !query || option.label.toUpperCase().includes(query.toUpperCase())),
-    [query, options]
-  );
+  const filteredOptions = useMemo(() => {
+    return filterOptions
+      ? options.filter(option => !query || option.label.toUpperCase().includes(query.toUpperCase()))
+      : options;
+  }, [query, options, filterOptions]);
 
   const { height: windowHeight, width: windowWidth } = Dimensions.get('window');
 
@@ -97,6 +100,11 @@ const UTMenu = ({
 
   const focusSearchInput = () => withAutocomplete && searchTextInputRef.current?.focus();
 
+  const handleQueryChange = value => {
+    setQuery(value);
+    onQueryChange(value);
+  };
+
   return (
     <>
       <TouchableOpacity
@@ -129,7 +137,7 @@ const UTMenu = ({
                 <UTTextInput
                   InputRef={searchTextInputRef}
                   value={query}
-                  onChange={setQuery}
+                  onChange={handleQueryChange}
                   placeholder={autoCompletePlaceholder}
                   onSubmitEditing={
                     query && filteredOptions[0]

package/lib/components/UTPasswordField/components/PasswordValidations/components/Validation/styles.js

@@ -6,6 +6,7 @@ export default StyleSheet.create({
     alignItems: 'center'
   },
   label: {
+    marginBottom: 8,
     marginLeft: 10
   }
 });

package/lib/components/UTTopbar/index.js

@@ -1,7 +1,6 @@
 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';

package/package.json

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