File size: 1,632 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import { pinyin } from 'pinyin-pro'
import type { FC, RefObject } from 'react'
export const groupItems = (items: Array<any>, getFirstChar: (item: string) => string) => {
const groups = items.reduce((acc, item) => {
const firstChar = getFirstChar(item)
if (!firstChar || firstChar.length === 0)
return acc
let letter
// transform Chinese to pinyin
if (/[\u4E00-\u9FA5]/.test(firstChar))
letter = pinyin(firstChar, { pattern: 'first', toneType: 'none' })[0].toUpperCase()
else
letter = firstChar.toUpperCase()
if (!/[A-Z]/.test(letter))
letter = '#'
if (!acc[letter])
acc[letter] = []
acc[letter].push(item)
return acc
}, {})
const letters = Object.keys(groups).sort()
// move '#' to the end
const hashIndex = letters.indexOf('#')
if (hashIndex !== -1) {
letters.splice(hashIndex, 1)
letters.push('#')
}
return { letters, groups }
}
type IndexBarProps = {
letters: string[]
itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
}
const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
const handleIndexClick = (letter: string) => {
const element = itemRefs.current?.[letter]
if (element)
element.scrollIntoView({ behavior: 'smooth' })
}
return (
<div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
{letters.map(letter => (
<div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
{letter}
</div>
))}
</div>
)
}
export default IndexBar
|