wwf
2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae
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
import cn from '@/utils/classnames'
import { useFieldContext } from '../..'
import PureSelect from '../../../select/pure'
import Label from '../label'
 
type SelectOption = {
  value: string
  label: string
}
 
type SelectFieldProps = {
  label: string
  options: SelectOption[]
  isRequired?: boolean
  showOptional?: boolean
  tooltip?: string
  className?: string
  labelClassName?: string
}
 
const SelectField = ({
  label,
  options,
  isRequired,
  showOptional,
  tooltip,
  className,
  labelClassName,
}: SelectFieldProps) => {
  const field = useFieldContext<string>()
 
  return (
    <div className={cn('flex flex-col gap-y-0.5', className)}>
      <Label
        htmlFor={field.name}
        label={label}
        isRequired={isRequired}
        showOptional={showOptional}
        tooltip={tooltip}
        className={labelClassName}
      />
      <PureSelect
        value={field.state.value}
        options={options}
        onChange={value => field.handleChange(value)}
      />
    </div>
  )
}
 
export default SelectField