Spaces:
Running
Running
File size: 2,634 Bytes
ba95018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import { useState } from 'react';
import { useForm } from '../../context/FormContext';
import { Plus } from 'lucide-react';
export default function FillBlank({ field, sectionId }) {
const { formState, toggleOption, addCustomOption } = useForm();
const [customInput, setCustomInput] = useState('');
const fieldState = formState.sections[sectionId]?.[field.id] || { selected: [], customOptions: [] };
const allOptions = [...(field.options || []), ...(fieldState.customOptions || [])];
const selected = fieldState.selected || [];
const filledSentence = field.sentence?.replace(
/____________/g,
selected.length > 0
? selected.join(' / ')
: '____________'
);
const handleAddCustom = () => {
if (customInput.trim()) {
addCustomOption(sectionId, field.id, customInput.trim());
setCustomInput('');
}
};
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleAddCustom();
}
};
return (
<div className="fill-blank" id={`field-${field.id}`}>
<div className="fill-blank__label">{field.label}</div>
{field.sentence && (
<div className="fill-blank__sentence">
{filledSentence.split('____________').map((part, i, arr) => (
<span key={i}>
{part}
{i < arr.length - 1 && (
<span className={`fill-blank__blank ${selected.length > 0 ? 'fill-blank__blank--filled' : ''}`}>
{selected.length > 0 ? selected.join(' / ') : '____________'}
</span>
)}
</span>
))}
</div>
)}
<div className="fill-blank__options">
{allOptions.map(option => (
<button
key={option}
type="button"
className={`option-btn ${selected.includes(option) ? 'option-btn--selected' : ''}`}
onClick={() => toggleOption(sectionId, field.id, option, field.multiSelect)}
title={option}
>
{option}
</button>
))}
</div>
<div className="fill-blank__custom">
<input
type="text"
className="fill-blank__custom-input"
placeholder="Add your own option..."
value={customInput}
onChange={e => setCustomInput(e.target.value)}
onKeyDown={handleKeyDown}
/>
<button
type="button"
className="fill-blank__custom-add"
onClick={handleAddCustom}
title="Add custom option"
>
<Plus size={14} />
</button>
</div>
</div>
);
}
|