28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
import Select from '@/components/ui/Select'
|
|
|
|
interface MaterialTypeSelectProps {
|
|
id: string
|
|
value: string
|
|
options: string[]
|
|
counts: Record<string, number>
|
|
onChange: (value: string) => void
|
|
disabled?: boolean
|
|
}
|
|
|
|
export default function MaterialTypeSelect({ id, value, options, counts, onChange, disabled = false }: MaterialTypeSelectProps) {
|
|
const rankedOptions = useMemo(() => options.some((option) => (counts[option] || 0) > 0)
|
|
? [...options].sort((left, right) => (counts[right] || 0) - (counts[left] || 0))
|
|
: options, [options, counts])
|
|
const hasCounts = rankedOptions.some((option) => (counts[option] || 0) > 0)
|
|
return (
|
|
<Select id={id} value={value} aria-labelledby={id + '-label'} disabled={disabled}
|
|
optionCounts={hasCounts ? counts : undefined} menuHint={hasCounts ? '按素材数量排序' : undefined}
|
|
onChange={(event) => onChange(event.target.value)}>
|
|
{rankedOptions.map((option) => <option key={option} value={option}>{option}</option>)}
|
|
</Select>
|
|
)
|
|
}
|