-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #48775 from shubham1206agra/missing-personal-details
- Loading branch information
Showing
30 changed files
with
1,044 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React, {useMemo} from 'react'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import Modal from '@components/Modal'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import SelectionList from '@components/SelectionList'; | ||
| import RadioListItem from '@components/SelectionList/RadioListItem'; | ||
| import useDebouncedState from '@hooks/useDebouncedState'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import searchCountryOptions from '@libs/searchCountryOptions'; | ||
| import type {CountryData} from '@libs/searchCountryOptions'; | ||
| import StringUtils from '@libs/StringUtils'; | ||
| import CONST from '@src/CONST'; | ||
| import type {TranslationPaths} from '@src/languages/types'; | ||
|
|
||
| type CountrySelectorModalProps = { | ||
| /** Whether the modal is visible */ | ||
| isVisible: boolean; | ||
|
|
||
| /** Function to call when the user closes the business type selector modal */ | ||
| onClose: () => void; | ||
|
|
||
| /** Label to display on field */ | ||
| label: string; | ||
|
|
||
| /** Country selected */ | ||
| currentCountry: string; | ||
|
|
||
| /** Function to call when the user selects a country */ | ||
| onCountrySelected: (value: CountryData) => void; | ||
|
|
||
| /** Function to call when the user presses on the modal backdrop */ | ||
| onBackdropPress?: () => void; | ||
| }; | ||
|
|
||
| function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onClose, label, onBackdropPress}: CountrySelectorModalProps) { | ||
| const {translate} = useLocalize(); | ||
| const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); | ||
|
|
||
| const countries = useMemo( | ||
| () => | ||
| Object.keys(CONST.ALL_COUNTRIES).map((countryISO) => { | ||
| const countryName = translate(`allCountries.${countryISO}` as TranslationPaths); | ||
| return { | ||
| value: countryISO, | ||
| keyForList: countryISO, | ||
| text: countryName, | ||
| isSelected: currentCountry === countryISO, | ||
| searchValue: StringUtils.sanitizeString(`${countryISO}${countryName}`), | ||
| }; | ||
| }), | ||
| [translate, currentCountry], | ||
| ); | ||
|
|
||
| const searchResults = searchCountryOptions(debouncedSearchValue, countries); | ||
| const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : ''; | ||
|
|
||
| const styles = useThemeStyles(); | ||
|
|
||
| return ( | ||
| <Modal | ||
| type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} | ||
| isVisible={isVisible} | ||
| onClose={onClose} | ||
| onModalHide={onClose} | ||
| hideModalContentWhileAnimating | ||
| useNativeDriver | ||
| onBackdropPress={onBackdropPress} | ||
| > | ||
| <ScreenWrapper | ||
| style={[styles.pb0]} | ||
| includePaddingTop={false} | ||
| includeSafeAreaPaddingBottom={false} | ||
| testID={CountrySelectorModal.displayName} | ||
| > | ||
| <HeaderWithBackButton | ||
| title={label} | ||
| shouldShowBackButton | ||
| onBackButtonPress={onClose} | ||
| /> | ||
| <SelectionList | ||
| headerMessage={headerMessage} | ||
| sections={[{data: searchResults}]} | ||
| textInputValue={searchValue} | ||
| textInputLabel={translate('common.search')} | ||
| onChangeText={setSearchValue} | ||
| onSelectRow={onCountrySelected} | ||
| ListItem={RadioListItem} | ||
| initiallyFocusedOptionKey={currentCountry} | ||
| shouldSingleExecuteRowSelect | ||
| shouldStopPropagation | ||
| shouldUseDynamicMaxToRenderPerBatch | ||
| /> | ||
| </ScreenWrapper> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| CountrySelectorModal.displayName = 'CountrySelectorModal'; | ||
|
|
||
| export default CountrySelectorModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, {useState} from 'react'; | ||
| import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import Navigation from '@libs/Navigation/Navigation'; | ||
| import type {CountryData} from '@libs/searchCountryOptions'; | ||
| import CONST from '@src/CONST'; | ||
| import type {TranslationPaths} from '@src/languages/types'; | ||
| import CountrySelectorModal from './CountrySelectorModal'; | ||
|
|
||
| type CountryPickerProps = { | ||
| /** Current value of the selected item */ | ||
| value?: string; | ||
|
|
||
| /** Callback when the list item is selected */ | ||
| onInputChange?: (value: string, key?: string) => void; | ||
|
|
||
| /** Form Error description */ | ||
| errorText?: string; | ||
| }; | ||
|
|
||
| function CountryPicker({value, errorText, onInputChange = () => {}}: CountryPickerProps) { | ||
| const {translate} = useLocalize(); | ||
| const [isPickerVisible, setIsPickerVisible] = useState(false); | ||
|
|
||
| const hidePickerModal = () => { | ||
| setIsPickerVisible(false); | ||
| }; | ||
|
|
||
| const updateInput = (item: CountryData) => { | ||
| onInputChange?.(item.value); | ||
| hidePickerModal(); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <MenuItemWithTopDescription | ||
| shouldShowRightIcon | ||
| title={value ? translate(`allCountries.${value}` as TranslationPaths) : undefined} | ||
| description={translate('common.country')} | ||
| onPress={() => setIsPickerVisible(true)} | ||
| brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} | ||
| errorText={errorText} | ||
| /> | ||
| <CountrySelectorModal | ||
| isVisible={isPickerVisible} | ||
| currentCountry={value ?? ''} | ||
| onCountrySelected={updateInput} | ||
| onClose={hidePickerModal} | ||
| label={translate('common.country')} | ||
| onBackdropPress={Navigation.dismissModal} | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| CountryPicker.displayName = 'CountryPicker'; | ||
| export default CountryPicker; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.