export default function Dropdown()

in src/components/atoms/Dropdown/Dropdown.tsx [20:56]

31 lines of code
4 McCabe index (conditional complexity)


export default function Dropdown<Option extends IDropdownOption>({
  options,
  onChange,
  defaultOptionId,
}: Props<Option>) {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOptionId, setSelectedOptionId] = useState(defaultOptionId);
  const toggleContainer = useRef<HTMLDivElement>(null);
  const selectedOption = options.find((option) => option.id === selectedOptionId);

  const handleClickOutside = (event: Event) => {
    assertIsNode(event.target);

    if (toggleContainer.current && !toggleContainer.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

  const handleOptionClick = (option: Option) => {
    setSelectedOptionId(option.id);
    setIsOpen(false);
    if (onChange) {
      onChange(option);
    }
  };

  useEffect(() => {
    window.addEventListener('click', handleClickOutside, true);

    return () => {
      window.removeEventListener('click', handleClickOutside, true);
    };
  });

  return (
    <div ref={toggleContainer} className={styles.dropdown}>
      <button type="button" className={styles.button} onClick={() => setIsOpen(!isOpen)}>