forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Change business type selector from dropdown to list (Expensify#13)
* feat: Change business type selector from dropdown to list * fix: typos * fix: remove unnecessary draft * fix: cr fixes
- Loading branch information
Showing
5 changed files
with
185 additions
and
15 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
78 changes: 78 additions & 0 deletions
78
...count/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/BusinessTypeSelectorModal.tsx
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,78 @@ | ||
| 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 useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import CONST from '@src/CONST'; | ||
| import type {BusinessTypeItemType, IncorporationType} from './types'; | ||
|
|
||
| type BusinessTypeSelectorModalProps = { | ||
| /** Whether the modal is visible */ | ||
| isVisible: boolean; | ||
|
|
||
| /** Business type value selected */ | ||
| currentBusinessType: string; | ||
|
|
||
| /** Function to call when the user selects a business type */ | ||
| onBusinessTypeSelected: (value: BusinessTypeItemType) => void; | ||
|
|
||
| /** Function to call when the user closes the business type selector modal */ | ||
| onClose: () => void; | ||
|
|
||
| /** Label to display on field */ | ||
| label: string; | ||
| }; | ||
|
|
||
| function BusinessTypeSelectorModal({isVisible, currentBusinessType, onBusinessTypeSelected, onClose, label}: BusinessTypeSelectorModalProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const incorporationTypes = useMemo( | ||
| () => | ||
| Object.keys(CONST.INCORPORATION_TYPES).map((key) => ({ | ||
| value: key, | ||
| text: translate(`businessInfoStep.incorporationType.${key as IncorporationType}`), | ||
| keyForList: key, | ||
| isSelected: key === currentBusinessType, | ||
| })), | ||
| [currentBusinessType, translate], | ||
| ); | ||
|
|
||
| return ( | ||
| <Modal | ||
| type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} | ||
| isVisible={isVisible} | ||
| onClose={onClose} | ||
| onModalHide={onClose} | ||
| hideModalContentWhileAnimating | ||
| useNativeDriver | ||
| > | ||
| <ScreenWrapper | ||
| style={[styles.pb0]} | ||
| includePaddingTop={false} | ||
| includeSafeAreaPaddingBottom={false} | ||
| testID={BusinessTypeSelectorModal.displayName} | ||
| > | ||
| <HeaderWithBackButton | ||
| title={label} | ||
| shouldShowBackButton | ||
| onBackButtonPress={onClose} | ||
| /> | ||
| <SelectionList | ||
| headerMessage={translate('businessInfoStep.companyType')} | ||
| sections={[{data: incorporationTypes, indexOffset: 0}]} | ||
| initiallyFocusedOptionKey={currentBusinessType} | ||
| onSelectRow={onBusinessTypeSelected} | ||
| shouldStopPropagation | ||
| shouldUseDynamicMaxToRenderPerBatch | ||
| /> | ||
| </ScreenWrapper> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| BusinessTypeSelectorModal.displayName = 'BusinessTypeSelectorModal'; | ||
|
|
||
| export default BusinessTypeSelectorModal; |
86 changes: 86 additions & 0 deletions
86
...ages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/index.tsx
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,86 @@ | ||
| import React, {useState} from 'react'; | ||
| import type {StyleProp, ViewStyle} from 'react-native'; | ||
| import {View} from 'react-native'; | ||
| import FormHelpMessage from '@components/FormHelpMessage'; | ||
| import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import BusinessTypeSelectorModal from './BusinessTypeSelectorModal'; | ||
| import type {BusinessTypeItemType, IncorporationType} from './types'; | ||
|
|
||
| type BusinessTypePickerProps = { | ||
| /** Error text to display */ | ||
| errorText?: string; | ||
|
|
||
| /** Business type to display */ | ||
| value: string; | ||
|
|
||
| /** Callback to call when the input changes */ | ||
| onInputChange: (value: string) => void; | ||
|
|
||
| /** Label to display on field */ | ||
| label: string; | ||
|
|
||
| /** Any additional styles to apply */ | ||
| wrapperStyle: StyleProp<ViewStyle>; | ||
|
|
||
| /** Callback to call when the picker modal is dismissed */ | ||
| onBlur: () => void; | ||
| }; | ||
|
|
||
| function BusinessTypePicker({errorText = '', value, wrapperStyle, onInputChange, label, onBlur}: BusinessTypePickerProps) { | ||
| const styles = useThemeStyles(); | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const [isPickerVisible, setIsPickerVisible] = useState(false); | ||
|
|
||
| const showPickerModal = () => { | ||
| setIsPickerVisible(true); | ||
| }; | ||
|
|
||
| const hidePickerModal = (shouldBlur = true) => { | ||
| if (shouldBlur) { | ||
| onBlur(); | ||
| } | ||
| setIsPickerVisible(false); | ||
| }; | ||
|
|
||
| const updateBusinessTypeInput = (businessTypeItem: BusinessTypeItemType) => { | ||
| if (businessTypeItem.value !== value) { | ||
| onInputChange(businessTypeItem.value); | ||
| } | ||
| // If the user selects any business type, call the hidePickerModal function with shouldBlur = false | ||
| // to prevent the onBlur function from being called. | ||
| hidePickerModal(false); | ||
| }; | ||
|
|
||
| const title = value ? translate(`businessInfoStep.incorporationType.${value as IncorporationType}`) : ''; | ||
| const descStyle = title.length === 0 ? styles.textNormal : null; | ||
|
|
||
| return ( | ||
| <View> | ||
| <MenuItemWithTopDescription | ||
| shouldShowRightIcon | ||
| title={title} | ||
| description={label} | ||
| descriptionTextStyle={descStyle} | ||
| onPress={showPickerModal} | ||
| wrapperStyle={wrapperStyle} | ||
| /> | ||
| <View style={styles.ml5}> | ||
| <FormHelpMessage message={errorText} /> | ||
| </View> | ||
| <BusinessTypeSelectorModal | ||
| isVisible={isPickerVisible} | ||
| currentBusinessType={value} | ||
| onClose={hidePickerModal} | ||
| onBusinessTypeSelected={updateBusinessTypeInput} | ||
| label={label} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| BusinessTypePicker.displayName = 'BusinessTypePicker'; | ||
|
|
||
| export default BusinessTypePicker; |
12 changes: 12 additions & 0 deletions
12
...pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness/BusinessTypePicker/types.ts
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,12 @@ | ||
| import type CONST from '@src/CONST'; | ||
|
|
||
| type IncorporationType = keyof typeof CONST.INCORPORATION_TYPES; | ||
|
|
||
| type BusinessTypeItemType = { | ||
| value: string; | ||
| text: string; | ||
| keyForList: string; | ||
| isSelected: boolean; | ||
| }; | ||
|
|
||
| export type {IncorporationType, BusinessTypeItemType}; |
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