279 lines
8.8 KiB
TypeScript
279 lines
8.8 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useId, useMemo, useRef, useState } from 'react'
|
|
import { pinyin } from 'pinyin-pro'
|
|
|
|
interface User {
|
|
id: string
|
|
username: string
|
|
displayName: string
|
|
}
|
|
|
|
interface SearchableUserSelectProps {
|
|
id?: string
|
|
users: User[]
|
|
value: string
|
|
onChange: (userId: string, displayName: string) => void
|
|
placeholder?: string
|
|
required?: boolean
|
|
className?: string
|
|
disabled?: boolean
|
|
clearable?: boolean
|
|
loading?: boolean
|
|
}
|
|
|
|
export default function SearchableUserSelect({
|
|
id,
|
|
users,
|
|
value,
|
|
onChange,
|
|
placeholder = '请选择或搜索用户',
|
|
required = false,
|
|
className = '',
|
|
disabled = false,
|
|
clearable = true,
|
|
loading = false,
|
|
}: SearchableUserSelectProps) {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [highlightedIndex, setHighlightedIndex] = useState(0)
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const listboxId = useId()
|
|
const isDisabled = disabled || loading
|
|
|
|
// 获取选中用户的显示名称
|
|
const selectedUser = useMemo(() => users.find((user) => user.id === value), [users, value])
|
|
const displayValue = selectedUser
|
|
? selectedUser.displayName === selectedUser.username
|
|
? selectedUser.displayName
|
|
: `${selectedUser.displayName} (${selectedUser.username})`
|
|
: ''
|
|
|
|
// 人员数量较多时，预先生成一次搜索索引，避免每次按键都重复计算全量拼音。
|
|
const indexedUsers = useMemo(() => users.map((user) => {
|
|
const fullPinyin = pinyin(user.displayName, { toneType: 'none', type: 'array' }).join('')
|
|
const firstLetters = pinyin(user.displayName, {
|
|
pattern: 'first',
|
|
toneType: 'none',
|
|
type: 'array',
|
|
}).join('')
|
|
|
|
return {
|
|
user,
|
|
searchText: [
|
|
user.displayName,
|
|
user.username,
|
|
fullPinyin,
|
|
firstLetters,
|
|
].join(' ').toLowerCase(),
|
|
}
|
|
}), [users])
|
|
|
|
const filteredUsers = useMemo(() => {
|
|
const keyword = searchTerm.trim().toLowerCase()
|
|
if (!keyword) return indexedUsers.map((item) => item.user)
|
|
return indexedUsers
|
|
.filter((item) => item.searchText.includes(keyword))
|
|
.map((item) => item.user)
|
|
}, [indexedUsers, searchTerm])
|
|
|
|
useEffect(() => {
|
|
setHighlightedIndex((current) => Math.min(current, Math.max(filteredUsers.length - 1, 0)))
|
|
}, [filteredUsers.length])
|
|
|
|
// 点击外部关闭下拉框
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
|
}, [])
|
|
|
|
// 键盘导航
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (isDisabled) {
|
|
return
|
|
}
|
|
|
|
if (!isOpen) {
|
|
if (e.key === 'Enter' || e.key === 'ArrowDown') {
|
|
e.preventDefault()
|
|
setIsOpen(true)
|
|
}
|
|
return
|
|
}
|
|
|
|
switch (e.key) {
|
|
case 'ArrowDown':
|
|
e.preventDefault()
|
|
setHighlightedIndex(prev =>
|
|
prev < filteredUsers.length - 1 ? prev + 1 : prev
|
|
)
|
|
break
|
|
case 'ArrowUp':
|
|
e.preventDefault()
|
|
setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0)
|
|
break
|
|
case 'Enter':
|
|
e.preventDefault()
|
|
if (filteredUsers[highlightedIndex]) {
|
|
handleSelect(filteredUsers[highlightedIndex])
|
|
}
|
|
break
|
|
case 'Escape':
|
|
e.preventDefault()
|
|
setIsOpen(false)
|
|
break
|
|
}
|
|
} // 选择用户
|
|
const handleSelect = (user: User) => {
|
|
onChange(user.id, user.displayName)
|
|
setSearchTerm('')
|
|
setIsOpen(false)
|
|
setHighlightedIndex(0)
|
|
}
|
|
|
|
// 打开下拉框
|
|
const handleFocus = () => {
|
|
if (isDisabled) {
|
|
return
|
|
}
|
|
|
|
setIsOpen(true)
|
|
setHighlightedIndex(0)
|
|
}
|
|
|
|
// 清空选择
|
|
const handleClear = (e: React.MouseEvent) => {
|
|
e.stopPropagation()
|
|
if (isDisabled || !clearable) {
|
|
return
|
|
}
|
|
|
|
onChange('', '')
|
|
setSearchTerm('')
|
|
setIsOpen(false)
|
|
inputRef.current?.focus()
|
|
}
|
|
|
|
return (
|
|
<div ref={containerRef} className={`relative ${className}`}>
|
|
<div className="relative">
|
|
<input
|
|
id={id}
|
|
ref={inputRef}
|
|
type="text"
|
|
value={isOpen ? searchTerm : displayValue}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
onFocus={handleFocus}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={loading ? '正在加载人员...' : placeholder}
|
|
required={required}
|
|
disabled={isDisabled}
|
|
className="input-apple pr-20 disabled:cursor-not-allowed disabled:opacity-60"
|
|
autoComplete="off"
|
|
role="combobox"
|
|
aria-autocomplete="list"
|
|
aria-expanded={isOpen && !isDisabled}
|
|
aria-controls={listboxId}
|
|
aria-activedescendant={
|
|
isOpen && filteredUsers[highlightedIndex]
|
|
? `${listboxId}-option-${filteredUsers[highlightedIndex].id}`
|
|
: undefined
|
|
}
|
|
aria-busy={loading}
|
|
/>
|
|
|
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
|
{value && clearable && !isDisabled && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClear}
|
|
className="flex h-9 w-9 items-center justify-center rounded transition-colors hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-gray-600"
|
|
title="清空"
|
|
aria-label="清空已选人员"
|
|
>
|
|
<svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (!isDisabled) {
|
|
setIsOpen(!isOpen)
|
|
}
|
|
}}
|
|
disabled={isDisabled}
|
|
className="flex h-9 w-9 items-center justify-center rounded transition-colors hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed dark:hover:bg-gray-600"
|
|
aria-label={isOpen ? '收起人员列表' : '展开人员列表'}
|
|
>
|
|
<svg
|
|
className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isOpen && !isDisabled && (
|
|
<div
|
|
id={listboxId}
|
|
role="listbox"
|
|
className="absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-300 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
|
|
>
|
|
{filteredUsers.length === 0 ? (
|
|
<div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
|
|
未找到匹配的用户
|
|
</div>
|
|
) : (
|
|
filteredUsers.map((user, index) => (
|
|
<button
|
|
key={user.id}
|
|
id={`${listboxId}-option-${user.id}`}
|
|
role="option"
|
|
aria-selected={user.id === value}
|
|
type="button"
|
|
onClick={() => handleSelect(user)}
|
|
className={`w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
|
|
index === highlightedIndex ? 'bg-gray-100 dark:bg-gray-700' : ''
|
|
} ${
|
|
user.id === value ? 'bg-blue-50 dark:bg-blue-900/20' : ''
|
|
}`}
|
|
onMouseEnter={() => setHighlightedIndex(index)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{user.displayName}
|
|
</div>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{user.username}
|
|
</div>
|
|
</div>
|
|
{user.id === value && (
|
|
<svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|