95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { DropdownSelect, DropdownSelectItem } from '../../DropdownSelect';
|
|
import { ButtonSize } from '../../Button/ButtonTypes';
|
|
|
|
export interface SelectFieldOption {
|
|
id: string | number;
|
|
label: string;
|
|
value: any;
|
|
}
|
|
|
|
export interface SelectFieldProps {
|
|
value?: string | number | null;
|
|
onChange?: (value: any) => void;
|
|
label?: string;
|
|
options: SelectFieldOption[];
|
|
placeholder?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
description?: string;
|
|
className?: string;
|
|
size?: ButtonSize;
|
|
}
|
|
|
|
const SelectField: React.FC<SelectFieldProps> = ({
|
|
value,
|
|
onChange,
|
|
label,
|
|
options,
|
|
placeholder = 'Select an option',
|
|
required = false,
|
|
disabled = false,
|
|
description,
|
|
className = '',
|
|
size = 'md'
|
|
}) => {
|
|
// Convert options to DropdownSelectItem format
|
|
const items: DropdownSelectItem[] = options.map(opt => ({
|
|
id: opt.id,
|
|
label: opt.label,
|
|
value: opt.value
|
|
}));
|
|
|
|
// Find selected item ID from value
|
|
const selectedItemId = value !== null && value !== undefined
|
|
? options.find(opt => opt.value === value || opt.id === value)?.id ?? null
|
|
: null;
|
|
|
|
const handleSelect = (item: DropdownSelectItem | null) => {
|
|
if (onChange) {
|
|
onChange(item ? item.value : null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
{label && (
|
|
<div style={{ marginBottom: '8px' }}>
|
|
<label style={{
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'var(--color-text)',
|
|
fontFamily: 'var(--font-family)'
|
|
}}>
|
|
{label}
|
|
{required && <span style={{ color: 'var(--color-error)', marginLeft: '4px' }}>*</span>}
|
|
</label>
|
|
{description && (
|
|
<div style={{
|
|
fontSize: '0.75rem',
|
|
color: 'var(--color-primary)',
|
|
marginTop: '4px',
|
|
fontStyle: 'italic'
|
|
}}>
|
|
{description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<DropdownSelect
|
|
items={items}
|
|
selectedItemId={selectedItemId}
|
|
onSelect={handleSelect}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
size={size}
|
|
variant="primary"
|
|
showClearButton={false}
|
|
minWidth="100%"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SelectField;
|
|
|