97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { SelectHTMLAttributes, forwardRef } from 'react';
|
|
import { getFormInputClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
|
|
|
|
interface SelectOption {
|
|
value: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
|
|
className?: string;
|
|
config?: Partial<LayoutConfig>;
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
fullWidth?: boolean;
|
|
options: SelectOption[];
|
|
placeholder?: string;
|
|
}
|
|
|
|
export const Select = forwardRef<HTMLSelectElement, SelectProps>(({
|
|
className = '',
|
|
config = {},
|
|
label,
|
|
error,
|
|
helperText,
|
|
fullWidth = true,
|
|
options,
|
|
placeholder,
|
|
id,
|
|
...props
|
|
}, ref) => {
|
|
const layoutConfig = { ...defaultLayoutConfig, ...config };
|
|
const inputClasses = getFormInputClasses(!!error);
|
|
|
|
const fullWidthClass = fullWidth ? 'w-full' : '';
|
|
const inputId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
return (
|
|
<div className={`${fullWidthClass} ${className}`} dir={layoutConfig.direction}>
|
|
{label && (
|
|
<label
|
|
htmlFor={inputId}
|
|
className={`block text-sm font-medium mb-2 ${error ? 'text-red-700' : 'text-gray-700'} ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
|
|
<div className="relative">
|
|
<select
|
|
ref={ref}
|
|
id={inputId}
|
|
className={`${inputClasses} appearance-none bg-white`}
|
|
dir={layoutConfig.direction}
|
|
{...props}
|
|
>
|
|
{placeholder && (
|
|
<option value="" disabled>
|
|
{placeholder}
|
|
</option>
|
|
)}
|
|
{options.map((option) => (
|
|
<option
|
|
key={option.value}
|
|
value={option.value}
|
|
disabled={option.disabled}
|
|
>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
{/* Custom dropdown arrow */}
|
|
<div className={`absolute inset-y-0 ${layoutConfig.direction === 'rtl' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center pointer-events-none`}>
|
|
<svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className={`mt-2 text-sm text-red-600 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
|
|
{helperText && !error && (
|
|
<p className={`mt-2 text-sm text-gray-500 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
|
|
{helperText}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Select.displayName = 'Select'; |