@momo-kits/auto-complete 0.0.73-beta → 0.0.74-beta.30

package/AutoComplete.js

@@ -1,342 +1,374 @@
 /* eslint-disable no-extra-boolean-cast */
 /* eslint-disable no-param-reassign */
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {
-    findNodeHandle,
-    StyleSheet,
-    UIManager,
-    View,
-    Platform
+  findNodeHandle,
+  StyleSheet,
+  UIManager,
+  View,
+  Platform,
 } from 'react-native';
-import { get } from 'lodash';
+import {debounce, get} from 'lodash';
 import PropTypes from 'prop-types';
 import {
-    ValueUtil, NumberUtils, Colors, Text, RNGestureHandler
+  ValueUtil,
+  NumberUtils,
+  Colors,
+  Text,
+  RNGestureHandler,
+  Spacing,
+  Shadow,
+  Radius,
 } from '@momo-kits/core';
 
-const { TouchableOpacity } = RNGestureHandler;
+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;
-    }
+  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}`);
+  /**
+   * 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 - 26,
+                  width,
+                };
+              },
+            );
+          } else {
+            UIManager.measure(node, (x, y, width, height) => {
+              this.hashmapPosition[key] = {
+                x,
+                y: y + height - 26,
+                width,
+              };
+            });
+          }
         }
+      });
+    } catch (e) {
+      console.log(`try catch :: ${e}`);
     }
+  }
 
-    componentDidMount() {
-        // setTimeout to fix async
-        setTimeout(() => {
-            this.measure();
-        }, 500);
-    }
+  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];
-    };
+  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)
-                    });
-                }
+  /**
+   *  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;
+        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 components;
+        return child;
+      });
     }
 
-    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>
-        );
-    }
+    return components;
+  }
 
-    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
-                }
-            });
-        }
-    };
+  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>
+    );
+  }
 
-    changeTextHandle = (child, text, onChangeText) => {
-        this.querySearch(child, text);
-        if (onChangeText && typeof onChangeText === 'function') {
-            onChangeText(text);
-        }
-    };
+  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,
+        },
+      });
+    }
+  };
 
-    focusHandle = (e, child, onFocus) => {
-        let text = '';
-        if (child && typeof child.getText === 'function') {
-            text = child.getText();
-        }
+  changeTextHandle = (child, text, onChangeText) => {
+    this.querySearch(child, text);
+    if (onChangeText && typeof onChangeText === 'function') {
+      onChangeText(text);
+    }
+  };
 
-        this.querySearch(child, text);
+  focusHandle = (e, child, onFocus) => {
+    let text = '';
+    if (child && typeof child.getText === 'function') {
+      text = child.getText();
+    }
 
-        if (onFocus && typeof onFocus === 'function') {
-            onFocus(e);
-        }
-    };
+    this.querySearch(child, text);
 
-    endFocusHandle = (e, onEndEditing) => {
-        if (this.isShowingSuggest()) {
-            this.hideSuggest();
-        }
-        if (onEndEditing && typeof onEndEditing === 'function') {
-            onEndEditing(e);
-        }
-    };
+    if (onFocus && typeof onFocus === 'function') {
+      onFocus(e);
+    }
+  };
 
-    filter = (data, key, query) => {
-        if (!data || !key) {
-            return null;
-        }
-        if (query === '') {
-            return data;
-        }
+  endFocusHandle = (e, onEndEditing) => {
+    if (this.isShowingSuggest()) {
+      this.hideSuggest();
+    }
+    if (onEndEditing && typeof onEndEditing === 'function') {
+      onEndEditing(e);
+    }
+  };
 
-        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
-            );
-        });
-    };
+  filter = (data, key, query) => {
+    if (!data || !key) {
+      return null;
+    }
+    if (query === '') {
+      return data;
+    }
 
-    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 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;
+    });
+  };
 
-            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>
+  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 null;
+      return (
+        <View
+          style={[
+            styles.containerSuggest,
+            Shadow.Light,
+            {
+              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>
-        );
-    };
+  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}
-        />
+  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>
     );
+  };
 
-    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),
         );
-    };
-
-    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));
-        });
+      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;
-        });
-    };
+    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;
-    };
+  isShowingSuggest = () => {
+    const {suggest} = this.state;
+    return suggest && suggest.data && suggest.data.length > 0;
+  };
 
-    hideSuggest = () => {
-        this.setState({
-            suggest: {}
-        }, () => {
-            this.selectedItem = null;
-        });
-    };
+  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
-    }
+  viewSuggest: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 5,
+  },
+  containerSuggest: {
+    backgroundColor: 'white',
+    padding: Spacing.M,
+    position: 'absolute',
+    maxHeight: 240,
+    borderRadius: Radius.S,
+  },
+  separator: {
+    height: 1,
+    width: '100%',
+    backgroundColor: Colors.background_default,
+    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,
+  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,
+  numSuggest: 2,
 };

package/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "@momo-kits/auto-complete",
-  "version": "0.0.73-beta",
-  "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.74-beta.30",
+    "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"
+}

package/publish.sh

@@ -21,9 +21,9 @@ rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type
 #npm login
 #publish dist to npm
 cd dist
-npm publish --access=public
+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/auto-complete new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/auto-complete"}'