@momo-kits/auto-complete 0.0.48-rc.2 → 0.0.48

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.0.48-rc.2",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "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"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
-}
+    "name": "@momo-kits/auto-complete",
+    "version": "0.0.48",
+    "private": false,
+    "main": "index.tsx",
+    "peerDependencies": {
+        "@momo-kits/foundation": "latest",
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "prop-types": "^15.7.2"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11"
+    },
+    "license": "MoMo",
+    "dependencies": {}
+}

package/publish.sh

@@ -1,29 +1,23 @@
 #!/bin/bash
+
+# Prepare dist files
 rm -rf dist
 mkdir dist
-
-cp . ./dist
-
-# GET VERSION from mck_package.json
-VERSIONSTRING=( v$(jq .version package.json) )
-VERSION=(${VERSIONSTRING//[\"]/})
-echo VERSION: $VERSION
-
-rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
-
-# #babel component to dist
-#babel ./dist -d dist --copy-files
-
-#copy option
-#cp -r ./src/ dist
-
-
-#npm login
-#publish dist to npm
+rsync -r --exclude=/dist ./* dist
 cd dist
-npm publish --tag beta --access=public
+
+if [ "$1" == "beta" ]; then  # Publish beta
+  npm version $(npm view @momo-kits/auto-complete@beta version)
+  npm version prepatch --preid=beta
+  npm publish --tag beta --access=public
+else                         # Publish latest
+  npm version $(npm view @momo-kits/auto-complete version)
+  npm version patch
+  npm publish --tag latest --access=public
+fi
+PACKAGE_NAME=$(npm pkg get name)
+NEW_PACKAGE_VERSION=$(npm pkg get version)
+
+# Clean up
 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"}'

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,342 +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 { 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 {
-            if (this.hashmapRefs) {
-                Object.keys(this.hashmapRefs)
-                    .forEach((key) => {
-                        if (Platform.OS === 'android') {
-                            UIManager.measureLayoutRelativeToParent(findNodeHandle(this.hashmapRefs[key]), (e) => { console.error(e); }, (x, y, width, height) => {
-                                this.hashmapPosition[key] = {
-                                    x,
-                                    y: y + height,
-                                    width
-                                };
-                            });
-                        } else {
-                            UIManager.measure(findNodeHandle(this.hashmapRefs[key]), (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
-};