Створити компонент 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