src/components/SearchableSelect.tsx - master - neveisya/react-app

src/components/SearchableSelect.tsx
71 строка2 KB
sasha
222
25 авг 2024, 07:27
25 авг 2024, 07:2709ad92c
import { useEffect, useState } from 'react';
import { Combobox, InputBase, useCombobox } from '@mantine/core';
import Article from '@/common-interfaces/Article';

interface SearchableSelectProps {
  items: Article[];
  onSubmit: (item: Article | null) => void;
}
export function SearchableSelect({ items, onSubmit }: SearchableSelectProps) {
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
  });

  const [value, setValue] = useState<string | null>(null);
  const [search, setSearch] = useState('');
  useEffect(() => {
    if (search === '') onSubmit(null);
  }, [search]);

  const shouldFilterOptions = items.every((item) => item.title !== search);
  const filteredOptions = shouldFilterOptions
    ? items.filter((item) =>
        `${item.code} ${item.title}`.toLowerCase().includes(search.toLowerCase().trim())
      )
    : items;

  const options = filteredOptions.map((item) => (
    <Combobox.Option value={`${item.code} ${item.title}`} key={item.id}>
      {`${item.code} ${item.title}`}
    </Combobox.Option>
  ));

  return (
    <Combobox
      store={combobox}
      withinPortal={false}
      onOptionSubmit={(val) => {
        setValue(val);
        setSearch(val);
        combobox.closeDropdown();
        onSubmit(filteredOptions.find((item) => `${item.code} ${item.title}` === val) ?? items[0]);
      }}
    >
      <Combobox.Target>
        <InputBase
          rightSection={<Combobox.Chevron />}
          value={`${search}`}
          onChange={(event) => {
            combobox.openDropdown();
            combobox.updateSelectedOptionIndex();
            setSearch(event.currentTarget.value);
          }}
          onClick={() => combobox.openDropdown()}
          onFocus={() => combobox.openDropdown()}
          onBlur={() => {
            combobox.closeDropdown();
            setSearch(value || '');
          }}
          placeholder="Search value"
          rightSectionPointerEvents="none"
        />
      </Combobox.Target>

      <Combobox.Dropdown>
        <Combobox.Options>
          {options.length > 0 ? options : <Combobox.Empty>Nothing found</Combobox.Empty>}
        </Combobox.Options>
      </Combobox.Dropdown>
    </Combobox>
  );
}