@momo-kits/auto-complete 0.77.5 → 0.77.6

package/index.tsx

@@ -1,7 +1,7 @@
 import React, {FC, useEffect, useState} from 'react';
 import {FlatList, TouchableOpacity} from 'react-native';
 import {Divider, Shadow, Text} from '@momo-kits/foundation';
-import {AutoCompleteProps, ListItemProps, SuggestItem} from './types';
+import {AutoCompleteProps, SuggestItem} from './types';
 import styles from './styles';
 
 const AutoComplete: FC<AutoCompleteProps> = ({
@@ -9,6 +9,7 @@ const AutoComplete: FC<AutoCompleteProps> = ({
   query = '',
   onPressItem,
   maxItemShow = 5,
+  searchKey = 'title',
 }) => {
   const [haveSelected, setHaveSelected] = useState(false);
 
@@ -36,7 +37,7 @@ const AutoComplete: FC<AutoCompleteProps> = ({
         if (typeof item === 'string') {
           return regex.test(removeDiacritics(item.toLowerCase()));
         } else {
-          return regex.test(removeDiacritics(item.title.toLowerCase()));
+          return regex.test(removeDiacritics(item?.[searchKey].toLowerCase()));
         }
       })
       .slice(0, maxItemShow);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/auto-complete",
-    "version": "0.77.5",
+    "version": "0.77.6",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {

package/types.ts

@@ -1,16 +1,60 @@
 import {ReactElement} from 'react';
 
+/**
+ * Represents a suggested item in the autocomplete list. Each item has a title for display
+ * and a value that represents the underlying data.
+ */
 export type SuggestItem = {
-  title: string;
-  value?: string;
+  title: string; // The display text for a suggestion item.
+  value: string; // The underlying value or identifier for this item.
 };
 
+/**
+ * Props for configuring the AutoComplete component.
+ */
 export type AutoCompleteProps = {
+  /**
+   * An array of strings or `SuggestItem` objects that will be used to create the
+   * autocomplete dropdown list.
+   */
   data: Array<string | SuggestItem>;
+
+  /**
+   * The current text in the autocomplete input field. This is used to determine
+   * which suggestions to display.
+   */
   query: string;
+
+  /**
+   * Optional. The maximum number of items to display in the dropdown list. If not
+   * provided, all matching items will be shown.
+   */
   maxItemShow?: number;
+
+  /**
+   * Optional. A function to render the UI of each item in the dropdown list.
+   * This is useful for adding custom styling or formatting to the displayed items.
+   */
   renderItem?: (data: string) => ReactElement;
+
+  /**
+   * A function that is called when a user selects an item from the autocomplete list.
+   * It receives two arguments: the display text of the selected item and its corresponding value.
+   */
   onPressItem?: (item: string, value: null | string | undefined) => void;
+
+  /**
+   * Indicates whether the 'title' or 'value' of a `SuggestItem` should be used for
+   * searching. This affects which items are filtered into the dropdown list as the
+   * user types in the input field.
+   */
+  searchKey: 'title' | 'value';
 };
 
-export type ListItemProps = {item: string; index: number};
+/**
+ * Props for representing individual items in the autocomplete suggestions list.
+ */
+export type ListItemProps = {
+  item: string; // The content or data of the list item, to be rendered in the list.
+  index: number; // Represents the position of this item within the list.
+};