Как сделать такое выпадающее меню на React?

Question

[QnaTwitt]

Подскажите как сделать такое выпадающее меню, с вложенным уровнем на React.
Что-то нечего не могу найти в интернете похожего...
Как сделать простой select с одним уровнем понятно.
А здесь нужно select который состоит из многих "аккордеонов", не пойму как такое сделать, в интернете нечего не нашёл похожего, подскажите пожалуйста как сделать или в какую сторону "копать"

Comments

[Вадим]

А здесь нужно select который состоит из многих "аккордеонов"

А где тут селект?
Судя по скринам тут текстовое поле поиска, а под ним аккордионы, внутри которых толи ссылки, толи меню

[QnaTwitt]

Вадим,
Я вот что-то такое написал, но не поучается сделать поиск по вложенным элементам, поиск сейчас работает только по заголовкам, нужно как-то по всему тексту делать поиск

Сейчас у меня работает поиск по заголовкам

import React, { FC, useEffect, useState } from 'react';
import Style from './Select.module.scss';

interface ISelectItem {
  name: string;
  categories: [];
}

interface ISelect {
  placeholder?: string;
  lists: any;
}

const SelectItem: FC<ISelectItem> = ({ name, categories }) => {
  return (
    <li className={Style.Item}>
      <p className={Style.ItemName}>{name}</p>
      <ul>
        {categories.map((category: any) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </li>
  );
};

const filterList = (searchText: string, list: any[]) => {
  if (!searchText) return list;
  return list.filter(({ name }) =>
    name.toLowerCase().includes(searchText.toLowerCase())
  );
};

const Select: FC<ISelect> = ({ placeholder, lists }) => {
  const [searchInput, setSearchInput] = useState('');
  const [filteredList, setFilteredList] = useState<any>();

  useEffect(() => {
    const Debounce = setTimeout(() => {
      const sortedList = filterList(searchInput, lists);
      setFilteredList(sortedList);
    }, 300);
    return () => clearTimeout(Debounce);
  }, [searchInput]);

  console.log(lists.map((list: any) => list.categories));
  return (
    <div className={Style.wrapper}>
      <input
        type="text"
        placeholder={placeholder}
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredList &&
          filteredList.map((item: any) => (
            <SelectItem
              key={item.id}
              name={item.name}
              categories={item.categories}
            />
          ))}
      </ul>
    </div>
  );
};

export default Select;

[QnaTwitt]

Вадим, Потом на каждый элемент где есть вложенные элементы сделаю наверное "аккордеон" и должно наверное получится то что нужно)

[QnaTwitt]

Вадим,

Answer 1

[Natebash]

https://www.npmjs.com/package/react-dropdown
https://habr.com/ru/post/594303/

Answer 2

[MrYogurt]

Мне как раз недавно пришлось сделать нечто похожее, если надо с нуля, то примерную идею накидал на классовом компоненте, адаптировать в функциональный можно без проблем:

class DropdownExample extends PureComponent {
    constructor (props) {
        super(props)
        this.state = {
            visible: false
        }
        this.textInput = React.createRef()
    }

    componentDidMount () {
        document.addEventListener('click', this.toggleAuthorsContainerVisibility)
    }

    componentWillUnmount () {
        document.removeEventListener('click', this.toggleAuthorsContainerVisibility)
    }

    render () {
        return (
            <>
                <input
                    ref={this.textInput}
                    placeholder={placeholder}
                    type="text"
                    maxLength="256"
                    value={inputData}
                    onChange={this.someHandler}
                />
                {this.state.visible && inputData && (
                    <div>
                        {someArray.map(item =>
                            <Accordeon key={item.value}>
                                {item.label}
                            </Accordeon>)}
                    </div>
                )}
            </>
        )
    }
}

Comments

[QnaTwitt]

Я вот что-то такое написал, но не поучается сделать поиск по вложенным элементам, поиск сейчас работает только по заголовкам, нужно как-то по всему тексту делать поиск

Потом думаю просто из SelectItem сделать аккордеон и должно быть норм)

import React, { FC, useEffect, useState } from 'react';
import Style from './Select.module.scss';

interface ISelectItem {
  name: string;
  categories: [];
}

interface ISelect {
  placeholder?: string;
  lists: any;
}

const SelectItem: FC<ISelectItem> = ({ name, categories }) => {
  return (
    <li className={Style.Item}>
      <p className={Style.ItemName}>{name}</p>
      <ul>
        {categories.map((category: any) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </li>
  );
};

const filterList = (searchText: string, list: any[]) => {
  if (!searchText) return list;
  return list.filter(({ name }) =>
    name.toLowerCase().includes(searchText.toLowerCase())
  );
};

const Select: FC<ISelect> = ({ placeholder, lists }) => {
  const [searchInput, setSearchInput] = useState('');
  const [filteredList, setFilteredList] = useState<any>();

  useEffect(() => {
    const Debounce = setTimeout(() => {
      const sortedList = filterList(searchInput, lists);
      setFilteredList(sortedList);
    }, 300);
    return () => clearTimeout(Debounce);
  }, [searchInput]);

  console.log(lists.map((list: any) => list.categories));
  return (
    <div className={Style.wrapper}>
      <input
        type="text"
        placeholder={placeholder}
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredList &&
          filteredList.map((item: any) => (
            <SelectItem
              key={item.id}
              name={item.name}
              categories={item.categories}
            />
          ))}
      </ul>
    </div>
  );
};

export default Select;

[QnaTwitt]

[MrYogurt]

QnaTwitt, если вам нужен именно поиск по вложенным элементам массивов, то это уже совсем другая задача, тут просто нужно написать этот алгоритм, что как бы не особо имеет отношения к изначальному вопросу. Можно использовать например flat() и после того, как вложенные элементы выйдут на нулевой уровень, начинать поиск, либо сделать чуть посложнее и объединить поиск вместе с прохождением вложенных массивов, тут уже зависит от задачи.

[QnaTwitt]

MrYogurt, Тут задача в основном состоит что бы в поиске были и заголовки и вложенные элементы

[MrYogurt]

QnaTwitt, Задача у вас очень размыта, вы не сформулировали внятное тз и структуру данных. Вот написал для примера, как это происходит.

const categoriesList = {
    Business: [
        {id: 'accounting', title: 'Accounting'},
        {id: 'financial', title: 'Financial'}
    ],
    Cloth: [
        {id: 'boutique', title: 'Boutique'},
        {id: 'privateSale', title: 'Private sale'},
        {id: 'financial', title: 'Financial'}
    ]
}

const searchInList = (categories, searchString) => {
    const result = {}

    Object.entries(categories).forEach((category) => {
        const categoryName = category[0]
        const subCategories = category[1]

        subCategories.forEach(subCategory => {
            if (subCategory.title.toLowerCase().startsWith(searchString.toLowerCase())) {
                if (result[categoryName]) {
                    return result[categoryName].push(subCategory)
                }

                result[categoryName] = [subCategory]
            }
        })
    })

    return result
}

console.log('check:', searchInList(categoriesList, 'financial'))

[QnaTwitt]

MrYogurt, Кстати забыл показать в каком видео данные приходят в мой (select\dropdown)

Вот такой объект, где сначала общее имя списка, а потом массив объектов где по одной категории, то есть в поиск должны включатся и общее название и название каждой категории....

[MrYogurt]

QnaTwitt, Я вам вполне понятный пример предоставил, по аналогии, пройдитесь по массивам, как вам надо и соберите то, что надо. Метод поиска я тоже добавил только как образец, если нужен поиск подстроки, то можно загуглить, написан миллиард раз на любом языке.