Robin Malfait
67f3c4d824
* add `get-text-value` helper * use `getTextValue` in `Listbox` component * use `getTextValue` in `Menu` component * update changelog * ensure we handle multiple values for `aria-labelledby` * hoist regex * drop child nodes instead of replacing its innerText This makes it a bit slower but also more correct. We can use a cache on another level to ensure that we are not creating useless work. * add `useTextValue` to improve performance of `getTextValue` This will add a cache and only if the `innerText` changes, only then will we calculate the new text value. * use better `useTextValue` hook
26 lines
696 B
TypeScript
26 lines
696 B
TypeScript
import { useRef, MutableRefObject } from 'react'
|
|
import { getTextValue } from '../utils/get-text-value'
|
|
import { useEvent } from './use-event'
|
|
|
|
export function useTextValue(element: MutableRefObject<HTMLElement | null>) {
|
|
let cacheKey = useRef<string>('')
|
|
let cacheValue = useRef<string>('')
|
|
|
|
return useEvent(() => {
|
|
let el = element.current
|
|
if (!el) return ''
|
|
|
|
// Check for a cached version
|
|
let currentKey = el.innerText
|
|
if (cacheKey.current === currentKey) {
|
|
return cacheValue.current
|
|
}
|
|
|
|
// Calculate the value
|
|
let value = getTextValue(el).trim().toLowerCase()
|
|
cacheKey.current = currentKey
|
|
cacheValue.current = value
|
|
return value
|
|
})
|
|
}
|