Create a responsive component React - Multiselect with search with special requirements for responsiveness
Initial data for filling the component list:
Country (This is a group/parent)
let countryList = [
{id: 1, name: 'Egypt'},
{id: 2, name: 'Turkey'}
];
Resorts (This is a nested element/children within the group)
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},
];
Component behavior on wide screens
The component will be embedded in a search form using React. Therefore, it should be completely independent of the environment.
This is how the search form will look on wide screens
Description of the component's work on a wide screen
1. Initial appearance when the page is opened
Clicking the mouse in the search line opens a form for selecting a country or resort under the component
let's call THIS FORM WRAPPER-DIV
This same form opens if we click the mouse on the dropdown button
i.e.
There are scroll bars on the left and right, allowing scrolling of the content
i.e. under the search window opens some <div> consisting of two others filled with lists
ul-->li, with the right one equipped with checkboxes
The behavior of the dropdown form on a wide screen is extremely simple
Clicking on a country in the left half (on the Country) changes the content of the right side (the content of the DIV with resorts)
Here are a few examples of the behavior of this "form"
Each "right" list starts with the checkbox "All resorts", clicking on which selects ALL in the right list or vice versa, deselects
By pressing the OK button we get an object with the country code and a list of selected resorts
[
{"country": 1}
{"city": [4,5]}
]
"country": - number, country code. Only one country can be selected!
"city" - array, separated by commas. Several resorts can be selected within the chosen country
When changing the country - the list of resorts is automatically replaced with the list of resorts of that country
If the checkbox "All resorts" is unchecked in the right list and OK is pressed, the output will be
[
{"country": 1}
{"city": [undefined]}
]
The button to open the search list works similarly to the OK button
This means that if we have made a selection of resorts or a country, then to remember the selection we just need to either press OK or simply close the list by clicking anywhere
1.1 The component allows searching within itself. The search is performed immediately for both the country and the resort
The output of the search results looks as follows
if no country is found - then the list of found resorts is displayed immediately
If a country is found, it is displayed first in the COUNTRY group list.
And below, in the list of the RESORTS group, the subordinate resorts are displayed
Clicking on the found country opens the familiar form where we can select resorts
Clicking on a resort immediately forms the result and closes the selection form
The result displayed in the search window after the manipulations is as follows
Country, n resort(s)
For example, if I selected Hurghada (This is Egypt), it looks like this
FOR MOBILE
Initial view of the component
when clicking on the component
opens a modal WRAPPER-DIV FOR THE FULL SCREEN OF THE MOBILE
CLICK ON THE COUNTRY AND A div WITH resort checkboxes OPENS
At the bottom, the OK button turns into two
A panel appears at the top with a button - cross
The cross button, the Cancel button, and the Apply button perform the same function - remember what is selected and close the modal window, while also calculating the number of selected resorts
The search works in the mobile application as follows
I enter some text and, for example, a country is found
The found countries are in the "COUNTRIES" group. The group cannot be clicked - it is inactive. You can only click on the country name. Each resort, separated by commas, has the name of its country
In this case, this window opens
Clicking on a resort and we get the result
Modal windows close, and the result of our selection goes into a variable
[
{"country": 1}
{"city": [4]}
]
There are no requirements for CSS regarding fonts, etc.
The main requirement is the functionality of the component.
IMPORTANT when developing not to name the component App or Root
Props
countryList and cityLists should be placed in json files
output of the component through default export
