@widergy/mobile-ui 1.4.5 → 1.4.6

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

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

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