import React, { useState } from "react"; // headless ui import { Listbox, Transition } from "@headlessui/react"; // icons import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid"; type TSelectOption = { id: string; label: string; value: any; children?: | (TSelectOption & { children?: null; })[] | null; }; type TMultipleSelectProps = { options: TSelectOption[]; selected: TSelectOption | null; setSelected: (value: any) => void; label: string; direction?: "left" | "right"; }; export const MultiLevelSelect: React.FC = ({ options, selected, setSelected, label, direction = "right", }) => { const [openChildFor, setOpenChildFor] = useState(null); return (
{ if (value?.children === null) { setSelected(value); setOpenChildFor(null); } else setOpenChildFor(value); }} > {({ open }) => (
setOpenChildFor(null)} className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md sm:text-sm" > {selected?.label ?? label} {options.map((option) => ( { if (option.children !== null) { e.preventDefault(); setOpenChildFor(option); } if (option.id === openChildFor?.id) { e.preventDefault(); setOpenChildFor(null); } }} value={option} > {({ selected }) => ( <> {openChildFor?.id === option.id && (
{option.children?.map((child) => ( {({ selected }) => ( <> {child.label} {selected ? ( ) : null} )} ))}
)} {option.label} {selected ? ( ) : null} )} ))}
)}
); };