@momo-kits/auto-complete 0.73.3-beta.5 → 0.74.2-react-native.2

package/index.tsx

@@ -0,0 +1,87 @@
+import React, {FC, useEffect, useState} from 'react';
+import {FlatList, TouchableOpacity} from 'react-native';
+import {Divider, Shadow, Text} from '@momo-kits/foundation';
+import {AutoCompleteProps, SuggestItem} from './types';
+import styles from './styles';
+
+const AutoComplete: FC<AutoCompleteProps> = ({
+  data = [],
+  query = '',
+  onPressItem,
+  maxItemShow = 5,
+  searchKey = 'title',
+}) => {
+  const [haveSelected, setHaveSelected] = useState(false);
+
+  useEffect(() => {
+    setHaveSelected(false);
+    onSearch(query);
+    return () => {};
+  }, [query]);
+
+  const removeDiacritics = (str: string) => {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  };
+
+  const sanitizeInput = (str: string) => {
+    return str.replace(/[\\/*+?().{}[\]^$|]/g, '');
+  };
+
+  const onSearch = (query: string) => {
+    const sanitizedText = sanitizeInput(query);
+    const normalizedText = removeDiacritics(sanitizedText.trim().toLowerCase());
+    const regex = new RegExp(normalizedText, 'i');
+
+    const filtered: (string | SuggestItem)[] = data
+      .filter((item: string | SuggestItem) => {
+        if (typeof item === 'string') {
+          return regex.test(removeDiacritics(item.toLowerCase()));
+        } else {
+          return regex.test(removeDiacritics(item?.[searchKey].toLowerCase()));
+        }
+      })
+      .slice(0, maxItemShow);
+    return filtered;
+  };
+
+  const onSelected = (title: string, value: null | string | undefined) => {
+    setHaveSelected(true);
+    onPressItem?.(title, value);
+  };
+
+  const _renderItem = ({item}: {item: string | SuggestItem}) => {
+    const title = typeof item === 'string' ? item : item.title;
+    const value = typeof item === 'string' ? null : item.value;
+
+    return (
+      <TouchableOpacity
+        onPress={() => onSelected(title, value)}
+        style={styles.item}>
+        <Text numberOfLines={1} typography={'body_default_regular'}>
+          {title}
+        </Text>
+        {!!value && (
+          <Text numberOfLines={1} typography={'body_default_regular'}>
+            {value}
+          </Text>
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  const filteredData = onSearch(query);
+
+  if (filteredData.length === 0 || query.length === 0 || haveSelected)
+    return null;
+  return (
+    <FlatList
+      keyExtractor={(item, index) => index.toString()}
+      ItemSeparatorComponent={() => <Divider />}
+      style={[styles.flatList, Shadow.Light]}
+      data={filteredData}
+      renderItem={_renderItem}
+    />
+  );
+};
+
+export {AutoComplete};

package/package.json

@@ -1,16 +1,17 @@
 {
     "name": "@momo-kits/auto-complete",
-    "version": "0.73.3-beta.5",
+    "version": "0.74.2-react-native.2",
     "private": false,
-    "main": "index.js",
-    "dependencies": {},
+    "main": "index.tsx",
     "peerDependencies": {
-        "react": "16.9.0",
-        "react-native": ">=0.55",
-        "@momo-kits/core": ">=0.0.4-beta",
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2"
+        "@momo-kits/foundation": "latest",
+        "react": "*",
+        "react-native": "*",
+        "prop-types": "15.7.2"
     },
-    "devDependencies": {},
-    "license": "MoMo"
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
 }

package/publish.sh

@@ -25,5 +25,4 @@ npm publish --tag beta --access=public
 cd ..
 rm -rf dist
 
-
-##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/auto-complete new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/auto-complete"}'
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/bank new version release: '*"$VERSION"*' `https://www.npmjs.com/package/@momo-kits/auto-complete`"}'

package/styles.ts

@@ -0,0 +1,15 @@
+import {StyleSheet} from 'react-native';
+import {Radius, Spacing} from '@momo-kits/foundation';
+
+export default StyleSheet.create({
+  flatList: {
+    backgroundColor: 'white',
+    borderRadius: Radius.S,
+    paddingHorizontal: Spacing.M,
+  },
+  item: {
+    paddingVertical: Spacing.M,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});

package/types.ts

@@ -0,0 +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; // 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';
+};
+
+/**
+ * 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.
+};

package/AutoComplete.js

@@ -1,395 +0,0 @@
-/* eslint-disable no-extra-boolean-cast */
-/* eslint-disable no-param-reassign */
-import React, { Component } from 'react';
-import {
-    findNodeHandle,
-    StyleSheet,
-    UIManager,
-    View,
-    Platform,
-} from 'react-native';
-import { debounce, get } from 'lodash';
-import PropTypes from 'prop-types';
-import {
-    ValueUtil,
-    NumberUtils,
-    Colors,
-    Text,
-    RNGestureHandler,
-} from '@momo-kits/core';
-
-const { TouchableOpacity } = RNGestureHandler;
-export default class AutoComplete extends Component {
-    constructor(props) {
-        super(props);
-        this.hashmapRefs = {};
-        this.hashmapPosition = {};
-        this.hashmapInputValue = {};
-        this.selectedItem = null;
-        this.childrenWithProps = null;
-    }
-
-    /**
-     * func measure all component have keyAutoComplete to get it's position
-     */
-    measure() {
-        try {
-            Object.keys(this.hashmapRefs)?.forEach((key) => {
-                const node = findNodeHandle(this.hashmapRefs[key]);
-                if (node) {
-                    if (Platform.OS === 'android') {
-                        UIManager.measureLayoutRelativeToParent(
-                            node,
-                            (e) => {
-                                console.error(e);
-                            },
-                            (x, y, width, height) => {
-                                this.hashmapPosition[key] = {
-                                    x,
-                                    y: y + height,
-                                    width,
-                                };
-                            },
-                        );
-                    } else {
-                        UIManager.measure(node, (x, y, width, height) => {
-                            this.hashmapPosition[key] = {
-                                x,
-                                y: y + height,
-                                width,
-                            };
-                        });
-                    }
-                }
-            });
-        } catch (e) {
-            console.log(`try catch :: ${e}`);
-        }
-    }
-
-    componentDidMount() {
-        // setTimeout to fix async
-        setTimeout(() => {
-            this.measure();
-        }, 500);
-    }
-
-    getValueByKey = (key, value) => {
-        const splitKey = key.split('-');
-        return splitKey.length > 1
-            ? splitKey.reduce(
-                  (result, item, index) =>
-                      (result =
-                          result +
-                          value[item] +
-                          (index === splitKey.length - 1
-                              ? ''
-                              : !!value[item]
-                              ? ' '
-                              : '')),
-                  '',
-              )
-            : key === 'phone'
-            ? NumberUtils.formatPhoneNumberVN(value[key])
-            : value[key];
-    };
-
-    /**
-     *  loop all child components
-     * @param {"Children"} components ;
-     */
-    cloneChildren(components) {
-        if (components) {
-            return React.Children.map(components, (child) => {
-                if (!child?.props) return child;
-                if (
-                    child?.props?.children &&
-                    React.Children.count(child?.props?.children) > 0 &&
-                    child.type.name !== Text
-                ) {
-                    // component have children -> clone it and all it's children
-                    return React.cloneElement(child, {
-                        children: this.cloneChildren(child.props.children),
-                    });
-                }
-
-                const { onChangeText, keyAutoComplete, onFocus, onEndEditing } =
-                    child.props;
-                if (keyAutoComplete) {
-                    // Update props when component have keyAutoComplete
-                    if (this.selectedItem) {
-                        this.hashmapInputValue[keyAutoComplete] =
-                            this.getValueByKey(
-                                keyAutoComplete,
-                                this.selectedItem,
-                            ); // this.selectedItem[keyAutoComplete];
-                        return React.cloneElement(child, {
-                            ref: (view) =>
-                                (this.hashmapRefs[keyAutoComplete] = view),
-                            onChangeText: (text) =>
-                                this.changeTextHandle(
-                                    child,
-                                    text,
-                                    onChangeText,
-                                ),
-                            onFocus: (e) => this.focusHandle(e, child, onFocus),
-                            // value: this.getValueByKey(keyAutoComplete, this.selectedItem),
-                            onEndEditing: (e) =>
-                                this.endFocusHandle(e, onEndEditing),
-                        });
-                    }
-                    return React.cloneElement(child, {
-                        ref: (view) =>
-                            (this.hashmapRefs[keyAutoComplete] = view),
-                        onChangeText: (text) =>
-                            this.changeTextHandle(child, text, onChangeText),
-                        onFocus: (e) => this.focusHandle(e, child, onFocus),
-                        onEndEditing: (e) =>
-                            this.endFocusHandle(e, onEndEditing),
-                    });
-                }
-                return child;
-            });
-        }
-
-        return components;
-    }
-
-    render() {
-        const { style = {} } = this.props;
-        const suggest = get(this.state, 'suggest', {});
-        const childrenWithProps = this.cloneChildren(
-            get(this.props, 'children', null),
-        );
-        return (
-            <View style={[{ zIndex: 1 }, style]}>
-                {childrenWithProps}
-                {this.renderSuggest(suggest)}
-            </View>
-        );
-    }
-
-    querySearch = (child, text) => {
-        const keyAutoComplete = get(child.props, 'keyAutoComplete', '');
-        const isShowAutoComplete = get(child.props, 'isShowAutoComplete', true);
-        const { data } = this.props;
-        const dataOutput =
-            data && data.length > 0 && this.filter(data, keyAutoComplete, text);
-        if (this.hashmapRefs[keyAutoComplete]) {
-            this.setState({
-                suggest: {
-                    data: dataOutput,
-                    position: this.hashmapPosition[keyAutoComplete],
-                    isShowAutoComplete,
-                },
-            });
-        }
-    };
-
-    changeTextHandle = (child, text, onChangeText) => {
-        this.querySearch(child, text);
-        if (onChangeText && typeof onChangeText === 'function') {
-            onChangeText(text);
-        }
-    };
-
-    focusHandle = (e, child, onFocus) => {
-        let text = '';
-        if (child && typeof child.getText === 'function') {
-            text = child.getText();
-        }
-
-        this.querySearch(child, text);
-
-        if (onFocus && typeof onFocus === 'function') {
-            onFocus(e);
-        }
-    };
-
-    endFocusHandle = (e, onEndEditing) => {
-        if (this.isShowingSuggest()) {
-            this.hideSuggest();
-        }
-        if (onEndEditing && typeof onEndEditing === 'function') {
-            onEndEditing(e);
-        }
-    };
-
-    filter = (data, key, query) => {
-        if (!data || !key) {
-            return null;
-        }
-        if (query === '') {
-            return data;
-        }
-
-        return data.filter((item) => {
-            const valueStr = item ? this.getValueByKey(key, item) : '';
-            const valueStrFormated = ValueUtil.removeAlias(valueStr)
-                .toLowerCase()
-                .trim()
-                .replace(/\s/g, '');
-            const queryFormated = ValueUtil.removeAlias(query)
-                .toLowerCase()
-                .trim()
-                .replace(/\s/g, '');
-            return valueStrFormated.indexOf(queryFormated) !== -1;
-        });
-    };
-
-    renderSuggest(suggest) {
-        const { numSuggest } = this.props;
-        if (
-            suggest &&
-            suggest.data &&
-            suggest.data.length > 0 &&
-            suggest.isShowAutoComplete
-        ) {
-            const { x = 0, y = 0, width = 0 } = suggest.position || {};
-            const sliceData = suggest.data.slice(0, numSuggest);
-
-            return (
-                <View
-                    style={[
-                        styles.containerSuggest,
-                        {
-                            left: x,
-                            top: y,
-                            width,
-                        },
-                    ]}>
-                    {sliceData.map((item, index) => (
-                        <View key={index.toString()}>
-                            {this.renderItem({ item, index })}
-                            {index !== sliceData.length - 1 &&
-                                this.renderSeparator()}
-                        </View>
-                    ))}
-                </View>
-            );
-        }
-        return null;
-    }
-
-    renderItem = ({ item, index }) => {
-        const { renderSuggestItem } = this.props;
-        return (
-            <TouchableOpacity onPress={() => this.onPressItemSuggest(item)}>
-                {renderSuggestItem && typeof renderSuggestItem === 'function'
-                    ? renderSuggestItem({ item, index })
-                    : this.renderSuggestItemDefault({ item, index })}
-            </TouchableOpacity>
-        );
-    };
-
-    renderSeparator = () => <View style={styles.separator} />;
-
-    renderSuggestItemDefault = ({ item }) => {
-        const { title, value } = item;
-        return (
-            <View style={[styles.viewSuggest]}>
-                <Text.Title>{title}</Text.Title>
-                <Text.Title>{value}</Text.Title>
-            </View>
-        );
-    };
-
-    onPressItemSuggest = (item) => {
-        this.selectedItem = item;
-        // Loop hashRef to update value of child
-        Object.keys(this.hashmapRefs).forEach((key) => {
-            if (
-                this.hashmapRefs[key].setText &&
-                typeof this.hashmapRefs[key].setText === 'function'
-            )
-                this.hashmapRefs[key].setText(
-                    this.getValueByKey(key, this.selectedItem),
-                );
-            if (
-                this.hashmapRefs[key].setValue &&
-                typeof this.hashmapRefs[key].setValue === 'function'
-            )
-                this.hashmapRefs[key].setValue(
-                    this.getValueByKey(key, this.selectedItem),
-                );
-        });
-
-        const { onSelected } = this.props;
-        this.setState(
-            {
-                suggest: {},
-            },
-            () => {
-                if (onSelected && typeof onSelected === 'function') {
-                    onSelected(item);
-                }
-                this.selectedItem = null;
-            },
-        );
-    };
-
-    isShowingSuggest = () => {
-        const { suggest } = this.state;
-        return suggest && suggest.data && suggest.data.length > 0;
-    };
-
-    hideSuggest = () => {
-        this.setState(
-            {
-                suggest: {},
-            },
-            () => {
-                this.selectedItem = null;
-            },
-        );
-    };
-}
-
-const styles = StyleSheet.create({
-    viewSuggest: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 5,
-    },
-    containerSuggest: {
-        backgroundColor: 'white',
-        paddingVertical: 10,
-        paddingHorizontal: 12,
-        position: 'absolute',
-        maxHeight: 240,
-        borderColor: '#DADADA',
-        borderRadius: 4,
-        borderWidth: 1,
-        shadowColor: '#000000',
-        shadowOffset: {
-            width: 0,
-            height: 1,
-        },
-        shadowRadius: 1,
-        elevation: 2,
-        shadowOpacity: 0.5,
-    },
-    separator: {
-        height: 1,
-        width: '100%',
-        backgroundColor: Colors.placeholder,
-        marginVertical: 10,
-    },
-});
-
-AutoComplete.propTypes = {
-    style: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.object,
-        PropTypes.number,
-    ]),
-    data: PropTypes.arrayOf(PropTypes.object).isRequired,
-    renderSuggestItem: PropTypes.func,
-    onSelected: PropTypes.func.isRequired,
-    numSuggest: PropTypes.number,
-};
-
-AutoComplete.defaultProps = {
-    numSuggest: 2,
-};

package/index.js

@@ -1,5 +0,0 @@
-import AutoComplete from './AutoComplete';
-
-export {
-    AutoComplete
-};