react-native-complete-flatlist
Advanced tools
react-native-complete-flatlist - npm Package Compare versions
Comparing version 2.0.12 to 2.0.13
52
index.js
| import React from 'react'; | ||
| import Highlighter from "react-native-highlight-words"; | ||
| import { | ||
@@ -13,2 +12,4 @@ StyleSheet, | ||
| import filterText from './utils/filterText'; | ||
| class CompleteFlatList extends React.Component { | ||
@@ -27,8 +28,4 @@ rowScale = new Animated.Value(0); | ||
| isRefreshing: false, | ||
| isLoading: false, | ||
| renderItem: null, | ||
| renderSeparator: () => <View style={styles.defaultSeparator} />, | ||
| pullToRefreshCallback: null, | ||
| onSearch: null, | ||
| highlightColor: '', | ||
| backgroundStyles: {}, | ||
@@ -59,3 +56,3 @@ searchTextInputStyle: {}, | ||
| onRefresh = () => { | ||
| this.props.pullToRefreshCallback(); | ||
| this.props.pullToRefreshCallback?.(); | ||
| this.setState({ refreshing: true }); | ||
@@ -67,43 +64,2 @@ setTimeout(() => this.setState({ refreshing: false }), 7000); | ||
| filterText = () => { | ||
| const { data, searchKey, highlightColor, onSearch } = this.props; | ||
| if (!this.state.searchText || !!onSearch) return data; | ||
| const searchText = this.state.searchText.toLowerCase(); | ||
| const filteredData = []; | ||
| for (let d = 0; d < data.length; d++) { | ||
| dt = data[d]; | ||
| for (let s = 0; s < searchKey.length; s++) { | ||
| sk = searchKey[s]; | ||
| const target = dt[sk]; | ||
| if (!target) continue; | ||
| if (target.toLowerCase().indexOf(searchText) !== -1) { | ||
| if (!highlightColor) { | ||
| filteredData.push(dt); | ||
| break; | ||
| } | ||
| const row = {}; | ||
| row.cleanData = dt; | ||
| const keys = Object.keys(dt); | ||
| for (let i = 0; i < keys.length; i++) { | ||
| const key = keys[i]; | ||
| if (typeof dt[key] === "string") { | ||
| row[key] = ( | ||
| <Highlighter | ||
| highlightStyle={{ backgroundColor: highlightColor }} | ||
| searchWords={[searchText]} | ||
| textToHighlight={dt[key]} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
| filteredData.push(row); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| return filteredData; | ||
| }; | ||
| onScrollBeginDrag = () => { | ||
@@ -143,3 +99,3 @@ Animated.spring(this.rowScale, { | ||
| const { searchText } = this.state; | ||
| const filteredData = this.filterText(); | ||
| const filteredData = filterText({...this.props, searchText }) | ||
@@ -146,0 +102,0 @@ const scaleY = !isJelly ? 1 : this.rowScale.interpolate({ |
| { | ||
| "name": "react-native-complete-flatlist", | ||
| "version": "2.0.12", | ||
| "version": "2.0.13", | ||
| "description": "An extension of React Native's Flatlist with search bar, highlighted search, pull to refresh, and etc is ready to use", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -15,4 +15,4 @@ # react-native-complete-flatlist | ||
| ``` | ||
| import React from 'react'; | ||
| import { Text, SafeAreaView } from 'react-native'; | ||
| import React, {useRef} from 'react'; | ||
| import { Text, SafeAreaView, TouchableOpacity } from 'react-native'; | ||
| import CompleteFlatList from 'react-native-complete-flatlist'; | ||
@@ -39,2 +39,3 @@ | ||
| const App = () => { | ||
| const ref = useRef(); | ||
| const renderItem = ({item, index}) => { | ||
@@ -61,5 +62,9 @@ const data = item.cleanData ? item.cleanData : item; | ||
| // renderSeparator={null} | ||
| ref={ref} | ||
| highlightColor="yellow" | ||
| renderItem={renderItem} | ||
| /> | ||
| <TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}> | ||
| <Text>Clear Search</Text> | ||
| </TouchableOpacity> | ||
| </SafeAreaView> | ||
@@ -106,17 +111,33 @@ ); | ||
| If you have `ref` to the component, | ||
| ``` | ||
| const completeFlatList = useRef(); | ||
| ... | ||
| <CompleteFlatList | ||
| ... | ||
| ref={completeFlatList} | ||
| ... | ||
| /> | ||
| ``` | ||
| <CompleteFlatList | ||
| ... | ||
| ref={c => this.completeFlatList = c} | ||
| ... | ||
| /> | ||
| or in component based | ||
| ``` | ||
| you can use any method(s) below | ||
| `this.completeFlatList.methodName()` | ||
| <CompleteFlatList | ||
| ... | ||
| ref={c => this.completeFlatList = c} | ||
| ... | ||
| /> | ||
| ``` | ||
| you can use any method(s) below: | ||
| ```completeFlatList.current.methodName()``` | ||
| or in component based | ||
| ```this.completeFlatList.methodName()``` | ||
| | Method | Description | | ||
| | ----------- | ----------------------------------- | | ||
| | clearSearch | Clear search input programmatically | |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.1%
23918
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by17.65%
140
Worsened metrics
- Lines of code
- decreased by-2.88%
202