Skip to content

Commit 8372553

Browse files
grgiagrgia
authored
Merge pull request Expensify#81001 from software-mansion-labs/@zfurtak/migrate-SearchSingleSelectionPicker
Make `SearchSingleSelectionPicker` use new `SelectionListWithSections`
2 parents 256c031 + c0b479e commit 8372553

1 file changed

Lines changed: 77 additions & 83 deletions

File tree

‎src/components/Search/SearchSingleSelectionPicker.tsx‎

Lines changed: 77 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, {useCallback, useEffect, useMemo, useState} from 'react';
2-
// eslint-disable-next-line no-restricted-imports
3-
import SelectionList from '@components/SelectionListWithSections';
4-
import SingleSelectListItem from '@components/SelectionListWithSections/SingleSelectListItem';
1+
import React, {useEffect, useState} from 'react';
2+
import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
3+
import SelectionList from '@components/SelectionList/SelectionListWithSections';
54
import useDebouncedState from '@hooks/useDebouncedState';
65
import useLocalize from '@hooks/useLocalize';
76
import Navigation from '@libs/Navigation/Navigation';
@@ -44,98 +43,93 @@ function SearchSingleSelectionPicker({
4443
setSelectedItem(initiallySelectedItem);
4544
}, [initiallySelectedItem]);
4645

47-
const {sections, noResultsFound} = useMemo(() => {
48-
const initiallySelectedItemSection = initiallySelectedItem?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())
49-
? [
50-
{
51-
text: initiallySelectedItem.name,
52-
keyForList: initiallySelectedItem.value,
53-
isSelected: selectedItem?.value === initiallySelectedItem.value,
54-
value: initiallySelectedItem.value,
55-
},
56-
]
57-
: [];
58-
const remainingItemsSection = items
59-
.filter((item) => item?.value !== initiallySelectedItem?.value && item?.name?.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
60-
.sort((a, b) => sortOptionsWithEmptyValue(a.name.toString(), b.name.toString(), localeCompare))
61-
.map((item) => ({
62-
text: item.name,
63-
keyForList: item.value,
64-
isSelected: selectedItem?.value === item.value,
65-
value: item.value,
66-
}));
67-
const isEmpty = !initiallySelectedItemSection.length && !remainingItemsSection.length;
68-
return {
69-
sections: isEmpty
70-
? []
71-
: [
72-
{
73-
title: undefined,
74-
data: initiallySelectedItemSection,
75-
shouldShow: initiallySelectedItemSection.length > 0,
76-
indexOffset: 0,
77-
},
78-
{
79-
title: pickerTitle,
80-
data: remainingItemsSection,
81-
shouldShow: remainingItemsSection.length > 0,
82-
indexOffset: initiallySelectedItemSection.length,
83-
},
84-
],
85-
noResultsFound: isEmpty,
86-
};
87-
}, [initiallySelectedItem, selectedItem?.value, items, pickerTitle, debouncedSearchTerm, localeCompare]);
88-
89-
const onSelectItem = useCallback(
90-
(item: Partial<OptionData & SearchSingleSelectionPickerItem>) => {
91-
if (!item.text || !item.keyForList || !item.value) {
92-
return;
93-
}
94-
if (shouldAutoSave) {
95-
onSaveSelection(item.isSelected ? '' : item.value);
96-
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
97-
return;
98-
}
99-
if (!item.isSelected) {
100-
setSelectedItem({name: item.text, value: item.value});
101-
}
102-
},
103-
[shouldAutoSave, backToRoute, onSaveSelection],
104-
);
46+
const initiallySelectedItemSection = initiallySelectedItem?.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase())
47+
? [
48+
{
49+
text: initiallySelectedItem.name,
50+
keyForList: initiallySelectedItem.value,
51+
isSelected: selectedItem?.value === initiallySelectedItem.value,
52+
value: initiallySelectedItem.value,
53+
},
54+
]
55+
: [];
56+
57+
const remainingItemsSection = items
58+
.filter((item) => item.value !== initiallySelectedItem?.value && item.name.toLowerCase().includes(debouncedSearchTerm?.toLowerCase()))
59+
.sort((a, b) => sortOptionsWithEmptyValue(a.name.toString(), b.name.toString(), localeCompare))
60+
.map((item) => ({
61+
text: item.name,
62+
keyForList: item.value,
63+
isSelected: selectedItem?.value === item.value,
64+
value: item.value,
65+
}));
66+
67+
const noResultsFound = !initiallySelectedItemSection.length && !remainingItemsSection.length;
68+
69+
const sections = noResultsFound
70+
? []
71+
: [
72+
{
73+
title: undefined,
74+
data: initiallySelectedItemSection,
75+
sectionIndex: 0,
76+
},
77+
{
78+
title: pickerTitle,
79+
data: remainingItemsSection,
80+
sectionIndex: 1,
81+
},
82+
];
10583

106-
const resetChanges = useCallback(() => {
84+
const onSelectItem = (item: Partial<OptionData & SearchSingleSelectionPickerItem>) => {
85+
if (!item.text || !item.keyForList || !item.value) {
86+
return;
87+
}
88+
if (shouldAutoSave) {
89+
onSaveSelection(item.isSelected ? '' : item.value);
90+
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
91+
return;
92+
}
93+
if (!item.isSelected) {
94+
setSelectedItem({name: item.text, value: item.value});
95+
}
96+
};
97+
98+
const resetChanges = () => {
10799
setSelectedItem(undefined);
108-
}, []);
100+
};
109101

110-
const applyChanges = useCallback(() => {
102+
const applyChanges = () => {
111103
onSaveSelection(selectedItem?.value);
112104
Navigation.goBack(backToRoute ?? ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
113-
}, [onSaveSelection, selectedItem?.value, backToRoute]);
114-
115-
const footerContent = useMemo(
116-
() => (
117-
<SearchFilterPageFooterButtons
118-
applyChanges={applyChanges}
119-
resetChanges={resetChanges}
120-
/>
121-
),
122-
[resetChanges, applyChanges],
105+
};
106+
107+
const footerContent = (
108+
<SearchFilterPageFooterButtons
109+
applyChanges={applyChanges}
110+
resetChanges={resetChanges}
111+
/>
123112
);
113+
114+
const textInputOptions = {
115+
value: searchTerm,
116+
label: translate('common.search'),
117+
onChangeText: setSearchTerm,
118+
headerMessage: noResultsFound ? translate('common.noResultsFound') : undefined,
119+
};
120+
124121
return (
125122
<SelectionList
126123
sections={sections}
127-
initiallyFocusedOptionKey={initiallySelectedItem?.value}
128-
textInputValue={searchTerm}
129-
onChangeText={setSearchTerm}
130-
textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
131124
onSelectRow={onSelectItem}
132-
headerMessage={noResultsFound ? translate('common.noResultsFound') : undefined}
125+
ListItem={SingleSelectListItem}
126+
initiallyFocusedItemKey={initiallySelectedItem?.value}
127+
shouldShowTextInput={shouldShowTextInput}
128+
textInputOptions={textInputOptions}
133129
footerContent={shouldAutoSave ? undefined : footerContent}
134-
shouldStopPropagation
135130
showLoadingPlaceholder={!noResultsFound}
136-
shouldShowTooltips
137-
ListItem={SingleSelectListItem}
138131
shouldUpdateFocusedIndex
132+
shouldStopPropagation
139133
/>
140134
);
141135
}

0 commit comments

Comments
 (0)