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
