Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated country and state searches to fix extra spaces + support searching with/without non alphabet chars in country name #24140

Merged
merged 10 commits into from
Aug 7, 2023
Merged

Updated country and state searches to fix extra spaces + support searching with/without non alphabet chars in country name #24140

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7260fa1
Update country search to work with leading/trailing spaces and non-al…
huzaifa-99 Aug 3, 2023
3d5d105
Allow countries to be searched by country code
huzaifa-99 Aug 3, 2023
75e5d78
Update state search to work with leading/trailing spaces
huzaifa-99 Aug 3, 2023
1a37a3e
Allow country states to be searched by state code
huzaifa-99 Aug 3, 2023
536048a
Update state+country search to prioritize state code
huzaifa-99 Aug 7, 2023
9013f9d
Updated variable name
huzaifa-99 Aug 7, 2023
c0d7504
Moved country/state search options to utils
huzaifa-99 Aug 7, 2023
3873f13
Fix lint
huzaifa-99 Aug 7, 2023
28e5f9c
Moved CountrySelectorUtils to searchCountryOptions
huzaifa-99 Aug 7, 2023
09f3579
Updated import name
huzaifa-99 Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/CONST.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1152,6 +1152,7 @@ const CONST = {
SPECIAL_CHARS_WITHOUT_NEWLINE: /((?!\n)[()-\s\t])/g,
DIGITS_AND_PLUS: /^\+?[0-9]*$/,
ALPHABETIC_AND_LATIN_CHARS: /^[a-zA-ZÀ-ÿ ]*$/,
NON_ALPHABETIC_AND_NON_LATIN_CHARS: /[^a-zA-ZÀ-ÿ]/g,
POSITIVE_INTEGER: /^\d+$/,
PO_BOX: /\b[P|p]?(OST|ost)?\.?\s*[O|o|0]?(ffice|FFICE)?\.?\s*[B|b][O|o|0]?[X|x]?\.?\s+[#]?(\d+)\b/,
ANY_VALUE: /^.+$/,
Expand Down
18 changes: 11 additions & 7 deletions src/components/CountryPicker/CountrySelectorModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,16 @@ const defaultProps = {
onCountrySelected: () => {},
};

function filterOptions(searchValue, data) {
const trimmedSearchValue = searchValue.trim();
if (trimmedSearchValue.length === 0) {
function searchOptions(searchValue, data) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are searchOptions identical for CountrySelectorModal and StateSelectorModal? If so, we could move this function to libs/CountrySelectorUtils

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, searchOptions logic is the same for both CountrySelectorModal and StateSelectorModal (other than some variable name and comments), I will move it to libs/CountrySelectorUtils

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved

const searchValueWithOnlyAlphabets = searchValue.toLowerCase().replaceAll(CONST.REGEX.NON_ALPHABETIC_AND_NON_LATIN_CHARS, '');
if (searchValueWithOnlyAlphabets.length === 0) {
return [];
}

return _.filter(data, (country) => country.text.toLowerCase().includes(searchValue.toLowerCase()));
const filteredData = _.filter(data, (country) => country.searchValue.includes(searchValueWithOnlyAlphabets));

// sort by country code
return _.sortBy(filteredData, (country) => (country.value.toLowerCase() === searchValueWithOnlyAlphabets ? -1 : 1));
}

function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySelected, setSearchValue, searchValue}) {
Expand All @@ -52,12 +55,13 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
keyForList: countryISO,
text: countryName,
isSelected: currentCountry === countryISO,
searchValue: `${countryISO}${countryName}`.toLowerCase().replaceAll(CONST.REGEX.NON_ALPHABETIC_AND_NON_LATIN_CHARS, ''),
})),
[translate, currentCountry],
);

const filteredData = filterOptions(searchValue, countries);
const headerMessage = searchValue.trim() && !filteredData.length ? translate('common.noResultsFound') : '';
const searchResults = searchOptions(searchValue, countries);
const headerMessage = searchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';

return (
<Modal
Expand All @@ -77,7 +81,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
textInputLabel={translate('common.country')}
textInputPlaceholder={translate('countrySelectorModal.placeholderText')}
textInputValue={searchValue}
sections={[{data: filteredData, indexOffset: 0}]}
sections={[{data: searchResults, indexOffset: 0}]}
onSelectRow={onCountrySelected}
onChangeText={setSearchValue}
shouldFocusOnSelectRow
Expand Down
18 changes: 11 additions & 7 deletions src/components/StatePicker/StateSelectorModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,16 @@ const defaultProps = {
label: undefined,
};

function filterOptions(searchValue, data) {
const trimmedSearchValue = searchValue.trim();
if (trimmedSearchValue.length === 0) {
function searchOptions(searchValue, data) {
const searchValueWithOnlyAlphabets = searchValue.toLowerCase().replaceAll(CONST.REGEX.NON_ALPHABETIC_AND_NON_LATIN_CHARS, '');
if (searchValueWithOnlyAlphabets.length === 0) {
return [];
}

return _.filter(data, (country) => country.text.toLowerCase().includes(searchValue.toLowerCase()));
const filteredData = _.filter(data, (countryState) => countryState.searchValue.includes(searchValueWithOnlyAlphabets));

// sort by state code
return _.sortBy(filteredData, (countryState) => (countryState.value.toLowerCase() === searchValueWithOnlyAlphabets ? -1 : 1));
}

function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) {
Expand All @@ -56,12 +59,13 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
keyForList: state.stateISO,
text: state.stateName,
isSelected: currentState === state.stateISO,
searchValue: `${state.stateISO}${state.stateName}`.toLowerCase().replaceAll(CONST.REGEX.NON_ALPHABETIC_AND_NON_LATIN_CHARS, ''),
})),
[translate, currentState],
);

const filteredData = filterOptions(searchValue, countryStates);
const headerMessage = searchValue.trim() && !filteredData.length ? translate('common.noResultsFound') : '';
const searchResults = searchOptions(searchValue, countryStates);
const headerMessage = searchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';

return (
<Modal
Expand All @@ -82,7 +86,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
textInputLabel={label || translate('common.state')}
textInputPlaceholder={translate('stateSelectorModal.placeholderText')}
textInputValue={searchValue}
sections={[{data: filteredData, indexOffset: 0}]}
sections={[{data: searchResults, indexOffset: 0}]}
onSelectRow={onStateSelected}
onChangeText={setSearchValue}
shouldFocusOnSelectRow
Expand Down