Создать компонент React - Multiselect

Создать адаптивный компонент  React - Multiselect с поиском с особыми требованиями к адаптивности

Исходные данные для наполнения списка компоненты:

Страна (Это группа/родитель)

let countryList = [

{id: 1, name: 'Єгипет'}, 

{id: 2, name: 'Туреччина'}

];

Курорты (Это вложенный в группу элемент/дети)

let cityLists = [

{id: 4, name: 'Хургада', country: 1}, 

{id: 5, name: 'Шарм-Єль-Шейх', country: 1},

{id: 6, name: 'Аланья', country: 2}, 

{id: 7, name: 'Кємєр', country: 2},

{id: 8, name: 'Мармаріс', country: 2},

{id: 8, name: 'Даламан', country: 2},

];

Поведение компоненты на широких экранах

Компонента будет вписана в некую форму поиска при помощи React. Поэтому должна быть полностью независимой от окружения.

Вот так будет выглядеть форма поиска на широких экранах

Описание работы компоненты на широком экране

1. Стартовый внешний вид при открытии страницы

Кликаем мышкой в строку поиска и под компонентой открывается форма выбора страны или курорта

назовем ЭТУ ФОРМУ WRAPPER-DIV

Эта же форма открывается, если мы кликаем мышью на кнопку раскрытия списка

т.е.

Слева и справа полосы прокрутки, позволяющие прокручивать содержимое

т.е. под окном поиска открывается некоторый <div> состоящий из двух других наполненных списками

ul-->li, причем правій снабжен checkbox-ами

Поведение віпадающей формі на широком єкране крайне простое

Клик на стране в левой половине (на Стране) - меняется содержимое правой стороны (содержимое ДИВа с курортами)

Вот несколько примеров отображения поведения этой "формы"

Каждый "правый" список начинается с чекбокса "Всі курорти", клик на который выбирает ВСЕ в правом списке либо наоборот,  снимает выделение

По нажатию на кнопку OK мы получаем обьект с кодом страны и списком выбранных курортов

[

{"country": 1}

{"city": [4,5]}

]

"country": - число, код страны. Может быть выбрана только одна страна!

"city" - массив, через запятую. Может біть выбрано несколько курортов в пределах выбранной страны

При смене страны - список курортов автоматически заменяется списком курортов этой страны

Если снять галочку "Всі курорти" в правом списке и нажать ОК на выходе получим

[

{"country": 1}

{"city": [undefined]}

]

Кнопка открытия списка поиска работает аналогично кнопке OK

Это значит, что если мы осуществили выбор курортов либо страны, то для запоминания выбора нам достаточно либо нажать ОК либо просто закрыть список, кликнув для этого где либо

1.1 Компонента позволяет осуществлять поиск внутри себя. Поиск осуществляется сразу как по стране, так и по курорту

При этом вывод результатов поиска выглядит следующим образом

если не найдена страна - то віводится сразу список найденніх курортов

Если же найдена страна, то она выводится в списке первой в группе КРАЇНИ.

А ніже, списком группы КУРОРТИ выводятся подчиненные курорты

Клик на найденную страну открывает уже знакомую нам форму в которой мы можем выбрать курорты

Клик на курорт сразу формирует результат и закрывает форму выбора

Результат отображения в окне поиска после произведенных манипуляций следующий

Страна, n курорт(ов)

Например, если я выбрал Хургаду (Это Египет), то выглядит это так

ДЛЯ МОБИЛЬНЫХ

Стартовый вид компоненты

при клике на компоненту

открывается модальный WRAPER-DIV НА ВЕСЬ ЭКРАН МОБИЛЬНОГО

КЛИК НА СТРАНУ И ОТКРЫВАЕТСЯ div С чекбоксами курортов

Внизу кнопка ОК превращается в две

Также появляется сверху панель КУДИ с кнопкой - крестиком

Кнопка крестик, кнопка Відміна и кнопка Застосувати віполняют одну и ту же функцию - запомнить то, что выбрано и закрыть модальное окно, не забыв при этом сделать рассчет количества выбранных курортов

Поиск работает в мобильном приложении так

Ввожу какой то текст и допустим найдена страна

Найденные страны находятся в группе "КРАЇНИ". Кликнуть на группу нельзя - она неактивна. Можно кликнуть только на название страны. Каждый курорт, через запятую имеет название своей страны

В этом случае открывается это окно

Клик на курорт и мы получаем результат

Модальные окна закрываются, а в переменную попадает результат нашего выбора

[

{"country": 1}

{"city": [4]}

]

Требований к CSS по поводу шрифтов и тд нету

Главное требование это функционал компоненты.

ВАЖНО при разработке не называть компоненту App или Root

Пропсы

countryList и cityLists разместить в файлах json

вівод компоненты через default export