98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Select from 'react-select'
|
|
import { SelectOption } from '@/app/types'
|
|
|
|
interface SingleSelectProps {
|
|
name: string
|
|
value: string
|
|
handleChange: (e: { target: { id: string; value: string } }) => void
|
|
label: string
|
|
placeholder: string
|
|
options: SelectOption[]
|
|
className?: string
|
|
noOptionsMessage?: string
|
|
}
|
|
|
|
const SingleSelect: React.FC<SingleSelectProps> = ({
|
|
name,
|
|
value,
|
|
handleChange,
|
|
label,
|
|
placeholder,
|
|
options,
|
|
className = '',
|
|
noOptionsMessage = 'Нет доступных вариантов',
|
|
}) => {
|
|
return (
|
|
<div className={className}>
|
|
<label htmlFor={name} className="mb-1 block text-sm font-medium text-gray-700">
|
|
{label}
|
|
</label>
|
|
<Select<SelectOption>
|
|
inputId={name}
|
|
name={name}
|
|
options={options}
|
|
value={options.find(opt => opt.id.toString() === value)}
|
|
onChange={selectedOption => {
|
|
handleChange({
|
|
target: {
|
|
id: name,
|
|
value: selectedOption?.id.toString() || '',
|
|
},
|
|
})
|
|
}}
|
|
isSearchable
|
|
isClearable
|
|
placeholder={placeholder}
|
|
noOptionsMessage={() => noOptionsMessage}
|
|
classNamePrefix="select"
|
|
className="rounded-lg"
|
|
styles={{
|
|
control: base => ({
|
|
...base,
|
|
borderRadius: '0.75rem',
|
|
backgroundColor: '#F3F4F6',
|
|
border: '1px solid #E5E7EB',
|
|
padding: '2px',
|
|
'&:hover': {
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
'&:focus-within': {
|
|
backgroundColor: '#FFFFFF',
|
|
borderColor: '#E5E7EB',
|
|
boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.5)',
|
|
},
|
|
}),
|
|
menu: base => ({
|
|
...base,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
zIndex: 9999,
|
|
marginTop: '4px',
|
|
borderRadius: '0.75rem',
|
|
overflow: 'hidden',
|
|
}),
|
|
option: (base, state) => ({
|
|
...base,
|
|
fontSize: '0.875rem',
|
|
padding: '8px 12px',
|
|
backgroundColor: state.isSelected ? '#EFF6FF' : state.isFocused ? '#F3F4F6' : 'white',
|
|
color: state.isSelected ? '#2563EB' : '#1F2937',
|
|
cursor: 'pointer',
|
|
'&:active': {
|
|
backgroundColor: '#DBEAFE',
|
|
},
|
|
'&:hover': {
|
|
backgroundColor: state.isSelected ? '#EFF6FF' : '#F3F4F6',
|
|
},
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SingleSelect
|