front/src/components/AnswerSelect.jsx - main - TimurIsm/OpenEyes

front/src/components/AnswerSelect.jsx
56 строк2 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import Select from 'react-select';
import AlertMessage from '../components/AlertMessage';

const AnswerSelect = ({ value, onChange, alertMessage, options = [] }) => {
    const selectOptions = [
        { value: '', label: 'Выберите ответ', isDisabled: true },
        ...options.map(option => ({
            value: option,
            label: option
        }))
    ];

    return (
        <>
            <div className="max-w-full mx-auto w-full">
                <label className="block mb-2 text-sm font-medium text-gray-900">
                    Выберите вариант ответа
                </label>
                <Select
                    value={selectOptions.find(opt => opt.value === value) || selectOptions[0]}
                    onChange={(opt) => onChange({ target: { value: opt.value } })}
                    options={selectOptions}
                    className="react-select-container"
                    classNamePrefix="react-select"
                    placeholder=""
                    isSearchable={false}
                    isOptionDisabled={(option) => option.isDisabled}
                    styles={{
                        control: (base) => ({
                            ...base,
                            whiteSpace: 'normal',
                            wordBreak: 'break-word',
                        }),
                        option: (base) => ({
                            ...base,
                            whiteSpace: 'normal',
                            wordBreak: 'break-word',
                        }),
                        singleValue: (base) => ({
                            ...base,
                            whiteSpace: 'normal',
                            wordBreak: 'break-word',
                        }),
                    }}
                />
            </div>
            {alertMessage.message && (
                <div className="w-full">
                    <AlertMessage type={alertMessage.type} message={alertMessage.message} />
                </div>
            )}
        </>
    );
};

export default AnswerSelect;