theoludwig/p61-project
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

perf: implementation of Fuse.js for fuzzy searching icons

Browse Source
This commit is contained in:
Xc165543337 2024-05-22 19:05:01 +02:00
parent d98f3144cb
commit 1bf5fdeaca
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

15
presentation/react-native/components/HabitForm/IconSelectorModal.tsx
View File

@ -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,10 +31,18 @@ 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 return fuse
.filter((name, index, self) => { .search(icon)
return name.includes(icon) && self.indexOf(name) === index .map((result) => {
return result.item
}) })
.slice(0, 50) .slice(0, 50)
} }