react-native-complete-flatlist - npm Package Compare versions

Comparing version 2.0.14 to 2.0.15

index.js

 import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  FlatList,
-  TextInput,
-  RefreshControl,
-  Animated,
-} from 'react-native';
+import {StyleSheet, Text, View, FlatList, TextInput, RefreshControl, Animated} from 'react-native';
 
 import filterText from './utils/filterText';
+import fuzziedText from './utils/fuzzySearch';
 
 class CompleteFlatList extends React.Component {
   rowScale = new Animated.Value(0);
+
   slide = new Animated.Value(0);
+
   state = {
@@ -24,3 +19,3 @@ refreshing: false,
     searchKey: [],
-    placeholder: "Search ...",
+    placeholder: 'Search ...',
     data: [],
@@ -52,11 +47,11 @@ isRefreshing: false,
 
-  clearSearch = () => this.setState({ searchText: '' }, this.searchInput.clear)
+  clearSearch = () => this.setState({searchText: ''}, this.searchInput.clear);
 
   onRefresh = () => {
     this.props.pullToRefreshCallback?.();
-    this.setState({ refreshing: true });
-    setTimeout(() => this.setState({ refreshing: false }), 7000);
+    this.setState({refreshing: true});
+    setTimeout(() => this.setState({refreshing: false}), 7000);
   };
 
-  refresh = () => this.setState({ refreshing: false, data: this.props.data });
+  refresh = () => this.setState({refreshing: false, data: this.props.data});
 
@@ -95,15 +90,22 @@ onScrollBeginDrag = () => {
       slide,
+      useFuzzy,
     } = this.props;
-    const { searchText } = this.state;
-    const filteredData = filterText({...this.props, searchText })
+    const {searchText} = this.state;
+    const filteredData = useFuzzy
+      ? fuzziedText({...this.props, searchText})
+      : filterText({...this.props, searchText});
 
-    const scaleY = !isJelly ? 1 : this.rowScale.interpolate({
-      inputRange: [0, 5],
-      outputRange: [1, 0.9],
-    });
+    const scaleY = !isJelly
+      ? 1
+      : this.rowScale.interpolate({
+          inputRange: [0, 5],
+          outputRange: [1, 0.9],
+        });
 
-    const jellyProps = isJelly ? {
-      onScrollBeginDrag: this.onScrollBeginDrag,
-      onScrollEndDrag: this.onScrollEndDrag,
-    } : {}
+    const jellyProps = isJelly
+      ? {
+          onScrollBeginDrag: this.onScrollBeginDrag,
+          onScrollEndDrag: this.onScrollEndDrag,
+        }
+      : {};
 
@@ -113,3 +115,3 @@ const searchbar = (
         <TextInput
-          ref={c => this.searchInput = c}
+          ref={c => (this.searchInput = c)}
           style={[styles.searchBar, searchTextInputStyle]}
@@ -122,6 +124,6 @@ placeholder={placeholder}
           keyboardType="email-address"
-          onChangeText={t => this.setState({ searchText: t })}
+          onChangeText={t => this.setState({searchText: t})}
           value={searchText}
           maxLength={100}
-          returnKeyType='search'
+          returnKeyType="search"
           onSubmitEditing={() => onSearch?.(this.state.searchText)}
@@ -134,3 +136,3 @@ />
       <View style={[styles.container, backgroundStyles]}>
-        {(showSearch && !!searchKey.length) && searchbar}
+        {showSearch && !!searchKey.length && searchbar}
         {this.props.elementBetweenSearchAndList}
@@ -144,12 +146,28 @@ <FlatList
           refreshControl={
-            !!onSearch ? <RefreshControl refreshing={isRefreshing || isLoading} onRefresh={() => onSearch(searchText)} />
-              : <RefreshControl refreshing={isRefreshing || isLoading} onRefresh={pullToRefreshCallback} />
+            onSearch ? (
+              <RefreshControl
+                refreshing={isRefreshing || isLoading}
+                onRefresh={() => onSearch(searchText)}
+              />
+            ) : (
+              <RefreshControl
+                refreshing={isRefreshing || isLoading}
+                onRefresh={pullToRefreshCallback}
+              />
+            )
           }
           data={filteredData}
-          renderItem={({ item, index, separators }) => {
-            const translateX = slide == 'none' ? 0 : this.slide.interpolate({
-              inputRange: [0, 1],
-              outputRange: [((slide == 'right' ? 1 : -1) * ((index + 1) * 500)), 0],
-            });
-            return <Animated.View style={{ transform: [{ scaleY }, { translateX }] }}>{renderItem({ item, index, separators })}</Animated.View>;
+          renderItem={({item, index, separators}) => {
+            const translateX =
+              slide == 'none'
+                ? 0
+                : this.slide.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [(slide == 'right' ? 1 : -1) * ((index + 1) * 500), 0],
+                  });
+            return (
+              <Animated.View style={{transform: [{scaleY}, {translateX}]}}>
+                {renderItem({item, index, separators})}
+              </Animated.View>
+            );
           }}
@@ -164,16 +182,16 @@ style={styles.flatList}
 const styles = StyleSheet.create({
-  noData: { alignSelf: "center", textAlign: "center", marginTop: 20 },
+  noData: {alignSelf: 'center', textAlign: 'center', marginTop: 20},
   searchBarContainer: {
-    justifyContent: "center",
+    justifyContent: 'center',
     padding: 10,
-    backgroundColor: "#f2f2f2",
-    width: "100%"
+    backgroundColor: '#f2f2f2',
+    width: '100%',
   },
   searchBar: {
     borderRadius: 5,
-    backgroundColor: "white",
+    backgroundColor: 'white',
     height: 38,
     fontSize: 15,
-    width: "100%",
-    paddingHorizontal: 10
+    width: '100%',
+    paddingHorizontal: 10,
   },
@@ -183,11 +201,11 @@ container: {
     height: '100%',
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "white",
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
     width: '100%',
   },
-  defaultSeparator: { height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" },
-  flatList: { height: "100%", width: "100%", backgroundColor: "transparent" }
+  defaultSeparator: {height: 1, width: '80%', alignSelf: 'center', backgroundColor: '#f2f2f2'},
+  flatList: {height: '100%', width: '100%', backgroundColor: 'transparent'},
 });
 
-export default CompleteFlatList;
+export default CompleteFlatList;

package.json

 {
   "name": "react-native-complete-flatlist",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "An extension of React Native's Flatlist with search bar, highlighted search, pull to refresh, and etc is ready to use",
@@ -40,4 +40,5 @@ "main": "index.js",
   "dependencies": {
-    "react-native-highlight-words": "git+https://github.com/fattahmuhyiddeen/react-native-highlight-words.git#master"
+    "fuse.js": "^6.6.2",
+    "react-native-highlight-words": "^1.0.1"
   }
-}
+}

utils/filterText.js

@@ -1,42 +0,41 @@
-
 import React from 'react';
-import Highlighter from "react-native-highlight-words";
+import Highlighter from 'react-native-highlight-words';
 
-const filterText = ({ data, searchKey, highlightColor, onSearch, searchText }) => {
-    if (!searchText || !!onSearch) return data;
+const filterText = ({data, searchKey, highlightColor, onSearch, searchText}) => {
+  if (!searchText || !!onSearch) return data;
 
-    const filteredData = [];
-    for (const dt of data) {
-      for (let s = 0; s < searchKey.length; s++) {
-        const sk = searchKey[s];
-        const target = dt[sk];
-        if (!target) continue;
+  const filteredData = [];
+  for (const dt of data) {
+    for (let s = 0; s < searchKey.length; s++) {
+      const sk = searchKey[s];
+      const target = dt[sk];
+      if (!target) continue;
 
-        if (target.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
-          if (!highlightColor) {
-            filteredData.push(dt);
-            break;
-          }
-          const row = {};
-          row.cleanData = dt;
-          const keys = Object.keys(dt);
-          for (const key of keys) {
-            if (typeof dt[key] === "string") {
-              row[key] = (
-                <Highlighter
-                  highlightStyle={{ backgroundColor: highlightColor }}
-                  searchWords={[searchText.toLowerCase()]}
-                  textToHighlight={dt[key]}
-                />
-              );
-            }
-          }
-          filteredData.push(row);
+      if (target.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
+        if (!highlightColor) {
+          filteredData.push(dt);
           break;
         }
+        const row = {};
+        row.cleanData = dt;
+        const keys = Object.keys(dt);
+        for (const key of keys) {
+          if (typeof dt[key] === 'string') {
+            row[key] = (
+              <Highlighter
+                highlightStyle={{backgroundColor: highlightColor}}
+                searchWords={[searchText.toLowerCase()]}
+                textToHighlight={dt[key]}
+              />
+            );
+          }
+        }
+        filteredData.push(row);
+        break;
       }
     }
-    return filteredData;
-  };
+  }
+  return filteredData;
+};
 
-  export default filterText;
+export default filterText;

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

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

Git dependency

Supply chain risk

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26144

increased by9.27%

Number of package files

7

increased by40%

Lines of code

289

increased by42.36%

Number of high supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedfuse.js@^6.6.2

• + Addedasap@2.0.6(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfuse.js@6.6.2(transitive)

• + Addedhighlight-words-core@1.2.3(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-native-highlight-words@1.0.1(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• Updatedreact-native-highlight-words@^1.0.1