Spaces:
Running
Running
File size: 2,217 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 | import { useState } from 'react';
import { useForm } from '../../context/FormContext';
import { Check, Plus } from 'lucide-react';
export default function CheckboxGroup({ field, sectionId }) {
const { formState, toggleCheckbox, addCustomCheckboxItem } = useForm();
const [customInput, setCustomInput] = useState('');
const fieldState = formState.sections[sectionId]?.[field.id] || { checked: [], customItems: [] };
const checked = fieldState.checked || [];
const allItems = [...(field.options || []), ...(fieldState.customItems || [])];
const handleAddCustom = () => {
if (customInput.trim()) {
addCustomCheckboxItem(sectionId, field.id, customInput.trim());
setCustomInput('');
}
};
return (
<div className="checkbox-group" id={`field-${field.id}`}>
<div className="checkbox-group__label">{field.label}</div>
{field.sentence && (
<div className="checkbox-group__sentence">{field.sentence}</div>
)}
<div className="checkbox-group__items">
{allItems.map(item => {
const isChecked = checked.includes(item);
return (
<div
key={item}
className={`checkbox-item ${isChecked ? 'checkbox-item--checked' : ''}`}
onClick={() => toggleCheckbox(sectionId, field.id, item)}
>
<div className="checkbox-item__box">
{isChecked && <Check size={12} strokeWidth={3} />}
</div>
<span className="checkbox-item__label">{item}</span>
</div>
);
})}
</div>
<div className="fill-blank__custom" style={{ marginTop: '0.5rem' }}>
<input
type="text"
className="fill-blank__custom-input"
placeholder="Add custom item..."
value={customInput}
onChange={e => setCustomInput(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleAddCustom()}
/>
<button
type="button"
className="fill-blank__custom-add"
onClick={handleAddCustom}
title="Add custom checkbox item"
>
<Plus size={14} />
</button>
</div>
</div>
);
}
|