97 lines
No EOL
3.1 KiB
TypeScript
97 lines
No EOL
3.1 KiB
TypeScript
import React, {useState, useRef, useEffect} from "react";
|
|
import styles from'./AnswerOption.module.css';
|
|
|
|
const single_selected_response = '../../../public/radio_button_checked.svg';
|
|
const multiple_selected_response = '../../../public/check_box.svg';
|
|
const single_response = '../../../public/radio_button_unchecked.svg';
|
|
const multiple_response ='../../../public/emptyCheckbox.svg';
|
|
|
|
interface AnswerOptionProps{
|
|
index: number;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onDelete:(index: number) => void;
|
|
selectedType: 'single' | 'multiply';
|
|
isSelected: boolean;
|
|
toggleSelect: () => void;
|
|
}
|
|
|
|
const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, isSelected, toggleSelect}) => {
|
|
const [currentValue, setCurrentValue] = useState(value);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
|
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
useEffect(() => {
|
|
setCurrentValue(value);
|
|
}, [value]);
|
|
|
|
const handleSpanClick = () => {
|
|
setIsEditing(true);
|
|
}
|
|
|
|
const handleTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setCurrentValue(event.target.value);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
setIsEditing(false);
|
|
onChange(currentValue);
|
|
};
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
handleSave();
|
|
}
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
handleSave();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isEditing && textAreaRef.current) {
|
|
textAreaRef.current.focus();
|
|
}
|
|
}, [isEditing]);
|
|
|
|
const getImage = () => {
|
|
if (selectedType === 'multiply') {
|
|
return isSelected ? multiple_selected_response : multiple_response;
|
|
} else {
|
|
return isSelected ? single_selected_response : single_response;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.answer}>
|
|
<button className={styles.buttonMarker} onClick={toggleSelect}>
|
|
<img
|
|
className={styles.answerIcon}
|
|
src={getImage()}
|
|
alt=""
|
|
/>
|
|
</button>
|
|
{isEditing ? (
|
|
<textarea className={styles.answerInput}
|
|
ref={textAreaRef}
|
|
value={currentValue}
|
|
onChange={handleTextareaChange}
|
|
onKeyDown={handleKeyDown}
|
|
onBlur={handleBlur}
|
|
placeholder={`Ответ ${index}`}
|
|
/>
|
|
) : (
|
|
<button className={styles.textAnswer} onClick={handleSpanClick}>
|
|
{currentValue || `Ответ ${index}`}
|
|
</button>
|
|
)}
|
|
<button className={styles.deleteButton} onClick={() => onDelete(index)}>
|
|
<img src='../../../public/delete.svg' alt="Удалить" />
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnswerOption; |