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

Comparing version 2.0.6 to 2.0.7

index.js

@@ -14,7 +14,7 @@ import React from 'react';
 class CompleteFlatList extends React.Component {
+  rowScale = new Animated.Value(0);
+  slide = new Animated.Value(0);
   state = {
     refreshing: false,
     searchText: '',
-    rowScale: new Animated.Value(0),
-    slide: new Animated.Value(0),
   };
@@ -38,16 +38,11 @@
     slide: 'none',
-    elementBetweenSearchAndList: null
+    elementBetweenSearchAndList: null,
+    refreshOnLoad: true,
   };
 
-  constructor(props, defaultProps) {
-    super(props, defaultProps)
-    const { refreshOnLoad = true, pullToRefreshCallback } = props
-    if (pullToRefreshCallback !== null && refreshOnLoad) {
-      pullToRefreshCallback();
-    }
-  }
+  componentDidMount() {
+    if (this.props.refreshOnLoad) this.props.pullToRefreshCallback?.();
 
-  componentDidMount() {
     if (this.props.slide != 'none') {
-      Animated.spring(this.state.slide, {
+      Animated.spring(this.slide, {
         toValue: 1,
@@ -60,3 +55,3 @@ tension: 20,
 
-  clearSearch = () => this.setState({ searchText: "" }, this.searchInput.clear)
+  clearSearch = () => this.setState({ searchText: '' }, this.searchInput.clear)
 
@@ -69,23 +64,19 @@ onRefresh = () => {
 
-  refresh = () => {
-    this.setState({ refreshing: false, data: this.props.data });
-  };
+  refresh = () => this.setState({ refreshing: false, data: this.props.data });
 
   filterText = () => {
     const { data, searchKey, highlightColor, onSearch } = this.props;
-    if (this.state.searchText === '' || onSearch !== null) {
-      return data;
-    }
+    if (!this.state.searchText || !!onSearch) return data;
+
     const searchText = this.state.searchText.toLowerCase();
     const filteredData = [];
-    for (let d = 0; d < data.length; d += 1) {
+    for (let d = 0; d < data.length; d++) {
       dt = data[d];
-      for (let s = 0; s < searchKey.length; s += 1) {
+      for (let s = 0; s < searchKey.length; s++) {
         sk = searchKey[s];
         const target = dt[sk];
-        if (typeof target === "undefined" || target == null) {
-          continue;
-        }
+        if (!target) continue;
+
         if (target.toLowerCase().indexOf(searchText) !== -1) {
-          if (highlightColor === "") {
+          if (!highlightColor) {
             filteredData.push(dt);
@@ -95,5 +86,5 @@ break;
           const row = {};
-          row.cleanData = dt
+          row.cleanData = dt;
           const keys = Object.keys(dt);
-          for (let i = 0; i < keys.length; i += 1) {
+          for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
@@ -119,3 +110,3 @@ if (typeof dt[key] === "string") {
   onScrollBeginDrag = () => {
-    Animated.spring(this.state.rowScale, {
+    Animated.spring(this.rowScale, {
       toValue: 5,
@@ -128,3 +119,3 @@ tension: 20,
   onScrollEndDrag = () => {
-    Animated.spring(this.state.rowScale, {
+    Animated.spring(this.rowScale, {
       toValue: 1,
@@ -154,3 +145,3 @@ tension: 20,
 
-    const scaleY = !isJelly ? 1 : this.state.rowScale.interpolate({
+    const scaleY = !isJelly ? 1 : this.rowScale.interpolate({
       inputRange: [0, 5],
@@ -176,7 +167,7 @@ outputRange: [1, 0.9],
           keyboardType="email-address"
-          onChangeText={searchText => this.setState({ searchText })}
+          onChangeText={t => this.setState({ searchText: t })}
           value={searchText}
           maxLength={100}
           returnKeyType='search'
-          onSubmitEditing={() => onSearch && onSearch(this.state.searchText)}
+          onSubmitEditing={() => onSearch?.(this.state.searchText)}
         />
@@ -191,3 +182,2 @@ </View>
         <FlatList
-          style={{ height: '100%' }}
           ItemSeparatorComponent={renderSeparator}
@@ -199,17 +189,12 @@ ListEmptyComponent={<Text style={styles.noData}>No data available</Text>}
           refreshControl={
-            onSearch !== null ? (
-              <RefreshControl refreshing={isRefreshing} onRefresh={() => onSearch(searchText)} />
-            )
-              :
-              pullToRefreshCallback !== null ? (
-                <RefreshControl refreshing={isRefreshing} onRefresh={pullToRefreshCallback} />
-              ) : null
+            !!onSearch ? <RefreshControl refreshing={isRefreshing} onRefresh={() => onSearch(searchText)} />
+              : !!pullToRefreshCallback && <RefreshControl refreshing={isRefreshing} onRefresh={pullToRefreshCallback} />
           }
           data={filteredData}
           renderItem={({ item, index, separators }) => {
-            const translateX = slide == 'none' ? 0 : this.state.slide.interpolate({
+            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>
+            return <Animated.View style={{ transform: [{ scaleY }, { translateX }] }}>{renderItem({ item, index, separators })}</Animated.View>;
           }}
@@ -223,3 +208,2 @@ style={styles.flatList}
 
-
 const styles = StyleSheet.create({
@@ -249,8 +233,3 @@ noData: { alignSelf: "center", textAlign: "center", marginTop: 20 },
   },
-  defaultSeparator: {
-    height: 1,
-    width: "80%",
-    alignSelf: "center",
-    backgroundColor: "#f2f2f2"
-  },
+  defaultSeparator: { height: 1, width: "80%", alignSelf: "center", backgroundColor: "#f2f2f2" },
   flatList: { height: "100%", width: "100%", backgroundColor: "transparent" }
@@ -257,0 +236,0 @@ });

package.json

 {
   "name": "react-native-complete-flatlist",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "An extension of React Native's Flatlist with search bar, highlighted search, pull to refresh, and etc is ready to use",
@@ -26,2 +26,3 @@ "main": "index.js",
     "highlight",
+    "jelly",
     "pull to refresh"
@@ -28,0 +29,0 @@ ],

README.md

@@ -44,3 +44,3 @@ # react-native-complete-flatlist
     console.log(data.cleanData)
-    console.log('data.cleanData will be not null if search bar is not empty. caution, data without search is not same like data with search due to implement the highlight component. data.cleanData is equal to data')
+    console.log('data.cleanData will be not null if search bar is not empty and prop highlightColor is not empty. caution, data without search is not same like data with search due to implement the highlight component. data.cleanData is equal to data')
 
@@ -47,0 +47,0 @@ console.log('this is index number : '+index)

No alert changes

Worsened metrics

Total package byte prevSize

23420

decreased by-1.68%

Lines of code

205

decreased by-9.69%

No dependency changes