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
Opinia zleceniodawcy o współpracy z Inna Timoshenko
Stworzyć komponent React - MultiselectWspaniały wykonawca! Polecam!
Odpowiedzialna, spokojna, doskonale rozumie, co jest potrzebne zleceniodawcy! Zlecenie rozumie z półobrotu!
Bardzo grzeczna i odpowiedzialna! Po raz pierwszy spotykam takiego freelancera z takim poziomem wiedzy i szybkością pracy!
Opinia freelancera o współpracy z Dmitry Turkin
Stworzyć komponent React - MultiselectWspółpraca z Dmytrem jest komfortowa. Jasny i szczegółowy opis zadania, szybko reaguje na wszelkie pytania, miły w komunikacji. Polecam!
-
310 Jakościowo zrealizuję implementację wyszukiwania. Robiłam wyszukiwanie na React, załączam poniżej.
https://freelancehunt.com/showcase/work/sayt-full-stack-reactjs-node-mongodb-express/1889361.html
-
7134 13 0 Zrobię bez problemu w najlepszym wydaniu w ciągu kilku godzin, będę wdzięczny za odpowiedź
-
610 9 0 Mogę zintegrować https://ant.design/components/cascader#cascader-demo-multiple
lub https://cascader-react-component.vercel.app/demo/multiple
Wygląda na to, że to, czego potrzebujesz.
Napisz na priv
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Szukam doświadczonego programisty Full Stack do stworzenia usługi SaaS dla sklepów internetowych.Pomysł usługi: Klient przesyła link do swojego pliku produktowego (XML lub CSV). Usługa automatycznie pobiera produkty, pobiera ich zdjęcia i tworzy nowe reklamy na podstawie gotowych szablonów: cena, zniżka, logo, banery promocyjne itp. Usługa powinna również zawierać prosty… Javascript & Typescript, Programowanie stron internetowych ∙ 2 dni 1 godzina temu ∙ 82 oferty |
Rozwój sceny WebGL/Three.js z generowaniem i eksportem 3D (snapshot) z animowanego shaderaOpis obiektu: Projekt przedstawia designerski stół, wykonany w formie realistycznego, głębokiego wiru (centralna wirówka, która płynnie przechodzi z szerokiego poziomego blatu w cienką, elegancką nogę). Istota zadania: Wymagany jest programista WebGL / Creative Coding do… Javascript & Typescript, Programowanie stron internetowych ∙ 2 dni 22 godziny temu ∙ 30 ofert |
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 5 dni temu ∙ 64 oferty |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 6 dni 1 godzina temu ∙ 29 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 7 dni 16 godzin temu ∙ 36 ofert |