Merge branch 'perf/search-icons-with-fuse-js' into 'develop'
perf: search icons with Fuse.js See merge request rrll/p61-project!7
This commit is contained in:
commit
dbc19d7056
9
package-lock.json
generated
9
package-lock.json
generated
@ -24,6 +24,7 @@
|
|||||||
"expo-status-bar": "1.12.1",
|
"expo-status-bar": "1.12.1",
|
||||||
"expo-system-ui": "3.0.4",
|
"expo-system-ui": "3.0.4",
|
||||||
"expo-web-browser": "13.0.3",
|
"expo-web-browser": "13.0.3",
|
||||||
|
"fuse.js": "7.0.0",
|
||||||
"immer": "10.1.1",
|
"immer": "10.1.1",
|
||||||
"lottie-react-native": "6.7.0",
|
"lottie-react-native": "6.7.0",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
@ -14240,6 +14241,14 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fuse.js": {
|
||||||
|
"version": "7.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
|
||||||
|
"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/gensync": {
|
"node_modules/gensync": {
|
||||||
"version": "1.0.0-beta.2",
|
"version": "1.0.0-beta.2",
|
||||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||||
|
@ -35,6 +35,7 @@
|
|||||||
"expo-status-bar": "1.12.1",
|
"expo-status-bar": "1.12.1",
|
||||||
"expo-system-ui": "3.0.4",
|
"expo-system-ui": "3.0.4",
|
||||||
"expo-web-browser": "13.0.3",
|
"expo-web-browser": "13.0.3",
|
||||||
|
"fuse.js": "7.0.0",
|
||||||
"immer": "10.1.1",
|
"immer": "10.1.1",
|
||||||
"lottie-react-native": "6.7.0",
|
"lottie-react-native": "6.7.0",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
|
@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"
|
|||||||
import { memo, useCallback, useEffect, useState, useTransition } from "react"
|
import { memo, useCallback, useEffect, useState, useTransition } from "react"
|
||||||
import { Modal, ScrollView, View } from "react-native"
|
import { Modal, ScrollView, View } from "react-native"
|
||||||
import { Button, List, Text, TextInput } from "react-native-paper"
|
import { Button, List, Text, TextInput } from "react-native-paper"
|
||||||
|
import Fuse from "fuse.js"
|
||||||
|
|
||||||
import { IconsList } from "./IconsList"
|
import { IconsList } from "./IconsList"
|
||||||
|
|
||||||
@ -30,12 +31,19 @@ const iconNames = Object.keys(fas).map((key) => {
|
|||||||
return fas[key]?.iconName ?? key
|
return fas[key]?.iconName ?? key
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const fuseOptions = {
|
||||||
|
keys: ["iconName"],
|
||||||
|
threshold: 0.4,
|
||||||
|
}
|
||||||
|
|
||||||
|
const fuse = new Fuse(iconNames, fuseOptions)
|
||||||
|
|
||||||
const findIconsInLibrary = (icon: string): string[] => {
|
const findIconsInLibrary = (icon: string): string[] => {
|
||||||
return iconNames
|
const results = fuse.search(icon).map((result) => {
|
||||||
.filter((name, index, self) => {
|
return result.item
|
||||||
return name.includes(icon) && self.indexOf(name) === index
|
})
|
||||||
})
|
const uniqueResults = Array.from(new Set(results))
|
||||||
.slice(0, 50)
|
return uniqueResults.slice(0, 50)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const IconSelectorModal: React.FC<IconSelectorModalProps> = ({
|
export const IconSelectorModal: React.FC<IconSelectorModalProps> = ({
|
||||||
|
Reference in New Issue
Block a user