React Headlessui + Custom Radio выпадает с «выберите все» ⇐ CSS

[Anonymous]

Я строю компонент React, который имитирует пользовательский выпадающий список, используя Listbox UI без головы, с помощью радиопроизводительных кнопок внутри раскрывающегося списка.
он поддерживает опцию «Выбрать все», которая должна заполнить полезную нагрузку всеми вариантами. «Select All», который должен выбрать все параметры. < /p>
< /li>
[*] он используется для выбора стран, а затем также языков. 'React'; < /p>

Код: Выделить всё

  interface Option {
name: string;
code: string;
}

interface RadioSingleSelectProps {
options: Option[];
selectedCodes: string[];
onChange: (codes: string[]) => void;
placeholder?: string;
}

export default function RadioSingleSelect({
options,
selectedCodes,
onChange,
placeholder = 'Select an option',
}: RadioSingleSelectProps) {
const selectOptions: Option[] = [
{ name: 'Select All', code: '__ALL__' },
...options,
];

const allCodes = options.map((o) => o.code);
const isAllSelected = selectedCodes.length === allCodes.length;
const selectedCode = isAllSelected ? '__ALL__' : selectedCodes[0];

const selectedOption =
selectOptions.find((opt) => opt.code === selectedCode) ||
{ name: placeholder, code: '' };

const handleChange = (option: Option) => {
if (option.code === '__ALL__') {
onChange(allCodes);
} else {
onChange([option.code]);
}
};

return (





{selectedOption.code ? selectedOption.name : placeholder}







{selectOptions.map((option) => (

{({ selected, active }) => (


{option.name}

{selected && (



)}

)}

))}




);
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... select-all