react-native-autocomplete-input - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0-beta.0

index.js

@@ -1,218 +0,121 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  FlatList,
-  Platform,
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-  ViewPropTypes as RNViewPropTypes
-} from 'react-native';
+import { FlatList, Platform, StyleSheet, Text, TextInput, View, ViewPropTypes } from 'react-native';
 
-// Keep this line for downwards compatibility with RN.
-// eslint-disable-next-line react/forbid-foreign-prop-types
-const ViewPropTypes = RNViewPropTypes || View.propTypes;
+export const AutocompleteInput = (props) => {
+  function renderResultList(data, listProps) {
+    const { style, ...flatListProps } = listProps;
 
-class Autocomplete extends Component {
-  static propTypes = {
-    ...TextInput.propTypes,
-    /**
-     * These styles will be applied to the container which
-     * surrounds the autocomplete component.
-     */
-    containerStyle: ViewPropTypes.style,
-    /**
-     * Assign an array of data objects which should be
-     * rendered in respect to the entered text.
-     */
-    data: PropTypes.array,
-    /**
-     * Set to `true` to hide the suggestion list.
-     */
-    hideResults: PropTypes.bool,
-    /*
-     * These styles will be applied to the container which surrounds
-     * the textInput component.
-     */
-    inputContainerStyle: ViewPropTypes.style,
-    /*
-     * Set `keyboardShouldPersistTaps` to true if RN version is <= 0.39.
-     */
-    keyboardShouldPersistTaps: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.bool
-    ]),
-    /*
-     * These styles will be applied to the container which surrounds
-     * the result list.
-     */
-    listContainerStyle: ViewPropTypes.style,
-    /**
-     * These style will be applied to the result list.
-     */
-    listStyle: ViewPropTypes.style,
-    /**
-     * `onShowResults` will be called when list is going to
-     * show/hide results.
-     */
-    onShowResults: PropTypes.func,
-    /**
-     * method for intercepting swipe on ListView. Used for ScrollView support on Android
-     */
-    onStartShouldSetResponderCapture: PropTypes.func,
-    /**
-     * `renderItem` will be called to render the data objects
-     * which will be displayed in the result view below the
-     * text input.
-     */
-    renderItem: PropTypes.func,
-    keyExtractor: PropTypes.func,
-    /**
-     * `renderSeparator` will be called to render the list separators
-     * which will be displayed between the list elements in the result view
-     * below the text input.
-     */
-    renderSeparator: PropTypes.func,
-    /**
-     * renders custom TextInput. All props passed to this function.
-     */
-    renderTextInput: PropTypes.func,
-    flatListProps: PropTypes.object
-  };
+    return <FlatList data={data} style={[styles.list, style]} {...flatListProps} />;
+  }
 
-  static defaultProps = {
-    data: [],
-    keyboardShouldPersistTaps: 'always',
-    onStartShouldSetResponderCapture: () => false,
-    renderItem: ({ item }) => <Text>{item}</Text>,
-    renderSeparator: null,
-    renderTextInput: props => <TextInput {...props} />,
-    flatListProps: {}
-  };
+  function renderTextInput() {
+    const { renderTextInput: renderFunction, style } = props;
+    const textProps = {
+      style: [styles.input, style],
+      ...props,
+    };
 
-  constructor(props) {
-    super(props);
-    this.resultList = null;
-    this.textInput = null;
-
-    this.onRefListView = this.onRefListView.bind(this);
-    this.onRefTextInput = this.onRefTextInput.bind(this);
-    this.onEndEditing = this.onEndEditing.bind(this);
+    return renderFunction(textProps);
   }
 
-  onEndEditing(e) {
-    this.props.onEndEditing && this.props.onEndEditing(e);
-  }
+  const {
+    data,
+    containerStyle,
+    hideResults,
+    inputContainerStyle,
+    listContainerStyle,
+    onShowResults,
+    onStartShouldSetResponderCapture,
+    flatListProps,
+  } = props;
 
-  onRefListView(resultList) {
-    this.resultList = resultList;
-  }
+  const showResults = data.length > 0;
+  // Notify listener if the suggestion will be shown.
+  onShowResults && onShowResults(showResults);
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.inputContainer, inputContainerStyle]}>{renderTextInput(props)}</View>
+      {!hideResults && (
+        <View
+          style={listContainerStyle}
+          onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
+        >
+          {showResults && renderResultList(data, flatListProps)}
+        </View>
+      )}
+    </View>
+  );
+};
 
-  onRefTextInput(textInput) {
-    this.textInput = textInput;
-  }
-
+AutocompleteInput.propTypes = {
+  ...TextInput.propTypes,
   /**
-   * Proxy `blur()` to autocomplete's text input.
+   * These styles will be applied to the container which
+   * surrounds the autocomplete component.
    */
-  blur() {
-    const { textInput } = this;
-    textInput && textInput.blur();
-  }
-
+  containerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
   /**
-   * Proxy `focus()` to autocomplete's text input.
+   * Assign an array of data objects which should be
+   * rendered in respect to the entered text.
    */
-  focus() {
-    const { textInput } = this;
-    textInput && textInput.focus();
-  }
-
+  data: PropTypes.array,
   /**
-   * Proxy `isFocused()` to autocomplete's text input.
+   * Props which can be applied to result `FlatList`.
    */
-  isFocused() {
-    const { textInput } = this;
-    return textInput && textInput.isFocused();
-  }
+  flatListProps: FlatList.propTypes || PropTypes.object,
+  /**
+   * Set to `true` to hide the suggestion list.
+   */
+  hideResults: PropTypes.bool,
+  /**
+   * These styles will be applied to the container which surrounds
+   * the textInput component.
+   */
+  inputContainerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
+  /**
+   * Set `keyboardShouldPersistTaps` to true if RN version is <= 0.39.
+   */
+  keyboardShouldPersistTaps: PropTypes.oneOfType([
+    PropTypes.oneOf(['always', 'handeld', 'never']),
+    PropTypes.bool,
+  ]),
+  /**
+   * These style will be applied to the result list.
+   */
+  listContainerStyle: ViewPropTypes ? ViewPropTypes.style : PropTypes.object,
+  /**
+   * `onShowResults` will be called when list is going to
+   * show/hide results.
+   */
+  onShowResults: PropTypes.func,
+  /**
+   * `onShowResults` will be called when list is going to
+   * show/hide results.
+   */
+  onStartShouldSetResponderCapture: PropTypes.func,
+  /**
+   * renders custom TextInput. All props passed to this function.
+   */
+  renderTextInput: PropTypes.func,
+};
 
-  renderResultList() {
-    const {
-      data,
-      listStyle,
-      renderItem,
-      keyExtractor,
-      renderSeparator,
-      keyboardShouldPersistTaps,
-      flatListProps,
-      onEndReached,
-      onEndReachedThreshold
-    } = this.props;
+const defaultKeyExtractor = (_, index) => `key-${index}`;
+const defaultRenderItem = ({ item }) => <Text>{item}</Text>;
 
-    return (
-      <FlatList
-        ref={this.onRefListView}
-        data={data}
-        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        renderSeparator={renderSeparator}
-        onEndReached={onEndReached}
-        onEndReachedThreshold={onEndReachedThreshold}
-        style={[styles.list, listStyle]}
-        {...flatListProps}
-      />
-    );
-  }
+AutocompleteInput.defaultProps = {
+  data: [],
+  keyboardShouldPersistTaps: 'always',
+  onStartShouldSetResponderCapture: () => false,
+  renderTextInput: (props) => <TextInput {...props} />,
+  flatListProps: {
+    renderItem: defaultRenderItem,
+    keyExtractor: defaultKeyExtractor,
+  },
+};
 
-  renderTextInput() {
-    const { renderTextInput, style } = this.props;
-    const props = {
-      style: [styles.input, style],
-      ref: this.onRefTextInput,
-      onEndEditing: this.onEndEditing,
-      ...this.props
-    };
-
-    return renderTextInput(props);
-  }
-
-  render() {
-    const {
-      data,
-      containerStyle,
-      hideResults,
-      inputContainerStyle,
-      listContainerStyle,
-      onShowResults,
-      onStartShouldSetResponderCapture
-    } = this.props;
-    const showResults = data.length > 0;
-
-    // Notify listener if the suggestion will be shown.
-    onShowResults && onShowResults(showResults);
-
-    return (
-      <View style={[styles.container, containerStyle]}>
-        <View style={[styles.inputContainer, inputContainerStyle]}>
-          {this.renderTextInput()}
-        </View>
-        {!hideResults && (
-          <View
-            style={listContainerStyle}
-            onStartShouldSetResponderCapture={onStartShouldSetResponderCapture}
-          >
-            {showResults && this.renderResultList()}
-          </View>
-        )}
-      </View>
-    );
-  }
-}
-
 const border = {
   borderColor: '#b9b9b9',
   borderRadius: 1,
-  borderWidth: 1
+  borderWidth: 1,
 };
@@ -222,7 +125,7 @@
   container: {
-    flex: 1
+    flex: 1,
   },
   inputContainer: {
     ...border,
-    marginBottom: 0
+    marginBottom: 0,
   },
@@ -234,4 +137,4 @@ list: {
     margin: 10,
-    marginTop: 0
-  }
+    marginTop: 0,
+  },
 };
@@ -241,6 +144,6 @@
   container: {
-    zIndex: 1
+    zIndex: 1,
   },
   inputContainer: {
-    ...border
+    ...border,
   },
@@ -250,3 +153,3 @@ input: {
     height: 40,
-    paddingLeft: 3
+    paddingLeft: 3,
   },
@@ -259,4 +162,4 @@ list: {
     position: 'absolute',
-    right: 0
-  }
+    right: 0,
+  },
 };
@@ -268,10 +171,11 @@
     height: 40,
-    paddingLeft: 3
+    paddingLeft: 3,
   },
   ...Platform.select({
-    android: { ...androidStyles },
-    ios: { ...iosStyles }
-  })
+    android: androidStyles,
+    ios: iosStyles,
+    default: iosStyles,
+  }),
 });
 
-export default Autocomplete;
+export default AutocompleteInput;

package.json

 {
   "name": "react-native-autocomplete-input",
-  "version": "4.2.0",
+  "version": "5.0.0-beta.0",
   "description": "Pure javascript autocomplete input for react-native",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "npm run lint && npm run testonly",
-    "lint": "eslint ./*.js ./example/*.js ./__tests__/*.js",
+    "lint": "eslint ./*.js ./__tests__/*.js",
     "testonly": "jest"
@@ -31,24 +31,23 @@ },
   "bugs": {
-    "url": "https://github.com/l-urence/react-native-autocomplete-input/issues"
+    "url": "https://github.com/mrlaessig/react-native-autocomplete-input/issues"
   },
-  "homepage": "https://github.com/l-urence/react-native-autocomplete-input#readme",
+  "homepage": "https://github.com/mrlaessig/react-native-autocomplete-input#readme",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "@react-native-community/eslint-config": "^0.0.5",
-    "babel-jest": "^24.8.0",
-    "eslint": "^6.3.0",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.13.6",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "jest": "^24.8.0",
-    "metro-react-native-babel-preset": "^0.55.0",
-    "react": "^16.8.6",
-    "react-native": "^0.60.4",
-    "react-test-renderer": "16.8.6"
-  },
-  "jest": {
-    "preset": "react-native"
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.23.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.23.1",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.65.2",
+    "prettier": "^2.2.1",
+    "react": "^17.0.2",
+    "react-native": "^0.64.0",
+    "react-test-renderer": "^17.0.2"
   }
 }

README.md

@@ -31,13 +31,12 @@ # react-native-autocomplete-input
   const { query } = this.state;
-  const data = this._filterData(query);
+  const data = filterData(query);
   return (
     <Autocomplete
       data={data}
-      defaultValue={query}
-      onChangeText={text => this.setState({ query: text })}
-      renderItem={({ item, i }) => (
-        <TouchableOpacity onPress={() => this.setState({ query: item })}>
-          <Text>{item}</Text>
-        </TouchableOpacity>
-      )}
+      value={query}
+      onChangeText={(text) => this.setState({ query: text })}
+      flatListProps={{
+        keyExtractor: (_, idx) => idx,
+        renderItem: ({ item }) => <Text>{item}</Text>,
+      }}
     />
@@ -97,7 +96,4 @@ );
 | onStartShouldSetResponderCapture | function | `onStartShouldSetResponderCapture` will be passed to the result list view container ([onStartShouldSetResponderCapture](https://facebook.github.io/react-native/docs/gesture-responder-system.html#capture-shouldset-handlers)). |
-| renderItem | function | `renderItem` will be called to render the data objects which will be displayed in the result view below the text input. |
-| keyExtractor | function | `keyExtractor(item, i)` will be called to get key for each item. It's up to you which string to return as a key. |
-| renderSeparator | function | `renderSeparator` will be called to render the list separators which will be displayed between the list elements in the result view below the text input. |
 | renderTextInput | function | render custom TextInput. All props passed to this function. |
-| flatListProps | object | custom props to FlatList[](https://facebook.github.io/react-native/docs/flatlist.html)]. |
+| flatListProps | object | custom props to [FlatList](https://facebook.github.io/react-native/docs/flatlist.html). |
 
@@ -104,0 +100,0 @@ ## Known issues

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

10810

decreased by-19.41%

Dev dependency count

16

increased by14.29%

Lines of code

161

decreased by-35.08%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

104

decreased by-3.7%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes