fix(frontend/player): useRegExListFilterMemo many fields filter
This commit is contained in:
parent
808070c00e
commit
08afff365f
2 changed files with 23 additions and 9 deletions
|
|
@ -170,9 +170,11 @@ function NetworkPanel() {
|
||||||
if (!showOnlyErrors) { return list }
|
if (!showOnlyErrors) { return list }
|
||||||
return list.filter(it => parseInt(it.status) >= 400 || !it.success)
|
return list.filter(it => parseInt(it.status) >= 400 || !it.success)
|
||||||
}, [ showOnlyErrors, list ])
|
}, [ showOnlyErrors, list ])
|
||||||
filteredList = useRegExListFilterMemo(filteredList, it => it.status, filter)
|
filteredList = useRegExListFilterMemo(
|
||||||
filteredList = useRegExListFilterMemo(filteredList, it => it.name, filter)
|
filteredList,
|
||||||
filteredList = useRegExListFilterMemo(filteredList, it => it.type, filter)
|
it => [ it.status, it.name, it.type ],
|
||||||
|
filter,
|
||||||
|
)
|
||||||
filteredList = useTabListFilterMemo(filteredList, it => TYPE_TO_TAB[it.type], ALL, activeTab)
|
filteredList = useTabListFilterMemo(filteredList, it => TYPE_TO_TAB[it.type], ALL, activeTab)
|
||||||
|
|
||||||
const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab })
|
const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab })
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,31 @@
|
||||||
import { useMemo } from 'react'
|
import { useMemo } from 'react'
|
||||||
import { getRE } from 'App/utils'
|
import { getRE } from 'App/utils'
|
||||||
|
|
||||||
export function useRegExListFilterMemo<T>(list: T[], filterBy: (item: T) => string, reText: string) {
|
|
||||||
|
// TODO: merge with utils/filterList (use logic of string getter like here instead of using callback)
|
||||||
|
export function useRegExListFilterMemo<T>(
|
||||||
|
list: T[],
|
||||||
|
filterBy: (it: T) => string | string[],
|
||||||
|
reText: string,
|
||||||
|
) {
|
||||||
return useMemo(() => {
|
return useMemo(() => {
|
||||||
if (!reText) { return list }
|
if (!reText) { return list }
|
||||||
const re = getRE(reText, 'i')
|
const re = getRE(reText, 'i')
|
||||||
list.filter(it => re.test(filterBy(it)))
|
return list.filter(it => {
|
||||||
|
const strs = filterBy(it)
|
||||||
|
return Array.isArray(strs)
|
||||||
|
? strs.some(s => re.test(s))
|
||||||
|
: re.test(strs)
|
||||||
|
})
|
||||||
}, [ list, list.length, reText ])
|
}, [ list, list.length, reText ])
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTabListFilterMemo<T>(
|
|
||||||
|
export function useTabListFilterMemo<T, Tab=string>(
|
||||||
list: T[],
|
list: T[],
|
||||||
itemToTab: (item: T) => string,
|
itemToTab: (it: T) => Tab,
|
||||||
commonTab: string,
|
commonTab: Tab,
|
||||||
currentTab: string,
|
currentTab: Tab,
|
||||||
) {
|
) {
|
||||||
return useMemo(() => {
|
return useMemo(() => {
|
||||||
if (currentTab === commonTab) { return list }
|
if (currentTab === commonTab) { return list }
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue