Stworzyć komponent React - Multiselect

Stworzyć responsywny komponent  React - Multiselect z wyszukiwarką z szczególnymi wymaganiami dotyczącymi responsywności

Dane źródłowe do wypełnienia listy komponentu:

Kraj (To grupa/rodzic)

let countryList = [

{id: 1, name: 'Egipt'}, 

{id: 2, name: 'Turcja'}

];

Kurorty (To element/dzieci zagnieżdżony w grupie)

let cityLists = [

{id: 4, name: 'Hurghada', country: 1}, 

{id: 5, name: 'Sharm El Sheikh', country: 1},

{id: 6, name: 'Alanya', country: 2}, 

{id: 7, name: 'Kemer', country: 2},

{id: 8, name: 'Marmaris', country: 2},

{id: 8, name: 'Dalaman', country: 2},

];

Zachowanie komponentu na szerokich ekranach

Komponent będzie wkomponowany w pewien formularz wyszukiwania przy użyciu React. Dlatego musi być całkowicie niezależny od otoczenia.

Tak będzie wyglądać formularz wyszukiwania na szerokich ekranach

Opis działania komponentu na szerokim ekranie

1. Startowy wygląd przy otwieraniu strony

Klikamy myszką w pole wyszukiwania i pod komponentem otwiera się formularz wyboru kraju lub kurortu

nazwijmy TEN FORMULARZ WRAPPER-DIV

Ten sam formularz otwiera się, jeśli klikniemy myszką na przycisk rozwijania listy

tzn.

Po lewej i prawej stronie paski przewijania, umożliwiające przewijanie zawartości

tzn. pod oknem wyszukiwania otwiera się pewien <div> składający się z dwóch innych wypełnionych listami

ul-->li, przy czym prawy zaopatrzony w checkboxy

Zachowanie rozwijającego się formularza na szerokim ekranie jest niezwykle proste

Kliknięcie na kraju w lewej połowie (na Kraju) - zmienia zawartość prawej strony (zawartość DIVA z kurortami)

Oto kilka przykładów wyświetlania zachowania tej "formy"

Każda "prawa" lista zaczyna się od checkboxa "Wszystkie kurorty", kliknięcie na który wybiera WSZYSTKIE w prawej liście lub odwrotnie,  usuwa zaznaczenie

Po naciśnięciu przycisku OK otrzymujemy obiekt z kodem kraju i listą wybranych kurortów

[

{"country": 1}

{"city": [4,5]}

]

"country": - liczba, kod kraju. Może być wybrany tylko jeden kraj!

"city" - tablica, oddzielona przecinkami. Może być wybranych kilka kurortów w obrębie wybranego kraju

Po zmianie kraju - lista kurortów automatycznie zastępuje listę kurortów tego kraju

Jeśli odznaczymy checkbox "Wszystkie kurorty" w prawej liście i naciśniemy OK, na wyjściu otrzymamy

[

{"country": 1}

{"city": [undefined]}

]

Przycisk otwierania listy wyszukiwania działa analogicznie do przycisku OK

To oznacza, że jeśli dokonaliśmy wyboru kurortów lub kraju, to aby zapamiętać wybór wystarczy, że naciśniemy OK lub po prostu zamkniemy listę, klikając w tym celu gdziekolwiek

1.1 Komponent pozwala na wyszukiwanie wewnątrz siebie. Wyszukiwanie odbywa się zarówno po kraju, jak i po kurorcie

Przy czym wyniki wyszukiwania wyglądają następująco

jeśli nie znaleziono kraju - to wyświetla się od razu lista znalezionych kurortów

Jeśli jednak znaleziono kraj, to wyświetla się on w liście jako pierwszy w grupie KRAJE.

A poniżej, w liście grupy KURORTY wyświetlają się podrzędne kurorty

Kliknięcie na znaleziony kraj otwiera już znany nam formularz, w którym możemy wybrać kurorty

Kliknięcie na kurort od razu formuje wynik i zamyka formularz wyboru

Wynik wyświetlania w oknie wyszukiwania po dokonanych manipulacjach jest następujący

Kraj, n kurort(ów)

Na przykład, jeśli wybrałem Hurghadę (To Egipt), to wygląda to tak

DLA URZĄDZEŃ MOBILNYCH

Startowy widok komponentu

po kliknięciu na komponent

otwiera się modalny WRAPER-DIV NA CAŁY EKRAN MOBILNEGO

KLIKNIĘCIE NA KRAJ I OTWIERA SIĘ div Z checkboxami kurortów

Na dole przycisk OK zamienia się w dwa

Pojawia się również na górze panel KĄD z przyciskiem - krzyżykiem

Przycisk krzyżyk, przycisk Anuluj i przycisk Zastosuj wykonują tę samą funkcję - zapamiętać to, co zostało wybrane i zamknąć okno modalne, nie zapominając przy tym o obliczeniu liczby wybranych kurortów

Wyszukiwanie działa w aplikacji mobilnej w ten sposób

Wprowadzam jakiś tekst i na przykład znaleziono kraj

Znalezione kraje znajdują się w grupie "KRAJE". Nie można kliknąć na grupę - jest nieaktywna. Można kliknąć tylko na nazwę kraju. Każdy kurort, oddzielony przecinkiem, ma nazwę swojego kraju

W takim przypadku otwiera się to okno

Kliknięcie na kurort i otrzymujemy wynik

Okna modalne zamykają się, a do zmiennej trafia wynik naszego wyboru

[

{"country": 1}

{"city": [4]}

]

Nie ma wymagań dotyczących CSS w kwestii czcionek itd.

Główne wymaganie to funkcjonalność komponentu.

WAŻNE przy tworzeniu nie nazywać komponentu App lub Root

Propsy

countryList i cityLists umieścić w plikach json

wynik komponentu przez default export